/* ========== Theme ==========
   Brand blue: #1d4e89
================================ */
:root{
  --brand:#1d4e89;
  --ink:#0a1020;
  --muted:#5c6977;
  --bg:#f7f9fc;
  --bg-alt:#fbfdff; /* very subtle alternate section tint */
  --card:#ffffff;
  --line:#e8edf3;
  --radius:16px;
  --shadow:0 6px 20px rgba(13,31,55,.06);
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:18px}
@media (min-width:1200px){ html{font-size:19px} }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:clamp(2rem,4vw+1rem,3.25rem);line-height:1.15;margin:0 0 10px}
h2{font-size:clamp(1.35rem,2.3vw+.8rem,2rem);line-height:1.25;margin:0 0 8px}
.lead{font-size:1.05rem;line-height:1.7;color:var(--muted)}

/* ========== Layout ========== */
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section.tight{padding:48px 0}

/* ========== Header / Nav ========== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
/* Logo square (not circular) */
.brand img{width:28px;height:28px;object-fit:contain;border-radius:0;border:none}
.navLinks,.navlinks{display:flex;align-items:center;gap:18px}
.navLinks a,.navlinks a{font-weight:600;color:var(--ink);font-size:1rem}
.cta, .btn.cta{
  display:inline-block;padding:10px 16px;border-radius:999px;
  background:var(--brand); color:#fff !important; border:1px solid var(--brand);
}
.cta:hover,.btn.cta:hover{filter:brightness(1.05);text-decoration:none}

/* ========== Hero (mountain) ========== */
.hero{
  position:relative; color:#fff;
  background:#0a274d url('/assets/hero-mountain.jpg') center/cover no-repeat;
  min-height:56vh; display:flex; align-items:center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.25));
}
.hero-inner{position:relative;z-index:1;max-width:860px}
.hero .kicker{
  display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:6px 10px;border-radius:999px;font-size:.9rem;font-weight:700;letter-spacing:.02em
}
.hero .hero-title{
  color:#fff;
  margin:0 0 12px;
  font-weight:800;
  line-height:1.02;
  /* bigger, bold, consistent single-line hero */
  font-size:clamp(1.6rem,5vw,2.8rem);
  letter-spacing: -0.01em;
  text-shadow:0 3px 18px rgba(0,0,0,.6);
}
/* hero-sub removed; hero title is now a single bold line */
.hero .lead, .hero h1, .hero h2{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero .lead{margin-top:12px;font-size:1.15rem;line-height:1.6;max-width:860px}

/* ========== Buttons / Stacks ========== */
.hstack{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;font-weight:600}
.btn.primary{background:var(--brand);color:#fff}
.btn.ghost{color:var(--brand);border:1px solid var(--brand);background:#fff}

/* ========== Intro block with circular headshot ========== */
.intro{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center}
.avatar{width:96px;height:96px;border-radius:999px;object-fit:cover;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.avatar.large{width:140px;height:140px}

@media (max-width:900px){.intro{grid-template-columns:96px 1fr}}

/* ========== Buyer Profile: page title w/ headshot ========== */
.page-hero{padding:40px 20px 0}
.page-title{display:flex;align-items:center;gap:14px}
.page-title img{width:60px;height:60px;border-radius:50%}
.page-title h1{margin:0;font-size:1.9rem}

/* ========== Advisors tiles ========== */
.advisors{display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:800px){ .advisors{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tile{
  display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center;
  padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow);
}
.tile img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.tile .kicker{color:var(--muted);font-size:.9rem}
.tile .line1{font-weight:600}
.tile a{word-break:break-word}

/* ========== Personal Background split ========== */
.split{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:900px){ .split{grid-template-columns:1.1fr .9fr;gap:28px} }
.split img{width:100%;height:auto;border-radius:12px}
.facts{display:grid;gap:14px}
.fact{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;box-shadow:var(--shadow)}
.fact .title{font-weight:700;color:var(--brand);margin-bottom:6px}

/* ========== Footer ========== */
.footer{padding:32px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.footer .hstack{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.footer a{color:var(--brand)}

/* ===== Card component ===== */
.card{
  background:var(--card);
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Footer subtle separation: match the site's section hairline and provide a very slight
   tint so the footer reads as separated from the last card above it. */
.footer{
  border-top:1px solid rgba(13,31,55,0.04);
  background:var(--bg-alt);
}

/* ========== Helpers (needed by home KPI section) ========== */
.center{ text-align:center }

/* ========== KPI Section (6 tiles styled like 4-tile design) ========== */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #f3f6fb;
  color: var(--brand);
}
.label {
  line-height: 1.25;
}
.label strong {
  display: block;
  font-size: 1.05rem;
  color: var(--ink);
}
.label .sub {
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 900px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .kpis {
    grid-template-columns: 1fr;
  }
}

/* Section separators + subtle alternating tint ----------------------------------
   - 1px hairline between sections using a very light color (keeps modern, airy look)
   - even sections get a near-white tint to gently separate content bands
*/
.section{ border-top:1px solid rgba(13,31,55,0.04); }
.section:first-of-type{ border-top:0 }
.section:nth-of-type(even){ background:var(--bg-alt) }

/* Page-specific spacing tweaks -------------------------------------------------
   - `.spacious` applied to an H2 where we want a larger gap beneath the section title
   - `.spacious + .lead` increases the space between the H2 and the first lead paragraph
   - `.lead + .lead` reduces the gap between consecutive lead paragraphs
*/
.spacious { margin-bottom: 0; }
.spacious + .lead { margin-top: 36px; }
.lead + .lead { margin-top: 8px; }

/* Reduce the gap specifically for stacked .lead paragraphs immediately after a .spacious heading */
.spacious + .lead + .lead { margin-top: 6px; }

/* Mobile nav fixes: allow wrapping and add spacing so items don't overlap on small screens */
@media (max-width: 620px) {
  .nav {
    height: auto; /* don't force a fixed height that causes overlap */
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nav .brand { font-size: 1rem; }

  .navLinks {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 6px;
  }

  .navLinks a { font-size: 0.95rem; }
}

/* ===== Zoho CRM Webform (scoped) =====
   Moved from inline styles in contact/contact.html. Scoped to the form container ID and
   adjusted to inherit site typography. Buttons styled to match .cta.
*/
#crmWebToEntityForm, #crmWebToEntityForm *{ font-family: inherit; font-size: 1rem; line-height: 1.6; color: var(--ink); }
#crmWebToEntityForm.zcwf_lblLeft{ width: 100%; padding: 6px 0; box-sizing: border-box; }
#crmWebToEntityForm.zcwf_lblLeft *{ box-sizing: border-box; }
#crmWebToEntityForm { text-align: left; }
.zcwf_lblLeft .zcwf_title{ word-wrap: break-word; padding: 0px 6px 10px; font-weight: 700 }

/* Labels */
.zcwf_lblLeft .zcwf_col_lab label{ display:block; margin-bottom:6px; font-weight:600; font-size:1rem; color:var(--ink); }

/* Inputs / textarea */
.zcwf_lblLeft .zcwf_col_fld input[type=text],
.zcwf_lblLeft .zcwf_col_fld input[ftype=email],
.zcwf_lblLeft .zcwf_col_fld textarea,
.zcwf_lblLeft .zcwf_col_fld input[type=password]{
  width: 100%;
  border: 1px solid var(--line) !important;
  background: var(--card);
  padding: 10px 12px;
  resize: vertical;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.zcwf_lblLeft .zcwf_col_lab{ width: 100%; word-break: break-word; padding: 0 6px 0; margin-top: 0; }
.zcwf_lblLeft .zcwf_col_fld{ width: 100%; padding: 0 6px 0; position: relative; margin-top: 0; }
.zcwf_lblLeft .zcwf_privacy {padding: 6px; }
.zcwf_lblLeft .wfrm_fld_dpNn {display: none; }
.zcwf_lblLeft .zcwf_col_fld_slt{ width: 100%; border: 1px solid #ccc; background: #fff; border-radius: 6px; font-size: 1rem; padding: 8px; }
.zcwf_lblLeft .zcwf_row:after, .zcwf_lblLeft .zcwf_col_fld:after{ content: ''; display: table; clear: both; }
.zcwf_lblLeft .zcwf_col_help{ margin-left: 0; font-size: 0.95rem; word-break: break-word; }
.zcwf_lblLeft .zcwf_help_icon{ display:none; }
.zcwf_lblLeft .zcwf_row {margin: 14px 0px; }

/* Buttons - match .cta */
.crmWebToEntityForm .zcwf_button,
.crmWebToEntityForm .formsubmit{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  background:var(--brand);
  color:#fff !important;
  border:1px solid var(--brand);
  font-weight:600;
  cursor:pointer;
}
.crmWebToEntityForm .zcwf_button:hover,
.crmWebToEntityForm .formsubmit:hover{ filter:brightness(1.05); }

@media all and (max-width: 600px){ .zcwf_lblLeft .zcwf_col_lab, .zcwf_lblLeft .zcwf_col_fld{ width: auto; float: none !important; } }