/* cpl — /counsel "lively" pass (2026-09-30). Page-scoped (front matter `css: cpa cps cpl …`).
   Overlapping compositions on top of cpa.css (Direction A "annual report"): same tokens, same
   reveal (.cpa-rv), copy untouched. Moments: hero photo + floating credit card · #ask screenshot
   over a photo that bleeds off the left edge · photo collage after #work · #questions panel
   bleeding off the right edge · #supervision steps card over a photo · Legal Room screenshot
   lifted over the dark band · split closing card. */

.cpa{overflow-x:clip}                                  /* edge bleeds never make a side scroll */
.cpa{--cpl-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -24px rgba(30,22,10,.35),0 12px 24px -12px rgba(30,22,10,.18);--cpl-sand:#E9DFCC}

/* ---------- hero: offset sand block behind the photo, a real UI card floating over its corner ---------- */
.cpl-hero-p{position:relative;isolation:isolate}
.cpl-hero-p::before{content:"";position:absolute;z-index:-1;top:-1.75rem;right:-1.75rem;width:68%;height:58%;border-radius:var(--cpa-r-img);background:var(--cpl-sand)}
.cpl-hero-p::after{content:"";position:absolute;z-index:-1;left:-1.25rem;bottom:22%;width:1px;height:34%;background:var(--cpa-accent);opacity:.55}
.cpa-hero-p .cpl-float{position:absolute;display:block;width:min(14rem,44%);left:-3.25rem;bottom:-2.75rem;z-index:2}
.cpl-card{width:100%;border-radius:12px;background:#fff;box-shadow:var(--cpl-shadow)}
@media (prefers-reduced-motion:no-preference){
  .cpl-float{animation:cpl-rise .9s var(--cpa-ease) .35s both}
  @keyframes cpl-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---------- #ask: heading left, sentence right; the four requests step down ---------- */
#ask .cpa-statement{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cpa-gap);align-items:end;text-align:left}
#ask .cpa-statement .cpa-h2{grid-column:1/span 6;margin:0}
#ask .cpa-statement .cpa-sub{grid-column:8/span 5;margin:0}
@media (min-width:961px){.cpa-asks>li:nth-child(even){margin-top:2rem}}

/* the plan screenshot floats over a photograph that runs off the left edge */
.cpl-stage{position:relative;isolation:isolate;padding-block:clamp(3rem,2rem + 4vw,6rem)}
.cpl-stage-p{position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:calc(50vw - 50% + 42%)}
.cpl-stage-p img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;border-radius:0 var(--cpa-r-img) var(--cpa-r-img) 0}
.cpl-stage-shot{margin-left:22%}
.cpl-stage-shot .cpa-shot{box-shadow:var(--cpl-shadow)}

/* ---------- collage after the catalogue: wide desk, portrait and square overlapping ---------- */
.cpl-collage{padding-bottom:var(--cpa-l)}
.cpl-col{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(2.5rem,1.5rem + 3.6vw,4.75rem);column-gap:var(--cpa-gap)}
.cpl-col picture{display:block;min-height:0}
.cpl-col img{width:100%;height:100%;object-fit:cover}
.cpl-col-a{grid-column:1/span 8;grid-row:1/span 5}
.cpl-col-b{grid-column:8/span 5;grid-row:2/span 7;z-index:1}
.cpl-col-c{grid-column:4/span 3;grid-row:5/span 4;z-index:2}
.cpl-col-b img,.cpl-col-c img{border:6px solid var(--cpa-bg);box-shadow:var(--cpl-shadow)}
.cpl-col-b img{object-position:60% 50%}
.cpa-anim .cpl-col-b{transition-delay:120ms}
.cpa-anim .cpl-col-c{transition-delay:240ms}

/* ---------- #questions: the answer panel runs off the right edge ---------- */
.cpl-bleed-r{margin-right:calc(50% - 50vw);border-radius:calc(var(--cpa-r) + 6px) 0 0 calc(var(--cpa-r) + 6px);background:linear-gradient(90deg,var(--cpa-tint) 0%,var(--cpa-tint) 70%,var(--cpl-sand) 100%)}
.cpl-bleed-r picture{display:block;max-width:69.5rem}

/* ---------- #supervision: the three steps as a card over a photograph ---------- */
.cpl-sup-m{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:0}
.cpl-sup-p{grid-column:1/-1;grid-row:1}
.cpl-sup-p img{aspect-ratio:3/2;object-position:50% 28%}
.cpl-sup-card{grid-column:3/-1;grid-row:2;margin:-5.5rem -1px 0 0;position:relative;z-index:1;background:#fff;border-radius:var(--cpa-r);padding:.5rem 1.75rem;box-shadow:var(--cpl-shadow)}
@media (min-width:961px){.cpl-sup .cpa-split-t{position:sticky;top:7rem}}
.cpl-sup-card>li:first-child{border-top:0}
.cpl-sup-card>li:last-child{border-bottom:0}
.cpl-sup-card .cps-flow-l::before{top:0}
.cps-sup .cpl-sup + .cps-figpanel{margin-top:var(--cpa-l)}

/* ---------- the Legal Room: the screenshot rises over the dark band ---------- */
#legal-room .cpa-room-copy{padding-bottom:calc(clamp(3rem,2rem + 4vw,6rem) + clamp(5rem,3rem + 8vw,11rem))}
#legal-room .cpa-room-shot{position:relative;z-index:2;padding-top:0;margin-top:calc(-1 * clamp(5rem,3rem + 8vw,11rem))}
#legal-room .cpa-room-shot .cpa-panel{box-shadow:var(--cpl-shadow)}

/* ---------- #access: picture left, words right (cpa-rev markup class) ---------- */

/* ---------- close: photograph + words in one card, the photo standing out of its top ---------- */
.cpa-close{padding-top:var(--cpa-sec)}
.cpl-close{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;text-align:left;padding:0 clamp(2rem,1rem + 4vw,5rem) 0 0;gap:clamp(2rem,1rem + 4vw,5rem);overflow:visible}
.cpl-close-p{display:block;align-self:stretch;margin:-3rem 0 clamp(2rem,1rem + 3vw,3.5rem) clamp(1.5rem,1rem + 2vw,3rem)}
.cpl-close-p img{width:100%;height:100%;min-height:24rem;object-fit:cover;object-position:50% 70%;box-shadow:var(--cpl-shadow)}
.cpl-close-t{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.cpl-close .cpa-h2{margin:0}
.cpl-close .cpa-close-p{margin:var(--cpa-m) 0}
.cpl-close .cpa-close-cta{justify-content:flex-start}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cpa-hero-p .cpl-float{width:min(12.5rem,40%);left:auto;right:1rem;bottom:-2.25rem}
  .cpl-hero-p::before{top:-1rem;right:-.75rem}
  .cpl-hero-p::after{display:none}
  .cpa-hero-g{row-gap:calc(var(--cpa-l) + 1rem)}
  #ask .cpa-statement .cpa-h2,#ask .cpa-statement .cpa-sub{grid-column:1/-1}
  #ask .cpa-statement .cpa-sub{margin-top:var(--cpa-m)}
  .cpl-stage{padding-block:0}
  .cpl-stage-p{position:relative;display:block;left:auto;width:auto;margin-left:calc(-1 * var(--pad));margin-right:20%}
  .cpl-stage-p img{aspect-ratio:4/3;height:auto}
  .cpl-stage-shot{margin:-5rem 0 0 8%}
  .cpl-sup-card{grid-column:2/-1;margin-top:-4rem}
  .cps-sup .cpl-sup + .cps-figpanel{margin-top:var(--cpa-l)}
  .cpl-close{grid-template-columns:1fr;padding:0 clamp(1.5rem,1rem + 3vw,3rem);gap:0}
  .cpl-close-p{margin:-2.5rem 0 0}
  .cpl-close-p img{min-height:0;aspect-ratio:3/2}
}
@media (max-width:700px){
  .cpl-col{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:3.25rem;column-gap:.75rem}
  .cpl-col-a{grid-column:1/-1;grid-row:1/span 4}
  .cpl-col-b{grid-column:3/-1;grid-row:3/span 6}
  .cpl-col-c{grid-column:1/span 3;grid-row:6/span 4}
  .cpl-col-b img,.cpl-col-c img{border-width:4px}
  .cpl-stage-shot{margin:-3.5rem 0 0 1rem}
  .cpl-bleed-r{padding:.75rem}
  .cpl-sup-card{grid-column:1/-1;padding:.25rem 1.25rem;margin:-3rem .5rem 0}
  .cpl-sup-p img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.cpa-anim .cpl-col-b,.cpa-anim .cpl-col-c{transition-delay:0s}}