/* =============================================================================
   cpa — /counsel, Direction A "Annual report" (founder's pick, 2026-09-29).
   Design folder: Product/Counsel-Page-Design-0929 (A, refine pass ddf535b).
   Page-scoped (front matter `css: cpa rp`); replaces lr + cn9 on this page
   (those files stay, /legal-room still uses lr, and /css is cached). Every class
   here is prefixed cpa-, every token lives on .cpa, so nothing leaks into the
   site nav, footer or site.css. The other-products strip keeps rp.css as-is.
   Behaviour: /js/cpa-0929.js. Without it everything is visible.
   ========================================================================== */

.cpa{
  /* colour */
  --cpa-bg:var(--paper);          /* #FCFBF9, the site's warm white */
  --cpa-ink:#141414;              /* headlines */
  --cpa-text:#2B2B2B;             /* body, 13.9:1 */
  --cpa-muted:#5E5E5A;            /* labels, 6.4:1 */
  --cpa-accent:#8F520E;           /* the one accent (brand amber, deepened), 6.1:1 */
  --cpa-tint:#F1EDE4;             /* soft panel behind product screens */
  --cpa-hair:rgba(0,0,0,.08);
  /* type */
  --cpa-serif:var(--display);
  --cpa-sans:var(--body);
  --cpa-fs-h1:clamp(2.75rem,1.6rem + 4.6vw,5.5rem);    /* 44 → 88 */
  --cpa-fs-h2:clamp(2.25rem,1.5rem + 3vw,4rem);        /* 36 → 64 */
  --cpa-fs-stat:clamp(1.75rem,1.4rem + 1.2vw,2.375rem);
  --cpa-fs-quote:clamp(1.375rem,1.1rem + 1vw,1.875rem);
  --cpa-fs-lede:clamp(1.125rem,1.05rem + .3vw,1.3125rem);
  --cpa-fs-body:clamp(1.0625rem,1rem + .2vw,1.1875rem); /* 17 → 19 */
  --cpa-fs-label:.78125rem;
  /* space */
  --cpa-gap:clamp(1rem,.5rem + 2vw,2rem);
  --cpa-sec:clamp(4.5rem,2.5rem + 7vw,10rem);           /* 72 → 160 */
  --cpa-l:clamp(2.5rem,1.5rem + 3vw,4.5rem);
  --cpa-m:clamp(1.5rem,1rem + 1.5vw,2.5rem);
  --cpa-measure:38rem;
  /* shape + motion */
  --cpa-r:16px; --cpa-r-img:18px;
  --cpa-rise:12px; --cpa-dur:560ms; --cpa-ease:cubic-bezier(.2,.7,.2,1);

  background:var(--cpa-bg);color:var(--cpa-text);
  font:400 var(--cpa-fs-body)/1.6 var(--cpa-sans);
}
.cpa :where(h1,h2,h3,p,ul,figure){margin:0}       /* :where keeps the reset below every class */
.cpa :where(ul){padding:0;list-style:none}
.cpa :where(img){display:block;max-width:100%;height:auto}
.cpa a:focus-visible{outline:2px solid var(--cpa-accent);outline-offset:3px;border-radius:4px}

/* ---------- grid + type ---------- */
.cpa-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cpa-gap)}
.cpa-h1,.cpa-h2{font-family:var(--cpa-serif);font-weight:400;color:var(--cpa-ink);line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
.cpa-h1{font-size:var(--cpa-fs-h1);max-width:15ch;margin-bottom:var(--cpa-m)}
.cpa-h2{font-size:var(--cpa-fs-h2)}
.cpa-h1 em,.cpa-h2 em{font-style:italic;color:var(--cpa-accent)}   /* the one accent per section */
.cpa-eyebrow,.cpa-label{font:600 var(--cpa-fs-label)/1.4 var(--cpa-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cpa-muted)}
.cpa-num{display:flex;align-items:center;gap:.75rem;font:600 var(--cpa-fs-label)/1.4 var(--cpa-sans);letter-spacing:.12em;color:var(--cpa-muted);font-variant-numeric:tabular-nums;margin-bottom:1rem}
.cpa-num::after{content:"";width:2.5rem;height:1px;background:currentColor;opacity:.45}
.cpa-lede{font-size:var(--cpa-fs-lede);line-height:1.55;max-width:var(--cpa-measure);margin-bottom:var(--cpa-m);text-wrap:pretty}
.cpa-sub{max-width:var(--cpa-measure);text-wrap:pretty}

/* ---------- hero: headline left, photograph right, full column height ---------- */
.cpa-hero{padding:clamp(2.5rem,1rem + 5vw,6rem) 0 var(--cpa-sec)}
.cpa-hero .crumbs{margin-bottom:var(--cpa-l)}
.cpa-hero-g{align-items:stretch;row-gap:var(--cpa-l)}
.cpa-hero-t{grid-column:1/span 7}
.cpa-hero-p{grid-column:8/span 5;display:flex}
.cpa-hero-p picture{display:flex;width:100%}
.cpa-kick{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.cpa-kick .picon-lg{width:22px;height:22px;flex:none}
.cpa-photo{width:100%;border-radius:var(--cpa-r-img);object-fit:cover;filter:saturate(.94)}
.cpa-hero-p .cpa-photo{height:100%;min-height:28rem;object-position:50% 50%}

/* ---------- sections ---------- */
.cpa-sec{padding:var(--cpa-sec) 0}
.cpa-sec+.cpa-sec{border-top:1px solid var(--cpa-hair)}
.cpa-gap{margin-top:var(--cpa-l)}

/* statement: one large sentence, centred */
.cpa-statement{text-align:center}
.cpa-statement .cpa-num{justify-content:center}
.cpa-statement .cpa-h2{max-width:16ch;margin:0 auto}
.cpa-statement .cpa-sub{margin:var(--cpa-m) auto 0;font-size:var(--cpa-fs-lede);line-height:1.55}

/* the example requests: four columns, hairlines, serif */
.cpa-asks{margin-top:var(--cpa-l);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cpa-gap)}
.cpa-asks>li{border-top:1px solid var(--cpa-hair);padding-top:1.25rem}
.cpa-asks .cpa-label{margin-bottom:.9rem}
.cpa-asks ul{display:grid;gap:.9rem}
.cpa-asks ul li{font-family:var(--cpa-serif);font-size:1.3125rem;line-height:1.3;color:var(--cpa-ink);text-wrap:pretty}

/* product screenshots always sit on a soft tinted panel */
.cpa-panel{background:var(--cpa-tint);border-radius:calc(var(--cpa-r) + 6px);padding:clamp(1.25rem,.5rem + 4vw,4.5rem)}
.cpa-shot{width:100%;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 48px -12px rgba(20,20,20,.18)}

/* 3-up with small icons */
.cpa-feat{margin-top:var(--cpa-l);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cpa-gap)}
.cpa-feat>li{padding-top:1.5rem;border-top:1px solid var(--cpa-hair)}
.cpa-ico{width:28px;height:28px;color:var(--cpa-ink);margin-bottom:1.1rem}
.cpa-feat h3{font:600 1.1875rem/1.35 var(--cpa-sans);color:var(--cpa-ink);letter-spacing:-.01em;margin-bottom:.5rem}
.cpa-feat p{max-width:34ch;text-wrap:pretty}

/* editorial photograph between sections (no hairline cuts a photograph) */
.cpa-editorial{padding:0}
.cpa-wide{aspect-ratio:21/9}

/* legal answers: headline left, the questions right as pull quotes */
.cpa-q{align-items:start;row-gap:var(--cpa-m)}
.cpa-q-t{grid-column:1/span 5}
.cpa-q-t .cpa-h2{margin-bottom:var(--cpa-m)}
.cpa-quotes{grid-column:7/span 6;margin-top:2.25rem;display:grid;gap:1.1rem}
.cpa-quotes li{font:italic 400 var(--cpa-fs-quote)/1.28 var(--cpa-serif);color:var(--cpa-ink);padding-left:1.25rem;border-left:1px solid var(--cpa-hair);text-wrap:pretty}
.cpa-quotes li:first-child{border-left-color:var(--cpa-accent)}
#questions .cpa-h2 em{color:inherit}                 /* this section's accent is the quote rule */

/* image + text split */
.cpa-split{align-items:center;row-gap:var(--cpa-l)}
.cpa-split-t{grid-column:1/span 5}
.cpa-split-m{grid-column:6/span 7;padding:clamp(1rem,.5rem + 2.2vw,2.75rem)}
.cpa-rev .cpa-split-t{grid-column:8/span 5;grid-row:1}
.cpa-rev .cpa-split-m{grid-column:1/span 7;grid-row:1}
.cpa-split-t .cpa-h2{margin-bottom:var(--cpa-m)}

/* the Legal Room: full-bleed photograph carrying the copy */
.cpa-room{padding:0 0 0;color:var(--cpa-text)}
.cpa-room-fig{position:relative;min-height:clamp(34rem,70vh,46rem);display:grid;align-items:end;isolation:isolate}
.cpa-bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2}
.cpa-room-fig::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 42% 48% at 78% 70%,rgba(12,10,8,.6),rgba(12,10,8,0) 72%),linear-gradient(180deg,rgba(12,10,8,.25) 0%,rgba(12,10,8,.55) 45%,rgba(12,10,8,.88) 100%)}
@media (max-width:960px){.cpa-room-fig::before{background:linear-gradient(180deg,rgba(12,10,8,.3) 0%,rgba(12,10,8,.7) 35%,rgba(12,10,8,.9) 100%)}}
.cpa-room-copy{padding:var(--cpa-sec) 0 clamp(3rem,2rem + 4vw,6rem);align-items:end;row-gap:1.5rem}
.cpa-room-h{grid-column:1/span 6}
.cpa-room-b{grid-column:8/span 5}
.cpa-room-h .cpa-eyebrow{color:#F4C77A;margin-bottom:1rem}
.cpa-room-h .cpa-h2{color:#fff}
.cpa-room-h .cpa-h2 em{color:inherit}
.cpa-room-p{color:rgba(246,242,234,.9);margin-bottom:1.5rem}
.cpa-room-links{display:flex;flex-direction:column;gap:.6rem}
.cpa-room-link{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;gap:.45rem;align-items:center;width:fit-content;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.cpa-room-link:hover{border-bottom-color:#fff}
.cpa .cpa-room-link:focus-visible{outline-color:#fff}
.cpa-room-shot{padding-top:var(--cpa-l)}

/* proof: the four statuses, big serif words, hairlines */
.cpa-status{margin-top:var(--cpa-l)}
.cpa-status .cpa-label{margin-bottom:1.5rem}
.cpa-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cpa-gap)}
.cpa-key{border-top:1px solid var(--cpa-hair);padding-top:1.25rem}
.cpa-key-t{font:400 var(--cpa-fs-stat)/1.1 var(--cpa-serif);color:var(--cpa-ink);letter-spacing:-.015em;margin-bottom:.75rem;display:flex;align-items:baseline;gap:.6rem}
.cpa-key-t::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;transform:translateY(-.2em);background:#B9B6AE}
.cpa-key-meets .cpa-key-t::before{background:var(--lv-green)}
.cpa-key-exception .cpa-key-t::before{background:var(--lv-yellow-dot)}
.cpa-key-open .cpa-key-t::before{background:var(--lv-red)}
.cpa-key p+p{font-size:1.0625rem;text-wrap:pretty}

/* closing card */
.cpa-close{padding:var(--cpa-sec) 0 var(--cpa-l)}
.cpa-close-card{text-align:center;border-radius:calc(var(--cpa-r) + 8px);padding:clamp(3rem,2rem + 5vw,7rem) var(--pad);background:var(--cpa-tint)}
.cpa-close-card .cpa-h2{max-width:14ch;margin:0 auto}
.cpa-close-p{max-width:var(--cpa-measure);margin:var(--cpa-m) auto;font-size:var(--cpa-fs-lede);line-height:1.55;text-wrap:pretty}
.cpa-close-cta{justify-content:center}

/* ---------- motion: fade and rise, only below the fold, only with the script ---------- */
.cpa-anim .cpa-rv{transition:opacity var(--cpa-dur) var(--cpa-ease),transform var(--cpa-dur) var(--cpa-ease)}
.cpa-anim .cpa-rv:not(.cpa-in){opacity:0;transform:translateY(var(--cpa-rise))}
@media (prefers-reduced-motion:reduce){
  .cpa-anim .cpa-rv:not(.cpa-in){opacity:1;transform:none}
  .cpa-anim .cpa-rv{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cpa-hero-t,.cpa-hero-p,.cpa-q-t,.cpa-quotes,.cpa-split-t,.cpa-split-m,.cpa-rev .cpa-split-t,.cpa-rev .cpa-split-m,.cpa-room-h,.cpa-room-b{grid-column:1/-1;grid-row:auto}
  .cpa-hero-p .cpa-photo{aspect-ratio:3/2;height:auto;min-height:0}
  .cpa-quotes{margin-top:0}
  .cpa-asks,.cpa-keys{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
}
@media (max-width:700px){
  .cpa-feat,.cpa-asks,.cpa-keys{grid-template-columns:1fr}
  .cpa-feat{row-gap:2rem}
  .cpa-wide{aspect-ratio:4/3}
  .cpa-panel{border-radius:var(--cpa-r)}
}