/* The client cases page (Jose, 2026-10-26): the case cards, the service filters, the hover reveal and the swipe deck
   on phones. Loaded after service-pages.css, on this page only. Page tokens only (service-pages.css :root). Without
   JavaScript every card shows all its text; client-cases.js adds html.cc-js and the reveal. */

/* hero: a cascade of three result cards, each showing its top band; they fan out on hover */
.cc-hero .split-grid{align-items:center}
.cc-deck{position:relative;height:clamp(360px,32vw,430px)}
.cc-mini{position:absolute;width:min(300px,60%);min-height:200px;display:flex;flex-direction:column;gap:8px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 -18px 40px -24px rgba(0,0,0,.95),0 30px 70px -30px rgba(0,0,0,.9);transform:var(--t);transition:transform .6s var(--ease),border-color .3s;animation:cc-deal .9s var(--ease) both}
.cc-mini b{font-family:var(--display);font-weight:400;font-size:clamp(44px,1rem + 2.4vw,62px);line-height:.95;text-transform:uppercase;color:var(--lemon)}
.cc-mini-k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc-mini-l{margin-top:auto;font-family:var(--serif);font-weight:300;font-size:19px;line-height:1.2;color:var(--paper)}
.cc-mini--1{--t:rotate(-5deg);left:4%;top:0;animation-delay:.1s}
.cc-mini--2{--t:rotate(2deg);left:22%;top:28%;animation-delay:.25s}
.cc-mini--3{--t:rotate(-2deg);left:40%;top:56%;border-color:var(--lemon);animation-delay:.4s}
.cc-deck:hover .cc-mini--1{transform:translate(-6%,-4%) rotate(-8deg)}
.cc-deck:hover .cc-mini--2{transform:translate(4%,0) rotate(4deg)}
.cc-deck:hover .cc-mini--3{transform:translate(12%,4%) rotate(0deg)}
@keyframes cc-deal{from{opacity:0;transform:translateY(40px) rotate(0deg)}to{opacity:1;transform:var(--t)}}
.cc-proof{margin-top:clamp(40px,5vw,72px)}

/* the filters */
.cc-filters{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.cc-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--soft);font-size:15px;font-weight:700;line-height:1.2;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cc-chip .n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--panel-2);font-size:12px;color:var(--muted)}
.cc-chip:hover{border-color:var(--lemon);color:var(--paper)}
.cc-chip[aria-pressed="true"]{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.cc-chip[aria-pressed="true"] .n{background:var(--ink);color:var(--lemon)}
.cc-status{margin-top:14px;font-size:14.5px;color:var(--muted)}

/* the cards */
.cc-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;perspective:1600px}
.cc-card{--rx:0deg;--ry:0deg;--mx:50%;--my:0%;--lift:0px;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:470px;padding:28px 28px 24px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--paper);overflow:hidden;scroll-margin-top:110px;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
.cc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(460px circle at var(--mx) var(--my),rgba(227,254,82,.17),transparent 62%);opacity:0;transition:opacity .3s}
.cc-card:hover,.cc-card:focus-within,.cc-card.is-open,.cc-card.is-target{--lift:-6px;border-color:var(--lemon);box-shadow:0 0 0 1px var(--lemon),0 26px 60px -22px rgba(227,254,82,.45)}
.cc-card:hover::before,.cc-card:focus-within::before,.cc-card.is-open::before,.cc-card.is-target::before{opacity:1}
.cc-card.is-moving{transition:transform .08s linear,border-color .25s,box-shadow .35s var(--ease)}
.cc-card.is-in{animation:cc-in .45s var(--ease) both}
@keyframes cc-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px}
.cc-logo{height:30px;width:auto;max-width:170px;object-fit:contain;object-position:left}
.cc-word{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.cc-qmark{font-family:var(--serif);font-size:64px;line-height:.6;height:30px;color:var(--lemon)}
.cc-k{max-width:56%;font-size:11.5px;font-weight:700;line-height:1.35;letter-spacing:.12em;text-align:right;text-transform:uppercase;color:var(--muted)}
.cc-num{margin-top:26px;font-family:var(--display);font-weight:400;font-size:clamp(50px,1.3rem + 2.4vw,74px);line-height:.95;text-transform:uppercase;color:var(--lemon)}
.cc-h{margin-top:14px;font-family:var(--serif);font-weight:300;font-size:clamp(22px,1rem + .5vw,26px);line-height:1.2;letter-spacing:-.012em}
.cc-sector{margin-top:10px;font-size:15px;line-height:1.4;color:var(--muted)}
.cc-quote{margin-top:16px;max-width:640px}
@media (min-width:721px){
  .cc-grid{grid-auto-flow:row dense}
  .cc-card--quote{grid-column:span 2}
  .cc-card--quote .cc-quote p{font-size:clamp(24px,1rem + .9vw,32px)}
}
.cc-quote p{font-family:var(--serif);font-weight:300;font-size:clamp(21px,1rem + .45vw,25px);line-height:1.25;letter-spacing:-.012em}
.nowrap{white-space:nowrap}
.cc-tags{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:6px}
.cc-tags li{padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--soft);transition:border-color .25s,color .25s}
.cc-card:hover .cc-tags li,.cc-card.is-open .cc-tags li{border-color:rgba(227,254,82,.55);color:var(--paper)}
.cc-flip{display:none}
.cc-who{display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.35}
.cc-who img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.cc-who b{display:block;font-size:15px}
.cc-who--quote{margin-top:18px;color:var(--muted)}
.cc-who--quote b{color:var(--paper)}

/* "what changed": without JavaScript, a plain block at the foot of the card */
.cc-more{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.cc-more dl{display:grid;gap:2px}
.cc-more dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc-more dd{margin-bottom:12px;font-size:15.5px;line-height:1.45}
.cc-back{display:none}

/* with JavaScript: a lime sheet that slides up over the card on hover, focus of its button, or tap */
.cc-js .cc-flip{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--muted-2);border-radius:999px;background:transparent;color:var(--paper);font-size:14.5px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cc-js .cc-flip:hover{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.cc-js .cc-more{position:absolute;left:0;right:0;bottom:0;z-index:3;max-height:100%;overflow:auto;margin:0;display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px;border:0;border-radius:0 0 13px 13px;background:var(--lemon);color:var(--ink);transform:translateY(101%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
.cc-js .cc-more dt{color:#3c4a0a}
.cc-js .cc-more dd{color:var(--ink)}
.cc-js .cc-more .cc-who{margin-top:4px}
.cc-js .cc-back{display:inline-flex;align-self:flex-end;align-items:center;min-height:36px;margin-top:4px;padding:0 12px;border:1px solid rgba(8,10,9,.35);border-radius:999px;background:transparent;color:var(--ink);font-size:13.5px;font-weight:700;cursor:pointer}
.cc-js .cc-back:hover{background:var(--ink);color:var(--lemon)}
.cc-js .cc-card:not(.is-open) .cc-back{visibility:hidden}
.cc-js .cc-card.is-open .cc-more{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
@media (hover:hover) and (pointer:fine){
  .cc-js .cc-card:hover .cc-more{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
}
.cc-js .cc-more :focus-visible{outline-color:var(--ink)}

/* the phone deck: arrows, a count and a progress line (shown under 720 px) */
.cc-deckbar{display:none}
.cc-progress{position:relative;flex:1;height:2px;overflow:hidden;background:var(--line)}
.cc-progress span{position:absolute;top:0;bottom:0;left:0;width:10%;background:var(--lemon);transition:left .3s var(--ease),width .3s var(--ease)}
.cc-count{font-size:14px;color:var(--muted)}
.cc-count b{color:var(--paper)}
.cc-arrows{display:flex;gap:10px}
.cc-arrow{width:48px;height:48px;display:grid;place-items:center;padding:0;border:1px solid var(--muted-2);border-radius:4px;background:transparent;color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.cc-arrow:hover:not(:disabled){background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.cc-arrow:disabled{opacity:.3;cursor:default}

/* what the cases have in common: the decision map */
.cc-map{margin-top:40px;max-width:1100px;border-top:2px solid var(--ink)}
.cc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:12px 40px;align-items:center;padding:20px 0;border-bottom:1px solid var(--paper-line)}
.cc-dec{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1rem + .5vw,26px);line-height:1.2;letter-spacing:-.01em}
.cc-links{display:flex;flex-wrap:wrap;gap:8px}
.cc-links a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #9aa198;border-radius:999px;background:var(--card);font-size:15px;font-weight:700;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.cc-links a:hover{background:var(--ink);border-color:var(--ink);color:var(--lemon)}

/* the two free resources */
.cc-res{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cc-res-card{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:26px;align-items:start;padding:30px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color .25s,transform .35s var(--ease)}
.cc-res-card:hover{border-color:var(--lemon);transform:translateY(-4px)}
.cc-res-cover{width:100%;height:auto;border-radius:6px;box-shadow:0 20px 40px -18px rgba(0,0,0,.9);transform:rotate(-3deg);transition:transform .45s var(--ease)}
.cc-res-card:hover .cc-res-cover{transform:rotate(0deg) scale(1.03)}
.cc-res-body{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cc-res-body h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,1rem + .7vw,30px);line-height:1.15;letter-spacing:-.015em}
.cc-res-body p{font-size:16.5px;line-height:1.55;color:var(--soft)}
.cc-res-body .btn{margin-top:4px}
.cc-res-note{margin-top:20px;font-size:15px;color:var(--muted)}

@media (max-width:1080px){
  .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-res{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .cc-deck{height:380px;margin-top:8px}
}
@media (max-width:720px){
  .cc-deck{display:none}
  .cc-filters{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--px));margin-right:calc(-1 * var(--px));padding:2px var(--px) 6px;scrollbar-width:none}
  .cc-filters::-webkit-scrollbar{display:none}
  .cc-chip{flex:none}
  .cc-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-left:calc(-1 * var(--px));margin-right:calc(-1 * var(--px));padding:8px var(--px) 18px;scroll-padding:0 var(--px);scrollbar-width:none;perspective:none}
  .cc-grid::-webkit-scrollbar{display:none}
  .cc-card{flex:0 0 86%;min-height:470px;scroll-snap-align:start}
  .cc-card:hover,.cc-card:focus-within{--lift:0px}
  .cc-js .cc-deckbar{margin-top:8px;display:flex;align-items:center;gap:16px}
  .cc-row{grid-template-columns:minmax(0,1fr)}
  .cc-res-card{grid-template-columns:minmax(0,1fr);padding:24px}
  .cc-res-cover{max-width:150px}
}
@media (prefers-reduced-motion:reduce){
  .cc-card,.cc-res-card,.cc-res-cover,.cc-deck:hover .cc-mini{transform:none !important}
  .cc-mini{transform:var(--t) !important}
}