/* Case study design system — generated from the Impact Fab artifact.
   Scoped under .jhcs so nothing leaks into Beaver Builder or the rest of the site.
   Media queries are preserved: flattening them makes the mobile rules win at every width. */

.jhcs{--ink:#232424;--ink-2:#161616;--paper:#ffffff;--offwhite:#f7f7f6;--cream:#f7f7f6;--green:#8fad3d;--green-bright:#a8c557;--green-deep:#647d24;--gray:#7a7a78;--line:rgb(212,212,211);--shadow:0 24px 60px -28px rgba(35,36,36,.22);--maxw:1440px;--gutter:64px;}
/* Base — the artifact's global rules, re-scoped so they apply only inside the
   case study. 'Plus Jakarta Sans-custom' is the family this site already
   self-hosts, which is the one the design specifies. */
.jhcs{
  background:var(--cream);
  color:var(--ink);
  font-family:'Plus Jakarta Sans-custom',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.jhcs *,.jhcs *::before,.jhcs *::after{box-sizing:border-box;}
.jhcs img{display:block;max-width:100%;}
.jhcs a{color:var(--green-deep);text-decoration:none;}
.jhcs a:hover{color:var(--ink);}

/* Real images in place of the prototype's placeholder component. */
.jhcs .story__media img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
/* Let the logo keep its own proportions inside a box, rather than pinning the
   height. A fixed 74px suits a wide wordmark (Impact Fab is 5.4:1) but renders a
   squarer mark barely 100px across. */
.jhcs .hero__logo img{
  width:auto;
  height:auto;
  max-width:400px;
  max-height:110px;
  object-fit:contain;
  object-position:left center;
  /* Client logos are dark artwork and the hero is near-black, so every one of
     them sits on a white card. Sized by its own proportions rather than a fixed
     height, so a wide wordmark and a squarer mark both read. */
  background:#fff;
  padding:18px 22px;
  border-radius:8px;
  box-sizing:content-box;
}

/* Ghost button on the dark CTA — inline styles in the prototype. */
.jhcs .cta .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff;}
.jhcs .cta .btn--ghost .arr{color:var(--green-bright);}
.jhcs .cta .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

.jhcs .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.jhcs .pad{padding:104px 0;}
.jhcs .eyebrow{display:flex;align-items:center;gap:16px;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-deep);}
.jhcs .eyebrow::before{content:"";display:block;width:24px;height:1.5px;background:var(--green);flex:none;}
.jhcs .eyebrow.on-dark{color:var(--green-bright);}
.jhcs .eyebrow.on-dark::before{background:var(--green);}
.jhcs .eyebrow.center{justify-content:center;}
.jhcs .eyebrow.center::before{display:none;}
.jhcs .btn{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:14px;line-height:1;border-radius:2px;padding:16px 24px;border:1px solid var(--ink);cursor:pointer;transition:.18s ease;white-space:nowrap;}
.jhcs .btn--dark{background:var(--ink);color:var(--green-bright);border-color:var(--ink);}
.jhcs .btn--dark .arr{color:#fff;}
.jhcs .btn--dark:hover{background:#000;color:var(--green-bright);}
.jhcs .btn--ghost{background:transparent;color:var(--ink);}
.jhcs .btn--ghost:hover{background:var(--ink);color:#fff;}
.jhcs .btn--green{background:var(--green);color:var(--ink);border-color:var(--green);}
.jhcs .btn--green .arr{color:var(--ink);}
.jhcs .btn--green:hover{background:var(--green-bright);color:var(--ink);}
.jhcs .arr{font-weight:700;transition:transform .18s ease;}
.jhcs .btn:hover .arr{transform:translateX(3px);}
.jhcs .hero{background:var(--ink);color:#fff;}
.jhcs .crumbs{display:flex;gap:10px;align-items:center;padding:26px 0 0;font-size:12px;color:rgba(255,255,255,.45);}
.jhcs .crumbs a{color:rgba(255,255,255,.6);}
.jhcs .crumbs a:hover{color:var(--green-bright);}
.jhcs .hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:72px;align-items:end;padding:64px 0 118px;}
.jhcs .hero h1{margin:26px 0 0;font-weight:700;font-size:78px;line-height:.98;letter-spacing:-.03em;color:#fff;}
.jhcs .hero__tag{margin:22px 0 0;max-width:22ch;font-weight:600;font-size:30px;line-height:1.24;letter-spacing:-.02em;color:var(--green-bright);text-wrap:balance;}
.jhcs .hero__aside{padding-bottom:8px;}
.jhcs .hero__q{margin:0;font-weight:500;font-size:22px;line-height:1.45;letter-spacing:-.01em;color:#fff;padding-left:26px;border-left:3px solid var(--green);}
.jhcs .hero__q cite{display:block;margin-top:14px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.jhcs .hero__logo{margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);}
.jhcs .snap{position:relative;z-index:2;margin-top:-64px;}
.jhcs .snap__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--green);box-shadow:var(--shadow);}
.jhcs .sitem{padding:28px 30px 30px;border-left:1px solid var(--line);}
.jhcs .sitem:first-child{border-left:0;}
.jhcs .sitem h4{margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep);}
.jhcs .sitem p{margin:0;font-size:16px;line-height:1.45;font-weight:600;color:var(--ink);}
.jhcs .story{background:var(--paper);}
.jhcs .story.alt{background:var(--offwhite);}
.jhcs .story__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.jhcs .story__grid.rev .story__media{order:2;}
.jhcs .story__media{position:relative;height:520px;}
.jhcs .story__body h2{margin:20px 0 0;font-weight:700;font-size:42px;line-height:1.08;letter-spacing:-.024em;color:var(--ink);text-wrap:balance;}
.jhcs .rule{width:52px;height:3px;background:var(--green);margin:22px 0 26px;}
.jhcs .story__body p{margin:0 0 22px;font-size:18px;line-height:1.72;color:#43413e;}
.jhcs .story__body p:last-child{margin-bottom:0;}
.jhcs .story__body p.lead{font-size:21px;line-height:1.6;color:var(--ink);}
.jhcs blockquote.pull{margin:30px 0;padding:2px 0 2px 28px;border-left:3px solid var(--green);font-weight:500;font-size:20px;line-height:1.55;letter-spacing:-.01em;color:var(--ink);}
.jhcs blockquote.pull cite{display:block;margin-top:14px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);}
.jhcs .band{background:var(--ink);color:#fff;}
.jhcs .band__inner{max-width:1000px;margin:0 auto;text-align:center;}
.jhcs .band blockquote{margin:26px 0 0;font-weight:600;font-size:34px;line-height:1.3;letter-spacing:-.022em;color:#fff;text-wrap:balance;}
.jhcs .band cite{display:block;margin-top:26px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-bright);}
.jhcs .close{background:var(--paper);}
.jhcs .close__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.jhcs .close h2{margin:20px 0 24px;font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.022em;color:var(--ink);text-wrap:balance;}
.jhcs .close p{margin:0;font-size:18px;line-height:1.72;color:#43413e;max-width:46ch;}
.jhcs .close__quote{background:var(--offwhite);border:1px solid var(--line);border-left:3px solid var(--green);padding:44px 46px;}
.jhcs .close__quote blockquote{margin:0;font-weight:500;font-size:21px;line-height:1.55;letter-spacing:-.01em;color:var(--ink);}
.jhcs .close__quote cite{display:block;margin-top:22px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);}
.jhcs .cta{background:var(--ink-2);color:#fff;text-align:center;}
.jhcs .cta__inner{max-width:900px;margin:0 auto;}
.jhcs .cta h2{margin:22px auto 0;max-width:22ch;font-weight:700;font-size:50px;line-height:1.08;letter-spacing:-.022em;color:#fff;text-wrap:balance;}
.jhcs .cta h2 .grn{color:var(--green-bright);}
.jhcs .cta p{margin:24px auto 0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.7);max-width:56ch;}
.jhcs .cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px;}

@media (max-width:1080px){
  .jhcs{--gutter:32px;}
  .jhcs .hero__grid, .jhcs .story__grid, .jhcs .close__grid{grid-template-columns:1fr;gap:44px;}
  .jhcs .hero h1{font-size:56px;}
  .jhcs .story__grid.rev .story__media{order:0;}
  .jhcs .story__media{height:360px;}
  .jhcs .snap__inner{grid-template-columns:1fr 1fr;}
  .jhcs .sitem{padding:24px 26px;border-left:0;border-top:1px solid var(--line);}
  .jhcs .sitem:nth-child(-n+2){border-top:0;}
  .jhcs .sitem:nth-child(even){border-left:1px solid var(--line);}
}