/* Case Studies listing hero (.wj-csh) — /arkansas-web-design-projects/, /project/ and both
   /project_category/ pages. The shared hero frame (art, scrim, orange rule, badges, H1) comes from
   wj-hero-2026.css, which MUST be linked directly before this file. Only what the listing hero does
   differently lives here. The index markup is emitted by regenerate_case_study_index() in
   _inc/publish.php; the other three pages are hand-edited between their [HERO] markers. */
.wj-csh{--orange:#EF5B00;--orange-2:#F59E0B;--head:'Bebas Neue',Impact,sans-serif;--body:'DM Sans',Arial,Helvetica,sans-serif;--max:1140px;font-family:var(--body)}
.wj-csh .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wj-csh .hero-badge{text-decoration:none}
.wj-csh .hero h1{font-synthesis:none}
.wj-csh .hero-sub{font-size:20px;line-height:1.5;color:rgba(255,255,255,.72);max-width:860px;margin:0 auto 22px}
.wj-csh .hero-trust{font-family:var(--head);font-size:26px;letter-spacing:3px;color:var(--orange);margin-bottom:34px}
.wj-csh .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding-bottom:64px}
.wj-csh .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:16px;padding:15px 32px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap;text-decoration:none;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);position:relative;z-index:0;border-radius:0}
.wj-csh .btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#111;font-size:17px;font-weight:700;box-shadow:rgba(239,91,0,.25) 0 4px 22px}
.wj-csh .btn-primary:hover{filter:brightness(1.06)}
.wj-csh .btn-primary::after{content:"→";display:inline-block;max-width:0;opacity:0;overflow:hidden;margin-left:0;transform:translateX(-6px);transition:max-width .25s,opacity .2s,margin .25s,transform .25s}
.wj-csh .btn-primary:hover::after{max-width:1.4em;opacity:1;margin-left:10px;transform:translateX(0)}
.wj-csh .btn-light{background:rgba(255,255,255,.45);color:#fff}
.wj-csh .btn-light::before{content:"";position:absolute;inset:1.5px;background:#111214;clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);z-index:-1}
.wj-csh .btn-light:hover{background:#fff}
@media (max-width:640px){
  .wj-csh .hero-sub{font-size:17px}
  .wj-csh .hero-trust{font-size:18px}
  .wj-csh .hero-cta{padding-bottom:48px}
}
/* Compact headline for a hero whose H1 SearchAtlas OTTO rewrites at runtime to a long sentence
   (/project_category/seo-project-case-studies/). The design size runs OTTO's text to 4 lines. */
.wj-csh--compact .hero h1{font-size:clamp(2.6rem,5.6vw,5.4rem);line-height:.98}
@media (max-width:640px){.wj-csh--compact .hero h1{font-size:2.5rem}}