/* Website Feedback 07. Shared palette, typography, focus and motion contracts. */
.cs-listing { color: var(--pl-ink-900); }
.cs-container { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.cs-hero { padding-block: 56px; background: var(--pl-blue-50); border-bottom: 4px solid var(--pl-orange-500); }
.cs-hero h1 { margin: 16px 0 0; }
.cs-directory { padding-block: 40px 64px; }
.cs-filters,.cs-fallback { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-filters button,.cs-fallback a { padding: 10px 16px; min-height: 44px; border: 1px solid var(--pl-gray-300); border-radius: 24px; color: var(--pl-blue-700); background: white; font: inherit; font-size: 16px; cursor: pointer; }
.cs-filters button[aria-pressed="true"],.cs-fallback a[aria-current] { background: var(--pl-blue-700); color: white; border-color: var(--pl-blue-700); }
.cs-count { margin-block: 24px; }
.cs-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.cs-grid .cs-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--pl-gray-300); border-radius: 12px; background: white; color: var(--pl-ink-900); text-decoration: none; overflow-wrap: anywhere; transition: border-color 200ms ease; }
.cs-grid .cs-card:hover { border-color: var(--pl-blue-400); }
.cs-grid .cs-card img { width: 100%; height: auto; aspect-ratio: 5/3; object-fit: contain; background: var(--pl-blue-50); border-radius: 11px 11px 0 0; margin: 0; }
.cs-card-copy { padding: 24px; }
.cs-grid .cs-card :is(h2,h3) { margin: 0 0 20px; font-size: 24px; line-height: 1.25; color: var(--pl-blue-700); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.cs-tags li { font-size: 16px; line-height: 1.5; padding: 4px 10px; border-radius: 6px; background: var(--pl-blue-50); }
.cs-listing :is(a,button):focus-visible,.cs-grid .cs-card:focus-visible { outline: 3px solid var(--pl-blue-400); outline-offset: 3px; }
.cs-related { width: 100%; margin-block: 24px; }
.stage6 .cs-date { font-size: 16px; margin-top: 16px; }
.cs-listing [hidden],.cs-grid [hidden] { display: none!important; }
@media(max-width:1050px) { .cs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .cs-grid { grid-template-columns:minmax(0,1fr); } .cs-hero { padding-block:40px; } }
@media(prefers-reduced-motion:reduce) { .cs-grid .cs-card { transition:none; } }
/* Imported heroes vary from light to dark: metadata has its own readable surface. */
.stage6 .cs-date { display: inline-block; color: var(--pl-ink-900); background: var(--pl-white); padding: 4px 10px; border-radius: 4px; }
.cs-listing .cs-hero { text-align: left; }
.cs-listing .breadcrumb { padding: 0; background: transparent; }
.stage6 .elementor-widget-text-editor:has(+ .elementor-widget-heading h1) .elementor-widget-container { display: flex; flex-wrap: wrap; gap: 8px; }
.stage6 .elementor-widget-text-editor:has(+ .elementor-widget-heading h1) span { background: var(--pl-blue-50); color: var(--pl-ink-900); padding: 4px 10px; border-radius: 4px; font-size: 16px; }

/* Retained testimonial attribution must remain readable on white. */
.stage6 .qodef-e-author-job { color:var(--pl-gray-700) !important; font-size:var(--font-size-label) !important; }

/* October review: reference card links are Proxima Nova Regular 22px, distinct
   from the Bold display/section headings. Preserve single-anchor card semantics. */
.cs-container { width:min(var(--max-width),calc(100% - 2 * var(--container-gutter))); }
.cs-hero h1 { font-size:clamp(2rem,3.6vw,52px); font-weight:700; line-height:1.15; }
.cs-grid .cs-card { border-radius:4px; }
.cs-grid .cs-card img { aspect-ratio:16/9; border-radius:3px 3px 0 0; background:var(--pl-white); }
.cs-grid .cs-card :is(h2,h3) {
 font-size:22px!important; line-height:1.3!important; font-weight:400;
 color:var(--pl-gray-700); margin-bottom:var(--spacing-sm);
}
.cs-grid .cs-card:is(:hover,:focus-visible) :is(h2,h3) { color:var(--color-dark-blue); text-decoration:var(--cs-card-title-decoration,underline); text-underline-offset:4px; }
.cs-grid .cs-tags { gap:4px 12px; }
.cs-grid .cs-tags li {
 font-size:var(--font-size-label)!important; font-weight:400; line-height:1.5!important;
 padding:0; background:transparent; color:var(--pl-gray-700);
}
@media(max-width:767px) { .cs-container { width:calc(100% - 2 * var(--spacing-md)); } }

/* Source composition restored October review. The retained source stylesheet
   owns the original hero/intro/closing section geometry and responsive assets. */
.cs-source-archive { --max-width:1400px; }
.cs-source-archive .elementor-invisible { visibility:visible; }
html body main#content.cs-source-archive .cs-source-hero h1 {
 font-family:proxima-nova,sans-serif!important; font-size:52px!important;
 font-weight:700!important; line-height:1.2!important; color:white!important;
 margin:0; text-transform:none;
}
.cs-source-hero h1 span,.cs-directory-heading span { color:var(--color-accent-orange); }
.cs-source-archive .cs-directory { padding-top:0; }
html body main#content .cs-directory-heading {
 max-width:1148px; margin:20px auto 48px; text-align:center;
 font:600 40px/1.3 proxima-nova,sans-serif!important; color:#454545;
}
.cs-source-archive .cs-filters,.cs-source-archive .cs-fallback { justify-content:center; }
.cs-source-archive .cs-filters button[aria-pressed="true"] { background:var(--color-accent-orange); border-color:var(--color-accent-orange); }
.cs-source-archive .cs-card { border-color:transparent; border-radius:0; }
/* Main archive and related-card interactions share the approved brand colors. */
:is(.cs-source-archive,.cs-related) .cs-card:is(:hover,:focus-visible) {
 border-color:var(--color-accent-orange);
 --cs-card-title-color:var(--color-primary-blue);
 --cs-card-title-decoration:none;
}
.cs-source-archive .cs-card-copy { padding:24px 10px; }
.cs-source-archive .cs-count { margin-block:16px; }
/* Added migration navigation has no counterpart above original case details. */
.stage6 > .stage6-library-nav,.stage6 > .breadcrumb { display:none; }
@media(max-width:1024px) {
 html body main#content.cs-source-archive .cs-source-hero h1 { font-size:25px!important; line-height:1.5!important; }
 html body main#content .cs-directory-heading { font-size:clamp(30px,4vw,40px)!important; }
}
@media(max-width:767px) {
 html body main#content .cs-directory-heading { font-size:30px!important; }
}
html body main#content.cs-source-archive .cs-contact h2 {
 font-family:proxima-nova,sans-serif!important; font-size:48px!important;
 font-weight:700!important; line-height:1.2!important; color:white!important;
}
html body main#content.cs-source-archive .cs-contact p { color:white!important; }
@media(min-width:1441px) { html body main#content.cs-source-archive .cs-contact h2 { font-size:52px!important; } }
@media(max-width:1024px) { html body main#content.cs-source-archive .cs-contact h2 { font-size:25px!important; line-height:1.5!important; } }
/* Original archive thumbnails use a 190px image window. */
.cs-source-archive .cs-card img { height:190px; aspect-ratio:auto; object-fit:cover; border-radius:0; }
/* Original heroes sit behind WordPress's header. Our approved header is in
   normal flow; remove that measured header overlap from the source padding. */
main#content.cs-source-archive .cs-source-hero { padding-top:40px; }
@media(max-width:1024px) { main#content.cs-source-archive .cs-source-hero { padding-top:20px; } }
@media(max-width:1000px) { main#content.cs-source-archive .cs-source-hero { padding-top:28px; } }
@media(max-width:767px) { main#content.cs-source-archive .cs-source-hero { padding-top:8px; } }
/* Keep the original tracking and paragraph variants; generic heading tracking
   otherwise changes the two-line hero lockup despite matching size/weight. */
html body main#content.cs-source-archive :is(.cs-source-hero h1,.cs-contact h2) { letter-spacing:normal!important; font-style:normal!important; }
html body main#content.cs-source-archive .cs-intro p {
 font-family:proxima-nova,sans-serif!important; font-size:24px!important;
 font-weight:400!important; line-height:1.5!important; color:#454545!important;
 letter-spacing:normal!important; margin:0 0 .9rem;
}
@media(max-width:1366px) { html body main#content.cs-source-archive .cs-intro p { font-size:20px!important; } }
@media(max-width:1024px) { html body main#content.cs-source-archive .cs-intro p { font-size:18px!important; } }
@media(max-width:767px) { html body main#content.cs-source-archive .cs-intro p { font-size:16px!important; } }
/* Preserve the source background crop, including the part originally behind
   the WordPress header, without moving our approved header out of normal flow. */
main#content.cs-source-archive .cs-source-hero { --source-header-overlap:80px; position:relative; isolation:isolate; background-image:none!important; }
.cs-source-hero::before { content:""; position:absolute; inset:calc(-1 * var(--source-header-overlap)) 0 0; z-index:-1; background:url('/images/stage6/3c9b5c1c3aae32ab.jpg') center/cover no-repeat; }
@media(min-width:1441px) { .cs-source-hero::before { background-position:right center; } }
@media(max-width:1000px) { main#content.cs-source-archive .cs-source-hero { --source-header-overlap:72px; } }
@media(max-width:767px) { .cs-source-hero::before { background-position:right center; } }