/* SpecHub Knowledge, stage 24 (1 Nov 2026): Case Studies uplift. Featured strip, one filter bar, cards with the product line,
   groups that open in place, the case page with key facts, product cards, a photo lightbox and related case studies.
   Orange on white, square corners, thin lines only: no side stripes, no black blocks, no counts. */
.kn [hidden],.kn-box[hidden]{display:none!important}
/* sticky facts column: the page section clips without becoming a scroll container (overflow:hidden stops sticky) */
.ch.kn{overflow:clip}

/* ---------- cards ---------- */
.kn-csgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kn-csgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kn-cs{display:flex;flex-direction:column;border:1px solid #E9E2D9;background:#fff;color:#211D22;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;min-width:0}
.kn-cs:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(33,29,34,.09);border-color:#DCD3C8}
.kn-cs:focus-visible,.kn-feat__big:focus-visible,.kn-grp__more:focus-visible,.kn-lb:focus-visible,.kn-pcard a:focus-visible,.kn-bar input:focus-visible,.kn-bar select:focus-visible{outline:2px solid #F06C38;outline-offset:2px}
.kn-cs__pic{display:block;aspect-ratio:3/2;overflow:hidden;background:#F5EFE8}
.kn-cs__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kn-cs:hover .kn-cs__pic img,.kn-feat__big:hover .kn-feat__pic img{transform:scale(1.04)}
.kn-cs__b{display:flex;flex-direction:column;gap:5px;padding:14px 16px 17px;flex:1;min-width:0}
.kn-cs__k{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#D9561F;line-height:1.35}
.kn-cs b{font-size:17px;line-height:1.28;letter-spacing:-.005em}
.kn-cs__where{font-size:13.5px;font-weight:500;color:#6B6463}
.kn-cs__p{font-size:14px;line-height:1.5;color:#3A3537;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- featured ---------- */
.kn-feat{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;margin:0 0 34px}
.kn-feat__big{display:flex;flex-direction:column;border:1px solid #E9E2D9;background:#fff;color:#211D22;text-decoration:none;transition:box-shadow .2s ease,border-color .2s ease}
.kn-feat__big:hover{box-shadow:0 16px 36px rgba(33,29,34,.1);border-color:#DCD3C8}
.kn-feat__pic{display:block;flex:1;min-height:300px;overflow:hidden;background:#F5EFE8;position:relative}
.kn-feat__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.kn-feat__b{display:flex;flex-direction:column;gap:6px;padding:20px 24px 22px}
.kn-feat__b b{font-size:28px;line-height:1.15;letter-spacing:-.015em}
.kn-feat__p{font-size:15.5px;line-height:1.55;color:#3A3537;max-width:62ch}
.kn-feat__b em{font-style:normal;font-size:14.5px;font-weight:700;color:#D9561F;margin-top:6px}
.kn-feat__side{display:grid;grid-template-rows:1fr 1fr;gap:18px;min-width:0}
.kn-cs--side .kn-cs__pic{aspect-ratio:auto;flex:1;min-height:120px;position:relative}
.kn-cs--side .kn-cs__pic img{position:absolute;inset:0}
.kn-cs--side .kn-cs__b{flex:none}
.kn-cs--side .kn-cs__p{display:none}

/* ---------- the filter bar ---------- */
.kn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 30px;padding:14px 0;border-top:1px solid #EDE6DD;border-bottom:1px solid #EDE6DD}
.kn-bar label{margin:0;min-width:0}
.kn-bar__q{flex:2 1 260px;position:relative;display:block}
.kn-bar__q svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#6B6463;pointer-events:none}
.kn-bar input,.kn-bar select{width:100%;min-height:44px;border:1px solid #E4DDD3;background:#fff;font:inherit;font-size:14.5px;color:#211D22;border-radius:0}
.kn-bar input{padding:0 12px 0 38px}
.kn-bar input::placeholder{color:#8A8385}
.kn-bar select{padding:0 32px 0 12px}
.kn-bar input:hover,.kn-bar select:hover{border-color:#C9BFB3}
.kn-bar__s{flex:1 1 170px;display:block}
.kn-bar__go{min-height:44px}
.kn-bar.is-js .kn-bar__go{display:none}
.kn-bar__clear{font-size:14px;white-space:nowrap;padding:0 4px}

/* ---------- groups ---------- */
.kn-grp{margin:0 0 42px}
.kn-grp__more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:#211D22;border:1px solid #E4DDD3;background:#fff;padding:10px 16px;text-decoration:none;cursor:pointer;font-family:inherit}
.kn-grp__more:hover{border-color:#211D22}
.kn-grp__more::after{content:"";width:7px;height:7px;border-right:1.5px solid #D9561F;border-bottom:1.5px solid #D9561F;transform:rotate(45deg) translateY(-2px)}
.kn-grp__more[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
/* a filtered view: one plain grid, no group headings */
.kn-cases.is-flat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kn-cases.is-flat .kn-grp,.kn-cases.is-flat .kn-csgrid{display:contents}
.kn-cases.is-flat .kn-grp__h,.kn-cases.is-flat .kn-grp__more{display:none}
.kn-none{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:28px 0;font-size:15.5px;color:#3A3537}
.kn-none b{font-size:18px;color:#211D22}

/* ---------- the case page ---------- */
.kn-key{display:flex;flex-wrap:wrap;gap:12px 34px;margin:20px 0 0;padding-top:16px;border-top:1px solid #E6DED4;max-width:1100px}
.kn-key div{min-width:0}
.kn-key dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B6463;margin:0 0 3px}
.kn-key dd{margin:0;font-size:15px;font-weight:600;color:#211D22}
.kn-hero24{margin:0 0 30px}
.kn-hero24 img{aspect-ratio:21/9;object-fit:cover;max-height:620px;border:0}
.kn-lb{display:block;position:relative;cursor:zoom-in;overflow:hidden}
.kn-lb img{transition:transform .5s ease}
.kn-lb:hover img{transform:scale(1.02)}
.kn-case24{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"body side"}
.kn-case24>.kn-body{grid-area:body}.kn-case24>.kn-side{grid-area:side;align-self:start;position:sticky;top:90px}
.kn-case24 .kn-body h2{font-size:22px;margin-top:30px}
.kn-case24 .kn-body h2:first-child{margin-top:0}
.kn-pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:4px 0 8px}
.kn-pcard{display:flex;flex-direction:column;gap:5px;border:1px solid #E9E2D9;background:#fff;padding:14px 16px 15px;line-height:1.4}
.kn-pcard__g{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B6463}
.kn-pcard b{font-size:16.5px}
.kn-pcard b a{color:#211D22;text-decoration:none}.kn-pcard b a:hover{color:#D9561F}
.kn-pcard__was{font-size:12.5px;color:#6B6463}
.kn-pcard__l{font-size:13.5px;color:#3A3537;flex:1}
.kn-pcard__l a{color:#D9561F;font-weight:700;text-decoration:none}.kn-pcard__l a:hover{text-decoration:underline}
.kn-pcard__a{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.kn-pcard__a a{font-size:13.5px;font-weight:700;color:#D9561F;text-decoration:none}.kn-pcard__a a:hover{text-decoration:underline}
.kn-gal .kn-fig img{aspect-ratio:4/3;object-fit:cover}
.kn-rel{margin:46px 0 0;padding-top:28px;border-top:1px solid #EDE6DD}
.kn-rel h2{font-size:24px;letter-spacing:-.01em;margin:0 0 16px}

/* ---------- the lightbox (white, as the pages) ---------- */
.kn-box:focus{outline:none}
.kn-box{position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 70px 24px}
.kn-box img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;box-shadow:0 18px 44px rgba(33,29,34,.14);touch-action:pan-y}
.kn-box p{font-size:14.5px;color:#3A3537;margin:14px 0 0;text-align:center;max-width:70ch;min-height:1.4em}
.kn-box button{position:absolute;border:1px solid #E4DDD3;background:#fff;color:#211D22;width:46px;height:46px;font:inherit;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kn-box button:hover{border-color:#211D22}
.kn-box button:focus-visible{outline:2px solid #F06C38;outline-offset:2px}
.kn-box__x{top:14px;right:14px}
.kn-box__p{left:14px;top:50%;transform:translateY(-50%)}.kn-box__n{right:14px;top:50%;transform:translateY(-50%)}
html.kn-noscroll{overflow:hidden}

@media(prefers-reduced-motion:reduce){.kn-cs,.kn-cs__pic img,.kn-feat__pic img,.kn-lb img{transition:none}.kn-cs:hover{transform:none}.kn-cs:hover .kn-cs__pic img,.kn-feat__big:hover .kn-feat__pic img,.kn-lb:hover img{transform:none}}
@media(max-width:1180px){.kn-csgrid,.kn-cases.is-flat{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){
  .kn-feat{grid-template-columns:1fr}.kn-feat__side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .kn-cs--side .kn-cs__pic{aspect-ratio:3/2;flex:none;min-height:0}
  .kn-case24{grid-template-columns:1fr;grid-template-areas:"side" "body"}.kn-case24>.kn-side{position:static;margin-bottom:26px}
  .kn-csgrid,.kn-cases.is-flat,.kn-csgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .kn-feat{gap:12px;margin-bottom:24px}.kn-feat__pic{min-height:0;flex:none;aspect-ratio:3/2}
  .kn-feat__b{padding:16px 16px 18px}.kn-feat__b b{font-size:22px}.kn-feat__p{font-size:14.5px}
  .kn-feat__side{grid-template-columns:1fr;gap:12px}
  .kn-bar{gap:8px;padding:12px 0}.kn-bar__q{flex-basis:100%}.kn-bar__s{flex:1 1 100%}
  /* compact cards on a phone: photo left, text right */
  .kn-csgrid,.kn-cases.is-flat,.kn-csgrid--3{grid-template-columns:1fr;gap:12px}
  .kn-cs{flex-direction:row;align-items:stretch}
  .kn-cs__pic{width:118px;flex:none;aspect-ratio:auto;min-height:118px;position:relative}
  .kn-cs__pic img{position:absolute;inset:0}
  .kn-cs__b{padding:11px 13px 12px;gap:3px}
  .kn-cs b{font-size:15.5px}.kn-cs__k{font-size:12px}.kn-cs__where{font-size:12.5px}
  .kn-cs__p{font-size:13px;-webkit-line-clamp:2}
  .kn-feat__side .kn-cs{flex-direction:row}.kn-cs--side .kn-cs__pic{aspect-ratio:auto;min-height:118px}
  .kn-cs--side .kn-cs__b{flex:1;min-width:0}
  .kn-cs:hover{transform:none}
  .kn-key{gap:10px 22px}.kn-key dd{font-size:14px}
  .kn-hero24 img{aspect-ratio:4/3}
  .kn-box{padding:60px 10px 16px}.kn-box__p,.kn-box__n{top:auto;bottom:14px;transform:none}
}