/* JPB homepage — color tokens, layout, motion
   Assets: dhaassets/frontend/landing/img/home/
   JS: jpb-home.js (reveal, mobile nav, hero slider)
   Note: overflow-x:hidden on html/body breaks position:sticky; menu-open uses --nav-h + body lock for iOS.
*/

:root{
  --jpb-navy-950:#07172D; --jpb-navy-900:#0B1F3A;
  --jpb-navy-800:#102B4E; --jpb-navy-700:#173B67;

  --jpb-blue-700:#174F8A; --jpb-blue-600:#2367A6;
  --jpb-blue-500:#347FBE; --jpb-blue-400:#65A2D2;

  --jpb-white:#FFFFFF; --jpb-warm-white:#FCFBF8; --jpb-ivory:#F7F4ED;
  --jpb-ui-neutral:#F2F4F6;

  --jpb-gold-600:#A9823A; --jpb-gold-500:#C19A4B;
  --jpb-gold-400:#D4B66A; --jpb-gold-soft:#E8D8AE; --jpb-gold-ink:#8A6A2B;

  --jpb-text-primary:#172333; --jpb-text-secondary:#536171;
  --jpb-text-muted:#6B7683;
  --jpb-text-on-dark:#F7F8FA; --jpb-text-on-dark-secondary:#C8D0DA;

  --jpb-border-light:rgba(15,35,60,.10);
  --jpb-border-dark:rgba(255,255,255,.12);

  
  --jpb-space-lg:clamp(4.5rem,8vw,8rem);
  --jpb-space-md:clamp(3.5rem,6vw,6rem);
  --jpb-space-sm:clamp(2.75rem,4.5vw,4rem);

  --jpb-shadow-rest:0 1px 2px rgba(16,24,32,.04),0 8px 24px -12px rgba(16,24,32,.12);
  --jpb-shadow-lift:0 2px 4px rgba(16,24,32,.05),0 18px 40px -18px rgba(16,24,32,.22);
  --jpb-radius:14px; --jpb-radius-sm:10px;
  --jpb-ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--jpb-text-secondary); background:var(--jpb-white);
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{color:var(--jpb-text-primary);margin:0 0 .6em;line-height:1.22;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,1.15rem + 2.1vw,2.7rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1.1rem;max-width:68ch}
a{color:var(--jpb-blue-600);text-decoration:none}
img{display:block;max-width:100%;filter:none!important}
.container{width:min(1200px,92%);margin-inline:auto}

.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jpb-gold-ink);margin:0 0 .9rem;
}
.eyebrow::after{content:"";display:block;width:34px;height:1px;margin-top:.55rem;background:var(--jpb-gold-500)}
.text-center .eyebrow::after{margin-inline:auto}
.text-center{text-align:center}
.text-center p{margin-inline:auto}

.btn{
  display:inline-block;padding:.8rem 1.6rem;border-radius:var(--jpb-radius-sm);
  font-size:.9rem;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--jpb-ease),background-color .25s var(--jpb-ease),color .25s var(--jpb-ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--jpb-blue-700);color:#fff}
.btn-primary:hover{background:var(--jpb-navy-800)}
.btn-ghost{color:var(--jpb-navy-800);border-color:var(--jpb-border-light)}
.btn-ghost:hover{background:var(--jpb-navy-900);border-color:var(--jpb-navy-900);color:#fff}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}
.text-center .btn-row{justify-content:center}

.topbar{background:var(--jpb-navy-950);color:var(--jpb-text-on-dark-secondary);font-size:.78rem}
.topbar .container{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;flex-wrap:wrap}
.topbar a{color:var(--jpb-text-on-dark-secondary)}
.topbar a:hover{color:var(--jpb-gold-400)}
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--jpb-border-light)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{font-size:1.25rem;font-weight:700;color:var(--jpb-navy-900);letter-spacing:-.02em}
.nav-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav-links a{font-size:.85rem;font-weight:500;color:var(--jpb-text-secondary);padding-bottom:.35rem}
.nav-links a:hover{color:var(--jpb-navy-900)}
.nav-links a.active{color:var(--jpb-navy-900);box-shadow:inset 0 -2px 0 var(--jpb-gold-500)}

[data-flow]{position:relative}

[data-flow="hero"]{background:var(--jpb-navy-950);min-height:min(88vh,720px);display:grid;padding:0}
.slides{grid-area:1/1;position:relative}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--jpb-ease)}
.slides img.on{opacity:1}
.slides::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,23,45,.58) 0%,rgba(7,23,45,.34) 45%,rgba(11,31,58,.72) 100%)}
.hero-body{grid-area:1/1;position:relative;z-index:2;display:flex;align-items:center;padding-block:clamp(5rem,12vh,8rem)}
.hero-body h1{color:#fff;font-size:clamp(2.1rem,1.2rem + 3.2vw,3.5rem);max-width:16ch}
.hero-body p{color:var(--jpb-text-on-dark-secondary);max-width:56ch}
[data-flow="hero"] .btn-primary{background:#fff;color:var(--jpb-navy-900)}
[data-flow="hero"] .btn-primary:hover{background:var(--jpb-gold-soft);color:var(--jpb-navy-950)}
[data-flow="hero"] .btn-ghost{color:#fff;border-color:var(--jpb-border-dark)}
[data-flow="hero"] .btn-ghost:hover{background:#fff;color:var(--jpb-navy-900)}

[data-flow="breathe"]{background:var(--jpb-white);padding-block:var(--jpb-space-lg)}
[data-flow="breathe"]::before{content:"";position:absolute;inset-inline:0;top:0;height:96px;background:linear-gradient(180deg,#F4F6F9,var(--jpb-white));pointer-events:none}
[data-flow="breathe"] .container{position:relative;z-index:1}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split img{border-radius:var(--jpb-radius);box-shadow:var(--jpb-shadow-rest);aspect-ratio:4/3;object-fit:cover;width:100%}

[data-flow="transition"]{background:var(--jpb-ivory);padding-block:var(--jpb-space-sm);border-block:1px solid var(--jpb-border-light)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);margin-top:2rem}
.vm h3{color:var(--jpb-navy-900)}
.misi{list-style:none;margin:0;padding:0}
.misi li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:.95rem}
.misi li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--jpb-gold-500)}

[data-flow="build"]{background:var(--jpb-white);padding-block:var(--jpb-space-md)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.card{
  background:#fff;border:1px solid var(--jpb-border-light);border-radius:var(--jpb-radius);
  box-shadow:var(--jpb-shadow-rest);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--jpb-ease),box-shadow .35s var(--jpb-ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--jpb-shadow-lift)}
.card-media{aspect-ratio:4/3;background:var(--jpb-ui-neutral)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.4rem 1.5rem 1.6rem}
.card h3{margin-bottom:.15rem}
.card .kicker{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--jpb-blue-600);margin:0 0 .7rem}
.card p{font-size:.92rem;margin-bottom:1rem}
.more{font-size:.85rem;font-weight:600;color:var(--jpb-blue-600)}
.more:hover{color:var(--jpb-navy-800)}

[data-flow="rest"]{
  background:var(--jpb-navy-900);padding-block:var(--jpb-space-sm);
  background-image:radial-gradient(90% 120% at 78% 0%,rgba(52,127,190,.16) 0%,transparent 58%);
}
[data-flow="rest"]::before{content:"";position:absolute;inset-inline:0;top:0;height:88px;background:linear-gradient(180deg,var(--jpb-navy-800) 0%,transparent 100%);opacity:.55;pointer-events:none}
[data-flow="rest"] .container{position:relative;z-index:1}
[data-flow="rest"] h1,[data-flow="rest"] h3{color:var(--jpb-text-on-dark)}
[data-flow="rest"] p{color:var(--jpb-text-on-dark-secondary)}
[data-flow="rest"] .eyebrow{color:var(--jpb-gold-400)}
[data-flow="rest"] .eyebrow::after{background:var(--jpb-gold-400)}
[data-flow="rest"] .btn-primary{background:#fff;color:var(--jpb-navy-900)}
[data-flow="rest"] .btn-primary:hover{background:var(--jpb-gold-soft)}
[data-flow="rest"] .split img{box-shadow:none;border:1px solid var(--jpb-border-dark)}

[data-flow="climax"]{
  padding-block:var(--jpb-space-lg);
  background:linear-gradient(180deg,var(--jpb-white) 0%,var(--jpb-warm-white) 42%,var(--jpb-ivory) 100%);
}
[data-flow="climax"]::before{content:"";position:absolute;inset-inline:0;top:0;height:72px;background:linear-gradient(180deg,rgba(11,31,58,.10) 0%,transparent 100%);pointer-events:none}
[data-flow="climax"] .container{position:relative;z-index:1}
[data-flow="climax"] .intro{margin-bottom:clamp(2.5rem,4.5vw,4rem)}

[data-flow="close"]{
  background:var(--jpb-navy-950);color:var(--jpb-text-on-dark-secondary);
  position:relative;padding-top:calc(var(--jpb-space-md) + 1.5rem);padding-bottom:2rem;
}
[data-flow="close"]::before{content:"";position:absolute;inset-inline:0;top:-1px;height:120px;background:linear-gradient(180deg,var(--jpb-ivory) 0%,rgba(16,43,78,.55) 52%,transparent 100%);pointer-events:none}
[data-flow="close"] .container{position:relative;z-index:1}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}
.foot h5{color:var(--jpb-text-on-dark);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem}
.foot p,.foot a{font-size:.9rem;color:var(--jpb-text-on-dark-secondary)}
.foot a{display:block;margin-bottom:.55rem}
.foot a:hover{color:var(--jpb-gold-400)}
.copyright{margin-top:clamp(2rem,4vw,3.25rem);padding-top:1.5rem;border-top:1px solid var(--jpb-border-dark);font-size:.82rem}

@media (max-width:900px){
  .split,.vm,.grid-3,.foot{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:767.98px){
  :root{--jpb-space-lg:3.25rem;--jpb-space-md:2.75rem;--jpb-space-sm:2.25rem}
  [data-flow="rest"]{background-image:none}
  [data-flow="breathe"]::before{height:56px}
  [data-flow="close"]::before{height:72px}
  [data-flow="rest"]::before,[data-flow="climax"]::before{height:48px}
  .card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  .slides img{transition:none}
}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--jpb-gold-500);outline-offset:3px}

:root{
  --t-hero:clamp(2.35rem,1.60rem + 3.20vw,3.90rem);
  --t-head-strong:clamp(1.90rem,1.40rem + 2.10vw,2.85rem);
  --t-head-quiet:clamp(1.60rem,1.25rem + 1.50vw,2.25rem);
  --t-sub:clamp(1.10rem,1.00rem + 0.40vw,1.30rem);
  --t-card-title:clamp(1.05rem,0.98rem + 0.35vw,1.22rem);
  --t-lead:clamp(1.02rem,0.97rem + 0.30vw,1.18rem);
  --t-body:clamp(1.00rem,0.97rem + 0.15vw,1.0625rem);
  --t-card:clamp(0.94rem,0.92rem + 0.10vw,0.98rem);
  --t-kicker:.78rem; --t-eyebrow:.72rem; --t-nav:.875rem; --t-btn:.9rem; --t-legal:.8rem;
  --lh-hero:1.06; --lh-head:1.14; --lh-sub:1.35;
  --lh-lead:1.62; --lh-body:1.75; --lh-card:1.62; --lh-tight:1.3;
  --tr-hero:-.022em; --tr-head:-.015em; --tr-sub:-.008em;
  --tr-body:0; --tr-small:.01em; --tr-caps:.14em;
  --m-hero:16ch; --m-head:22ch; --m-lead:58ch; --m-body:68ch;
  --w-reg:400; --w-med:500; --w-semi:600;
}

body{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-reg);
     letter-spacing:var(--tr-body);font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
     text-rendering:optimizeLegibility}
[href^="tel:"]{font-variant-numeric:tabular-nums}

[data-flow] h1,[data-flow] h2,[data-flow] h3{text-wrap:balance}
[data-flow] p,[data-flow] li{text-wrap:pretty}

[data-flow="hero"] h1,.hero-body h1{
  font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:var(--tr-hero);
  font-weight:var(--w-semi);max-width:var(--m-hero);margin-bottom:1rem}
[data-flow="hero"] p,.hero-body p{
  font-size:var(--t-lead);line-height:var(--lh-lead);max-width:52ch;font-weight:var(--w-reg)}

[data-flow="build"] h1,[data-flow="climax"] h1{
  font-size:var(--t-head-strong);line-height:var(--lh-head);letter-spacing:var(--tr-head);
  font-weight:var(--w-semi);max-width:var(--m-head)}
[data-flow="breathe"] h1,[data-flow="transition"] h1,[data-flow="rest"] h1{
  font-size:var(--t-head-quiet);line-height:var(--lh-head);letter-spacing:var(--tr-head);
  font-weight:var(--w-semi);max-width:24ch}
[data-flow] .text-center h1{margin-inline:auto}

[data-flow] h3{font-size:var(--t-sub);line-height:var(--lh-sub);letter-spacing:var(--tr-sub);
  font-weight:var(--w-semi);margin-bottom:.5rem}

[data-flow] p{font-size:var(--t-body);line-height:var(--lh-body);
  max-width:var(--m-body);margin-bottom:1.15rem}
[data-flow] h1 + p{font-size:var(--t-lead);line-height:var(--lh-lead);max-width:var(--m-lead)}
[data-flow] li{font-size:var(--t-body);line-height:1.65;max-width:60ch}
[data-flow] .misi li{font-size:var(--t-card);line-height:1.6;margin-bottom:.6rem}

[data-flow] .eyebrow{font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-semi);
  letter-spacing:var(--tr-caps);text-transform:uppercase;margin-bottom:.85rem;max-width:none}

[data-flow] .card h3{font-size:var(--t-card-title);line-height:var(--lh-tight);
  letter-spacing:var(--tr-sub);font-weight:var(--w-semi);margin-bottom:.2rem;max-width:none}
[data-flow] .card .kicker{font-size:var(--t-kicker);line-height:1.4;font-weight:var(--w-med);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:.75rem}
[data-flow] .card p:not(.kicker){font-size:var(--t-card);line-height:var(--lh-card);
  max-width:none;margin-bottom:1rem}
[data-flow] .more{font-size:.85rem;font-weight:var(--w-semi);letter-spacing:var(--tr-small)}

.nav-links a{font-size:var(--t-nav);font-weight:var(--w-med);letter-spacing:var(--tr-small)}
.nav-links a.active{font-weight:var(--w-semi)}
.brand{font-weight:700;letter-spacing:-.02em}
.btn{font-size:var(--t-btn);font-weight:var(--w-semi);letter-spacing:var(--tr-small);
  line-height:1.2;text-transform:none}

[data-flow="close"] h5{font-size:.78rem;font-weight:var(--w-semi);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:1.1rem}
[data-flow="close"] p,[data-flow="close"] a{font-size:.9rem;line-height:1.7;max-width:46ch}
[data-flow="close"] .copyright{font-size:var(--t-legal);letter-spacing:var(--tr-small)}

[data-flow="hero"],[data-flow="rest"],[data-flow="close"]{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[data-flow="rest"] h1{font-weight:var(--w-semi)}
[data-flow="rest"] p{font-weight:var(--w-reg)}

@media (max-width:767.98px){
  :root{--lh-hero:1.14;--lh-head:1.22;--lh-body:1.68;
        --tr-hero:-.015em;--tr-head:-.008em}
  [data-flow] h1,[data-flow] p,[data-flow] li{max-width:none}
  [data-flow="hero"] h1,.hero-body h1{max-width:14ch}
  [data-flow] .eyebrow{letter-spacing:.12em}
}
@media (max-width:400px){:root{--tr-caps:.10em}}

:root{
  --rail:1280px; --w-standard:1140px; --w-reading:44rem; --w-focus:38rem;
  --gutter:clamp(20px,3.5vw,48px);
  --gap-col-wide:clamp(2rem,4.5vw,5rem);
  --gap-col-tight:clamp(1.75rem,3.5vw,3.5rem);
  --gap-grid:clamp(1.5rem,2.2vw,2rem);
}
.container{width:min(100% - (var(--gutter)*2),var(--rail));margin-inline:auto}
[data-flow="breathe"] > .container,
[data-flow="transition"] > .container,
[data-flow="rest"] > .container{max-width:var(--w-standard)}

[data-flow="hero"]{min-height:min(78vh,660px)}
.hero-body{padding-block:clamp(4.5rem,10vh,7rem) clamp(5rem,11vh,7.5rem)}
.hero-body h1{margin-inline-start:-.02em}

[data-flow="breathe"] .split{grid-template-columns:44fr 56fr;gap:var(--gap-col-wide)}
[data-flow="rest"] .split{grid-template-columns:54fr 46fr;gap:var(--gap-col-tight)}
[data-flow="breathe"] .split > img{aspect-ratio:4/3}
[data-flow="rest"] .split > img{aspect-ratio:3/2}

[data-flow="transition"] .vm{grid-template-columns:38fr 62fr;
  gap:clamp(2rem,4vw,4rem);align-items:start}
@media (min-width:900px){
  [data-flow="transition"] .vm > :last-child{
    padding-left:clamp(2rem,4vw,4rem);border-left:1px solid var(--jpb-border-light)}
}

[data-flow="build"] .grid-3{grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
[data-flow="climax"] .grid-3{grid-template-columns:1.15fr 1fr 1fr;gap:var(--gap-grid)}
[data-flow="build"] .card-media{aspect-ratio:4/3}
[data-flow="climax"] .card-media{aspect-ratio:auto;height:clamp(170px,17vw,220px)}
[data-flow] .card-body{padding:clamp(1.25rem,1.6vw,1.6rem) clamp(1.3rem,1.7vw,1.65rem)
  clamp(1.4rem,1.8vw,1.75rem);display:flex;flex-direction:column;flex:1}
[data-flow] .card .more{margin-top:auto}

[data-flow="climax"] .intro{max-width:var(--w-focus);margin-inline:auto}
[data-flow="climax"] .intro p{max-width:none}
[data-flow="build"] .section-head{display:flex;align-items:flex-end;
  justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:0}
[data-flow="build"] .section-head h1{margin-bottom:0}
[data-flow="build"] .section-head .btn{flex:none}

[data-flow="close"] .foot{grid-template-columns:1.5fr .9fr 1.1fr;gap:clamp(2rem,4vw,4rem)}

@media (max-width:1366px){
  [data-flow="breathe"] .split{grid-template-columns:42fr 58fr}
  [data-flow="rest"] .split{grid-template-columns:56fr 44fr}
}
@media (max-width:1120px){
  [data-flow="climax"] .grid-3{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1023.98px){
  [data-flow="breathe"] .split,[data-flow="rest"] .split,
  [data-flow="transition"] .vm{grid-template-columns:1fr;gap:clamp(1.75rem,4vw,2.5rem)}
  [data-flow="transition"] .vm > :last-child{padding-left:0;border-left:0;
    padding-top:1.5rem;border-top:1px solid var(--jpb-border-light)}
  [data-flow="build"] .grid-3,[data-flow="climax"] .grid-3{grid-template-columns:1fr}
  [data-flow] .card{flex-direction:row;align-items:stretch}
  [data-flow] .card-media{flex:0 0 38%;aspect-ratio:auto;height:auto;min-height:190px}
  [data-flow] .card-body{flex:1}
  [data-flow="close"] .foot{grid-template-columns:1fr 1fr}
  [data-flow="close"] .foot > :first-child{grid-column:1/-1}
}

@media (max-width:639.98px){
  [data-flow] .card{flex-direction:column}
  [data-flow] .card-media{flex:none;width:100%;aspect-ratio:16/10;min-height:0;height:auto}
  [data-flow="close"] .foot{grid-template-columns:1fr}
  [data-flow="breathe"] .split > img{order:2}
  [data-flow] .btn{width:auto}
}

@media (min-width:1600px){:root{--gutter:56px}}

:root{
  --s-1:.35rem; --s-2:.75rem; --s-3:1rem; --s-4:1.35rem;
  --s-5:1.75rem; --s-6:2.25rem; --s-7:3rem;
  --sec-tight:clamp(2.5rem,4.5vw,3.5rem);
  --sec-base:clamp(3rem,5.5vw,4.5rem);
  --sec-open:clamp(3.5rem,6.5vw,5.5rem);
}

[data-flow="breathe"]{padding-block:var(--sec-open) var(--sec-tight)}
[data-flow="transition"]{padding-block:var(--sec-tight) var(--sec-base)}
[data-flow="build"]{padding-block:var(--sec-open) var(--sec-base)}
[data-flow="rest"]{padding-block:var(--sec-base)}
[data-flow="climax"]{padding-block:var(--sec-open) var(--sec-base)}
[data-flow="close"]{padding-block:var(--sec-base) var(--s-6)}
[data-flow="close"] .copyright{margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:1.5rem}

[data-flow] .eyebrow{margin-bottom:var(--s-2)}
[data-flow] .eyebrow::after{margin-top:.45rem}

[data-flow] h1{margin-bottom:.55em}
[data-flow] h3{margin-bottom:.45em}
[data-flow] .card h3{margin-bottom:.18em}

[data-flow] p{margin-bottom:1em}
[data-flow] p:last-child{margin-bottom:0}
[data-flow] .misi li{margin-bottom:var(--s-2)}
[data-flow] .misi li:last-child{margin-bottom:0}

[data-flow] .btn-row{margin-top:var(--s-5)}
[data-flow] p:has(+ .btn-row){margin-bottom:0}

[data-flow="build"] .grid-3,
[data-flow="climax"] .grid-3{margin-top:clamp(2.25rem,3.5vw,3rem)}
[data-flow="climax"] .intro{margin-bottom:clamp(2.25rem,3.5vw,3.25rem)}
[data-flow="transition"] .vm{margin-top:clamp(2rem,3vw,2.75rem)}

[data-flow="breathe"] .split{gap:clamp(2rem,3.8vw,4rem)}
[data-flow="rest"] .split{gap:clamp(1.75rem,3.2vw,3.25rem)}

[data-flow] .card .kicker{margin-bottom:var(--s-2)}
[data-flow] .card p:not(.kicker){margin-bottom:var(--s-4)}

.hero-body{padding-block:clamp(4rem,9vh,6rem) clamp(4rem,9vh,6rem)}

@media (max-width:767.98px){
  :root{--sec-tight:2.25rem;--sec-base:2.75rem;--sec-open:3.25rem;--gap-grid:1.25rem}
  [data-flow] .btn-row{margin-top:var(--s-4)}
  [data-flow="build"] .grid-3,[data-flow="climax"] .grid-3{margin-top:1.75rem}
  [data-flow="climax"] .intro{margin-bottom:1.75rem}
  [data-flow="transition"] .vm{margin-top:1.5rem}
  [data-flow="breathe"] .split,[data-flow="rest"] .split{gap:1.5rem}
  .hero-body{padding-block:3.5rem 3.75rem}
  [data-flow="close"] .copyright{margin-top:1.75rem}
}

[data-flow="breathe"]{background-color:var(--jpb-warm-white)}
[data-flow="build"]{background-color:var(--jpb-white)}

[data-flow="transition"]{border-block:0;background-color:var(--jpb-ivory)}

[data-flow="breathe"]::before{height:88px;
  background:linear-gradient(180deg,rgba(11,31,58,.055) 0%,rgba(11,31,58,0) 100%)}

[data-flow="rest"]::before{content:none}

[data-flow="climax"]::before{height:64px;
  background:linear-gradient(180deg,rgba(11,31,58,.07) 0%,transparent 100%)}

[data-flow="rest"]{background-color:var(--jpb-navy-900);
  background-image:radial-gradient(circle at 72% 18%,
    rgba(52,127,190,.12) 0%,transparent 46%)}
[data-flow="close"]{background-color:var(--jpb-navy-950);background-image:none}

[data-flow="close"]::before{height:112px;
  background:linear-gradient(180deg,var(--jpb-ivory) 0%,
    rgba(16,43,78,.45) 48%,transparent 100%);opacity:1}

[data-flow] .card{box-shadow:none;border:1px solid var(--jpb-border-light)}
[data-flow] .card:hover{box-shadow:0 20px 50px -20px rgba(7,23,45,.16);
  border-color:rgba(11,31,58,.16)}

[data-flow="breathe"] .split > img{
  box-shadow:0 24px 60px -28px rgba(7,23,45,.22);border:0}
[data-flow="rest"] .split > img{
  box-shadow:none;border:1px solid var(--jpb-border-dark)}

[data-flow]::before,[data-flow]::after{pointer-events:none}

@media (max-width:767.98px){
  [data-flow="rest"]{background-image:none}
  [data-flow="breathe"]::before{height:52px}
  [data-flow="climax"]::before{height:44px}
  [data-flow="close"]::before{height:76px}
  [data-flow] .card:hover{box-shadow:none}
}

[data-flow] .card-media[data-media="photo"]{
  background-color:var(--jpb-ui-neutral);overflow:hidden}
[data-flow] .card-media[data-media="photo"] img{
  width:100%;height:100%;object-fit:cover;object-position:var(--focal,center 45%)}

[data-flow] .card-media[data-media="packshot"]{
  background-color:var(--jpb-warm-white);display:grid;place-items:center;
  padding:clamp(1rem,2vw,1.75rem)}
[data-flow] .card-media[data-media="packshot"] img{
  width:auto;height:auto;max-width:100%;
  max-height:calc(100% * var(--shot-scale,1));object-fit:contain}

:root{--jpb-radius-sm:8px;--jpb-radius:10px;--jpb-radius-lg:14px}
.card{border-radius:var(--jpb-radius)}
.btn{border-radius:var(--jpb-radius-sm)}
[data-flow="breathe"] .split > img,
[data-flow="rest"] .split > img{border-radius:var(--jpb-radius-lg)}

.slides::after{
  background:
    linear-gradient(100deg,rgba(7,23,45,.55) 0%,rgba(7,23,45,.28) 42%,rgba(7,23,45,0) 68%),
    linear-gradient(180deg,rgba(7,23,45,.40) 0%,rgba(7,23,45,.22) 45%,rgba(11,31,58,.58) 100%)}
.slides img{object-fit:cover;object-position:var(--focal,center 42%)}

[data-flow] img{filter:none!important;mix-blend-mode:normal!important}
[data-flow="breathe"] .split > img{object-position:var(--focal,center 40%)}
[data-flow="rest"] .split > img{object-position:var(--focal,center 45%)}

[data-flow] .card-media{overflow:hidden}
[data-flow] .split > img{background-color:var(--jpb-ui-neutral)}

@media (max-width:767.98px){
  .slides::after{background:linear-gradient(180deg,
    rgba(7,23,45,.46) 0%,rgba(7,23,45,.30) 40%,rgba(11,31,58,.70) 100%)}
  .slides img{object-position:var(--focal-mobile,62% 38%)}
  [data-flow] .card-media[data-media="packshot"]{padding:.9rem}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.72rem 1.5rem;border-radius:var(--jpb-radius-sm);
  box-shadow:none;white-space:nowrap;
  transition:background-color .22s var(--jpb-ease),border-color .22s var(--jpb-ease),
             color .22s var(--jpb-ease),transform .12s var(--jpb-ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

[data-flow="rest"] .btn-primary{background:var(--jpb-gold-400);
  border-color:var(--jpb-gold-400);color:var(--jpb-navy-950)}
[data-flow="rest"] .btn-primary:hover{background:var(--jpb-gold-soft);
  border-color:var(--jpb-gold-soft);color:var(--jpb-navy-950)}

[data-flow="breathe"] .btn-primary{background:var(--jpb-blue-700);
  border-color:var(--jpb-blue-700);color:var(--jpb-white)}
[data-flow="breathe"] .btn-primary:hover{background:var(--jpb-navy-800);
  border-color:var(--jpb-navy-800)}

[data-flow="hero"] .btn-ghost{background:transparent;color:var(--jpb-white);
  border-color:rgba(255,255,255,.38)}
[data-flow="hero"] .btn-ghost:hover{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.70);color:var(--jpb-white)}

.more,.nav-cta{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;
  font-weight:600;letter-spacing:.01em;color:var(--jpb-blue-600);
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color .22s var(--jpb-ease),border-color .22s var(--jpb-ease)}
.more::after,.nav-cta::after{content:"→";display:inline-block;font-weight:400;
  transition:transform .22s var(--jpb-ease)}
.more:hover,.nav-cta:hover{color:var(--jpb-navy-800);border-bottom-color:currentColor}
.more:hover::after,.nav-cta:hover::after{transform:translateX(3px)}
[data-flow] .card .more{align-self:flex-start}

.nav-cta{color:var(--jpb-text-secondary);font-weight:500}
.nav-cta:hover{color:var(--jpb-navy-900)}

.btn:focus-visible,.more:focus-visible,.nav-cta:focus-visible{
  outline:2px solid var(--jpb-gold-500);outline-offset:3px;border-radius:3px}
[data-flow="rest"] .btn:focus-visible,
[data-flow="hero"] .btn:focus-visible{outline-color:var(--jpb-gold-soft)}

@media (max-width:767.98px){
  .btn{min-height:46px;padding:.78rem 1.4rem;white-space:normal}
  [data-flow] .btn-row{gap:.65rem}
  .nav-cta{font-size:.85rem}
}

:root{--ease-motion:cubic-bezier(.22,1,.36,1);--dur-micro:.22s;
  --dur-reveal:.62s;--dur-hero:.72s;--shift:14px}

.has-js [data-reveal]{opacity:0;transform:translateY(var(--shift));
  transition:opacity var(--dur-reveal) var(--ease-motion),
             transform var(--dur-reveal) var(--ease-motion)}
.has-js [data-reveal].in{opacity:1;transform:none}

.has-js [data-reveal="stagger"]{opacity:1;transform:none}
.has-js [data-reveal="stagger"] > *{opacity:0;transform:translateY(var(--shift));
  transition:opacity var(--dur-reveal) var(--ease-motion),
             transform var(--dur-reveal) var(--ease-motion)}
.has-js [data-reveal="stagger"].in > *{opacity:1;transform:none}
.has-js [data-reveal="stagger"].in > *:nth-child(2){transition-delay:70ms}
.has-js [data-reveal="stagger"].in > *:nth-child(3){transition-delay:140ms}

.has-js [data-reveal="hero"]{opacity:1;transform:none}
.has-js [data-reveal="hero"] > .container > *{opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-hero) var(--ease-motion),
             transform var(--dur-hero) var(--ease-motion)}
.has-js [data-reveal="hero"].in > .container > *{opacity:1;transform:none}
.has-js [data-reveal="hero"].in > .container > *:nth-child(2){transition-delay:80ms}
.has-js [data-reveal="hero"].in > .container > *:nth-child(3){transition-delay:160ms}

[data-flow] .card{transition:transform var(--dur-micro) var(--ease-motion),
  box-shadow .3s var(--ease-motion)}
[data-flow] .card:hover{transform:translateY(-3px);border-color:var(--jpb-border-light)}
[data-flow] .card img{transition:none}

.more,.nav-cta{transition:border-color var(--dur-micro) var(--ease-motion)}
.more:hover,.nav-cta:hover{color:inherit}

.navbar{border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-motion),box-shadow .3s var(--ease-motion),
             background-color .3s var(--ease-motion)}
.navbar.is-scrolled{border-bottom-color:var(--jpb-border-light);
  box-shadow:0 1px 0 rgba(15,35,60,.04);background-color:rgba(255,255,255,.97)}

@media (max-width:767.98px){
  :root{--shift:8px;--dur-reveal:.48s;--dur-hero:.55s}
  .has-js [data-reveal="stagger"].in > *,
  .has-js [data-reveal="hero"].in > .container > *{transition-delay:0ms!important}
  [data-flow] .card:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .has-js [data-reveal],.has-js [data-reveal].in,
  .has-js [data-reveal="stagger"] > *,
  .has-js [data-reveal="hero"] > .container > *{
    opacity:1!important;transform:none!important;transition:none!important}
  [data-flow] .card:hover,.btn:hover,.btn:active{transform:none!important}
  .more:hover::after,.nav-cta:hover::after{transform:none!important}
}

@media (min-width:900px) and (max-width:1023.98px){
  [data-flow="breathe"] .split{grid-template-columns:44fr 56fr}
  [data-flow="rest"] .split{grid-template-columns:54fr 46fr}
  [data-flow="transition"] .vm{grid-template-columns:38fr 62fr}
  [data-flow="build"] .grid-3,[data-flow="climax"] .grid-3{grid-template-columns:repeat(3,1fr)}
  [data-flow] .card{flex-direction:column}
  [data-flow] .card-media{flex:none;aspect-ratio:4/3;min-height:0;height:auto}
  [data-flow="close"] .foot{grid-template-columns:1.5fr .9fr 1.1fr}
  [data-flow="close"] .foot > :first-child{grid-column:auto}
  .split img{aspect-ratio:auto}
}

.nav-toggle{display:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;background:none;border:0;
  cursor:pointer;color:var(--jpb-navy-900)}
.nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;
  position:relative;transition:background-color .2s var(--ease-motion)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;
  width:20px;height:1.5px;background:currentColor;
  transition:transform .26s var(--ease-motion)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:var(--nav-h,64px) 0 0 0;
  background:var(--jpb-navy-950);
  padding:clamp(1.5rem,5vw,2.25rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;display:none;z-index:60}
.mobile-menu.is-open{display:block}
.mobile-menu a{display:flex;align-items:center;min-height:52px;font-size:1.02rem;
  font-weight:500;color:var(--jpb-text-on-dark);
  border-bottom:1px solid rgba(255,255,255,.09)}
.mobile-menu a.active{color:var(--jpb-gold-400)}
.mobile-menu .menu-contact{margin-top:1.75rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.09);font-size:.88rem;line-height:1.7;
  color:var(--jpb-text-on-dark-secondary)}
.mobile-menu .menu-contact a{min-height:44px;font-size:.88rem;
  color:var(--jpb-text-on-dark-secondary);border:0}
body.menu-open{overflow:hidden}

@media (max-width:899.98px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .topbar{display:none}
  [data-flow="breathe"] .split,[data-flow="rest"] .split,
  [data-flow="transition"] .vm{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.25rem)}
  [data-flow="build"] .grid-3,[data-flow="climax"] .grid-3{grid-template-columns:1fr}
  [data-flow] .card{flex-direction:row;align-items:stretch}
  [data-flow] .card-media{flex:0 0 38%;aspect-ratio:auto;min-height:190px}
  .more,.nav-cta{min-height:44px;padding-block:.5rem}
  [data-flow] .card .more{margin-block:-.5rem 0}
}

@media (max-width:639.98px){
  [data-flow="hero"]{min-height:min(74vh,560px)}
  @supports (height:100svh){[data-flow="hero"]{min-height:min(74svh,560px)}}
  [data-flow="breathe"] .split > img{aspect-ratio:4/3}
  [data-flow="rest"] .split > img{aspect-ratio:3/2}
  [data-flow] .card{flex-direction:column;border-radius:8px}
  [data-flow] .card-media{flex:none;width:100%;aspect-ratio:16/10;min-height:0;height:auto}
  [data-flow="climax"]{background-image:linear-gradient(180deg,
    var(--jpb-white) 0%,var(--jpb-ivory) 100%)}
  [data-flow="close"] .foot{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem}
  [data-flow="close"] .foot > :first-child{grid-column:1/-1}
  [data-flow="close"] .foot a{display:flex;align-items:center;min-height:38px}
  [data-flow="close"] p,[data-flow="close"] a{max-width:none;overflow-wrap:anywhere}
}
@media (max-width:639.98px) and (orientation:landscape){
  [data-flow="hero"]{min-height:0}
}

@media (max-width:360px){
  :root{--gutter:18px}
  [data-flow="hero"] h1,.hero-body h1{max-width:none}
  [data-flow] .btn{padding-inline:1.15rem}
  [data-flow="close"] .foot{grid-template-columns:1fr}
}

.navbar{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
[data-flow="close"]{padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom))}
h1,h2,h3,p,a{overflow-wrap:break-word}

@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.43%;
  line-gap-override:0%;
}
body{font-family:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0}

.skip-link{position:absolute;left:var(--gutter,20px);top:-100px;z-index:100;
  background:var(--jpb-navy-950);color:#fff;padding:.75rem 1.1rem;
  border-radius:var(--jpb-radius-sm);font-size:.875rem;font-weight:600;
  transition:top .18s var(--ease-motion)}
.skip-link:focus{top:.6rem}

[data-flow="build"] h2,[data-flow="climax"] h2{
  font-size:var(--t-head-strong);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);font-weight:var(--w-semi);max-width:var(--m-head)}
[data-flow="breathe"] h2,[data-flow="transition"] h2,[data-flow="rest"] h2{
  font-size:var(--t-head-quiet);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);font-weight:var(--w-semi);max-width:24ch}
[data-flow] .text-center h2{margin-inline:auto}
[data-flow] h2{margin-bottom:.55em}
[data-flow] h2 + p{font-size:var(--t-lead);line-height:var(--lh-lead);
  max-width:var(--m-lead)}
[data-flow="build"] .section-head h2{margin-bottom:0}
@media (max-width:767.98px){[data-flow] h2{max-width:none}}
@media (max-width:360px){[data-flow="hero"] h1,.hero-body h1{max-width:none}}

.mobile-menu a:focus-visible,.nav-toggle:focus-visible,.skip-link:focus-visible{
  outline:2px solid var(--jpb-gold-500);outline-offset:3px;border-radius:3px}
.mobile-menu a:focus-visible{outline-color:var(--jpb-gold-soft)}

[data-flow="close"] h3{font-size:.78rem;font-weight:var(--w-semi);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.1rem;
  line-height:1.4;color:var(--jpb-text-on-dark);max-width:none}

html,body{overflow-x:hidden;overflow-x:clip}

body.menu-open{position:fixed;width:100%;overflow:hidden}

@media (min-width:900px) and (max-width:1023.98px){
  [data-flow="transition"] .vm > :last-child{
    padding-left:clamp(2rem,4vw,4rem);
    padding-top:0;
    border-left:1px solid var(--jpb-border-light);
    border-top:0;
  }
}

.navbar{-webkit-backdrop-filter:saturate(1.2) blur(6px)}

#main,[data-flow],[id]{scroll-margin-top:calc(var(--nav-h,72px) + 12px)}

[data-flow] .btn{max-width:100%}

button,input,select,textarea{font:inherit;color:inherit}

.more:hover{color:var(--jpb-blue-600)}
[data-flow="rest"] .more:hover,
[data-flow="close"] .more:hover{color:var(--jpb-gold-soft)}

.nav-cta::after{content:none}
.nav-cta{gap:0}

[data-flow="close"] .copyright{border-top-color:rgba(255,255,255,.09)}

[data-flow] .card-media[data-media="photo"],
[data-flow] .split > img{background-color:var(--jpb-ivory)}

[data-flow] .card{position:relative}
[data-flow] .card .more{position:static}
[data-flow] .card .more::before{
  content:"";position:absolute;inset:0;z-index:1;
}

[data-flow] .card h3,
[data-flow] .card p{position:relative;z-index:2}

[data-flow="hero"]{
  position:relative; display:grid; padding:0; min-height:0;
  background:var(--jpb-navy-950); overflow:hidden;
}

.hero-art{
  grid-area:1/1; position:relative; z-index:1;
  width:100%; max-width:1774px; margin-inline:auto;
  aspect-ratio:2/1; overflow:hidden;
  background:var(--jpb-navy-950);
}
.hero-art .slides{position:absolute; inset:0}
.hero-art .slides::after{content:none}            
.hero-art .slides img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1);
}
.hero-art .slides img.on{opacity:1}

.hero-art .slides img.art-3{object-position:center bottom}

.hotspots{position:absolute; inset:0; z-index:3}
.hot{position:absolute; display:block; border-radius:6px}
.hot:focus-visible{outline:2px solid var(--jpb-gold-400); outline-offset:2px}

.hero-art[data-slide="1"] .hot-a{left:6.2%;  top:67.8%; width:10.4%; height:7.8%}
.hero-art[data-slide="1"] .hot-b{left:17.0%; top:67.8%; width:16.6%; height:7.8%}
.hero-art[data-slide="2"] .hot-a{left:5.3%;  top:64.3%; width:10.2%; height:7.0%}
.hero-art[data-slide="2"] .hot-b{left:16.0%; top:64.3%; width:16.0%; height:7.0%}
.hero-art[data-slide="3"] .hot-a{left:5.5%;  top:52.0%; width:10.6%; height:8.0%}
.hero-art[data-slide="3"] .hot-b{left:16.7%; top:52.0%; width:16.8%; height:8.0%}

.hero-dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(.5rem,1.6vw,1.25rem); z-index:4; display:flex; gap:.15rem;
}
.hero-dots button{
  width:26px; height:26px; padding:0; border:0; background:none;
  display:grid; place-items:center; cursor:pointer;
}
.hero-dots i{
  width:7px; height:7px; border-radius:50%; display:block;
  background:rgba(255,255,255,.34);
  transition:background-color .35s var(--ease-motion), transform .35s var(--ease-motion);
}
.hero-dots button[aria-selected="true"] i{
  background:var(--jpb-gold-400); transform:scale(1.28);
}
.hero-dots button:focus-visible{outline:2px solid var(--jpb-gold-400); outline-offset:1px; border-radius:50%}

@media (min-width:1024px){
  .hero-body{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
    white-space:nowrap; border:0;
  }
}

@media (max-width:1023.98px){
  [data-flow="hero"]{min-height:min(74vh,560px)}
  .hero-art{position:absolute; inset:0; max-width:none; aspect-ratio:auto}
  .hero-art .slides img,
  .hero-art .slides img.art-3{object-position:84% center}
  .hero-art .slides::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(100deg, rgba(7,23,45,.86) 0%, rgba(7,23,45,.62) 46%, rgba(7,23,45,.30) 78%),
      linear-gradient(180deg, rgba(7,23,45,.34) 0%, rgba(11,31,58,.60) 100%);
  }
  .hotspots{display:none}
  .hero-body{grid-area:1/1; position:relative; z-index:2}
  .hero-dots{bottom:.75rem}
}
@media (max-width:1023.98px){
  @supports (height:100svh){ [data-flow="hero"]{min-height:min(74svh,560px)} }
}
@media (max-width:1023.98px) and (orientation:landscape){
  [data-flow="hero"]{min-height:0}
}

@media (prefers-reduced-motion:reduce){
  .hero-art .slides img{transition:none !important; will-change:auto}
}

[data-flow="breathe"] h2 + p{
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 66ch;
}
[data-flow="breathe"] p{ max-width: 66ch; }

[data-flow="breathe"] p strong{
  font-weight: var(--w-semi);
  color: inherit;
}

[data-flow="breathe"] p:not(.eyebrow){ margin-bottom: 1.05em; }

@media (max-width: 1023.98px){
  [data-flow="breathe"] h2 + p,
  [data-flow="breathe"] p{ max-width: none; }
}

.hero-art{container-type:inline-size}

.hero-cta{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  padding-inline:1.6cqw;
  background:transparent;
  border:1.5px solid rgba(226,183,116,.85);
  border-radius:6px;
  color:#E6BC79;
  font-weight:600;
  letter-spacing:.005em;
  white-space:nowrap;
  font-size:.95rem;            
  font-size:1.47cqw;
  transition:background-color .25s var(--ease-motion),
             border-color .25s var(--ease-motion),
             color .25s var(--ease-motion);
}
.hero-cta:hover{
  background:rgba(226,183,116,.12);
  border-color:#E6BC79;
  color:#F2D6A4;
}
.hero-cta:focus-visible{outline:2px solid var(--jpb-gold-400); outline-offset:3px}

.hero-art[data-slide="1"] .hero-cta{left:6.31%; top:68.32%; height:6.65%}
.hero-art[data-slide="2"] .hero-cta{left:5.58%; top:64.26%; height:6.88%}
.hero-art[data-slide="3"] .hero-cta{left:5.80%; top:52.52%; height:7.05%}

@media (max-width:1023.98px){
  .hero-cta{display:none}
}

@media (max-width:1023.98px){
  [data-flow="hero"] .btn-ghost{
    color:#E6BC79;
    border-color:rgba(226,183,116,.85);
    background:transparent;
  }
  [data-flow="hero"] .btn-ghost:hover{
    background:rgba(226,183,116,.12);
    border-color:#E6BC79;
    color:#F2D6A4;
  }
}

.hero-desc{
  position:absolute; z-index:3; margin:0;
  color:#E1E5EA;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  text-wrap:pretty;                  
  font-size:.95rem;                  
  font-size:1.30cqw;
}

.hero-art[data-slide="1"] .hero-desc{left:6.37%; top:48.25%; width:40%}
.hero-art[data-slide="2"] .hero-desc{left:5.64%; top:43.97%; width:37%}
.hero-art[data-slide="3"] .hero-desc{left:5.86%; top:31.11%; width:35%}

@media (max-width:1023.98px){
  .hero-desc{display:none}
}

[data-flow="hero"]{
  position:relative; display:block; padding:0; min-height:0;
  background:var(--jpb-navy-950); overflow:hidden;
}

.hero-art{
  position:relative; width:100%; max-width:1774px; margin-inline:auto;
  aspect-ratio:1774 / 768;          
  overflow:hidden;
  background:var(--jpb-navy-950);   
}

.hero-art .slides{position:absolute; inset:0; z-index:1}
.hero-art .slides img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  opacity:1;                                   
  transform:translate3d(100%,0,0);             
  will-change:transform; backface-visibility:hidden;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-art .slides img.on{transform:translate3d(0,0,0)}
.hero-art .slides::after{content:none}

.hero-art::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg,
      #07172D 0%, #07172D 34%,
      rgba(7,23,45,.96) 40%, rgba(7,23,45,.74) 49%,
      rgba(7,23,45,.34) 59%, rgba(7,23,45,0) 70%),
    linear-gradient(180deg,
      rgba(7,23,45,.34) 0%, rgba(7,23,45,0) 22%,
      rgba(7,23,45,0) 74%, rgba(7,23,45,.55) 100%);
}

[data-flow="hero"] .hero-body{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center;
  width:auto; height:auto; margin:0; padding:0;
  clip:auto; clip-path:none; white-space:normal; overflow:visible;
}
[data-flow="hero"] .hero-body .container{width:min(100% - (var(--gutter)*2), var(--rail))}
[data-flow="hero"] h1{color:#fff; max-width:15ch; margin-bottom:.5em}
[data-flow="hero"] p{
  color:var(--jpb-text-on-dark-secondary);
  max-width:46ch; text-wrap:pretty; margin-bottom:0;
}
[data-flow="hero"] .btn-row{margin-top:var(--s-5)}
[data-flow="hero"] .btn-ghost{
  background:transparent; color:#E6BC79;
  border-color:rgba(226,183,116,.85);
}
[data-flow="hero"] .btn-ghost:hover{
  background:rgba(226,183,116,.12); border-color:#E6BC79; color:#F2D6A4;
}

.hero-dots{z-index:4}

@media (max-width:1023.98px){
  .hero-art{
    aspect-ratio:auto; max-width:none;
    min-height:min(76vh,580px); display:grid;
  }
  [data-flow="hero"] .hero-body{
    position:relative; inset:auto; grid-area:1/1;
    padding-block:clamp(3.5rem,9vh,5rem);
  }
  
  .hero-art .slides img{object-position:78% center}
  .hero-art::before{
    background:
      linear-gradient(100deg, rgba(7,23,45,.90) 0%, rgba(7,23,45,.66) 52%, rgba(7,23,45,.34) 86%),
      linear-gradient(180deg, rgba(7,23,45,.30) 0%, rgba(11,31,58,.66) 100%);
  }
}
@media (max-width:1023.98px){
  @supports (height:100svh){ .hero-art{min-height:min(76svh,580px)} }
}
@media (max-width:1023.98px) and (orientation:landscape){
  .hero-art{min-height:0}
}

@media (prefers-reduced-motion:reduce){
  .hero-art .slides img{transition:none !important}
}

[data-flow="breathe"] .split > img{
  object-fit: cover;
  object-position: 10% center;
}

@media (max-width: 639.98px){
  [data-flow="breathe"] .split > img{ object-position: 22% center; }
}

[data-flow="transition"]{ padding-block: var(--sec-base); }

.pf{
  display:block;
  max-width:min(900px, 100%);
}

.pf-purpose h2{ margin-bottom:clamp(1.75rem,3vw,2.5rem) }

.pf-sub{
  font-size:.76rem; font-weight:var(--w-semi);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--jpb-text-muted);
  margin-bottom:.9rem; max-width:none;
}
.pf-sub-mission{ margin-top:clamp(2rem,3.5vw,2.75rem) }

.pf-vision{
  font-size:clamp(1.12rem, 1.02rem + .45vw, 1.38rem);
  line-height:1.52;
  font-weight:var(--w-med);
  color:var(--jpb-text-primary);
  max-width:44ch;
  margin:0;
  padding-left:clamp(1rem,1.6vw,1.35rem);
  border-left:2px solid rgba(193,154,75,.55);
}

.pf-mission{ list-style:none; margin:0; padding:0 }
.pf-mission li{
  display:grid;
  grid-template-columns:2.4rem 1fr;
  gap:.25rem 1rem;
  align-items:start;
  padding-block:clamp(.85rem,1.4vw,1.1rem);
  border-top:1px solid var(--jpb-border-light);
  max-width:none;
}
.pf-mission li:first-child{ border-top:0; padding-top:0 }
.pf-num{
  font-size:.78rem; font-weight:var(--w-semi);
  letter-spacing:.06em; line-height:1.9;
  color:var(--jpb-gold-ink);
  font-variant-numeric:tabular-nums;
}
.pf-mission p{
  margin:0; max-width:62ch;
  font-size:var(--t-card); line-height:1.62;
}
.pf-mission strong{ font-weight:var(--w-semi); color:var(--jpb-text-primary) }

@media (max-width:899.98px){
  .pf{ max-width:none }
  .pf-vision, .pf-mission p{ max-width:none }
}
@media (max-width:639.98px){
  .pf-mission li{ grid-template-columns:2rem 1fr; gap:.2rem .75rem }
}

[data-flow="build"] .grid-3{ align-items:stretch }

[data-flow="build"] .card{
  display:flex; flex-direction:column;
  height:100%; overflow:hidden;
  border-radius:var(--jpb-radius);
}

[data-flow="build"] .card-media{
  flex:0 0 auto;
  width:100%; height:auto; min-height:0;
  aspect-ratio:1 / 1;
  border-radius:0;                 
}
[data-flow="build"] .card-media[data-media="photo"] img{
  width:100%; height:100%; object-fit:cover;
}

[data-flow="build"] .card-body{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  padding:clamp(1.5rem, 1.9vw, 1.75rem);
}
[data-flow="build"] .card h3{ margin-bottom:.16em }
[data-flow="build"] .card .kicker{ margin-bottom:.7rem }
[data-flow="build"] .card p:not(.kicker){ margin-bottom:1.15rem }
[data-flow="build"] .card .more{ margin-top:auto; align-self:flex-start }

@media (max-width:899.98px){
  [data-flow="build"] .grid-3{ grid-template-columns:repeat(2,1fr) }
  [data-flow="build"] .card{ flex-direction:column }
  [data-flow="build"] .card-media{
    flex:0 0 auto; width:100%; height:auto;
    min-height:0; aspect-ratio:1 / 1;
  }
}

@media (max-width:639.98px){
  [data-flow="build"] .grid-3{ grid-template-columns:1fr }
  [data-flow="build"] .card-media{ aspect-ratio:1 / 1 }
}

[data-flow="rest"]{
  background-color:var(--jpb-warm-white);
  background-image:
    radial-gradient(58% 72% at 82% 42%,
      rgba(52,127,190,.09) 0%, transparent 62%);
  padding-block:var(--sec-base);
}
[data-flow="rest"]::before{ content:none }

[data-flow="rest"] h2{ color:var(--jpb-text-primary) }
[data-flow="rest"] h3{ color:var(--jpb-text-primary) }
[data-flow="rest"] p{ color:var(--jpb-text-secondary); font-weight:var(--w-reg) }
[data-flow="rest"] .eyebrow{ color:var(--jpb-gold-ink) }
[data-flow="rest"] .eyebrow::after{ background:var(--jpb-gold-500) }
[data-flow="rest"] strong{ font-weight:var(--w-semi); color:var(--jpb-text-primary) }

.dg{
  display:grid;
  grid-template-columns:45fr 55fr;
  grid-template-rows:auto 1fr;
  column-gap:clamp(2.5rem,4.5vw,4.5rem);
  row-gap:clamp(1.75rem,3vw,2.5rem);
  align-items:start;
}
.dg-head  { grid-column:1; grid-row:1 }
.dg-rest  { grid-column:1; grid-row:2 }
.dg-visual{ grid-column:2; grid-row:1 / span 2; align-self:center; margin:0 }

.dg-head h2{ margin-bottom:.5em; max-width:18ch }
.dg-intro{
  font-size:var(--t-lead); line-height:var(--lh-lead);
  max-width:52ch; margin-bottom:0;
}

.dg-features{ list-style:none; margin:0; padding:0 }
.dg-features li{
  display:grid; grid-template-columns:2.4rem 1fr;
  gap:0 1rem; align-items:start;
  padding-block:clamp(1rem,1.6vw,1.25rem);
  border-top:1px solid var(--jpb-border-light);
  max-width:none;
}
.dg-features li:first-child{ border-top:0; padding-top:0 }
.dg-num{
  font-size:.78rem; font-weight:var(--w-semi); letter-spacing:.06em;
  line-height:1.85; color:var(--jpb-gold-ink);
  font-variant-numeric:tabular-nums;
}
.dg-features h3{
  font-size:var(--t-card-title); line-height:1.3;
  letter-spacing:var(--tr-sub); font-weight:var(--w-semi);
  margin:0 0 .3rem; max-width:none;
}
.dg-features p{
  margin:0; font-size:var(--t-card); line-height:1.62; max-width:48ch;
}

.dg-closing{
  margin:clamp(1.75rem,3vw,2.25rem) 0 0;
  padding-left:clamp(1rem,1.6vw,1.35rem);
  border-left:2px solid rgba(35,103,166,.45);
  font-size:var(--t-card); line-height:1.68; max-width:52ch;
}

.dg-visual img{
  display:block; width:100%; height:auto;
  border-radius:var(--jpb-radius-lg);
  box-shadow:0 26px 60px -30px rgba(7,23,45,.32);
  border:0;
}

@media (max-width:899.98px){
  .dg{ grid-template-columns:1fr; grid-template-rows:auto auto auto }
  .dg-head  { grid-column:1; grid-row:1 }
  .dg-visual{ grid-column:1; grid-row:2; align-self:stretch }
  .dg-rest  { grid-column:1; grid-row:3 }
  .dg-head h2{ max-width:none }
  .dg-intro, .dg-features p, .dg-closing{ max-width:none }
  .dg-visual img{ max-width:520px; margin-inline:auto }
}
@media (max-width:639.98px){
  .dg-features li{ grid-template-columns:2rem 1fr; gap:0 .75rem }
  .dg-visual img{ max-width:none; border-radius:var(--jpb-radius) }
}

.prog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-grid);
  align-items:stretch;
  margin-top:clamp(2.25rem,3.5vw,3rem);
}

.prog{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  row-gap:14px;
}

.prog-media{
  aspect-ratio:4 / 5;
  border-radius:var(--jpb-radius-lg);
  overflow:hidden;
  background:var(--jpb-ivory);
}
.prog-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  display:block;
}

.prog-card{
  display:flex; flex-direction:column;
  background:var(--jpb-white);
  border:1px solid var(--jpb-border-light);
  border-radius:var(--jpb-radius);
  padding:clamp(1.35rem,1.8vw,1.6rem);
  transition:border-color .25s var(--ease-motion);
}
.prog-card h3{
  font-size:var(--t-card-title); line-height:var(--lh-tight);
  letter-spacing:var(--tr-sub); font-weight:var(--w-semi);
  margin:0 0 .16em; max-width:none;
}
.prog-card .kicker{
  font-size:var(--t-kicker); line-height:1.4; font-weight:var(--w-med);
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--jpb-blue-600); margin:0 0 .7rem; max-width:none;
}
.prog-card p:not(.kicker){
  font-size:var(--t-card); line-height:var(--lh-card);
  margin:0 0 1.15rem; max-width:none;
}
.prog-card .more{ margin-top:auto; align-self:flex-start }

.prog .more::before{ content:""; position:absolute; inset:0; z-index:1 }
.prog:hover .prog-card{ border-color:rgba(11,31,58,.16) }

@media (max-width:899.98px){
  .prog-grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:639.98px){
  .prog-grid{ grid-template-columns:1fr; gap:clamp(2rem,5vw,2.5rem) }
  .prog-media{ border-radius:var(--jpb-radius) }
  .prog{ row-gap:12px }
}

.prog-media img[src="program-mentoring.webp"]{ object-position:center center }

.pf{
  display:grid;
  grid-template-columns:58fr 42fr;
  grid-template-rows:auto 1fr;
  column-gap:clamp(2.5rem,4.5vw,4.5rem);
  row-gap:clamp(1.75rem,3vw,2.5rem);
  align-items:start;
  max-width:none;
}
.pf-head         { grid-column:1; grid-row:1 }
.pf-mission-block{ grid-column:1; grid-row:2 }
.pf-visual       { grid-column:2; grid-row:1 / span 2; align-self:start; margin:0 }

.pf-visual img{
  display:block; width:100%; height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover; object-position:center center;
  border-radius:var(--jpb-radius-lg);
  box-shadow:0 24px 56px -30px rgba(7,23,45,.30);
  border:0;
}

.pf-vision{ max-width:38ch }
.pf-mission p{ max-width:52ch }

@media (max-width:899.98px){
  .pf{ grid-template-columns:1fr; grid-template-rows:auto auto auto }
  .pf-head         { grid-column:1; grid-row:1 }
  .pf-visual       { grid-column:1; grid-row:2; align-self:stretch }
  .pf-mission-block{ grid-column:1; grid-row:3 }
  .pf-vision, .pf-mission p{ max-width:none }
  .pf-visual img{ max-width:520px; margin-inline:auto }
}
@media (max-width:639.98px){
  .pf-visual img{ max-width:none; border-radius:var(--jpb-radius) }
}

[data-flow="transition"] > .container{ max-width:var(--rail) }

.pf{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  grid-template-rows:auto auto;
  column-gap:clamp(3rem,4vw,4.5rem);
  row-gap:clamp(1.5rem,2.5vw,2rem);
  align-items:start;
  
}
.pf > *{ min-width:0 }                 

.pf-visual       { grid-column:1; grid-row:1 / span 2; align-self:center; margin:0 }
.pf-head         { grid-column:2; grid-row:1 }
.pf-mission-block{ grid-column:2; grid-row:2 }

.pf-visual{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:20px;
  background:var(--jpb-ivory);         
  box-shadow:0 24px 56px -32px rgba(7,23,45,.28);
}
.pf-visual img{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  font-size:.8rem; color:var(--jpb-text-muted);   
}

.pf-head h2{ max-width:none; margin-bottom:clamp(1.5rem,2.5vw,2rem) }
.pf-vision{ max-width:46ch }
.pf-mission p{ max-width:56ch }

@media (max-width:959.98px){
  .pf{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto;
    row-gap:clamp(1.75rem,4vw,2.5rem);
  }
  .pf-head         { grid-column:1; grid-row:1 }
  .pf-visual       { grid-column:1; grid-row:2; align-self:stretch }
  .pf-mission-block{ grid-column:1; grid-row:3 }
  .pf-vision, .pf-mission p{ max-width:none }
  .pf-visual{ max-width:560px; margin-inline:auto }
}
@media (max-width:639.98px){
  .pf-visual{ max-width:none; border-radius:16px }
  .pf-mission li{ grid-template-columns:2rem 1fr; gap:.2rem .75rem }
}

[data-flow="breathe"] .split{
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  align-items:start;
}
[data-flow="breathe"] .split > *{ min-width:0 }

.about-visual{
  width:100%;
  aspect-ratio:4 / 3;          
  height:auto;
  overflow:hidden;
  border-radius:20px;
  margin:0;
  align-self:start;
  margin-top:clamp(1rem,2.5vw,2.5rem);   
  background:var(--jpb-ivory);
  box-shadow:0 24px 56px -32px rgba(7,23,45,.26);
}
.about-visual img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:12% center;  
  border-radius:0;
  box-shadow:none;
  border:0;
  aspect-ratio:auto;
  font-size:.8rem; color:var(--jpb-text-muted);
}

@media (max-width:959.98px){
  [data-flow="breathe"] .split{ grid-template-columns:minmax(0,1fr) }
  .about-visual{
    order:0; margin-top:0;
    max-width:560px; margin-inline:auto;
  }
}
@media (max-width:639.98px){
  .about-visual{ max-width:none; border-radius:16px }
  .about-visual img{ object-position:20% center }
}

@media (max-width: 639.98px){

  

  
  .hero-art{ min-height:0 }
  [data-flow="hero"] .hero-body{
    padding-block:clamp(2.75rem, 8vh, 3.75rem) clamp(2.5rem, 7vh, 3.25rem);
  }

  [data-flow="hero"] h1,
  .hero-body h1{
    font-size:clamp(2.65rem, 11.2vw, 3rem);   
    line-height:1.1;
    letter-spacing:-.018em;
    font-weight:var(--w-semi);
    max-width:14ch;                            
    margin-bottom:.42em;
  }

  [data-flow="hero"] p,
  .hero-body p{
    font-size:clamp(1.125rem, 4.8vw, 1.25rem); 
    line-height:1.6;
    max-width:34ch;
  }

  [data-flow="hero"] .btn-row{ margin-top:1.5rem }
  [data-flow="hero"] .btn{
    min-height:44px;
    padding:.68rem 1.3rem;
    font-size:.875rem;
  }

  

  [data-flow="transition"] .eyebrow{
    font-size:.82rem;                          
    letter-spacing:.12em;
  }

  [data-flow="transition"] h2{
    font-size:clamp(2rem, 8.6vw, 2.25rem);     
    line-height:1.15;
    letter-spacing:-.012em;
    margin-bottom:1.25rem;
  }

  .pf-sub{
    font-size:1.2rem;                          
    letter-spacing:.06em;
    line-height:1.3;
    margin-bottom:.75rem;
  }

  .pf-vision{
    font-size:clamp(1.125rem, 4.7vw, 1.25rem); 
    line-height:1.6;
    padding-left:.85rem;
    border-left-width:2px;
    border-left-color:rgba(193,154,75,.45);    
  }

  
  .pf{ row-gap:1.75rem }                       
  .about-visual, .pf-visual{ margin-top:0 }

  

  .pf-sub-mission{ margin-top:.5rem }          

  .pf-mission li{
    grid-template-columns:42px minmax(0,1fr);
    gap:0 .25rem;
    padding-block:1.35rem;                     
  }
  .pf-mission li:first-child{ padding-top:0 }

  .pf-num{
    font-size:.92rem;                          
    font-weight:700;
    line-height:1.82;                          
    letter-spacing:.04em;
  }

  .pf-mission p{
    font-size:clamp(1.06rem, 4.4vw, 1.125rem); 
    line-height:1.55;
  }
}

@media (min-width: 640px){
  .eb-break{ display:none }
  .eb-nowrap::before{ content:" " }   
}

@media (max-width: 639.98px){
  [data-flow="breathe"] .eyebrow{
    line-height:1.25;                 
  }
  [data-flow="breathe"] .eyebrow::after{
    margin-top:.55rem;                
  }
  .eb-nowrap{ white-space:nowrap }    
}

@media (max-width: 639.98px){

  
  [data-flow="transition"] > .container.pf{
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-inline:24px;
    box-sizing:border-box;
  }
  [data-flow="transition"] > .container > *{ min-width:0 }

  
  .pf-visual{
    width:100%;
    max-width:none;
    margin-inline:0;
  }

  
  .pf-vision{
    padding-left:18px;
    max-width:none;
  }

  
  .pf-mission li{
    grid-template-columns:44px minmax(0,1fr);
    column-gap:14px;
    row-gap:0;
  }
  .pf-mission p{ min-width:0 }

  
  .pf-mission li{ border-top-color:var(--jpb-border-light) }
}

@media (max-width: 360px){
  [data-flow="transition"] > .container.pf{ padding-inline:20px }
  .pf-mission li{ grid-template-columns:40px minmax(0,1fr); column-gap:12px }
}

@media (min-width: 640px){
  .hl-break{ display:none }
  .hl-nowrap::before{ content:" " }    
}

@media (max-width: 639.98px){
  .hl-nowrap{ white-space:nowrap }     
  [data-flow="breathe"] h2,
  [data-flow="build"] h2{
    text-wrap:initial;                 
    max-width:none;
  }
}