/* LodeStar Institute — stabilized homepage stylesheet
   Preserves the original 600x90 banner and legacy soft-blue background.
   One shared .wrap establishes the master left/right alignment axis. */

:root {
  --navy: #10243a;
  --legacy-blue: #000080;
  --eyebrow-blue: #264f86;
  --ink: #233447;
  --muted: #536171;
  --gold: #b69961;
  --line: #cfd8e1;
  --light: #edf2f6;
  --body: "Segoe UI", Candara, "Trebuchet MS", sans-serif;
  --heading: "Segoe UI", Candara, "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: #fff;
  font-family: var(--body);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background: #fff url("image307.jpg") repeat fixed;
  font-size: 17px;
  line-height: 1.65;
}

a { color: var(--navy); text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3 { margin-top: 0; }
p { margin-bottom: 18px; }

a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

/* Master page grid: banner and all principal content start on this same axis. */
.wrap {
  width: min(1080px, calc(100% - 64px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  padding: 12px;
  background: #fff;
  z-index: 5;
}
.skip-link:focus { top: 10px; }

/* Header — original banner preserved, unmodified. */
.site-header {
  background: transparent;
  color: var(--legacy-blue);
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block: 25px 12px;
}

.original-brand {
  width: 600px;
  max-width: 100%;
}

.original-brand > a {
  display: block;
  text-decoration: none;
}

.original-brand .original-banner {
  display: block;
  width: 600px;
  max-width: 100%;
  height: auto;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 23px;
  width: 100%;
  margin: 0;
  min-height: 44px;
}

.primary-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: var(--legacy-blue);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  border-color: var(--gold);
}

/* Typography */
.eyebrow {
  margin-bottom: 15px;
  color: #536777;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

h2 {
  margin-bottom: 17px;
  font: 400 31px/1.3 var(--heading);
  letter-spacing: -.35px;
}

h3 {
  margin-bottom: 10px;
  font: 600 19px/1.4 var(--body);
}

/* Hero */
.hero {
  background: transparent;
  color: var(--legacy-blue);
}

.hero-copy {
  padding-block: 32px 48px;
}

.hero .eyebrow {
  margin-bottom: 10px;
  color: var(--eyebrow-blue);
}

.hero h1 {
  max-width: 590px;
  margin-bottom: 22px;
  font: 400 42px/1.22 var(--heading);
  letter-spacing: -.6px;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 550px;
  margin-bottom: 22px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 48px;
  padding: 12px 21px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.button:hover { background: #24435f; }

.hero .button {
  border-color: #d3bc8a;
  background: #d3bc8a;
  color: #101f32;
}

.hero .button:hover { background: #e3cfa5; }

/* Sections */
.section { padding-block: 56px 48px; }

.section-intro {
  max-width: 710px;
  margin-bottom: 22px;
}

.section-intro > p:last-child { color: var(--muted); }

.audience-note {
  margin-top: 14px;
  color: #596b7c;
  font-size: 14px;
}

.problems {
  position: relative;
  padding-top: 18px;
  background: var(--light);
}

.problem-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.problem-list li { border: 0; }

.problem-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  font-size: 18px;
  text-decoration: none;
}

.problem-list a span:last-child { color: #826b3d; }

.problem-list a:hover {
  color: #476885;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Approach */
.approach {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 68px;
  padding-top: 36px;
}

.approach > div > p:not(.eyebrow) { color: var(--muted); }

.progression {
  max-width: 440px;
  margin-top: 26px;
  padding: 0;
}

.progression ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 13px;
  margin: 0;
  padding: 0;
  color: #4c5f72;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  list-style: none;
}

.progression li:not(:last-child)::after {
  content: "→";
  margin-left: 13px;
  color: #987b45;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  counter-increment: step;
}

.steps li::before {
  content: "0" counter(step);
  padding-top: 4px;
  color: #806d49;
  font-size: 13px;
}

.steps li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Experience */
.experience {
  padding-block: 28px 48px;
  background: transparent;
}

.experience .wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 68px;
}

.experience p:not(.eyebrow) { color: var(--muted); }

.experience a {
  font-size: 15px;
  font-weight: 600;
}

.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  color: #4a5c6e;
  font-size: 13px;
  list-style: none;
}

/* Ways to work together */
.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}

.ways article { padding-top: 6px; }

.ways article + article {
  padding-left: 25px;
  border-left: 1px solid var(--line);
}

.ways p {
  color: var(--muted);
  font-size: 16px;
}

.text-link {
  font-size: 15px;
  font-weight: 600;
}

/* Contact */
.contact-band {
  padding-block: 30px 42px;
  background: transparent;
}

.contact-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.contact-band h2 {
  margin-bottom: 10px;
  font-size: 28px;
}

.contact-band p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
}

.contact-actions {
  display: grid;
  flex-shrink: 0;
  gap: 12px;
  justify-items: center;
}

.phone-link { font-size: 15px; }

/* Footer */
.site-footer {
  padding-block: 15px 30px;
  background: transparent;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.footer-brand {
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
  padding-top: 0;
  color: var(--muted);
  font-size: 12px;
}

.footer-bottom p { margin: 0; }

/* Responsive */
@media (max-width: 1000px) {
  .hero-copy { padding-top: 28px; }
}

@media (max-width: 900px) {
  .approach,
  .experience .wrap { gap: 36px; }

  .ways { gap: 26px; }
}

@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }

  .header-inner { padding-block: 20px 0; }

  .primary-nav {
    gap: 6px 18px;
    justify-content: flex-start;
  }

  .primary-nav a {
    min-height: 40px;
    font-size: 13px;
  }

  .hero-copy { padding-block: 24px 36px; }

  .hero h1 {
    max-width: 470px;
    font-size: 33px;
    line-height: 1.23;
    letter-spacing: -.3px;
  }

  .hero-copy > p:not(.eyebrow) {
    max-width: 440px;
    font-size: 16px;
  }

  .section { padding-block: 38px 30px; }
  .problems { padding-top: 8px; }
  h2 { font-size: 27px; }

  .problem-list,
  .approach,
  .experience .wrap,
  .ways {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .problem-list { gap: 0; }
  .problem-list a { font-size: 17px; }
  .approach { padding-top: 25px; }
  .experience { padding-block: 24px 28px; }

  .ways { gap: 22px; }
  .ways article + article {
    padding-left: 0;
    border-left: 0;
  }

  .contact-band { padding-block: 14px 28px; }

  .contact-band .wrap {
    display: block;
    padding-top: 28px;
  }

  .contact-actions {
    margin-top: 24px;
    justify-items: start;
  }

  .footer-top,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-nav { gap: 14px 20px; }
}


/* Pass 2 — readability and vertical rhythm refinements. */
.eyebrow {
  font-size: 12px;
}

.progression ol {
  font-size: 13px;
}

.credentials {
  font-size: 14px;
}

.footer-bottom {
  font-size: 13px;
}

/* Tighten the middle of the homepage without changing its grid or visual identity. */
.approach {
  padding-bottom: 28px;
}

.experience {
  padding-top: 18px;
  padding-bottom: 24px;
}

.experience + .section {
  padding-top: 28px;
}

@media (max-width: 700px) {
  .experience {
    padding-block: 20px 22px;
  }

  .experience + .section {
    padding-top: 24px;
  }
}


/* Pass 3 — lock every major region to the same page grid and prevent overflow. */
.header-inner,
.hero-copy,
.problems > .wrap,
.approach,
.experience > .wrap,
main > .section.wrap,
.contact-band > .wrap,
.site-footer > .wrap {
  width: min(1080px, calc(100% - 64px));
  max-width: 1080px;
  margin-inline: auto;
}

.approach > *,
.experience .wrap > *,
.ways > *,
.contact-band .wrap > * {
  min-width: 0;
}

.ways {
  width: 100%;
}

@media (max-width: 700px) {
  .header-inner,
  .hero-copy,
  .problems > .wrap,
  .approach,
  .experience > .wrap,
  main > .section.wrap,
  .contact-band > .wrap,
  .site-footer > .wrap {
    width: calc(100% - 40px);
    max-width: none;
  }
}


/* Pass 5 — one explicit master content width for the entire homepage. */
:root {
  --page-max: 960px;
  --page-gutter: 32px;
}

.wrap,
.header-inner,
.hero-copy,
.problems > .wrap,
.approach,
.experience > .wrap,
main > .section.wrap,
.contact-band > .wrap,
.site-footer > .wrap {
  width: min(var(--page-max), calc(100% - (2 * var(--page-gutter))));
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

.problem-list,
.approach,
.experience .wrap,
.ways,
.contact-band .wrap,
.footer-top,
.footer-bottom {
  max-width: 100%;
}

@media (max-width: 700px) {
  :root { --page-gutter: 20px; }

  .wrap,
  .header-inner,
  .hero-copy,
  .problems > .wrap,
  .approach,
  .experience > .wrap,
  main > .section.wrap,
  .contact-band > .wrap,
  .site-footer > .wrap {
    width: calc(100% - (2 * var(--page-gutter)));
    max-width: none;
  }
}


/* Pass 6 — the Problems treatment follows the same visual width as the page content. */
.problems {
  width: min(var(--page-max), calc(100% - (2 * var(--page-gutter))));
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 0;
}

.problems > .wrap {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

@media (max-width: 700px) {
  .problems {
    width: calc(100% - (2 * var(--page-gutter)));
    max-width: none;
  }
}

/* Pass 7 — concise, scannable hero. */
.hero-copy > .hero-intro{max-width:610px;margin-bottom:14px}
.hero-outcomes{max-width:610px;margin:0 0 14px}
.hero-outcomes-label{margin:0 0 6px;color:var(--ink);font-size:15px;font-weight:600}
.hero-outcomes ul{display:grid;grid-template-columns:1fr 1fr;gap:3px 28px;margin:0;padding-left:18px;color:var(--ink);font-size:15px;line-height:1.55}
.hero-copy > .hero-foundation{max-width:610px;margin-bottom:22px;font-size:15px;line-height:1.55}
@media(max-width:700px){.hero-outcomes ul{grid-template-columns:1fr;gap:3px}}


/* Site-wide inner-page system — 2026-10-04. */
.inner-main{width:min(var(--page-max),calc(100% - (2 * var(--page-gutter))));max-width:var(--page-max);margin:0 auto;padding:52px 0 64px;color:var(--ink)}
.inner-main>h1{max-width:760px;margin:0 0 14px;font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-.035em}
.inner-main>.lsi-lead{max-width:760px;margin:0 0 16px;font-size:19px;line-height:1.6;color:var(--muted)}
.inner-main>p{max-width:790px}
.inner-main section{margin:46px 0 0;padding-top:34px;border-top:1px solid var(--line)}
.inner-main section:first-of-type{margin-top:42px}
.inner-main section h2{margin:0 0 12px;font-size:clamp(25px,3.5vw,34px);line-height:1.15;letter-spacing:-.025em}
.inner-main section h3{margin:22px 0 7px;font-size:20px}
.inner-main p,.inner-main li{font-size:16px;line-height:1.68}
.inner-main a{font-weight:600;text-underline-offset:3px}
.inner-main ul,.inner-main ol{max-width:800px;padding-left:22px}
.inner-main li+li{margin-top:6px}
.inner-main .lsi-links{columns:2;column-gap:42px;list-style:none;padding-left:0}
.inner-main .lsi-links li{break-inside:avoid;margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid rgba(25,52,76,.10)}
.inner-main .lsi-panel{max-width:840px;padding:26px 30px;border:0;border-radius:0;background:rgba(255,255,255,.48);box-shadow:inset 4px 0 0 rgba(52,88,117,.25)}
.inner-main .lsi-panel.lsi-yellow{background:rgba(255,247,215,.55);box-shadow:inset 4px 0 0 rgba(177,139,35,.45)}
.inner-main .lsi-panel h2{font-size:26px}
.inner-main .lsi-action,.inner-main a.lsi-action{display:inline-block;margin-top:8px;padding:11px 16px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700}
.inner-main .lsi-small{font-size:14px;color:var(--muted)}
.inner-main .lsi-phone a{font-size:28px;text-decoration:none}
.inner-main .lsi-figure{max-width:760px;margin:28px 0}
.inner-main .lsi-figure img{display:block;max-width:100%;height:auto}
.inner-main figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}
.inner-main hr{border:0;border-top:1px solid var(--line);margin:38px 0}
@media(max-width:700px){.inner-main{width:calc(100% - (2 * var(--page-gutter)));padding:38px 0 50px}.inner-main .lsi-links{columns:1}.inner-main .lsi-panel{padding:22px 20px}.inner-main section{margin-top:36px;padding-top:28px}}

/* v3 profile treatment */
.profile-intro{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:start;margin:22px 0 36px}
.profile-photo{width:180px;height:180px;object-fit:cover;border-radius:2px;box-shadow:0 1px 0 rgba(14,39,64,.14)}
@media (max-width:680px){.profile-intro{grid-template-columns:1fr;gap:18px}.profile-photo{width:150px;height:150px}}

/* v4-fixed: restrained instructional visuals */
.process-visual{margin:24px 0 34px;padding:20px;border:1px solid #cfd8e1;background:rgba(255,255,255,.72)}
.process-visual h3{margin-bottom:15px}.flow-row{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap}.flow-node{flex:1 1 125px;min-width:115px;padding:13px 11px;border:1px solid #b9c6d1;background:#fff;text-align:center}.flow-node strong{display:block;color:#10243a}.flow-node small{display:block;margin-top:5px;color:#536171;line-height:1.35}.flow-arrow{align-self:center;color:#987b45;font-size:21px}.bottleneck{border:2px solid #b69961}.metric-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.metric-strip span{padding:5px 9px;background:#edf2f6;font-size:13px;color:#405466}.visual-caption{font-size:13px;color:#536171;margin:11px 0 0}@media(max-width:700px){.flow-row{display:grid;grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);justify-self:center}.process-visual{padding:15px}}