/* Case-page openings, 4 Oct 2026. Every rule is scoped to .co-open. Static: no animation, nothing moves unless the recording's own button is pressed.
   Colours come from the shell's tokens, so the dark, black and light appearances all work; only the Surfactant CEOR Project (navy) and the
   Comfy Club panel (the client's palette) set their own, and only inside their opening. */
section.co-open.project-intro{--co-bg:var(--bg-2);margin-top:calc(var(--header-h) * -1);padding-block:calc(var(--header-h) + 14px) clamp(28px,4vw,52px);background:var(--co-bg);box-shadow:0 0 0 100vmax var(--co-bg);clip-path:inset(0 -100vmax);border-bottom:1px solid var(--line);border-image:linear-gradient(var(--line),var(--line)) 1 / 0 0 1px 0 / 0 100vmax}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.co-copy,.co-visual,.co-more{min-width:0}
.co-copy > *{margin-block:0}
.co-crumb{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
.co-kicker{display:block;margin-top:2px;line-height:1.5}
.co-kicker::before{display:inline-block;vertical-align:.05em;margin-right:10px}
.co-name{display:none;color:var(--ink);font-weight:600}
.co-dot{display:none;margin-inline:.55em;color:var(--muted)}
.co-open h1{margin-top:14px;font-size:clamp(1.85rem,1rem + 2vw,2.9rem);line-height:1.04}
.co-open .lead{margin-top:14px;max-width:50ch;font-size:var(--fs-lead-open);line-height:1.55}
.co-chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px}
.co-chip{display:inline-flex;align-items:center;min-height:28px;padding:3px 11px;border:1px solid var(--accent);border-radius:var(--r-pill);font:500 var(--fs-micro)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.co-copy .actions{margin-top:20px}
.co-copy .project-note{margin-top:14px!important;max-width:56ch;font-size:.84rem;line-height:1.55}
.co-visual > figure{margin:0!important;padding:0}
.co-visual .project-screen{padding-bottom:0}
.co-visual figcaption{margin-top:10px}
.co-visual .media{box-shadow:0 22px 56px -28px var(--shadow)}
.co-more{display:grid;gap:14px;align-content:start}
.co-more > *{margin:0!important}
.co-more details > summary{min-height:48px;padding:12px 56px 12px 16px;font-size:.92rem}
.co-more details > p{font-size:.92rem;line-height:1.6;color:var(--body)}
@media (min-width:900px){
  .co-grid{grid-template-columns:var(--co-cols,minmax(0,.8fr) minmax(0,1.2fr));column-gap:clamp(32px,4.4vw,64px);row-gap:22px;align-items:start}
  .co-copy{grid-column:1;grid-row:1}
  .co-visual{grid-column:2;grid-row:1}
  .co-more{grid-column:1;grid-row:2}
  .co-grid.has-more:not(.has-wide) .co-visual{grid-row:1 / span 2}
  .co-more.is-wide{grid-column:1 / -1}
}
@media (max-width:639px){
  .co-crumb .co-c-home,.co-crumb .co-c-projects,.co-crumb .co-c-sep{display:none}
  .co-crumb .co-c-parent::before{content:"\2039";content:"\2039" / "";margin-right:8px;color:var(--muted)}
  .co-name,.co-dot{display:inline}
  .co-crumb .co-c-cur{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .co-open .lead{font-size:1rem}
}
.co-flow{display:grid;gap:12px;padding:clamp(14px,1.8vw,22px);border:1px solid var(--line-2);border-radius:var(--r);background:linear-gradient(180deg,var(--surface-2),var(--surface) 70%);box-shadow:inset 0 1px 0 var(--edge)}
.co-flow > *{margin:0}
.co-flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.co-flow-node{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico k" "ico t" "ico s";column-gap:14px;row-gap:4px;align-content:center;max-width:none;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.co-flow-k{grid-area:k;font:500 var(--fs-micro)/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.co-flow-k span{color:var(--muted)}
.co-flow-ico{grid-area:ico;align-self:center;width:72px;height:44px;fill:none;stroke:var(--accent-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.co-flow-ico .f{fill:var(--accent-text);stroke:none}
.co-flow-node strong{grid-area:t;color:var(--ink);font-size:1rem;line-height:1.25}
.co-flow-s{grid-area:s;color:var(--body);font-size:.86rem;line-height:1.45}
.co-flow-arrow{display:grid;place-items:center;max-width:none;color:var(--accent-text)}
.co-flow-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.co-flow-cap{font-size:.82rem;line-height:1.5;color:var(--muted)}
@media (min-width:900px){
  .co-flow-steps{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);gap:0 6px;align-items:stretch}
  .co-flow-node{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "ico" "t" "s";row-gap:8px;align-content:start}
  .co-flow-ico{align-self:start}
  .co-flow-arrow svg{transform:none}
}