/* chim.ai/case-stories/: the one stylesheet of the area. Owned by the website session.
   The pages are generated and only carry class names; everything about the look is here or in partials/.
   Sections: 1 base, 2 overview and tag pages, 3 case pages, 4 case page components, 5 Tavistock pictures, 6 small screens. */

/* 1 base ------------------------------------------------------------------------------------- */
/* Site fonts for the shared header and footer (same files as css/main.css) */
@font-face { font-family:'Livvic ExtraLight'; src:url('../assets/fonts/Livvic ExtraLight.woff2') format('woff2'); font-weight:275; font-style:normal; unicode-range:U+0020-2083; }
@font-face { font-family:'Livvic Medium'; src:url('../assets/fonts/Livvic Medium.woff2') format('woff2'); font-weight:500; font-style:normal; unicode-range:U+0020-2083; }
:root { --blue:#68a3df; --pink:#ff93e4; --text:#f5f7ff; --head:#e6ebff; --muted:rgba(198,210,255,.9); --faint:rgba(198,210,255,.6);
  --grad:linear-gradient(45deg,#68a3df 30%,#ff93e4 70%); --grad-h:linear-gradient(90deg,#68a3df,#ff93e4);
  --glass:linear-gradient(135deg,rgba(14,18,30,.72),rgba(6,10,18,.72)); --edge:1px solid rgba(198,210,255,.08);
  --radius:28px; --radius-m:20px; --shadow:0 20px 60px rgba(0,0,0,.5); --ease:cubic-bezier(.2,.7,.2,1); }
* { box-sizing:border-box; margin:0; }
body { font-family:"Livvic",system-ui,-apple-system,sans-serif; font-weight:300; color:var(--text); line-height:1.6; font-size:1.0625rem; -webkit-font-smoothing:antialiased;
  background:#23354c linear-gradient(180deg,#593154 0%,#23354c 100%) fixed; min-height:100vh; padding-top:50px; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 600px at 85% 5%,rgba(255,147,228,.1),transparent 60%),radial-gradient(800px 500px at 10% 95%,rgba(104,163,223,.08),transparent 60%); }
main, .crumbs, .site-footer { position:relative; z-index:1; }
a { color:var(--pink); text-decoration:none; transition:color .2s; }
a:hover { color:var(--text); }
.wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
.draft { background:rgba(5,6,11,.85); color:var(--muted); font-size:.88rem; text-align:center; padding:.5rem 16px; border-bottom:var(--edge); }
.draft b { color:var(--text); font-weight:500; }
.crumbs { display:block; padding-top:1.3rem; color:var(--faint); font-size:.88rem; letter-spacing:.04em; }
.crumbs a, .more a { color:var(--muted); border-bottom:1px solid rgba(198,210,255,.3); transition:color .2s, border-color .2s; }
.crumbs a:hover, .more a:hover { color:var(--pink); border-color:var(--pink); }
.kick { color:var(--muted); font-size:.92rem; letter-spacing:.05em; margin-bottom:1rem; }
h1 { font-weight:200; font-size:clamp(2.1rem,5vw,3.75rem); line-height:1.05; letter-spacing:-.025em; padding-bottom:.1em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

/* 2 overview and tag pages ------------------------------------------------------------------- */
.intro { padding:clamp(2.4rem,6vw,4.2rem) 0 1.2rem; }
.intro p { color:var(--muted); max-width:44rem; margin-top:1rem; text-wrap:pretty; }
.filter { display:grid; grid-template-columns:5.5rem 1fr; gap:.65rem .6rem; align-items:center; margin-top:1.6rem; }
.filter .lb { color:var(--faint); letter-spacing:.06em; text-transform:uppercase; font-size:.76rem; }
.filter .ps { display:flex; flex-wrap:wrap; gap:.45rem; }
.filter a { padding:.3rem .85rem; font-size:.92rem; line-height:1.4; color:var(--muted); text-decoration:none; border:1px solid rgba(198,210,255,.28); border-radius:999px; transition:color .2s, border-color .2s; }
.filter a:hover { color:var(--text); border-color:var(--pink); }
.filter a[aria-current="page"] { color:#16192b; font-weight:500; border-color:transparent; background:var(--grad-h); }
.filter a.all[aria-current="page"] { color:var(--muted); font-weight:inherit; border-color:rgba(198,210,255,.28); background:none; }
/* Filter folded behind one button in the page head (overview closed, tag pages open) */
/* Filter hidden while there are only 4 case stories (Andreas, 2026-11-08). The markup stays on every page. To bring it back, delete the next line. */
.filter-fold { display:none; }
.filter-fold { margin-top:1.6rem; }
.filter-fold .fold-meta { color:var(--faint); font-weight:400; white-space:nowrap; }
/* Plain text toggle, not a pill */
.fold.filter-fold summary { padding:.2rem 0; background:none; border:0; border-radius:0; font-size:.95rem; letter-spacing:.01em; }
.fold.filter-fold summary:hover, .fold.filter-fold summary:focus-visible { background:none; color:var(--pink); }
.fold.filter-fold summary .fold-label { border-bottom:1px solid rgba(198,210,255,.35); padding-bottom:.1rem; }
.filter-fold .fold-meta::before { content:"·"; margin-right:.5rem; }
.filter-fold .filter { margin-top:1.1rem; }
.count { color:var(--faint); font-size:.88rem; margin:.9rem 0 1.6rem; }
.search { display:block; width:100%; max-width:26rem; margin:0 0 1.8rem; padding:.7rem 1rem; font:inherit; font-size:1rem; color:var(--text);
  background:rgba(6,10,18,.55); border:var(--edge); border-radius:12px; }
.search:focus { outline:none; border-color:var(--pink); }
.search::placeholder { color:var(--faint); }
.nores { color:var(--muted); margin-bottom:1.8rem; }
.grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.case-card { background:var(--glass); border:var(--edge); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s; }
.case-card:hover { border-color:rgba(255,147,228,.45); box-shadow:var(--shadow), 0 0 30px rgba(255,147,228,.15); }
.case-card[hidden] { display:none; }
.case-card img { display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; }
.case-card .body { padding:1.4rem 1.7rem 1.7rem; }
.case-card .lb { color:var(--faint); font-size:.85rem; letter-spacing:.04em; }
.case-card :is(h2,h3) { font-weight:400; letter-spacing:-.01em; font-size:1.35rem; line-height:1.25; margin:.35rem 0 .5rem; }
.case-card :is(h2,h3) a { color:var(--head); text-decoration:none; }
.case-card :is(h2,h3) a:hover { color:var(--pink); }
.case-card p { color:var(--muted); font-size:.96rem; }
.case-card .metric { color:var(--muted); font-size:.92rem; margin-top:.2rem; }
.case-card .metric b { font-weight:400; font-size:1.15rem; margin-right:.25rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.case-card .st { display:inline-block; margin-left:.5rem; font-size:.75rem; color:#ffd3f3; border:1px solid rgba(255,147,228,.5); border-radius:6px; padding:0 .4rem; }
/* Tag pages: way back to the full overview, below the cards */
.see-all { margin-top:2.2rem; }
.see-all .ln { display:inline-block; }
.cta { margin-top:3.4rem; color:var(--muted); }
.cta a { color:var(--text); }

/* 3 case pages ------------------------------------------------------------------------------- */
.hero { display:grid; grid-template-columns:1.25fr .75fr; gap:3rem; align-items:center; padding:clamp(2.4rem,6vw,4.6rem) 0 1.4rem; }
.sub { color:var(--head); font-size:clamp(1.05rem,1.8vw,1.28rem); line-height:1.5; margin-top:1.2rem; max-width:36rem; }
section { padding:4.2rem 0 .4rem; }
.thread { display:block; width:56px; height:2px; background:var(--grad-h); border-radius:2px; margin-bottom:1.1rem; }
h2 { font-weight:200; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.1; letter-spacing:-.02em; color:var(--head); margin-bottom:.8rem; }
p.lead { color:var(--muted); max-width:42rem; }
p.txt { max-width:42rem; margin-top:1.6rem; }
.tags { margin-top:3.2rem; }
.tags p { color:var(--faint); font-size:.82rem; margin:0 0 .45rem; }
.tags div { display:flex; flex-wrap:wrap; gap:.35rem; }
.tags a { padding:.12rem .62rem; font-size:.78rem; line-height:1.5; color:var(--faint); text-decoration:none; border:1px solid rgba(198,210,255,.16); border-radius:999px; transition:color .2s, border-color .2s; }
.tags a:hover { color:var(--pink); border-color:var(--pink); }
.related { margin-top:3.2rem; }
.related h2 { font-size:1.5rem; margin-bottom:1.1rem; }
/* Related cards reuse .case-card from the overview; picked by /case-stories/related.js */
.related .grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.related .case-card .body { padding:1.1rem 1.3rem 1.3rem; }
.related .case-card h3 { font-size:1.15rem; }
.more { margin-top:3.2rem; }

/* 4 case page components --------------------------------------------------------------------- */
.panel { background:var(--glass); border:var(--edge); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem 1.6rem; overflow:hidden; }
.plogo { display:block; max-height:52px; max-width:190px; width:auto; margin-bottom:1.2rem; }
.plogo.plate { background:#f7f8f6; border-radius:10px; padding:.5rem .8rem; max-height:66px; }
.ppic { display:block; width:calc(100% + 3.2rem); margin:-1.5rem -1.6rem 1.2rem; }
.panel dl { display:grid; gap:.75rem; }
.panel dt { color:var(--faint); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.panel dd { margin:.05rem 0 0; color:var(--text); font-size:.98rem; line-height:1.35; }
/* Picture at the foot of the fact panel, edge to edge, fading in from the panel (Createam, Andreas 2026-11-09) */
.pimg { position:relative; margin:1.4rem -1.6rem -1.5rem; aspect-ratio:1200/630; overflow:hidden; }
.pimg img { display:block; width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 42%); mask-image:linear-gradient(180deg, transparent 0, #000 42%); }
.cards { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem; }
.card { background:var(--glass); border:var(--edge); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.3rem 1.4rem 1.5rem;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.card svg { display:block; width:100%; height:auto; margin-bottom:1rem; font-family:inherit; }
.card h3 { font-weight:500; font-size:1.08rem; color:var(--head); margin-bottom:.4rem; }
.card p { color:var(--muted); font-size:.98rem; }
/* Award box (Luis page): one card, badge left, text right */
.cards.award { grid-template-columns:1fr; max-width:46rem; }
.award .card { display:flex; gap:1.6rem; align-items:center; }
.award .badge { flex:none; width:64px; height:84px; margin:0; }
.res { text-align:center; padding-top:4.6rem; }
.res .thread { margin:0 auto 1.4rem; }
.res h2 { font-size:clamp(2rem,4.6vw,3.4rem); color:var(--text); max-width:22ch; margin:0 auto; }
.res p.lead, .res p.txt { margin-left:auto; margin-right:auto; }
.res p.lead { margin-top:1rem; }
.results { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem; margin:3rem 0 0; }
.results b { display:block; font-weight:300; font-size:clamp(1.9rem,3.1vw,2.5rem); line-height:1.1; white-space:nowrap;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.results span { display:block; color:var(--muted); margin-top:.2rem; line-height:1.35; }
.note { color:var(--faint); font-size:.88rem; margin-top:.6rem; }
.res .note { margin-top:1.4rem; }
.quote { position:relative; margin-top:1.6rem; padding:2.6rem 2.8rem 2.2rem 5.2rem; border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(104,163,223,.13),rgba(255,147,228,.09)); border:1px solid rgba(198,210,255,.14); }
.quote .qm { position:absolute; left:1.7rem; top:2.6rem; width:2.4rem; height:auto; opacity:.9; }
.quote blockquote { font-size:clamp(1.2rem,2.2vw,1.5rem); line-height:1.5; color:var(--head); font-weight:300; font-style:italic; max-width:58ch; }
.quote .orig { color:var(--faint); font-size:.9rem; margin-top:.9rem; max-width:64ch; }
.quote figcaption { display:flex; align-items:center; gap:1rem; margin-top:1.6rem; color:var(--muted); font-size:.95rem; }
.quote figcaption img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.quote figcaption b { display:block; color:var(--text); font-weight:500; font-style:normal; }
.shot { margin-top:2.4rem; }
.shot img { display:block; width:100%; height:auto; border-radius:var(--radius-m); box-shadow:0 30px 70px rgba(0,0,0,.45); }
.shot figcaption { color:var(--faint); font-size:.88rem; margin-top:.7rem; }
.links { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.res .links { justify-content:center; }
.ln { color:var(--text); font-weight:500; font-size:.875rem; letter-spacing:.03em; text-decoration:none; padding:.75rem 1.5rem; background:rgba(245,247,255,.06); border:1px solid rgba(198,210,255,.18); border-radius:999px; transition:background-color .2s, border-color .2s; }
.ln:hover { color:var(--text); background:rgba(245,247,255,.12); border-color:var(--pink); }
.btn { display:inline-block; margin-top:1.6rem; background:var(--grad); color:#05060b; font-weight:600; font-size:.875rem; letter-spacing:.03em; text-decoration:none; padding:.875rem 1.75rem; border-radius:999px;
  transition:filter .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover, .btn:focus-visible { color:#05060b; filter:brightness(1.1); box-shadow:0 8px 30px rgba(255,147,228,.3); }
.claim + .btn { margin-top:0; }
.film { margin-top:1.4rem; }
.film video { display:block; width:100%; aspect-ratio:16/9; border-radius:var(--radius-m); background:#05060b; box-shadow:var(--shadow); }
.claim { display:flex; flex-direction:column; margin:2.6rem 0 1.6rem; font-weight:200; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.25; }
.claim span:nth-child(1) { color:var(--blue); } .claim span:nth-child(2) { color:#b49be8; } .claim span:nth-child(3) { color:var(--pink); }
/* fold: "Learn more" opens the technical part; the label says what a click does, the arrow turns on click only */
.fold { margin-top:1.4rem; }
.fold summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; color:var(--text); font-weight:500; font-size:.875rem; letter-spacing:.03em;
  padding:.75rem 1.5rem; background:rgba(245,247,255,.06); border:1px solid rgba(198,210,255,.18); border-radius:999px; transition:border-color .2s, background-color .2s; }
.fold summary::-webkit-details-marker { display:none; }
.fold summary:hover, .fold summary:focus-visible { border-color:var(--pink); background:rgba(245,247,255,.12); }
.fold .chev { width:1.1rem; height:1.1rem; transition:transform .25s; }
.fold[open] .chev { transform:rotate(180deg); }
.fold .l-less, .fold[open] .l-more { display:none; } .fold[open] .l-less { display:inline; }
.fold[open] .fold-body { animation:foldin .35s ease-out; }
@keyframes foldin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .fold[open] .fold-body { animation:none; } .fold .chev { transition:none; } }

/* 5 Tavistock pictures: the report cover, goals, flow, split and stairs. The client logos are set on the page itself ---- */
.book { position:relative; height:330px; }
.book .pg { position:absolute; inset:0 30px 0 30px; border-radius:6px 14px 14px 6px; }
.book .p3 { transform:translate(22px,14px); background:rgba(198,210,255,.08); }
.book .p2 { transform:translate(11px,7px); background:rgba(198,210,255,.14); }
.book .p1 { background:linear-gradient(160deg,#1d2a44,#121a2c); border:var(--edge); box-shadow:0 30px 70px rgba(0,0,0,.5);
  padding:2rem 1.6rem 1.4rem 2.4rem; display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem; overflow:hidden; }
.book .spine { position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--grad); }
.book b { font-weight:300; font-size:1.7rem; line-height:1.1; color:var(--head); }
.book em { font-style:normal; font-size:.82rem; color:var(--faint); }
.clogo { display:block; height:44px; aspect-ratio:232/64; background-position:left center; background-size:contain; background-repeat:no-repeat; align-self:flex-start; margin-bottom:auto; }
.clogo.sm { height:30px; margin:0; }
.clogo.sm.lifetime { height:36px; aspect-ratio:368/128; }
.goals { display:grid; grid-template-columns:220px 1fr; gap:2.4rem; align-items:center; margin-top:1.8rem; }
.score b { display:block; font-weight:200; font-size:clamp(4rem,9vw,6.4rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.score span { color:var(--muted); }
.glist { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.6rem; }
.glist li { display:grid; grid-template-columns:2rem 1fr; gap:.8rem; align-items:start; }
.glist .ck { width:2rem; height:2rem; }
.glist span { color:var(--text); line-height:1.35; padding-top:.2rem; }
.glist em { display:none; }
.glist li.nx span { color:var(--faint); }
.flow { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem; margin-top:2rem; position:relative; }
.flow::before { content:""; position:absolute; left:2%; right:2%; top:1.05rem; height:2px; background:var(--grad-h); opacity:.6; }
.flow li { position:relative; }
.flow .n { position:relative; display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%;
  background:#1b2236; border:1px solid rgba(198,210,255,.35); font-size:.8rem; font-weight:500; color:var(--head); margin-bottom:.9rem; }
.flow .agent .n { background:var(--grad); border-color:transparent; color:#0c1220; }
.flow h3 { font-weight:500; font-size:1.05rem; color:var(--head); margin-bottom:.35rem; }
.flow .agent h3 { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.flow p { color:var(--muted); font-size:.95rem; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.4rem; }
.side { background:var(--glass); border:var(--edge); border-radius:var(--radius-m); padding:1.4rem 1.5rem; }
.side h3 { font-weight:500; font-size:1.08rem; color:var(--head); }
.side .sub2 { color:var(--faint); font-size:.9rem; margin:.15rem 0 .8rem; }
.side ul { padding-left:1.1rem; color:var(--muted); font-size:.97rem; }
.side li { margin-bottom:.3rem; }
.side.ai h3 { color:var(--pink); } .side.code h3 { color:var(--blue); }
.draft-tag { position:absolute; top:-12px; right:20px; background:#3a1630; color:#ffd3f3; border:1px solid rgba(255,147,228,.5); border-radius:8px; font-size:.78rem; padding:.15rem .6rem; }
.stairs { list-style:none; padding:0; display:flex; align-items:flex-end; gap:1rem; height:260px; margin-top:1.8rem; }
.stairs .st { flex:1; height:calc(70px + var(--h) * 44px); border-radius:16px 16px 0 0; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.15rem;
  background:linear-gradient(180deg,rgba(198,210,255,.12),rgba(198,210,255,.02)); border-top:2px dashed rgba(198,210,255,.5); }
.stairs .st.done { background:linear-gradient(180deg,rgba(104,163,223,.42),rgba(104,163,223,.06)); border-top:2px solid var(--blue); }
.stairs .st.nxt { background:linear-gradient(180deg,rgba(255,147,228,.36),rgba(255,147,228,.05)); border-top:2px solid var(--pink); }
.stairs .ck { width:1.6rem; height:1.6rem; }
.stairs b { font-weight:500; color:var(--head); } .stairs span { color:var(--muted); font-size:.9rem; }

/* 6 small screens ---------------------------------------------------------------------------- */
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; gap:2rem; } .book { height:260px; width:100%; max-width:360px; margin:0 auto; }
  .results { grid-template-columns:1fr 1fr; } .flow { grid-template-columns:1fr 1fr; } .flow::before { display:none; }
  .split { grid-template-columns:1fr; } .goals { grid-template-columns:1fr; gap:1rem; } .cards { grid-template-columns:1fr; } .glist { grid-template-columns:1fr; }
}
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .wrap { padding:0 20px; }
  .filter { grid-template-columns:1fr; gap:.35rem; } .filter .lb:empty { display:none; } .filter .ps { margin-bottom:.45rem; }
  .tags div { gap:.45rem; } .tags a { padding:.35rem .8rem; font-size:.85rem; }
  .stairs { height:auto; flex-direction:column; align-items:stretch; } .stairs .st { height:auto; border-radius:12px; }
  .results { grid-template-columns:1fr; gap:1.4rem; } .flow { grid-template-columns:1fr; gap:1.4rem; }
  .award .card { flex-direction:column; align-items:flex-start; gap:1rem; }
  .fold.filter-fold summary { gap:.4rem; font-size:.9rem; }
  .quote { padding:3.6rem 1.3rem 1.6rem; } .quote .qm { left:1.3rem; top:1.3rem; width:2rem; } .quote figcaption { flex-direction:column; align-items:flex-start; }
}