:root{
  --ink:#102321;
  --muted:#667572;
  --green:#0b6b63;
  --green-deep:#082f2c;
  --green-soft:#dff0e8;
  --lime:#b6e37d;
  --cream:#f4f2ea;
  --white:#ffffff;
  --line:#dfe8e5;
  --shadow:0 30px 80px rgba(8,47,44,.14);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.section{padding:120px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.serif{font-family:"Playfair Display",serif;font-style:italic;font-weight:600}
.eyebrow{
  margin:0 0 16px;color:var(--green);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase
}
.eyebrow.light{color:#d7f2b2}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(3.35rem,7.5vw,7.2rem);line-height:.92;letter-spacing:-.065em;margin-bottom:30px}
h2{font-size:clamp(2.45rem,5vw,4.9rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:22px}
h3{font-size:1.42rem;line-height:1.25;margin-bottom:12px}
.btn{
  min-height:56px;padding:0 26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;border:1px solid transparent;transition:.25s ease
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--green);color:white;box-shadow:0 16px 34px rgba(11,107,99,.24)}
.btn-primary:hover{background:#0d7b72}
.btn-ghost{border-color:#cbd8d4;background:rgba(255,255,255,.58);backdrop-filter:blur(10px)}
.btn-light{background:var(--lime);color:var(--green-deep)}
.inline-link{display:inline-flex;gap:10px;font-weight:800;color:var(--lime);margin-top:18px}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:.3s ease
}
.site-header.scrolled{
  background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(223,232,229,.85)
}
.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{position:relative;width:42px;height:42px;display:block}
.brand-mark span{position:absolute;width:17px;height:25px;background:var(--green);border-radius:100% 0 100% 0}
.brand-mark span:nth-child(1){left:2px;top:0;transform:rotate(-20deg)}
.brand-mark span:nth-child(2){right:2px;top:1px;transform:rotate(70deg)}
.brand-mark span:nth-child(3){left:3px;bottom:0;transform:rotate(-110deg)}
.brand-mark span:nth-child(4){right:3px;bottom:0;transform:rotate(160deg);background:var(--lime)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-size:1.18rem;letter-spacing:.09em}
.brand-text small{font-size:.68rem;margin-top:5px;letter-spacing:.05em;color:var(--muted)}
.main-nav{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:700}
.main-nav a:not(.nav-cta):hover{color:var(--green)}
.nav-cta{padding:12px 18px;border-radius:999px;background:var(--green-deep);color:white}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.menu-toggle span:not(.sr-only){display:block;width:25px;height:2px;background:var(--ink);margin:5px}

/* Hero */
.hero{position:relative;overflow:hidden;padding:160px 0 0;background:linear-gradient(150deg,#f7f5ee 0%,#eef6f2 100%)}
.hero-backdrop{position:absolute;inset:0;pointer-events:none}
.aurora{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.aurora-one{width:460px;height:460px;background:rgba(182,227,125,.32);top:-140px;right:-120px}
.aurora-two{width:380px;height:380px;background:rgba(11,107,99,.14);left:-160px;bottom:60px}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(8,47,44,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(8,47,44,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 82%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--green);margin-bottom:24px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(182,227,125,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(182,227,125,0)}100%{box-shadow:0 0 0 0 rgba(182,227,125,0)}}
.hero-text{max-width:700px;font-size:1.12rem;color:var(--muted);margin-bottom:34px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px;padding-top:26px;border-top:1px solid #d8e3df}
.hero-trust div{display:flex;flex-direction:column}.hero-trust strong{font-size:.9rem}.hero-trust span{font-size:.75rem;color:var(--muted);margin-top:4px}
.hero-visual{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.glass-panel{background:rgba(255,255,255,.72);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.8);box-shadow:0 35px 90px rgba(8,47,44,.18)}
.panel-main{width:100%;max-width:470px;border-radius:32px;padding:28px;position:relative;z-index:2}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start}
.mini-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.panel-top h3{margin:4px 0 0}
.live-pill{font-size:.68rem;padding:7px 10px;border-radius:999px;background:#eaf5f0;color:var(--green);font-weight:800}
.live-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:6px}
.metric-main{padding:26px 0 18px}
.metric-main small,.metric-main strong,.metric-main span{display:block}
.metric-main strong{font-size:4.8rem;line-height:1;letter-spacing:-.06em;color:var(--green-deep)}
.metric-main span{font-size:.78rem;color:var(--muted);margin-top:5px}
.progress-list{display:flex;flex-direction:column;gap:20px}
.progress-head{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:8px}
.progress{height:9px;background:#edf2ef;border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime));border-radius:inherit}
.panel-footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.panel-footer div{padding:14px;border-radius:16px;background:#f2f6f4}
.panel-footer span,.panel-footer strong{display:block}.panel-footer span{font-size:.68rem;color:var(--muted)}.panel-footer strong{font-size:.84rem;margin-top:4px}
.mini-card{position:absolute;z-index:3;padding:14px 17px;border-radius:18px;display:flex;gap:12px;align-items:center}
.mini-card .mini-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-weight:900}
.mini-card small,.mini-card strong{display:block}.mini-card small{font-size:.65rem;color:var(--muted)}.mini-card strong{font-size:.92rem}
.mini-one{left:-30px;top:110px}.mini-two{right:-10px;bottom:90px}
.logo-strip{position:relative;z-index:3;margin-top:90px;padding:25px 0;border-top:1px solid rgba(8,47,44,.1);display:flex;justify-content:space-between;align-items:center}
.logo-strip>span{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.logo-strip div{display:flex;gap:36px}.logo-strip b{font-size:.95rem;color:#49625f}

/* Shared */
.split-heading{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;margin-bottom:60px}
.split-heading>p{color:var(--muted);font-size:1.05rem;margin:0}

/* Expertise */
.expertise{background:#fff}
.premium-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.premium-card{
  position:relative;padding:36px;border-radius:var(--radius);border:1px solid var(--line);background:white;
  transition:.35s ease;overflow:hidden
}
.premium-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.card-index{position:absolute;right:28px;top:22px;font-size:3rem;font-weight:800;color:#eef2f0;letter-spacing:-.05em}
.card-icon{width:52px;height:52px;border-radius:16px;background:var(--green-soft);display:grid;place-items:center;color:var(--green);font-size:1.35rem;font-weight:900;margin-bottom:28px}
.premium-card p{color:var(--muted)}
.premium-card ul{list-style:none;padding:0;margin:26px 0 0}
.premium-card li{padding:10px 0;border-top:1px solid var(--line);font-size:.88rem}
.card-dark{background:var(--green-deep);color:white;border-color:var(--green-deep)}
.card-dark p{color:#bed1ce}.card-dark li{border-color:rgba(255,255,255,.14)}
.card-dark .card-index{color:rgba(255,255,255,.07)}.card-dark .card-icon{background:rgba(255,255,255,.11);color:var(--lime)}
.card-badge{position:absolute;right:28px;top:24px;background:var(--lime);color:var(--green-deep);padding:7px 10px;border-radius:999px;font-size:.68rem;font-weight:800}

/* Method */
.method{background:var(--green-deep);color:white}
.method-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}
.method-copy{position:sticky;top:130px;align-self:start}
.method-copy>p:not(.eyebrow){color:#b9cfcc;font-size:1.04rem}
.timeline{border-left:1px solid rgba(255,255,255,.15)}
.timeline-item{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:30px 0 30px 34px;border-bottom:1px solid rgba(255,255,255,.12);position:relative}
.timeline-item:before{content:"";position:absolute;left:-5px;top:48px;width:9px;height:9px;border-radius:50%;background:var(--lime)}
.timeline-number{color:var(--lime);font-size:.8rem;font-weight:800;letter-spacing:.1em}
.timeline-item p{color:#b9cfcc;margin:0}

/* Results */
.results{background:#f7f8f5}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.result-card{background:white;border:1px solid var(--line);border-radius:24px;padding:30px}
.result-number{font-size:.75rem;font-weight:800;color:var(--green);letter-spacing:.1em}
.result-card h3{margin-top:34px}.result-card p{color:var(--muted);margin:0}
.impact-banner{margin-top:28px;background:linear-gradient(135deg,#0b6b63,#082f2c);color:white;border-radius:30px;padding:44px;display:flex;justify-content:space-between;gap:30px;align-items:center}
.impact-banner h3{font-size:clamp(1.8rem,3vw,3rem);max-width:760px;margin:0}

/* About */
.about-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.portrait-frame{min-height:560px;border-radius:34px;position:relative;overflow:hidden;background:linear-gradient(145deg,#d9eee5,#9ecfb8);display:grid;place-items:center}
.portrait-gradient{position:absolute;inset:0;background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.55),transparent 35%),linear-gradient(to top,rgba(8,47,44,.18),transparent 55%)}
.portrait-monogram{font-size:6rem;font-weight:800;letter-spacing:.08em;color:var(--green-deep);z-index:2}
.portrait-caption{position:absolute;left:24px;right:24px;bottom:24px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);z-index:2}
.portrait-caption small,.portrait-caption strong{display:block}.portrait-caption small{color:var(--muted);font-size:.7rem}.portrait-caption strong{margin-top:4px}
.about-copy>p:not(.eyebrow){color:var(--muted);font-size:1.03rem}
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.value-grid div{padding:20px;border:1px solid var(--line);border-radius:18px}
.value-grid span{font-size:.7rem;color:var(--green);font-weight:800}.value-grid strong{display:block;margin-top:8px}.value-grid p{font-size:.82rem;color:var(--muted);margin:4px 0 0}

/* FAQ */
.faq{background:var(--cream)}
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}
.faq-copy>p:not(.eyebrow){color:var(--muted)}
.accordion-item{border-top:1px solid #d8ddd8}
.accordion-item:last-child{border-bottom:1px solid #d8ddd8}
.accordion-item button{width:100%;background:none;border:0;padding:22px 0;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:800;color:var(--ink);cursor:pointer}
.accordion-item button i{font-style:normal;font-size:1.4rem;font-weight:400;transition:.25s ease}
.accordion-item.open button i{transform:rotate(45deg)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-content p{color:var(--muted);padding:0 40px 22px 0;margin:0}

/* Contact */
.contact{padding-top:100px}
.contact-shell{background:var(--green-deep);color:white;border-radius:34px;padding:62px;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;box-shadow:0 36px 100px rgba(8,47,44,.22)}
.contact-copy>p:not(.eyebrow){color:#bed1ce}
.contact-details{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.contact-details a{display:flex;gap:14px;align-items:center}
.contact-details a>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.contact-details small,.contact-details strong{display:block}.contact-details small{font-size:.68rem;color:#9fbab6}
.contact-form{background:white;color:var(--ink);padding:30px;border-radius:24px}
.form-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.form-head span{font-weight:800}.form-head small{color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:block;font-size:.77rem;font-weight:800;margin-bottom:14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:7px;border:1px solid #d7e2df;border-radius:12px;padding:13px 14px;background:#fbfcfb;outline:none;color:var(--ink)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(11,107,99,.1)}
.contact-form textarea{resize:vertical}.contact-form .btn{width:100%;margin-top:4px}.form-note{text-align:center;font-size:.7rem;color:var(--muted);margin:10px 0 0}

/* Footer */
.site-footer{padding:70px 0 24px}
.footer-top{display:grid;grid-template-columns:1.5fr .7fr 1fr;gap:60px}
.footer-top>div{display:flex;flex-direction:column;gap:10px}
.footer-top p{max-width:380px;color:var(--muted);font-size:.9rem;margin:12px 0 0}
.footer-top a,.footer-top span{font-size:.88rem;color:var(--muted)}
.footer-top a:hover{color:var(--green)}
.footer-bottom{border-top:1px solid var(--line);margin-top:46px;padding-top:22px;display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}

/* Legal */
.legal-hero{padding:150px 0 50px;background:linear-gradient(145deg,#f7f6ef,#eef6f3)}
.legal-shell{width:min(860px,calc(100% - 40px));margin:0 auto;padding:70px 0 100px}
.legal-shell h1{font-size:clamp(2.8rem,6vw,5rem);margin-bottom:18px}
.legal-shell h2{font-size:1.5rem;margin-top:42px;margin-bottom:14px;letter-spacing:-.02em}
.legal-shell p,.legal-shell li{color:var(--muted)}
.legal-notice{border:1px solid var(--line);border-left:4px solid var(--green);background:#f8fbfa;padding:18px 20px;border-radius:14px;margin:26px 0}
.legal-back{display:inline-flex;margin-top:34px;color:var(--green);font-weight:800}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1000px){
  .hero-grid,.split-heading,.method-layout,.about-layout,.faq-layout,.contact-shell{grid-template-columns:1fr}
  .hero-grid{gap:60px}.hero-visual{max-width:650px;width:100%;margin:auto}
  .split-heading,.method-layout,.about-layout,.faq-layout,.contact-shell{gap:46px}
  .method-copy{position:static}
  .results-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section{padding:86px 0}
  .menu-toggle{display:block;z-index:110}
  .main-nav{position:fixed;inset:0;background:white;padding:110px 28px 30px;display:none;flex-direction:column;align-items:stretch;gap:12px}
  .main-nav.open{display:flex}
  .main-nav a{font-size:1.15rem;padding:12px 0}
  .nav-cta{text-align:center;margin-top:12px}
  .hero{padding-top:130px}
  .hero-trust{grid-template-columns:1fr}
  .premium-cards{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr}
  .impact-banner{flex-direction:column;align-items:flex-start}
  .value-grid{grid-template-columns:1fr}
  .contact-shell{padding:34px 22px}
  .field-row{grid-template-columns:1fr;gap:0}
  .footer-top{grid-template-columns:1fr;gap:34px}
  .footer-bottom{flex-direction:column;gap:8px}
  .logo-strip{align-items:flex-start;gap:20px;flex-direction:column}
  .logo-strip div{flex-wrap:wrap;gap:18px}
}
@media(max-width:500px){
  .container{width:min(100% - 28px,1180px)}
  h1{font-size:3.1rem}
  .hero-actions{flex-direction:column}.hero-actions .btn{width:100%}
  .panel-main{padding:22px}.metric-main strong{font-size:4rem}
  .panel-footer{grid-template-columns:1fr}
  .mini-one{left:-5px;top:90px}.mini-two{right:-4px;bottom:70px}
  .hero-visual{min-height:520px}
  .premium-card{padding:28px 22px}
  .portrait-frame{min-height:430px}
}


/* Official JBE logo */
.brand-logo img{
  display:block;
  width:auto;
  height:64px;
  object-fit:contain;
}
.site-header .brand-logo img{
  height:62px;
}
.footer-brand img{
  height:92px;
}
.portrait-logo{
  position:relative;
  z-index:2;
  width:min(68%,330px);
  height:auto;
  filter:drop-shadow(0 18px 34px rgba(8,47,44,.16));
}
@media(max-width:760px){
  .site-header .brand-logo img{height:54px}
  .footer-brand img{height:78px}
}

.linkedin-nav{width:36px;height:36px;border-radius:50%;display:grid!important;place-items:center;background:#edf4f1;color:var(--green-deep)!important;font-weight:900;font-size:.85rem}.linkedin-nav:hover{background:var(--green);color:#fff!important}

/* 2026-09 update: clearer service journey, deliverables, funding, mobile menu */
.journey-panel{overflow:hidden}
.journey-list{display:grid;gap:10px;margin-top:26px}
.journey-step{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.7)}
.journey-step>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:.72rem;font-weight:800}
.journey-step strong,.journey-step small{display:block}.journey-step small{color:var(--muted);margin-top:2px;font-size:.74rem}
.journey-outcome{margin-top:18px;padding:18px;border-radius:18px;background:var(--green-deep);color:#fff}
.journey-outcome span,.journey-outcome strong{display:block}.journey-outcome span{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--lime);font-weight:800}.journey-outcome strong{margin-top:5px}
.deliverables{margin-top:30px;padding:38px;border-radius:28px;background:#fff;border:1px solid var(--line)}
.deliverable-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.deliverable-grid>div{padding:20px;border-radius:18px;background:#f7f9f7}.deliverable-grid span{color:var(--green);font-weight:900}.deliverable-grid strong{display:block;margin:8px 0 4px}.deliverable-grid p{font-size:.84rem;color:var(--muted);margin:0}
.deliverable-promise{margin:24px 0 0;font-weight:800;font-size:1.08rem;color:var(--green-deep)}
.funding-card{margin-top:22px;padding:32px;border-radius:28px;background:linear-gradient(135deg,#edf7ef,#f8f7ef);border:1px solid #d9e9df;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start}
.funding-icon{width:58px;height:58px;border-radius:18px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:800}.funding-card h3{font-size:1.55rem}.funding-card p:not(.eyebrow){color:var(--muted)}.funding-card small{display:block;color:var(--muted);font-size:.72rem}
.optional{font-weight:500;color:var(--muted)}
@media(max-width:760px){
  .site-header{z-index:1000}
  .site-header.menu-active{background:#fff!important;backdrop-filter:none!important;border-bottom:0!important}
  .main-nav{z-index:1001;position:fixed!important;inset:0!important;width:100vw;height:100dvh;background:#fff!important;padding:105px 28px 34px!important;overflow-y:auto;isolation:isolate;box-shadow:none}
  .menu-toggle{position:relative;z-index:1002}
  .main-nav.open{display:flex!important}
  .main-nav a{position:relative;z-index:1}
  .nav-cta{margin-top:auto!important;background:var(--green-deep)!important;color:#fff!important;padding:15px 18px!important}
  body.menu-open{overflow:hidden!important;position:fixed;width:100%}
  .hero-visual{min-height:auto!important;padding:20px 0 10px}
  .panel-main{max-width:100%}
  .deliverable-grid{grid-template-columns:1fr}
  .deliverables{padding:26px 20px}
  .funding-card{grid-template-columns:1fr;padding:26px 20px}.funding-icon{width:50px;height:50px}
}