/* John Bramley v22 — unified premium polish */
:root{
  --jb22-navy:#06192b;
  --jb22-navy-2:#0a2947;
  --jb22-blue:#78b9f6;
  --jb22-blue-pale:#eaf4fd;
  --jb22-ink:#0e263d;
  --jb22-copy:#4f6274;
  --jb22-line:#d8e2ea;
  --jb22-paper:#ffffff;
  --jb22-soft:#f5f8fb;
  --jb22-rail:1320px;
}

html{scroll-behavior:smooth}
body{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;color:var(--jb22-ink);background:#fff}

/* one alignment wall */
body.jb-fieldguide .section-inner,
body.jb-fieldguide .site-container,
body.jb-fieldguide .nav-inner,
body.jb-fieldguide .jb31-nav-inner,
body.jb-fieldguide footer .section-inner{
  width:min(var(--jb22-rail),calc(100% - 64px))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* typographic restraint */
body.jb-fieldguide h1,
body.jb-fieldguide .hero h1,
body.jb-fieldguide .intro h1,
body.jb-fieldguide .page-hero h1{
  font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
  font-size:clamp(40px,4.25vw,60px)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
  font-weight:600!important;
}
body.jb-fieldguide .section-title,
body.jb-fieldguide main h2{
  font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
  font-size:clamp(30px,3vw,42px)!important;
  line-height:1.09!important;
  letter-spacing:-.025em!important;
  font-weight:600!important;
}
body.jb-fieldguide main h3{font-weight:600!important;line-height:1.18!important}
body.jb-fieldguide main p{line-height:1.68}
body.jb-fieldguide .eyebrow,
body.jb-fieldguide .hero-kicker{
  font-size:11px!important;
  line-height:1.25!important;
  letter-spacing:.15em!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}

/* global buttons */
.jb-v22-btn,
body.jb-fieldguide .btn,
body.jb-fieldguide .hero-btn,
body.jb-fieldguide .outline-btn{
  min-height:50px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 24px!important;
  font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:750!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease!important;
}
.jb-v22-btn:hover,
body.jb-fieldguide .btn:hover,
body.jb-fieldguide .hero-btn:hover,
body.jb-fieldguide .outline-btn:hover{transform:translateY(-1px)}
.jb-v22-btn-primary,
body.jb-fieldguide .btn-primary,
body.jb-fieldguide .btn.primary,
body.jb-fieldguide .hero-btn.primary{
  background:var(--jb22-blue-pale)!important;
  color:#08213a!important;
  -webkit-text-fill-color:#08213a!important;
  border:1px solid var(--jb22-blue-pale)!important;
}
.jb-v22-btn-primary:hover,
body.jb-fieldguide .btn-primary:hover,
body.jb-fieldguide .btn.primary:hover,
body.jb-fieldguide .hero-btn.primary:hover{background:#fff!important;border-color:#fff!important;color:#06192b!important;-webkit-text-fill-color:#06192b!important}
.jb-v22-btn-secondary{
  background:rgba(6,25,43,.26)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.48)!important;
}
.jb-v22-btn-secondary:hover{background:rgba(255,255,255,.10)!important;border-color:#fff!important}

/* ================= ABOUT HERO ================= */
.about-hero-v22{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100svh - 84px);
  color:#fff;
  background:linear-gradient(90deg,#031626 0%,#061d32 42%,#0b3153 100%);
}
.about-hero-v22-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.about-hero-v22-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,22,38,.98) 0%,rgba(3,22,38,.90) 34%,rgba(3,22,38,.60) 68%,rgba(3,22,38,.34) 100%),
    linear-gradient(180deg,rgba(3,22,38,.08),rgba(3,22,38,.38));
}
.about-hero-v22-marine{
  position:absolute;
  top:50%;
  right:-1%;
  width:clamp(720px,63vw,1100px);
  max-width:none;
  transform:translateY(-50%);
  opacity:.80;
  object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 17%,#000 45%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 17%,#000 45%,#000 100%);
}
.about-hero-v22-inner{
  width:min(var(--jb22-rail),calc(100% - 64px));
  min-height:calc(100svh - 84px);
  margin:0 auto;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
}
.about-hero-v22-main{
  display:grid;
  grid-template-columns:clamp(190px,18vw,270px) minmax(500px,720px);
  gap:clamp(40px,5vw,72px);
  align-items:center;
  padding:clamp(40px,5.4vh,68px) 0 clamp(20px,2.8vh,34px);
}
.about-hero-v22-portrait{
  align-self:end;
  width:100%;
  max-width:260px;
  margin:0;
  position:relative;
  transform:translateY(18px);
}
.about-hero-v22-portrait img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center top;
  filter:drop-shadow(0 28px 30px rgba(0,0,0,.20));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.82) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 74%,rgba(0,0,0,.82) 84%,transparent 100%);
}
.about-hero-v22-copy{max-width:720px;align-self:center}
.about-hero-v22-eyebrow{
  margin:0 0 18px;
  color:var(--jb22-blue);
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.about-hero-v22 h1{
  margin:0!important;
  max-width:720px!important;
  color:#fff!important;
  font-size:clamp(46px,4.1vw,64px)!important;
  line-height:.98!important;
  letter-spacing:-.042em!important;
  font-weight:600!important;
}
.about-hero-v22 h1 span{display:block}
.about-hero-v22-lede{
  max-width:610px;
  margin:24px 0 0;
  color:rgba(255,255,255,.88)!important;
  font-size:clamp(17px,1.18vw,20px);
  line-height:1.56;
}
.about-hero-v22-support{
  max-width:590px;
  margin:9px 0 0;
  color:rgba(255,255,255,.68)!important;
  font-size:15px;
  line-height:1.58;
}
.about-hero-v22-actions{display:flex;align-items:center;gap:12px;margin-top:26px}
.about-hero-v22-actions .jb-v22-btn-primary{min-width:205px}
.about-hero-v22-actions .jb-v22-btn-secondary{min-width:150px}
.about-hero-v22-stats{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  padding:18px 0 20px;
  border-top:1px solid rgba(255,255,255,.18);
}
.about-hero-v22-stat{min-width:0;padding:0 28px;border-right:1px solid rgba(255,255,255,.14)}
.about-hero-v22-stat:first-child{padding-left:0}
.about-hero-v22-stat:last-child{border-right:0}
.about-hero-v22-stat dt{margin:0;color:#fff;font-size:clamp(18px,1.45vw,22px);line-height:1.05;font-weight:650}
.about-hero-v22-stat dd{margin:6px 0 0;color:rgba(255,255,255,.54);font-size:9px;line-height:1.25;letter-spacing:.12em;text-transform:uppercase}

/* About lower page: concise editorial rhythm */
body.page-about .about-profile-v21{padding:82px 0 88px!important;background:#fff!important}
body.page-about .about-profile-v21-inner{width:min(1180px,calc(100% - 64px))!important;margin:0 auto!important}
body.page-about .about-profile-v21-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:60px!important;align-items:end!important;padding-bottom:28px!important;border-bottom:1px solid var(--jb22-line)!important}
body.page-about .about-profile-v21-title h2{max-width:17ch!important;margin:0!important;font-size:clamp(34px,3.25vw,46px)!important;line-height:1.07!important}
body.page-about .about-profile-v21-stat{text-align:right!important;color:#2f6ea5!important}
body.page-about .about-profile-v21-stat strong{display:block!important;font-size:64px!important;line-height:.88!important;font-weight:400!important;color:#2f6ea5!important}
body.page-about .about-profile-v21-stat span{display:block!important;margin-top:12px!important;color:#65788a!important;font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase!important}
body.page-about .about-profile-v21-copy{padding-top:30px!important;max-width:1000px!important}
body.page-about .about-profile-v21-copy .lead{max-width:52ch!important;margin:0 0 28px!important;color:#10283f!important;font-size:21px!important;line-height:1.58!important}
body.page-about .about-profile-v21-columns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:36px!important}
body.page-about .about-profile-v21-columns p{margin:0!important;color:var(--jb22-copy)!important;font-size:16px!important;line-height:1.72!important}
body.page-about .about-standard{padding:82px 0 88px!important;background:var(--jb22-soft)!important}
body.page-about .about-standard-head{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;gap:68px!important;align-items:start!important;margin-bottom:42px!important}
body.page-about .about-standard-head h2{max-width:16ch!important;margin:0!important}
body.page-about .about-standard-head>p{max-width:52ch!important;margin:0!important;color:var(--jb22-copy)!important;font-size:16px!important;line-height:1.72!important}
body.page-about .about-principles{display:block!important;border-top:1px solid var(--jb22-line)!important}
body.page-about .about-principle{display:grid!important;grid-template-columns:minmax(230px,.42fr) 1fr!important;gap:38px!important;padding:24px 0!important;border-bottom:1px solid var(--jb22-line)!important;background:transparent!important}
body.page-about .about-principle h3{margin:0!important;font-size:22px!important;color:var(--jb22-ink)!important}
body.page-about .about-principle p{margin:0!important;max-width:58ch!important;color:var(--jb22-copy)!important;font-size:16px!important}
body.page-about .about-path{padding:82px 0 88px!important;background:#fff!important}
body.page-about .about-path-grid{display:grid!important;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)!important;gap:68px!important;align-items:start!important}
body.page-about .about-path h2{max-width:15ch!important;margin:0!important}
body.page-about .about-timeline{border-top:1px solid var(--jb22-line)!important;border-left:0!important}
body.page-about .about-step{padding:22px 0!important;border-bottom:1px solid var(--jb22-line)!important}
body.page-about .about-step::before{display:none!important}
body.page-about .about-step h3{margin:7px 0 7px!important;font-size:22px!important}
body.page-about .about-step p{margin:0!important;color:var(--jb22-copy)!important;max-width:58ch!important}
body.page-about .about-cta{padding:68px 0!important;background:linear-gradient(105deg,#06192b,#0a2947)!important}
body.page-about .about-cta-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;gap:64px!important;align-items:center!important}
body.page-about .about-cta h2{margin:0!important;max-width:15ch!important;color:#fff!important}
body.page-about .about-cta p{color:rgba(255,255,255,.76)!important}

/* HOME hero: clearer hierarchy and same professional restraint */
body.page-home .hero-shell,
body.page-home .hero-art,
body.page-home .hero-layout{min-height:calc(100svh - 84px)!important;height:calc(100svh - 84px)!important;max-height:calc(100svh - 84px)!important}
body.page-home .hero-art{position:relative!important;overflow:hidden!important}
body.page-home .hero-art::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(3,18,32,.94) 0%,rgba(3,18,32,.82) 34%,rgba(3,18,32,.40) 64%,rgba(3,18,32,.12) 100%)!important;
}
body.page-home .hero-layout{position:relative!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;padding:0!important}
body.page-home .hero-copy-plain{width:min(700px,58vw)!important;max-width:700px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;text-align:left!important}
body.page-home .hero-copy-plain .hero-eyebrow{margin:0 0 17px!important;color:#a7d3fa!important;font-size:11px!important;font-weight:700!important;letter-spacing:.14em!important}
body.page-home .hero-copy-plain h1{margin:0!important;max-width:13.5ch!important;color:#fff!important;font-size:clamp(46px,4.7vw,66px)!important;line-height:.99!important;text-shadow:0 10px 34px rgba(0,0,0,.36)!important}
body.page-home .hero-rule{width:64px!important;margin:22px 0 20px!important;background:rgba(255,255,255,.52)!important}
body.page-home .hero-copy-text{margin:0!important;max-width:43ch!important;color:rgba(255,255,255,.90)!important;font-size:18px!important;line-height:1.58!important;text-shadow:0 3px 18px rgba(0,0,0,.35)!important}
body.page-home .hero-actions-row{margin-top:26px!important;display:flex!important;gap:12px!important;justify-content:flex-start!important}
body.page-home .hero-btn.secondary{background:rgba(4,24,42,.32)!important;color:#fff!important;border-color:rgba(255,255,255,.46)!important}

/* inner pages */
body.jb-fieldguide main>.intro,
body.jb-fieldguide main>.page-hero,
body.jb-fieldguide main>.hero{overflow:hidden}
body.jb-fieldguide .intro-copy,
body.jb-fieldguide .section-block p,
body.jb-fieldguide .resource-card p,
body.jb-fieldguide .program-card p{color:var(--jb22-copy)!important}
body.jb-financing-page .hero .hero-side a{background:#e7f3ff!important;color:#08213a!important;-webkit-text-fill-color:#08213a!important;border-color:#e7f3ff!important}

/* keep section spacing deliberate */
body.jb-fieldguide main>section:not(.about-hero-v22):not(.hero-shell):not(.about-profile-v21):not(.about-standard):not(.about-path):not(.about-cta){scroll-margin-top:92px}

@media(max-width:1180px){
  .about-hero-v22-main{grid-template-columns:clamp(155px,17vw,220px) minmax(460px,640px);gap:38px}
  .about-hero-v22 h1{font-size:clamp(42px,4.55vw,56px)!important}
  .about-hero-v22-marine{right:-12%;width:74vw;opacity:.62}
}

@media(max-width:980px){
  body.jb-fieldguide .section-inner,
  body.jb-fieldguide .site-container,
  body.jb-fieldguide .nav-inner,
  body.jb-fieldguide .jb31-nav-inner,
  body.jb-fieldguide footer .section-inner{width:calc(100% - 28px)!important}

  .about-hero-v22{min-height:auto}
  .about-hero-v22-inner{width:calc(100% - 28px);min-height:auto}
  .about-hero-v22-main{grid-template-columns:130px minmax(0,1fr);gap:24px;padding:38px 0 28px}
  .about-hero-v22 h1 span{display:inline}
  .about-hero-v22 h1{max-width:none!important;font-size:clamp(35px,6.2vw,48px)!important;line-height:1.02!important}
  .about-hero-v22-portrait{align-self:start;transform:none}
  .about-hero-v22-marine{right:-28%;width:92vw;opacity:.30}
  .about-hero-v22-stats{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .about-hero-v22-stat:nth-child(2){border-right:0}
  .about-hero-v22-stat:nth-child(3){padding-left:0}

  body.page-about .about-profile-v21-inner{width:calc(100% - 28px)!important}
  body.page-about .about-profile-v21-head{grid-template-columns:1fr!important;gap:22px!important;align-items:start!important}
  body.page-about .about-profile-v21-title h2{max-width:none!important;font-size:clamp(30px,7.8vw,40px)!important}
  body.page-about .about-profile-v21-stat{text-align:left!important}
  body.page-about .about-profile-v21-stat strong{font-size:54px!important}
  body.page-about .about-profile-v21-columns{grid-template-columns:1fr!important;gap:18px!important}
  body.page-about .about-standard-head,
  body.page-about .about-path-grid,
  body.page-about .about-cta-grid{grid-template-columns:1fr!important;gap:28px!important}
  body.page-about .about-principle{grid-template-columns:1fr!important;gap:8px!important}

  body.page-home .hero-shell,
  body.page-home .hero-art,
  body.page-home .hero-layout{min-height:calc(100svh - 74px)!important;height:calc(100svh - 74px)!important;max-height:calc(100svh - 74px)!important}
  body.page-home .hero-art::after{background:linear-gradient(180deg,rgba(3,18,32,.60),rgba(3,18,32,.52) 52%,rgba(3,18,32,.74))!important}
  body.page-home .hero-copy-plain{width:100%!important;max-width:440px!important;margin:0 auto!important;text-align:center!important}
  body.page-home .hero-copy-plain .hero-eyebrow,
  body.page-home .hero-copy-plain h1,
  body.page-home .hero-copy-text{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  body.page-home .hero-copy-plain h1{font-size:clamp(34px,9.2vw,48px)!important;max-width:none!important}
  body.page-home .hero-rule{margin:18px auto!important}
  body.page-home .hero-copy-text{font-size:15.5px!important;max-width:34ch!important}
  body.page-home .hero-actions-row{justify-content:center!important;margin-top:22px!important}
}

@media(max-width:640px){
  .about-hero-v22-bg::after{background:linear-gradient(180deg,rgba(3,22,38,.86),rgba(3,22,38,.95))}
  .about-hero-v22-marine{width:130vw;right:-52%;opacity:.20}
  .about-hero-v22-main{grid-template-columns:1fr;gap:16px;padding:26px 0 24px}
  .about-hero-v22-portrait{width:116px;margin:0 auto}
  .about-hero-v22-copy{text-align:center}
  .about-hero-v22-eyebrow,.about-hero-v22-lede,.about-hero-v22-support{margin-left:auto;margin-right:auto}
  .about-hero-v22 h1{font-size:clamp(33px,9.6vw,42px)!important}
  .about-hero-v22-lede{font-size:15px}
  .about-hero-v22-support{font-size:14px}
  .about-hero-v22-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
  .about-hero-v22-actions .jb-v22-btn{width:100%;min-width:0}
  .about-hero-v22-stats{grid-template-columns:1fr 1fr;padding-bottom:18px}
  .about-hero-v22-stat{padding:0 12px}
  .about-hero-v22-stat:nth-child(odd){padding-left:0}
  body.page-about .about-profile-v21{padding:62px 0 66px!important}
  body.page-about .about-standard,body.page-about .about-path{padding:64px 0 68px!important}
  body.page-about .about-cta{padding:56px 0!important}
}