/* Silver Lake Financial Group — shared site layer for inner pages.
   Remaps the original dark tokens to the light institutional palette and
   supplies the site-wide header, footer, notice and photo styles. */

:root {
  /* new palette */
  --ink: #0f2337; --ink-2: #16314d; --lake: #1d5c7a; --lake-hi: #174b64; --brass: #b8893f;
  --paper: #ffffff; --mist: #f1f5f8; --line: #d8e1e8; --muted: #566878;
  --on-ink: #e9eff4; --on-ink-muted: #9fb2c3;
  --ok: #1f7a4d; --ok-bg: #e4f3ea; --no: #b23b3b; --no-bg: #f8e6e6; --hold: #9a6a12; --hold-bg: #fbf0d9;
  --f-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-body: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* original token names, remapped */
  --bg: #ffffff; --bg-surface: #f1f5f8; --bg-elevated: #e6eef3;
  --gold: #1d5c7a; --gold-light: #1d5c7a; --gold-muted: rgba(29,92,122,0.10);
  --text: #1f2d3a; --text-secondary: #566878; --text-muted: #6b7c8b;
  --border: #d8e1e8; --border-subtle: #e3eaef;
  --green: #1f7a4d; --red: #b23b3b; --amber: #9a6a12; --teal: #1d5c7a;
  --teal-soft: rgba(29,92,122,0.10); --amber-soft: rgba(154,106,18,0.12); --slate-soft: rgba(86,104,120,0.08);
  color-scheme: light;
}

body { background: var(--paper); color: var(--text); font-family: var(--f-body); font-weight: 400; padding-bottom: 0 !important; -webkit-font-smoothing: antialiased; }
body::before { display: none !important; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* typography from the old system */
.hero-headline, .section-headline { font-family: var(--f-display); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.hero-headline em, .section-headline em { color: var(--lake); font-weight: 600; }
.hero-eyebrow, .section-tag { font-family: var(--f-body); font-weight: 600; font-size: .78rem; letter-spacing: .1em; color: var(--lake); }
.stat-number { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.btn-primary, .btn-ghost { border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: .95rem; font-weight: 600; padding: 12px 22px; }
.btn-primary { background: var(--lake); color: #fff; }
.btn-primary:hover { background: var(--lake-hi); }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* hero with photo */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px) !important; background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); }
.hero::after { display: none !important; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-grid .hero-headline { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.1; }
.hero-grid .hero-sub { margin-bottom: 2rem; }
.hero-photo { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--mist); box-shadow: 0 18px 40px -22px rgba(15,35,55,.35); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-photo { aspect-ratio: 16 / 10; } }

/* demo notice */
.notice { background: var(--ink); color: var(--on-ink-muted); font-size: .8rem; text-align: center; padding: 8px 16px; line-height: 1.5; }
.notice b { color: #e3c48f; font-weight: 600; }
.notice a { color: #e3c48f; }

/* utility bar */
.util { border-bottom: 1px solid var(--line); background: var(--mist); font-size: .8rem; }
.util .wrap { display: flex; justify-content: flex-end; gap: 22px; padding-block: 6px; flex-wrap: wrap; }
.util a { color: var(--muted); text-decoration: none; }
.util a:hover { color: var(--ink); }

/* header */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; position: relative; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand svg { flex: none; }
.brand-name { display: grid; line-height: 1.05; }
.brand-name b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-name small { font-family: var(--f-body); font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.mainnav { display: flex; align-items: center; gap: 28px; }
.mainnav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.mainnav ul a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.mainnav ul a:hover, .mainnav ul a[aria-current="page"] { color: var(--lake); }
.mainnav ul a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--lake); padding-bottom: 4px; }
.navbtn { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; background: var(--lake); color: #fff; font-weight: 600; font-size: .92rem; text-decoration: none; }
.navbtn:hover { background: var(--lake-hi); }
.menu-btn { display: none; background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; font: 600 .9rem var(--f-body); color: var(--ink); cursor: pointer; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .mainnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px clamp(16px, 4vw, 32px) 20px; gap: 12px; }
  .mainnav.open { display: flex; }
  .mainnav ul { flex-direction: column; gap: 0; }
  .mainnav ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  .navbtn { justify-content: center; }
  .util .wrap { justify-content: center; gap: 16px; }
}

/* footer */
.site-footer { background: var(--ink); color: var(--on-ink-muted); font-size: .9rem; border: 0; padding: 0; position: relative; z-index: 1; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 36px; }
.fgrid > * { min-width: 0; }
.fgrid h4 { margin: 0 0 14px; font-family: var(--f-body); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fgrid a { color: var(--on-ink-muted); text-decoration: none; }
.fgrid a:hover { color: #fff; }
.fbrand p { margin-top: 14px; max-width: 34ch; }
.fbrand .brand { color: #fff; }
.fbrand .brand-name small { color: var(--on-ink-muted); }
.fbase { border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px 28px; display: grid; gap: 10px; font-size: .8rem; line-height: 1.6; }
.fbase p { margin: 0; }
.fbase a { color: #e3c48f; text-decoration: none; }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr 1fr; } .fbrand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .fgrid { grid-template-columns: 1fr; } }