/* PHOENiX template CSS: references */
:where(html[data-phx-page="references"]) body{background:var(--phx-surface);}:where(html[data-phx-template|="product"],html[data-phx-page="home"],html[data-phx-page="references"]) .header{height:var(--phx-size-96);}:where(html[data-phx-template|="product"],html[data-phx-page="home"],html[data-phx-page="references"]) .nav{display:flex;gap:var(--space-4);font-size:var(--phx-font-xs);white-space:nowrap;}:where(html[data-phx-template|="product"],html[data-phx-page="home"],html[data-phx-page="references"]) .nav a{color:inherit;text-decoration:none;padding-bottom:var(--space-2);}:where(html[data-phx-page="references"]) .nav a:hover{border-bottom:2px solid var(--phx-brand);}:where(html[data-phx-page="references"]) .header .nav a:first-child{border-bottom:0;}:where(html[data-phx-page="references"]) .header .nav a:nth-child(6){border-bottom:2px solid var(--phx-brand);}@media (max-width:950px){:where(html[data-phx-page="references"]) .nav{gap:var(--space-2);}}@media (max-width:620px){:where(html[data-phx-page="references"],html[data-phx-page="home"]) .header{height:auto;padding:var(--space-3) 0;flex-wrap:wrap;}:where(html[data-phx-page="references"],html[data-phx-page="home"]) .nav{order:3;width:100%;overflow:auto;}}:where(html[data-phx-page="references"]) h1{font-size:var(--phx-font-section);margin:var(--space-1) 0;}:where(html[data-phx-page="references"]) .eyebrow{letter-spacing:1px;}:where(html[data-phx-page="references"]) .map-caption{text-align:center;font-size:var(--phx-font-xs);color:var(--phx-text-muted);margin:var(--space-3) auto 0;line-height:var(--phx-leading-reading);max-width:var(--phx-size-960);}:where(html[data-phx-page="references"]) .intro-copy p + p{margin-top:var(--phx-content-space);}:where(html[data-phx-template|="product"],html[data-phx-page="ral"],html[data-phx-page="real-paint-color-sample-manufacturing"],html[data-phx-page="real-paint-samples-vs-printed-samples"],html[data-phx-page="references"],html[data-phx-page="terms-of-use"]) footer h3>a{color:inherit!important;text-decoration:none;font:inherit!important;letter-spacing:inherit;}:where(html[data-phx-template|="product"],html[data-phx-page="ral"],html[data-phx-page="real-paint-color-sample-manufacturing"],html[data-phx-page="real-paint-samples-vs-printed-samples"],html[data-phx-page="references"],html[data-phx-page="terms-of-use"]) footer h3>a:hover,:where(html[data-phx-template|="product"],html[data-phx-page="ral"],html[data-phx-page="real-paint-color-sample-manufacturing"],html[data-phx-page="real-paint-samples-vs-printed-samples"],html[data-phx-page="references"],html[data-phx-page="terms-of-use"]) footer h3>a:focus-visible{text-decoration:underline!important;text-underline-offset:4px;}:where(html[data-phx-page="references"]) .references-page{padding-bottom:var(--space-5);}:where(html[data-phx-page="references"]) .references-page .references-intro{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);align-items:center;gap:var(--space-7);margin:var(--space-7) auto;padding:0;max-width:var(--phx-size-960);line-height:var(--phx-leading-reading);color:var(--phx-text-muted);}:where(html[data-phx-page="references"]) .references-page .references-intro > *{min-width:0;}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-label,:where(html[data-phx-page="references"]) .references-page .references-logos-head .eyebrow,:where(html[data-phx-page="references"]) .references-page .export-markets .eyebrow{font-size:var(--phx-font-xs);letter-spacing:1.5px;text-transform:uppercase;color:var(--phx-brand);font-weight:700;}:where(html[data-phx-page="references"]) .references-page .references-intro h2{color:var(--phx-heading-color);font-size:clamp(var(--phx-font-subheading),3.35vw,var(--phx-font-page));line-height:var(--phx-leading-heading);letter-spacing:-.035em;margin:var(--space-2) 0 var(--space-3);}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-copy{display:grid;gap:var(--space-3);}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-copy p{margin:0;font-size:var(--phx-font-sm);line-height:var(--phx-leading-reading);color:var(--phx-text-muted);}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-visual{width:100%;max-width:var(--phx-size-480);justify-self:end;margin:0;padding:var(--space-4);background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-16);box-shadow:var(--phx-shadow-md);}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-visual img{display:block;width:100%;height:auto;max-height:var(--phx-size-384);object-fit:contain;object-position:center;border-radius:var(--phx-radius-12);}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-visual figcaption{margin-top:var(--space-2);color:var(--phx-text-muted);font-size:var(--phx-font-xs);line-height:var(--phx-leading-compact);}:where(html[data-phx-page="references"]) .references-page .references-logos-head{margin:var(--space-7) 0 var(--space-5);max-width:var(--phx-size-800);}:where(html[data-phx-page="references"]) .references-page .references-logos-head h2,:where(html[data-phx-page="references"]) .references-page .export-markets h2{margin:var(--space-2) 0 var(--space-3);color:var(--phx-heading-color);font-size:var(--phx-font-subheading);line-height:var(--phx-leading-ui);letter-spacing:-.45px;}:where(html[data-phx-page="references"]) .references-page .references-logos-head p{margin:0;color:var(--phx-text-muted);font-size:var(--phx-font-sm);line-height:var(--phx-leading-reading);}:where(html[data-phx-page="references"]) .references-page .references-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:stretch;}:where(html[data-phx-page="references"]) .references-page .references-logo-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:var(--phx-size-160);min-width:0;overflow:hidden;padding:var(--space-4);border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);background:var(--phx-surface);box-shadow:0 4px 14px var(--phx-alpha-ink-4);transition:transform .18s ease,box-shadow .18s ease;}:where(html[data-phx-page="references"]) .references-page .references-logo-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--phx-alpha-ink-8);}:where(html[data-phx-page="references"]) .references-page .references-logo-item img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;margin:auto;}:where(html[data-phx-page="references"]) .references-page .references-value-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin:var(--space-7) 0;}:where(html[data-phx-page="references"]) .references-page .references-value{background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);padding:var(--space-5);box-shadow:0 4px 14px var(--phx-alpha-ink-4);}:where(html[data-phx-page="references"]) .references-page .references-value h3{margin:0 0 var(--space-2);color:var(--phx-heading-color);font-size:var(--phx-font-card);line-height:var(--phx-leading-subheading);}:where(html[data-phx-page="references"]) .references-page .references-value p{margin:0;color:var(--phx-text-muted);font-size:var(--phx-font-sm);line-height:var(--phx-leading-reading);}:where(html[data-phx-page="references"]) .references-page .export-markets{margin:var(--space-7) 0 0;padding:0;border:0;}:where(html[data-phx-page="references"]) .references-page .export-copy{max-width:var(--phx-size-800);margin:0 auto var(--space-5);text-align:start;}:where(html[data-phx-page="references"]) .references-page .export-copy p{margin:0;color:var(--phx-text-muted);font-size:var(--phx-font-sm);line-height:var(--phx-leading-reading);}:where(html[data-phx-page="references"]) .references-page .export-markets img{display:block;width:100%;height:auto;object-fit:contain;border-radius:var(--phx-radius-12);background:var(--phx-surface);box-shadow:0 8px 26px var(--phx-alpha-ink-8);}@media (max-width:1024px){:where(html[data-phx-page="references"]) .references-page .references-intro{grid-template-columns:1fr;gap:var(--space-5);margin:var(--space-6) auto;}:where(html[data-phx-page="references"]) .references-page .references-intro .intro-visual{grid-row:1;justify-self:center;max-width:var(--phx-size-384);}:where(html[data-phx-page="references"]) .references-page .references-intro h2{font-size:var(--phx-font-section);}:where(html[data-phx-page="references"]) .references-page .references-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}:where(html[data-phx-page="references"]) .references-page .references-value-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}}@media (max-width:640px){:where(html[data-phx-page="references"]) .references-page .references-intro{margin:var(--space-5) auto;gap:var(--space-4);}:where(html[data-phx-page="references"]) .references-page .references-intro h2{font-size:var(--phx-font-subheading);}:where(html[data-phx-page="references"]) .references-page .references-logos-head{margin:var(--space-5) 0 var(--space-4);}:where(html[data-phx-page="references"]) .references-page .references-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}:where(html[data-phx-page="references"]) .references-page .references-logo-item{height:var(--phx-size-128);padding:var(--space-3);}:where(html[data-phx-page="references"]) .references-page .references-value-row{grid-template-columns:1fr;gap:var(--space-3);margin:var(--space-5) 0;}:where(html[data-phx-page="references"]) .references-page .references-value{padding:var(--space-4);}:where(html[data-phx-page="references"]) .references-page .export-markets{margin-top:var(--space-5);}}:where(html[data-phx-page="references"]) .references-page{
padding-block-end:var(--phx-page-space);
}:where(html[data-phx-page="references"]) .references-page .references-intro,
:where(html[data-phx-page="references"]) .references-page .references-value-row{
margin-block:var(--phx-section-space);
}:where(html[data-phx-page="references"]) .references-page .references-logos-head,
:where(html[data-phx-page="references"]) .references-page .export-markets{
margin-block-start:var(--phx-section-space);
}:where(html[data-phx-page="references"]) main.references-page{padding-block:0 var(--phx-flow-page)!important;}:where(html[data-phx-page="references"]) main.references-page > :is(section,div,figure){margin-block:0!important;}:where(html[data-phx-page="references"]) main.references-page > :is(section,div,figure) + :is(section,div,figure){margin-block-start:var(--phx-flow-section)!important;}:where(html[data-phx-page="references"]) main.references-page > .references-logos-head + .references-logo-grid{margin-block-start:var(--space-5)!important;}:where(html[data-phx-page="references"]) main.references-page.wrap{
width:100%;
max-width:none;
}:where(html[data-phx-page="references"]) main.references-page > :not(.phx-unified-hero){
width:min(var(--phx-size-1200),92%);
margin-inline:auto!important;
box-sizing:border-box;
}:where(html[data-phx-page="references"]) main.references-page > .references-intro{
max-width:var(--phx-size-960);
}:where(html[data-phx-page="references"]) main.references-page > .references-logos-head{
max-width:var(--phx-size-800);
}
/* PHOENiX Sample — Case Studies. Scoped to the Case Studies pages.
Keeps existing brand tokens and original CSS files; no new frontend stylesheet. */
.phx-cs-page{color:var(--phx-text);background:var(--phx-surface)}
.phx-cs-page *{box-sizing:border-box}
.phx-cs-page .phx-cs-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.48rem;padding:1.35rem 0 1rem;font-size:var(--phx-font-xs);color:var(--phx-neutral-600)}
.phx-cs-page .phx-cs-breadcrumbs a{color:inherit;text-decoration:underline;text-decoration-color:var(--phx-border);text-underline-offset:3px}
.phx-cs-page .phx-cs-breadcrumbs [aria-current]{color:var(--phx-neutral-800);font-weight:650}
.phx-cs-page .phx-cs-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1.8rem,4vw,4rem) 0 clamp(2.8rem,6vw,5rem)}
.phx-cs-page .phx-cs-hero-copy{min-width:0}
.phx-cs-page .phx-cs-kicker{font-size:var(--phx-font-xs);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--phx-neutral-600);margin:0 0 1rem}
.phx-cs-page .phx-cs-hero h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.12;color:var(--phx-heading-color);letter-spacing:-.028em;margin:0 0 1.2rem;overflow-wrap:break-word}
.phx-cs-page .phx-cs-lead{font-size:clamp(1rem,1.55vw,1.18rem);line-height:1.7;color:var(--phx-neutral-600);max-width:56ch;margin:0 0 1.6rem}
.phx-cs-page .phx-cs-tags{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.phx-cs-page .phx-cs-tags li{display:inline-block;border:1px solid var(--phx-border);padding:.45rem .8rem;border-radius:100px;font-size:var(--phx-font-xs);font-weight:600;color:var(--phx-neutral-700);background:var(--phx-surface-subtle)}
.phx-cs-page .phx-cs-hero-visual{margin:0;overflow:hidden;border-radius:12px;background:var(--phx-surface-muted);border:1px solid var(--phx-border)}
.phx-cs-page .phx-cs-hero-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.phx-cs-page figcaption{padding:.75rem 1rem;font-size:var(--phx-font-xs);line-height:1.5;color:var(--phx-neutral-600)}
.phx-cs-page .phx-cs-ribbon{background:var(--phx-surface-muted);border-block:1px solid var(--phx-border);padding:1.6rem 0}
.phx-cs-page .phx-cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 1.5rem;margin:0}
.phx-cs-page .phx-cs-facts>div{min-width:0}
.phx-cs-page .phx-cs-facts dt{font-size:var(--phx-font-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--phx-neutral-600);margin:0 0 .45rem}
.phx-cs-page .phx-cs-facts dd{font-weight:650;color:var(--phx-heading-color);line-height:1.55;margin:0;overflow-wrap:anywhere}
.phx-cs-page .phx-cs-content{padding:clamp(2.75rem,5vw,5rem) 0}
.phx-cs-page .phx-cs-prose{max-width:76ch;margin-inline:auto}
.phx-cs-page .phx-cs-prose h2,.phx-cs-page .phx-cs-section-head h2{font-size:clamp(1.5rem,2.25vw,2.1rem);line-height:1.3;color:var(--phx-heading-color);margin:0 0 .95rem}
.phx-cs-page .phx-cs-prose p{color:var(--phx-neutral-700);line-height:1.83;margin:.55rem 0 1rem}
.phx-cs-page .phx-cs-prose p+p{margin-top:1rem}
.phx-cs-page .phx-cs-divider{border:0;border-top:1px solid var(--phx-border);margin:2.5rem 0}
.phx-cs-page .phx-cs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0;list-style:none;padding:0}
.phx-cs-page .phx-cs-step{border:1px solid var(--phx-border);border-radius:10px;padding:1.35rem;background:var(--phx-surface);min-width:0}
.phx-cs-page .phx-cs-step-number{display:block;font-size:var(--phx-font-xs);font-weight:700;letter-spacing:.09em;color:var(--phx-neutral-500);margin-bottom:.7rem}
.phx-cs-page .phx-cs-step h3,.phx-cs-page .phx-cs-result h3{font-size:1.1rem;line-height:1.4;color:var(--phx-heading-color);margin:0 0 .6rem}
.phx-cs-page .phx-cs-step p,.phx-cs-page .phx-cs-result p{font-size:var(--phx-font-body);line-height:1.72;color:var(--phx-neutral-700);margin:0}
.phx-cs-page .phx-cs-grid-section{padding:clamp(2.6rem,5vw,4.8rem) 0;background:var(--phx-surface-subtle);border-block:1px solid var(--phx-border)}
.phx-cs-page .phx-cs-section-head{max-width:72ch;margin-bottom:1.4rem}
.phx-cs-page .phx-cs-section-head p{line-height:1.7;color:var(--phx-neutral-600);margin:0}
.phx-cs-page .phx-cs-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.phx-cs-page .phx-cs-result{border:1px solid var(--phx-border);border-radius:10px;background:var(--phx-surface);padding:1.5rem;min-width:0}
.phx-cs-page .phx-cs-result small{display:block;color:var(--phx-neutral-600);line-height:1.55;margin-top:.8rem}
.phx-cs-page .phx-cs-bulletlist{padding-left:1.35rem;margin:.6rem 0 1.2rem}
.phx-cs-page .phx-cs-bulletlist li{margin:.55rem 0;line-height:1.72;color:var(--phx-neutral-700)}
.phx-cs-page .phx-cs-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.3rem}
.phx-cs-page .phx-cs-gallery figure{margin:0;border-radius:10px;border:1px solid var(--phx-border);background:var(--phx-surface);overflow:hidden}
.phx-cs-page .phx-cs-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.phx-cs-page .phx-cs-related{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
.phx-cs-page .phx-cs-related a{border:1px solid var(--phx-border);border-radius:8px;padding:.72rem 1rem;color:var(--phx-neutral-700);font-weight:650;background:var(--phx-surface);text-decoration:none}
.phx-cs-page .phx-cs-related a:hover,.phx-cs-page .phx-cs-related a:focus-visible{background:var(--phx-surface-muted);border-color:var(--phx-neutral-450)}
.phx-cs-page .phx-cs-cta{margin:0 0 3rem;padding:clamp(1.8rem,4vw,3.5rem);border-radius:12px;background:var(--phx-surface-muted);border:1px solid var(--phx-border);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.phx-cs-page .phx-cs-cta h2{font-size:clamp(1.4rem,2.25vw,2rem);color:var(--phx-heading-color);margin:0 0 .55rem}
.phx-cs-page .phx-cs-cta p{margin:0;line-height:1.65;color:var(--phx-neutral-600)}
.phx-cs-page .phx-cs-action{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.25rem;min-height:var(--phx-control-height);border-radius:7px;background:var(--phx-brand);color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.phx-cs-page .phx-cs-action:hover,.phx-cs-page .phx-cs-action:focus-visible{background:var(--phx-brand-hover);color:#fff}
.phx-cs-page .phx-cs-preview{background:var(--phx-neutral-800);color:#fff;font-weight:650;font-size:var(--phx-font-xs);text-align:center;padding:.8rem 1rem}
.phx-cs-page .phx-cs-archive-hero{padding:clamp(3rem,6vw,6rem) 0 2.3rem;max-width:900px}
.phx-cs-page .phx-cs-archive-hero h1{font-size:clamp(2.1rem,4.2vw,3.7rem);line-height:1.16;color:var(--phx-heading-color);margin:0 0 1rem}
.phx-cs-page .phx-cs-archive-hero p{font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.8;color:var(--phx-neutral-600)}
.phx-cs-page .phx-cs-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;padding-bottom:4rem}
.phx-cs-page .phx-cs-card{border:1px solid var(--phx-border);overflow:hidden;background:var(--phx-surface);min-width:0}
.phx-cs-page .phx-cs-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.phx-cs-page .phx-cs-card-content{padding:1.25rem}
.phx-cs-page .phx-cs-card-content .phx-cs-kicker{margin-bottom:.6rem}
.phx-cs-page .phx-cs-card h2{font-size:1.24rem;line-height:1.38;margin:0 0 .6rem;color:var(--phx-heading-color)}
.phx-cs-page .phx-cs-card h2 a{color:inherit;text-decoration:none}
.phx-cs-page .phx-cs-card h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.phx-cs-page .phx-cs-card p{line-height:1.67;color:var(--phx-neutral-600);margin:0 0 1rem}
.phx-cs-page .phx-cs-card a.phx-cs-read{font-weight:700;color:var(--phx-neutral-700);text-underline-offset:3px}
.phx-cs-page :is(a,button):focus-visible{outline:2px solid var(--phx-focus-ring);outline-offset:3px}
@media(max-width:1000px){.phx-cs-page .phx-cs-steps,.phx-cs-page .phx-cs-results,.phx-cs-page .phx-cs-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phx-cs-page .phx-cs-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.phx-cs-page .phx-cs-hero{grid-template-columns:1fr;gap:1.5rem}.phx-cs-page .phx-cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.phx-cs-page .phx-cs-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:540px){.phx-cs-page .phx-cs-steps,.phx-cs-page .phx-cs-results,.phx-cs-page .phx-cs-card-grid,.phx-cs-page .phx-cs-gallery{grid-template-columns:1fr}.phx-cs-page .phx-cs-facts{gap:1.4rem 1rem}}
@media(prefers-reduced-motion:reduce){.phx-cs-page *{scroll-behavior:auto!important}}
/* === NUMIX CASE STUDY DRAFT v1: scoped components, no global rules changed === */
.phx-cs-page .phx-cs-numix-hero{padding-top:clamp(1.5rem,3vw,2.8rem)}
.phx-cs-page .phx-cs-numix-hero .phx-cs-hero-visual img{aspect-ratio:1 / 1;object-fit:contain;background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-numix-hero .phx-cs-hero-visual{box-shadow:var(--phx-shadow-md)}
.phx-cs-page .phx-cs-section{padding:clamp(2.4rem,4.8vw,4.4rem) 0}
.phx-cs-page .phx-cs-section h2{font-size:clamp(1.48rem,2.35vw,2.1rem);color:var(--phx-heading-color);margin:0 0 .9rem;line-height:1.32;letter-spacing:-.02em}
.phx-cs-page .phx-cs-section p{line-height:1.78}
.phx-cs-page .phx-cs-narrative{max-width:880px;margin-inline:auto}
.phx-cs-page .phx-cs-narrative>p:not(.phx-cs-kicker){max-width:76ch;margin:.75rem 0 1.15rem;font-size:var(--phx-font-body);line-height:1.85}
.phx-cs-page .phx-cs-wash{background:var(--phx-surface-subtle);border-block:1px solid var(--phx-border)}
.phx-cs-page .phx-cs-metric-section{padding:1.25rem 0 1.5rem}
.phx-cs-page .phx-cs-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}
.phx-cs-page .phx-cs-metric{padding:1.2rem;border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);background:var(--phx-surface);min-width:0}
.phx-cs-page .phx-cs-metric strong{font-size:clamp(1.45rem,2.3vw,2.1rem);font-weight:750;display:block;line-height:1.2;color:var(--phx-neutral-800)}
.phx-cs-page .phx-cs-metric span{display:block;color:var(--phx-text-muted);font-size:var(--phx-font-sm);line-height:1.5;margin-top:.42rem}
.phx-cs-page .phx-cs-chart-surface,.phx-cs-page .phx-cs-approval-surface{background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-16);padding:clamp(1.1rem,3vw,2rem)}
.phx-cs-page .phx-cs-chart-legend{display:flex;flex-wrap:wrap;gap:.55rem 1.25rem;margin:0 0 1.6rem;padding:0;list-style:none;font-size:var(--phx-font-sm);font-weight:600}
.phx-cs-page .phx-cs-chart-legend li{display:flex;align-items:center;gap:.48rem}
.phx-cs-page .phx-cs-chart-key{display:inline-block;width:13px;height:13px;border-radius:3px;flex:0 0 auto}
.phx-cs-page .phx-cs-solid{background:#5e635f}.phx-cs-page .phx-cs-metallic{background:#9aa5aa}.phx-cs-page .phx-cs-pearl{background:#c6b69a}.phx-cs-page .phx-cs-xirallic{background:#9094af}
.phx-cs-page .phx-cs-bar-layout{display:grid;gap:1.4rem}
.phx-cs-page .phx-cs-chart-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .55rem;font-size:var(--phx-font-sm);line-height:1.4}
.phx-cs-page .phx-cs-chart-row-head strong{font-size:1.1rem;color:var(--phx-heading-color)}
.phx-cs-page .phx-cs-chart-track{display:flex;align-items:stretch;overflow:hidden;width:100%;height:24px;border-radius:5px;background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-chart-segment{height:100%;min-width:0;display:block}
.phx-cs-page .phx-cs-chart-table-scroll{overflow-x:auto;max-width:100%;margin-top:1.7rem}
.phx-cs-page .phx-cs-data-table{width:100%;border-collapse:collapse;text-align:start;font-size:var(--phx-font-sm);min-width:540px}
.phx-cs-page .phx-cs-data-table caption{text-align:start;font-weight:700;color:var(--phx-heading-color);padding:0 0 .6rem}
.phx-cs-page .phx-cs-data-table th,.phx-cs-page .phx-cs-data-table td{border-bottom:1px solid var(--phx-border);padding:.68rem .6rem;text-align:start}
.phx-cs-page .phx-cs-data-table td{font-variant-numeric:tabular-nums}
.phx-cs-page .phx-cs-table-total{font-weight:700;background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-chart-note{font-size:var(--phx-font-xs);line-height:1.65;color:var(--phx-text-muted);margin:1rem 0 0}
.phx-cs-page .phx-cs-approval{background:var(--phx-surface-subtle);border-block:1px solid var(--phx-border)}
.phx-cs-page .phx-cs-approval-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.1rem}
.phx-cs-page .phx-cs-approval-stats>div{display:grid;gap:.2rem}
.phx-cs-page .phx-cs-approval-stats strong{font-size:clamp(1.5rem,3.4vw,2.7rem);font-weight:750;color:var(--phx-neutral-800);line-height:1.2}
.phx-cs-page .phx-cs-approval-stats span{font-size:var(--phx-font-sm);line-height:1.5;color:var(--phx-text-muted)}
.phx-cs-page .phx-cs-approval-track{display:flex;overflow:hidden;width:100%;height:24px;border-radius:5px;background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-first{display:block;background:#5e635f;height:100%}.phx-cs-page .phx-cs-second{display:block;background:#c6b69a;height:100%}
.phx-cs-page .phx-cs-approval-done{margin:1rem 0 0;color:var(--phx-heading-color);font-weight:700;font-size:var(--phx-font-sm)}
.phx-cs-page .phx-cs-approval-done span{color:var(--phx-brand);margin-inline-end:.35rem}
.phx-cs-page .phx-cs-numix-hero .phx-cs-lead{max-width:64ch}
.phx-cs-page .phx-cs-step-number{font-size:.98rem;font-variant-numeric:tabular-nums}
.phx-cs-page .phx-cs-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.phx-cs-page .phx-cs-product{background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);padding:1.4rem;min-width:0}
.phx-cs-page .phx-cs-product-index{display:block;color:var(--phx-neutral-500);font-size:var(--phx-font-sm);font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.phx-cs-page .phx-cs-product h3{font-size:1.1rem;margin:0;color:var(--phx-heading-color);line-height:1.45}
.phx-cs-page .phx-cs-result{min-height:138px}
.phx-cs-page .phx-cs-result-figure{display:block;font-size:clamp(1.55rem,2.8vw,2.2rem);color:var(--phx-neutral-800);line-height:1.1;margin-bottom:.75rem}
.phx-cs-page .phx-cs-pending-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.phx-cs-page .phx-cs-photo-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:190px;padding:1.5rem 1rem;border:1px dashed var(--phx-neutral-450);border-radius:var(--phx-radius-12);background:var(--phx-surface);gap:.55rem;color:var(--phx-neutral-700)}
.phx-cs-page .phx-cs-photo-symbol{font-size:1.8rem;line-height:1;color:var(--phx-neutral-500)}
.phx-cs-page .phx-cs-photo-pending strong{font-size:1.05rem;color:var(--phx-heading-color)}
.phx-cs-page .phx-cs-photo-pending span{font-size:var(--phx-font-xs);color:var(--phx-text-muted)}
.phx-cs-page .phx-cs-approved-caption{font-weight:650;font-size:var(--phx-font-sm);margin:0 0 1rem}
.phx-cs-page .phx-cs-archive-hero{padding-top:clamp(2.2rem,5vw,4.5rem)}
.phx-cs-page .phx-cs-card img{object-fit:contain;background:var(--phx-surface-muted);aspect-ratio:4 / 3}
.phx-cs-page .phx-cs-card .phx-cs-kicker{font-size:.82rem;letter-spacing:.08em}
.phx-cs-page .phx-cs-cta{margin-top:1rem}
:where(html[dir="rtl"]) .phx-cs-page .phx-cs-breadcrumbs{direction:rtl}
:where(html[dir="rtl"]) .phx-cs-page .phx-cs-data-table th,:where(html[dir="rtl"]) .phx-cs-page .phx-cs-data-table td{text-align:right}
:where(html[dir="rtl"]) .phx-cs-page .phx-cs-bulletlist{padding-left:0;padding-right:1.4rem}
@media(max-width:1000px){.phx-cs-page .phx-cs-metrics,.phx-cs-page .phx-cs-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.phx-cs-page .phx-cs-pending-grid{grid-template-columns:1fr}.phx-cs-page .phx-cs-photo-pending{min-height:130px}}
@media(max-width:540px){.phx-cs-page .phx-cs-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.phx-cs-page .phx-cs-metric{padding:.9rem}.phx-cs-page .phx-cs-chart-surface,.phx-cs-page .phx-cs-approval-surface{padding:1rem}.phx-cs-page .phx-cs-metric strong{font-size:1.5rem}.phx-cs-page .phx-cs-product-grid{grid-template-columns:1fr 1fr;gap:.65rem}.phx-cs-page .phx-cs-product{padding:1rem}}
/* Case studies interim landing (not indexed until project assets are approved). */
.phx-cs-page .phx-cs-landing-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);padding:0 0 var(--space-8)}
.phx-cs-page .phx-cs-landing-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--phx-size-48);padding:var(--space-3) var(--space-5);border-radius:var(--phx-radius-8);border:1px solid var(--phx-border);background:var(--phx-surface-muted);font-weight:600;text-decoration:none;color:var(--phx-text-strong)}
.phx-cs-page .phx-cs-landing-actions a:hover,.phx-cs-page .phx-cs-landing-actions a:focus-visible{background:var(--phx-surface-subtle)}
/* PHOENiX Case Studies: neutral page-wide canvas, all tinted treatments contained.
Scoped to case studies; does not affect clients, general site pages, or CTA/footer. */
.phx-cs-page > .phx-cs-ribbon,
.phx-cs-page > .phx-cs-grid-section,
.phx-cs-page > .phx-cs-section.phx-cs-wash,
.phx-cs-page > .phx-cs-section.phx-cs-approval {
background:transparent;
border-block:0;
}
.phx-cs-page > .phx-cs-ribbon > .wrap,
.phx-cs-page > .phx-cs-grid-section > .wrap,
.phx-cs-page > .phx-cs-section.phx-cs-wash > .wrap,
.phx-cs-page > .phx-cs-section.phx-cs-approval > .wrap {
background:var(--phx-surface-subtle);
border:1px solid var(--phx-border);
border-radius:var(--phx-radius-16);
padding:clamp(var(--space-5),3.1vw,var(--space-8));
box-sizing:border-box;
}
.phx-cs-page > .phx-cs-ribbon > .wrap {
background:var(--phx-surface-muted);
}
.phx-cs-page > .phx-cs-preview {
width:min(var(--phx-size-1200),92%);
margin-inline:auto;
margin-block:var(--space-3) 0;
border-radius:var(--phx-radius-8);
}
/* NUMIX international automotive case study: source-image gallery. Scoped to case-study pages only. */
.phx-cs-page .phx-cs-delivery-note{max-width:900px;margin:1.6rem auto 0;padding:1.15rem 1.35rem;border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);background:var(--phx-surface)}
.phx-cs-page .phx-cs-delivery-note h3{margin:0 0 .35rem;font-size:var(--phx-font-body);color:var(--phx-heading-color)}
.phx-cs-page .phx-cs-delivery-note p{margin:0;line-height:1.68;color:var(--phx-text-muted)}
.phx-cs-page .phx-cs-photo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin:1.65rem 0 1rem}
.phx-cs-page .phx-cs-gallery-card{min-width:0;margin:0;overflow:hidden;border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);background:var(--phx-surface)}
.phx-cs-page .phx-cs-gallery-card a{display:block;overflow:hidden;background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-gallery-card img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:contain;padding:clamp(.6rem,1.4vw,1.35rem)}
.phx-cs-page .phx-cs-gallery-feature{grid-column:1 / -1}
.phx-cs-page .phx-cs-gallery-feature img{aspect-ratio:2 / 1;max-height:580px}
.phx-cs-page .phx-cs-gallery-card figcaption{padding:.85rem 1rem;font-size:var(--phx-font-sm);font-weight:550;line-height:1.55;color:var(--phx-text-muted)}
.phx-cs-page .phx-cs-one-pending{border:1px dashed var(--phx-border);border-radius:var(--phx-radius-12);padding:.9rem 1.1rem;color:var(--phx-text-muted);font-size:var(--phx-font-sm);background:var(--phx-surface)}
.phx-cs-page .phx-cs-one-pending strong{color:var(--phx-heading-color)}
@media(max-width:700px){.phx-cs-page .phx-cs-photo-gallery{grid-template-columns:1fr;gap:.85rem}.phx-cs-page .phx-cs-gallery-feature{grid-column:auto}.phx-cs-page .phx-cs-gallery-card img,.phx-cs-page .phx-cs-gallery-feature img{aspect-ratio:auto;max-height:none}}
/* Case Study Editorial Standard v2 — shared by future studies. Only bounded surfaces are tinted.
Uses approved PHOENiX banner shell; do not introduce full-viewport background bands. */
.phx-cs-page .phx-cs-banner-shell{margin-block:0}
.phx-cs-page .phx-cs-standard-banner{position:relative;margin:0;overflow:hidden}
.phx-cs-page .phx-cs-standard-banner .ral-hero-copy{max-width:660px}
.phx-cs-page .phx-cs-standard-banner .ral-hero-copy h1{font-size:clamp(1.85rem,3.65vw,3.25rem);line-height:1.16;max-width:20ch;margin-bottom:.45rem}
.phx-cs-page .phx-cs-standard-banner .page-subtitle{font-size:clamp(1.05rem,1.7vw,1.38rem);line-height:1.45;max-width:42ch}
.phx-cs-page .phx-cs-standard-banner .eyebrow{margin-bottom:.8rem;font-size:var(--phx-font-xs);letter-spacing:.11em}
.phx-cs-page .phx-cs-crumb-shell .phx-cs-breadcrumbs{padding-block:1.45rem 1.05rem}
.phx-cs-page .phx-cs-feature{padding:clamp(1.5rem,3.5vw,3rem) 0 clamp(2.6rem,5vw,4.5rem)}
.phx-cs-page .phx-cs-feature-grid{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);align-items:center;gap:clamp(1.5rem,4.4vw,4.25rem)}
.phx-cs-page .phx-cs-feature-copy h2{font-size:clamp(1.7rem,2.75vw,2.6rem);letter-spacing:-.02em;line-height:1.25;margin:0 0 1.2rem}
.phx-cs-page .phx-cs-feature-lead{font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.82;max-width:64ch;color:var(--phx-text-muted);margin:0 0 1.4rem}
.phx-cs-page .phx-cs-photo-panel{margin:0;background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-16);overflow:hidden;min-width:0;box-shadow:0 7px 25px rgba(20,24,24,.035)}
.phx-cs-page .phx-cs-photo-panel .phx-cs-photo-mat,.phx-cs-page .phx-cs-photo-panel a.phx-cs-photo-mat{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;background:var(--phx-surface);text-decoration:none;border:0;overflow:hidden}
.phx-cs-page .phx-cs-feature-photo .phx-cs-photo-mat{min-height:380px;aspect-ratio:1.24}
.phx-cs-page .phx-cs-feature-photo .phx-cs-photo-mat img{display:block;width:100%;height:100%;max-height:450px;padding:clamp(1.1rem,3vw,2rem);object-fit:contain;object-position:center;background:var(--phx-surface)}
.phx-cs-page .phx-cs-photo-caption{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;margin:0;padding:1.15rem 1.35rem 1.3rem;background:var(--phx-surface-muted);border-top:1px solid var(--phx-border);color:var(--phx-neutral-700);min-height:100px;line-height:1.55}
.phx-cs-page .phx-cs-photo-caption .phx-cs-photo-caption-overline{font-size:var(--phx-font-xs);font-weight:700;letter-spacing:.1em;color:var(--phx-neutral-600);text-transform:uppercase}
.phx-cs-page .phx-cs-photo-caption strong{color:var(--phx-heading-color);font-size:var(--phx-font-body);line-height:1.35}
.phx-cs-page .phx-cs-photo-caption>span:last-child{font-size:var(--phx-font-sm);color:var(--phx-text-muted)}
.phx-cs-page .phx-cs-feature-photo .phx-cs-photo-caption{padding:1.1rem 1.4rem}
.phx-cs-page .phx-cs-section{padding-block:clamp(2.15rem,4vw,3.55rem)}
.phx-cs-page .phx-cs-section-head{margin-bottom:1.8rem}
.phx-cs-page .phx-cs-section-head h2{margin-bottom:.65rem}
.phx-cs-page .phx-cs-ribbon{padding-top:.75rem}
.phx-cs-page .phx-cs-photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:1.6rem}
.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-card{background:var(--phx-surface);border-radius:var(--phx-radius-16);box-shadow:0 7px 25px rgba(20,24,24,.035)}
.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-card a{background:var(--phx-surface)}
.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-card img{display:block;width:100%;height:auto;object-fit:contain;object-position:center;aspect-ratio:1.45;padding:clamp(.9rem,2vw,1.8rem);background:var(--phx-surface);max-height:470px}
.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-feature{grid-column:1/-1}
.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-feature img{aspect-ratio:2.25;max-height:520px;padding:clamp(.9rem,2.5vw,2rem)}
.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-card .phx-cs-photo-caption{padding:1.15rem 1.4rem;min-height:112px}
.phx-cs-page .phx-cs-composition-card{background:var(--phx-surface-subtle);border:1px solid var(--phx-border);border-radius:var(--phx-radius-16);padding:clamp(1.15rem,3vw,2.2rem)}
.phx-cs-page .phx-cs-composition-legend{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:var(--phx-font-sm);font-weight:650;color:var(--phx-neutral-700);margin-bottom:1.8rem}
.phx-cs-page .phx-cs-composition-legend span{display:inline-flex;align-items:center;gap:.65rem}
.phx-cs-page .phx-cs-composition-legend i{display:inline-block;width:14px;height:14px;border-radius:3px}
.phx-cs-page .phx-cs-swatch-solid,.phx-cs-page .phx-cs-composition-solid{background:#555c59}
.phx-cs-page .phx-cs-swatch-effects,.phx-cs-page .phx-cs-composition-effects{background:#b7aa90}
.phx-cs-page .phx-cs-composition-row{margin-bottom:1.75rem}
.phx-cs-page .phx-cs-composition-header,.phx-cs-page .phx-cs-composition-values{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:var(--phx-font-sm);font-variant-numeric:tabular-nums}
.phx-cs-page .phx-cs-composition-header{margin-bottom:.65rem}
.phx-cs-page .phx-cs-composition-header strong{font-size:1.08rem;color:var(--phx-heading-color)}
.phx-cs-page .phx-cs-composition-track{display:flex;width:100%;height:26px;overflow:hidden;border-radius:6px;background:var(--phx-border)}
.phx-cs-page .phx-cs-composition-track>span{display:block;min-width:0;height:100%}
.phx-cs-page .phx-cs-composition-values{margin-top:.45rem;color:var(--phx-neutral-700);font-weight:650}
.phx-cs-page .phx-cs-composition-card .phx-cs-chart-note{padding-top:.7rem;border-top:1px solid var(--phx-border)}
html[dir="rtl"] .phx-cs-page .phx-cs-photo-caption{align-items:flex-start;text-align:right}
@media(max-width:850px){.phx-cs-page .phx-cs-feature-grid{grid-template-columns:1fr}.phx-cs-page .phx-cs-feature-copy{max-width:700px}.phx-cs-page .phx-cs-feature-photo{max-width:730px;width:100%}.phx-cs-page .phx-cs-feature-photo .phx-cs-photo-mat{min-height:0;aspect-ratio:1.55}}
@media(max-width:650px){.phx-cs-page .phx-cs-standard-banner .ral-hero-copy h1{font-size:clamp(1.75rem,5.5vw,2.3rem)}.phx-cs-page .phx-cs-feature{padding-top:1.2rem}.phx-cs-page .phx-cs-photo-gallery{grid-template-columns:1fr;gap:1.1rem}.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-feature{grid-column:auto}.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-card img,.phx-cs-page .phx-cs-photo-gallery .phx-cs-gallery-feature img{aspect-ratio:auto;max-height:none}.phx-cs-page .phx-cs-photo-caption{min-height:0}.phx-cs-page .phx-cs-feature-photo .phx-cs-photo-mat{aspect-ratio:1.15}}
/* NUMIX editorial project narrative v3: images accompany the relevant technical text.
Reusable .phx-cs-story component for future case studies; no global tokens changed. */
.phx-cs-page .phx-cs-story-section{padding-block:clamp(2.1rem,4.6vw,4.3rem)}
.phx-cs-page .phx-cs-story-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.phx-cs-page .phx-cs-story-section.phx-cs-story--media-left .phx-cs-story-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.phx-cs-page .phx-cs-story-copy{min-width:0;max-width:100%;}
.phx-cs-page .phx-cs-story-copy h2{max-width:27ch;font-size:clamp(1.55rem,2.5vw,2.35rem);letter-spacing:-.023em;line-height:1.28}
.phx-cs-page .phx-cs-story-copy>p:not(.phx-cs-kicker):not(.phx-cs-story-label){max-width:65ch;margin:.72rem 0 1.05rem;line-height:1.8;color:var(--phx-neutral-700)}
.phx-cs-page .phx-cs-story-copy>.phx-cs-story-context{margin-top:1.35rem;border-inline-start:3px solid var(--phx-neutral-450);padding:.1rem 1rem;max-width:64ch}
.phx-cs-page .phx-cs-story-copy>.phx-cs-story-context p{margin:.35rem 0;line-height:1.72;color:var(--phx-neutral-700)}
.phx-cs-page .phx-cs-story-label{display:inline-block;padding:.4rem .65rem;margin:.25rem 0 .6rem;border:1px solid var(--phx-border);border-radius:5px;background:var(--phx-surface-muted);color:var(--phx-neutral-700);font-size:var(--phx-font-xs);font-weight:700;line-height:1.4;letter-spacing:.035em}
.phx-cs-page .phx-cs-story-image{width:100%;min-width:0;align-self:stretch;display:flex;flex-direction:column}
.phx-cs-page .phx-cs-story-image a.phx-cs-photo-mat{flex:1;min-height:300px;aspect-ratio:1.25;}
.phx-cs-page .phx-cs-story-image .phx-cs-photo-mat img{display:block;width:100%;height:100%;max-height:500px;object-fit:contain;background:var(--phx-surface);padding:clamp(.85rem,1.8vw,1.5rem)}
.phx-cs-page .phx-cs-story-image .phx-cs-photo-caption{min-height:108px;padding:1rem 1.2rem 1.2rem}
.phx-cs-page .phx-cs-story-section.phx-cs-story--media-left .phx-cs-story-image{grid-column:1;grid-row:1}
.phx-cs-page .phx-cs-story-section.phx-cs-story--media-left .phx-cs-story-copy{grid-column:2;grid-row:1}
.phx-cs-page .phx-cs-story-section.phx-cs-story--media-right .phx-cs-story-copy{grid-column:1;grid-row:1}
.phx-cs-page .phx-cs-story-section.phx-cs-story--media-right .phx-cs-story-image{grid-column:2;grid-row:1}
.phx-cs-page .phx-cs-quality-table{width:100%;border-collapse:collapse;font-size:var(--phx-font-sm);margin-top:1.1rem}
.phx-cs-page .phx-cs-quality-table th{text-align:start;color:var(--phx-heading-color);font-weight:700;background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-quality-table th,.phx-cs-page .phx-cs-quality-table td{padding:.82rem 1rem;border-bottom:1px solid var(--phx-border);vertical-align:top;line-height:1.55}
.phx-cs-page .phx-cs-quality-table td:first-child{font-weight:650;color:var(--phx-heading-color);width:31%}
.phx-cs-page .phx-cs-evidence{display:grid;grid-template-columns:minmax(0,.77fr) minmax(0,1.23fr);gap:clamp(1.3rem,4vw,3.2rem);align-items:start}
.phx-cs-page .phx-cs-evidence-description p{line-height:1.75;color:var(--phx-neutral-700)}
.phx-cs-page .phx-cs-evidence-sheet{background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);overflow:hidden}
.phx-cs-page .phx-cs-evidence-scroll{overflow-x:auto}
.phx-cs-page .phx-cs-questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.phx-cs-page .phx-cs-question{border:1px solid var(--phx-border);background:var(--phx-surface);border-radius:var(--phx-radius-12);padding:clamp(1rem,2vw,1.5rem);min-width:0}
.phx-cs-page .phx-cs-question h3{font-size:1.05rem;line-height:1.45;color:var(--phx-heading-color);margin:0 0 .7rem}
.phx-cs-page .phx-cs-question p{color:var(--phx-text-muted);line-height:1.7;margin:0;font-size:var(--phx-font-sm)}
.phx-cs-page .phx-cs-evidence-note{max-width:88ch;margin:1.1rem 0 0;color:var(--phx-neutral-600);font-size:var(--phx-font-xs);line-height:1.65}
.phx-cs-page .phx-cs-product-detail{font-size:var(--phx-font-xs);color:var(--phx-text-muted);line-height:1.5;margin:.5rem 0 0}
@media(max-width:900px){
.phx-cs-page .phx-cs-story-grid,.phx-cs-page .phx-cs-story-section.phx-cs-story--media-left .phx-cs-story-grid,.phx-cs-page .phx-cs-evidence{grid-template-columns:1fr;gap:1.35rem}
.phx-cs-page .phx-cs-story-section .phx-cs-story-copy{grid-column:1!important;grid-row:1!important}
.phx-cs-page .phx-cs-story-section .phx-cs-story-image{grid-column:1!important;grid-row:2!important;max-width:760px}
.phx-cs-page .phx-cs-story-image a.phx-cs-photo-mat{min-height:0;aspect-ratio:1.7}
.phx-cs-page .phx-cs-questions{grid-template-columns:1fr 1fr}
}
@media(max-width:550px){
.phx-cs-page .phx-cs-story-image a.phx-cs-photo-mat{aspect-ratio:auto}
.phx-cs-page .phx-cs-story-image .phx-cs-photo-mat img{height:auto;max-height:400px;padding:.85rem}
.phx-cs-page .phx-cs-questions{grid-template-columns:1fr}
.phx-cs-page .phx-cs-quality-table{min-width:0}
.phx-cs-page .phx-cs-quality-table th,.phx-cs-page .phx-cs-quality-table td{padding:.65rem .65rem;font-size:var(--phx-font-xs)}
.phx-cs-page .phx-cs-story-copy h2{max-width:none}
}
.phx-cs-page .phx-cs-quality-table caption{text-align:start;padding:1rem 1rem .6rem;color:var(--phx-heading-color);font-weight:700;font-size:var(--phx-font-body)}
/* Accessible quick navigation for long case-study pages */
.phx-cs-page .phx-cs-jump{display:flex;align-items:center;gap:.55rem 1.1rem;flex-wrap:wrap;padding-block:.55rem 1rem;border-bottom:1px solid var(--phx-border)}
.phx-cs-page .phx-cs-jump-label{font-size:var(--phx-font-xs);font-weight:700;letter-spacing:.04em;color:var(--phx-neutral-700);margin-inline-end:.15rem}
.phx-cs-page .phx-cs-jump a{font-size:var(--phx-font-sm);color:var(--phx-neutral-700);text-decoration:none;padding:.42rem .25rem;white-space:nowrap;border-bottom:1px solid transparent}
.phx-cs-page .phx-cs-jump a:hover,.phx-cs-page .phx-cs-jump a:focus-visible{color:var(--phx-heading-color);border-color:var(--phx-neutral-700)}
.phx-cs-page [id]:is(h2,h3){scroll-margin-top:90px}
@media(max-width:550px){.phx-cs-page .phx-cs-jump{gap:.35rem .7rem;padding-block:.65rem}.phx-cs-page .phx-cs-jump-label{width:100%}.phx-cs-page .phx-cs-jump a{font-size:var(--phx-font-xs)}}
/* NUMIX project final layout refinements — reuse existing PHOENiX spacing tokens only.
No global typography/spacing changes and no page-wide colored backgrounds. */
.phx-cs-page .phx-cs-tags{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:1fr;
gap:var(--space-2);
align-items:stretch;
}
.phx-cs-page .phx-cs-tags>li{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
min-height:var(--phx-control-height);
height:100%;
box-sizing:border-box;
line-height:var(--phx-leading-ui);
padding:var(--space-2) var(--space-3);
}
.phx-cs-page .phx-cs-quality-table{margin-top:0}
.phx-cs-page .phx-cs-quality-table thead,
.phx-cs-page .phx-cs-quality-table thead tr,
.phx-cs-page .phx-cs-quality-table thead th{
background:var(--phx-surface-muted);
}
.phx-cs-page .phx-cs-quality-table thead th{border-top:0}
.phx-cs-page .phx-cs-quality-table{border-spacing:0}
/* Existing section rhythm, also used throughout the site. */
.phx-cs-page .phx-cs-section,
.phx-cs-page .phx-cs-feature{padding-block:var(--phx-section-space)}
.phx-cs-page .phx-cs-section-head{margin-bottom:var(--phx-section-head-gap)}
.phx-cs-page .phx-cs-feature-grid,
.phx-cs-page .phx-cs-story-grid{gap:var(--phx-grid-gap)}
.phx-cs-page .phx-cs-feature-lead{margin-bottom:var(--phx-content-gap)}
.phx-cs-page > .phx-cs-ribbon > .wrap,
.phx-cs-page > .phx-cs-grid-section > .wrap,
.phx-cs-page > .phx-cs-section.phx-cs-wash > .wrap,
.phx-cs-page > .phx-cs-section.phx-cs-approval > .wrap{padding:var(--phx-content-gap)}
/* Three original product photographs arranged as a restrained overlapping collage. */
.phx-cs-page .phx-cs-feature-collage .phx-cs-collage{
position:relative;
width:100%;
aspect-ratio:1.38;
background:var(--phx-surface);
isolation:isolate;
overflow:hidden;
}
.phx-cs-page .phx-cs-collage-card{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:var(--phx-surface);
border:1px solid var(--phx-border);
border-radius:var(--phx-radius-12);
box-shadow:var(--phx-shadow-md);
padding:var(--space-2);
box-sizing:border-box;
}
.phx-cs-page .phx-cs-collage-card img{
display:block;width:100%;height:100%;object-fit:contain;
background:var(--phx-surface);
}
.phx-cs-page .phx-cs-collage-card--left{
z-index:1; width:54%;height:58%;inset-block-start:var(--space-5);inset-inline-start:var(--space-4);
transform:rotate(-4deg)
}
.phx-cs-page .phx-cs-collage-card--right{
z-index:2; width:54%;height:58%;inset-block-start:var(--space-7);inset-inline-end:var(--space-4);
transform:rotate(4deg)
}
.phx-cs-page .phx-cs-collage-card--front{
z-index:3;width:48%;height:83%;inset-block-end:var(--space-4);inset-inline-start:26%;
}
.phx-cs-page .phx-cs-feature-collage figcaption{display:flex;flex-direction:column;gap:var(--space-2)}
/* Case Studies index follows the existing shared image hero proportions and UI. */
.phx-cs-page .phx-cs-library-banner .ral-hero-copy{max-width:var(--phx-hero-measure)}
.phx-cs-page .phx-cs-library-banner .page-subtitle{max-width:var(--phx-intro-measure)}
@media (max-width:760px){
.phx-cs-page .phx-cs-collage-card{padding:var(--space-1)}
.phx-cs-page .phx-cs-collage-card--left{inset-inline-start:var(--space-2)}
.phx-cs-page .phx-cs-collage-card--right{inset-inline-end:var(--space-2)}
.phx-cs-page .phx-cs-collage-card--front{inset-block-end:var(--space-2)}
}
/* Case Studies library: one approved-for-preview project; layout scales to future entries.
Scoped to the library only, using site spacing and colors. */
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid{grid-template-columns:1fr}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured{display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);align-items:stretch}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured .phx-cs-card-image-link{display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--phx-surface)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured .phx-cs-card-image-link img{width:100%;height:auto;max-height:370px;aspect-ratio:auto;object-fit:contain;background:transparent}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured .phx-cs-card-content{display:flex;flex-direction:column;justify-content:center;padding:var(--space-6);border-inline-start:1px solid var(--phx-border)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured h2{font-size:clamp(1.25rem,2.35vw,1.85rem)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured a.phx-cs-read{display:inline-block;align-self:flex-start}
@media(max-width:720px){
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured{grid-template-columns:1fr}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured .phx-cs-card-image-link{padding:var(--space-4)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured .phx-cs-card-image-link img{max-height:270px}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured .phx-cs-card-content{border-inline-start:0;border-top:1px solid var(--phx-border);padding:var(--space-5)}
}
/* PHOENiX Case Studies: two reserved projects beneath the active NUMIX preview.
Component-scoped; uses existing site colors and spacing tokens only. */
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--phx-grid-gap);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured{
grid-column:1/-1;
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--reserved{
display:flex;
flex-direction:column;
border-style:dashed;
background:var(--phx-surface);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-reserved-heading{
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-4) var(--space-5);
background:var(--phx-surface-muted);
border-bottom:1px solid var(--phx-border);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-reserved-index{
font-size:var(--phx-font-subheading);
line-height:var(--phx-leading-ui);
font-weight:700;
color:var(--phx-heading-color);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-reserved-heading-text{
font-size:var(--phx-font-xs);
color:var(--phx-neutral-600);
font-weight:650;
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--reserved .phx-cs-card-content{
padding:var(--space-5);
flex:1;
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--reserved h2{
margin-bottom:var(--space-2);
}
@media(max-width:720px){
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid{
grid-template-columns:1fr;
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--featured{
grid-column:auto;
}
}
/* PHOENiX NUMIX approved Case Study — scoped editorial finish, using existing tokens only. */
.phx-cs-page .phx-cs-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:var(--space-2)}
.phx-cs-page .phx-cs-tags>li{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:var(--phx-control-height);height:100%;padding:var(--space-2) var(--space-2);box-sizing:border-box;line-height:var(--phx-leading-ui);margin:0}
.phx-cs-page .phx-cs-quality-table{width:100%;margin-block-start:0;border-collapse:collapse;border-spacing:0}
.phx-cs-page .phx-cs-quality-table thead,.phx-cs-page .phx-cs-quality-table thead tr,.phx-cs-page .phx-cs-quality-table thead th{background:var(--phx-surface-muted)}
.phx-cs-page .phx-cs-evidence-scroll{padding:0;overflow-x:auto}
/* Photographs float naturally on white; only the copy captions have a neutral backing. */
.phx-cs-page .phx-cs-photo-panel{border:0;border-radius:0;box-shadow:none;background:var(--phx-surface);overflow:visible}
.phx-cs-page .phx-cs-photo-panel .phx-cs-photo-mat,.phx-cs-page .phx-cs-photo-panel a.phx-cs-photo-mat{border:0;border-radius:0;box-shadow:none;background:var(--phx-surface);overflow:visible;padding:0}
.phx-cs-page .phx-cs-photo-panel img{background:transparent;object-fit:contain}
.phx-cs-page .phx-cs-photo-caption{background:var(--phx-surface-muted);border-radius:var(--phx-radius-8);padding:var(--space-3) var(--space-4);margin-block-start:var(--space-2)}
.phx-cs-page .phx-cs-feature-collage .phx-cs-collage{background:var(--phx-surface)}
.phx-cs-page .phx-cs-collage-card{border:0;box-shadow:none;background:transparent;padding:0;border-radius:0;overflow:visible}
.phx-cs-page .phx-cs-collage-card img{background:transparent}
/* Use the same vertical rhythm tokens as the rest of the site; do not invent separate spacing scale. */
.phx-cs-page .phx-cs-section,.phx-cs-page .phx-cs-feature{padding-block:var(--phx-section-space)}
.phx-cs-page .phx-cs-story-grid,.phx-cs-page .phx-cs-feature-grid{gap:var(--phx-grid-gap)}
.phx-cs-page .phx-cs-story-copy p{margin-block-start:var(--space-2);margin-block-end:var(--space-3)}
.phx-cs-page .phx-cs-story-copy h2{margin-block-end:var(--space-3)}
@media(max-width:960px){.phx-cs-page .phx-cs-tags{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.phx-cs-page .phx-cs-tags{gap:var(--space-2)}.phx-cs-page .phx-cs-tags>li{font-size:var(--phx-font-xs);padding:var(--space-2)}}
/* NUMIX case study editorial refinement (2026-10-29).
Scoped layout only; existing PHOENiX spacing and color tokens retained. */
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-copy h2{
max-width:18ch;line-height:var(--phx-leading-heading);letter-spacing:-.025em;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-lead{
max-width:60ch;line-height:var(--phx-leading-reading);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-collage .phx-cs-collage{
aspect-ratio:1.34;overflow:hidden;background:var(--phx-surface);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-collage-card{
border:0;box-shadow:none;background:transparent;padding:0;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-collage-card--left{
width:60%;height:60%;inset-block-start:0;inset-inline-start:0;transform:rotate(-3deg);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-collage-card--right{
width:60%;height:60%;inset-block-start:0;inset-inline-end:0;transform:rotate(3deg);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-collage-card--front{
width:79%;height:72%;inset-block-end:0;inset-inline-start:10.5%;transform:none;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-photo-panel .phx-cs-photo-mat,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-photo-panel a.phx-cs-photo-mat{
background:var(--phx-surface);border:0;box-shadow:none;border-radius:0;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-image .phx-cs-photo-mat img{
background:var(--phx-surface);padding:var(--space-2);object-fit:contain;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-photo-caption{
min-height:0;background:var(--phx-surface-muted);border:0;border-radius:var(--phx-radius-8);
margin-block-start:var(--space-2);padding:var(--space-3) var(--space-4);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-collage .phx-cs-photo-caption{
padding:var(--space-3) var(--space-4);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-section{
padding-block:var(--phx-section-space);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-copy > p:not(.phx-cs-kicker):not(.phx-cs-story-label){
margin-block:0 var(--space-3);line-height:var(--phx-leading-reading);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-copy > p:last-child{margin-block-end:0}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-ribbon,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-section.phx-cs-wash{
background:var(--phx-surface);border-block:0;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-quality-table{margin-block-start:0}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-product{
display:flex;flex-direction:column;gap:var(--space-2);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-product h3,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-product p{margin:0}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-questions-section .phx-cs-question{
background:var(--phx-surface);border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);
}
@media(max-width:850px){
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-copy h2{max-width:none}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-collage-card--front{width:80%;height:70%;inset-inline-start:10%}
}
/* NUMIX Case Study — boxed photographic evidence layout (approved 2026-10-29).
Scoped to NUMIX only. All spacing, radii, typography, surface colors use existing design tokens. */
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card{
display:grid;
gap:0;
align-items:stretch;
border:1px solid var(--phx-border);
border-radius:var(--phx-radius-16);
background:var(--phx-surface);
overflow:hidden;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-feature-copy,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-copy{
background:var(--phx-surface-muted);
padding:var(--phx-content-gap);
margin:0;
min-width:0;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:center;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-feature-photo,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-image{
background:var(--phx-surface);
border:0;
border-radius:0;
box-shadow:none;
overflow:hidden;
width:100%;
height:100%;
margin:0;
min-width:0;
max-width:none;
display:flex;
flex-direction:column;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-image a.phx-cs-photo-mat{
display:flex;
flex:1;
width:100%;
min-height:300px;
aspect-ratio:auto;
align-items:center;
justify-content:center;
overflow:hidden;
padding:var(--space-4);
box-sizing:border-box;
background:var(--phx-surface);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-image a.phx-cs-photo-mat img{
display:block;
width:100%;
height:auto;
max-height:420px;
padding:0;
object-fit:contain;
background:transparent;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-photo-caption,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-photo-caption{
margin:0;
border:0;
border-radius:0;
background:var(--phx-surface-subtle);
padding:var(--space-3) var(--space-4);
width:100%;
box-sizing:border-box;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-copy h2{
max-width:28ch;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-feature-collage{
display:flex;
flex-direction:column;
justify-content:center;
border-radius:0;
overflow:hidden;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-collage{
flex:1;
min-height:330px;
max-height:570px;
width:100%;
box-sizing:border-box;
padding:var(--space-3);
background:var(--phx-surface);
}
@media(max-width:900px){
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card{
grid-template-columns:minmax(0,1fr)!important;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-feature-photo,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-image{
grid-column:1!important;
grid-row:1!important;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-feature-copy,
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-copy{
grid-column:1!important;
grid-row:2!important;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-story-card .phx-cs-story-image a.phx-cs-photo-mat{
min-height:0;
aspect-ratio:1.7;
}
}
@media(max-width:520px){
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-collage{
min-height:240px;
max-height:380px;
}
}
/* Scoped mobile banner legibility for long NUMIX Case Study titles; preserve unified hero dimensions. */
@media(max-width:650px){
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner{
position:relative;
isolation:isolate;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to right,rgba(250,250,248,.96),rgba(250,250,248,.94) 70%,rgba(250,250,248,.55));
z-index:1;
pointer-events:none;
}
html[dir="rtl"] .phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner::before,
[lang="ar"] .phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner::before{
background:linear-gradient(to left,rgba(250,250,248,.96),rgba(250,250,248,.94) 70%,rgba(250,250,248,.55));
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner .hero-grid{
position:relative;
z-index:2;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner .ral-hero-copy h1{
font-size:clamp(1.45rem,6.2vw,1.8rem);
line-height:1.16;
max-width:100%;
overflow-wrap:break-word;
}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-standard-banner .page-subtitle{
font-size:var(--phx-font-sm);
line-height:var(--phx-leading-ui);
max-width:100%;
color:var(--phx-neutral-700);
}
}
/* German interior paints case study — scoped, reusable; no full-width colored section backgrounds. */
.phx-ge-page .phx-ge-body{padding-top:var(--space-6,2rem);padding-bottom:var(--space-8,3rem)}
.phx-ge-page .phx-ge-draft{display:inline-block;margin:0 0 var(--space-4,1rem);padding:.45em .8em;border-radius:6px;background:var(--phx-surface-muted);color:#56564e;font-size:.8rem;font-weight:700;letter-spacing:.02em}
.phx-ge-page .phx-ge-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3,.75rem);margin-bottom:var(--space-8,3rem)}
.phx-ge-page .phx-ge-pill{display:flex;align-items:center;justify-content:center;min-height:56px;padding:.75rem .85rem;border:1px solid #e5e5e1;border-radius:10px;text-align:center;color:#383832;background:var(--phx-surface-subtle);font-size:.91rem;font-weight:600}
.phx-ge-page .phx-ge-intro,.phx-ge-page .phx-ge-split{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:var(--space-8,3rem);align-items:center}
.phx-ge-page .phx-ge-section,.phx-ge-page .phx-ge-intro{margin-top:var(--space-8,3rem);margin-bottom:var(--space-8,3rem)}
.phx-ge-page .phx-ge-section h2,.phx-ge-page .phx-ge-intro h2{margin:0 0 var(--space-4,1rem);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.19;color:#32322c}
.phx-ge-page .phx-ge-section h3{font-size:1.1rem;line-height:1.34;margin:var(--space-5,1.5rem) 0 var(--space-3,.75rem);color:#32322c}
.phx-ge-page .phx-ge-section p,.phx-ge-page .phx-ge-intro p{line-height:1.75;margin:.75rem 0;color:#53534c}
.phx-ge-page .phx-ge-section h2+p{margin-top:0}
.phx-ge-page .phx-ge-heading{margin-bottom:var(--space-5,1.5rem)}
.phx-ge-page .phx-ge-photo{margin:0;min-width:0;border:1px solid #e5e5e1;border-radius:12px;overflow:hidden;background:white}
.phx-ge-page .phx-ge-photo-area{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:275px;padding:1.5rem;text-align:center;background:var(--phx-surface);color:#92928a}
.phx-ge-page .phx-ge-photo-number{position:absolute;top:15px;left:15px;font-size:.75rem;font-weight:800;color:#6f6f64}
.phx-ge-page .phx-ge-photo-symbol{font-size:3.5rem;font-weight:200;line-height:1;color:#e0e0dc}
.phx-ge-page .phx-ge-photo-area p{color:#7e7e75;font-size:.82rem;margin:8px 0 0}
.phx-ge-page .phx-ge-photo figcaption{padding:1rem 1.25rem;background:var(--phx-surface-muted);color:#404039;font-size:.9rem;font-weight:600}
.phx-ge-page .phx-ge-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3,.75rem)}
.phx-ge-page .phx-ge-facts>div{padding:1.25rem;border:1px solid #e8e8e4;border-radius:10px;background:var(--phx-surface-subtle);display:flex;flex-direction:column;gap:.55rem;min-height:130px}
.phx-ge-page .phx-ge-facts span{color:#77776e;font-size:.85rem}
.phx-ge-page .phx-ge-facts strong{color:#31312b;line-height:1.4;font-size:.98rem}
.phx-ge-page .phx-ge-reverse{grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr)}
.phx-ge-page .phx-ge-reverse .phx-ge-copy{order:2}.phx-ge-page .phx-ge-reverse .phx-ge-photo{order:1}
.phx-ge-page .phx-ge-chart{border:1px solid #e5e5e1;border-radius:11px;background:var(--phx-surface-subtle);padding:1.25rem;margin-top:1.25rem}
.phx-ge-page .phx-ge-chart-line{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-weight:700;color:#404037;font-size:1.1rem}
.phx-ge-page .phx-ge-chart-track{height:14px;background:#F4F4EF;border-radius:999px;overflow:hidden;margin:.65rem 0 .5rem}
.phx-ge-page .phx-ge-chart-fill{height:100%;width:100%;background:#65675d}
.phx-ge-page .phx-ge-chart small{color:#606058}
.phx-ge-page .phx-ge-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;padding:0;list-style:none;counter-reset:none}
.phx-ge-page .phx-ge-steps li{display:flex;align-items:center;gap:.85rem;padding:1rem;border-radius:10px;border:1px solid #e5e5e0;background:var(--phx-surface-subtle);color:#47473d;min-height:78px;line-height:1.4}
.phx-ge-page .phx-ge-steps span{font-weight:800;color:#8a8a80;font-size:.9rem}
.phx-ge-page .phx-ge-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3,.75rem)}
.phx-ge-page .phx-ge-metric{padding:1.35rem 1rem;text-align:center;border-radius:10px;border:1px solid #e6e6e2;background:var(--phx-surface-subtle);display:flex;flex-direction:column;gap:.65rem}
.phx-ge-page .phx-ge-metric strong{font-size:clamp(1.55rem,2.6vw,2.3rem);color:#4a4d44}
.phx-ge-page .phx-ge-metric span{font-size:.86rem;color:#64645d}
.phx-ge-page .phx-ge-faq{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.phx-ge-page .phx-ge-faq details{border:1px solid #e6e6e2;border-radius:10px;padding:1rem 1.2rem;background:var(--phx-surface-subtle)}
.phx-ge-page .phx-ge-faq summary{font-weight:700;cursor:pointer;color:#30302c}
.phx-ge-page .phx-ge-faq p{font-size:.92rem;margin:.75rem 0 0}
.phx-ge-page .phx-ge-cta{margin:var(--space-8,3rem) 0 0;padding:2rem;border-radius:12px;border:1px solid #e6e6e1;text-align:center;background:var(--phx-surface-muted)}
.phx-ge-page .phx-ge-cta h2{margin:0 0 1rem;font-size:1.35rem}
.phx-ge-page .phx-ge-cta>a{display:inline-block;padding:.75rem 1.2rem;background:#53564d;color:#fff;border-radius:7px;text-decoration:none;font-weight:700}
.phx-ge-page .phx-ge-cta p a{color:#4e5048}
@media(max-width:900px){.phx-ge-page .phx-ge-tags,.phx-ge-page .phx-ge-facts,.phx-ge-page .phx-ge-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.phx-ge-page .phx-ge-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.phx-ge-page .phx-ge-intro,.phx-ge-page .phx-ge-split,.phx-ge-page .phx-ge-reverse{grid-template-columns:1fr;gap:1.5rem}.phx-ge-page .phx-ge-reverse .phx-ge-copy,.phx-ge-page .phx-ge-reverse .phx-ge-photo{order:initial}.phx-ge-page .phx-ge-faq,.phx-ge-page .phx-ge-steps{grid-template-columns:1fr}.phx-ge-page .phx-ge-section,.phx-ge-page .phx-ge-intro{margin-block:2rem}.phx-ge-page .phx-ge-photo-area{min-height:235px}.phx-ge-page .phx-ge-tags{gap:.5rem}.phx-ge-page .phx-ge-pill{font-size:.82rem;min-height:56px;padding:.5rem}.phx-ge-page .phx-ge-body{padding-top:1.25rem}}
@media(max-width:350px){.phx-ge-page .phx-ge-facts,.phx-ge-page .phx-ge-metrics{grid-template-columns:1fr}}
html[dir="rtl"] .phx-ge-page .phx-ge-photo-number{left:auto;right:15px}
/* Long technical case study title fits the existing unified hero. */
.phx-ge-page .ral-hero-copy h1{font-size:clamp(1.65rem,3vw,2.55rem);max-width:850px;overflow-wrap:break-word}
@media(max-width:680px){.phx-ge-page .ral-hero-copy h1{font-size:clamp(1.55rem,6vw,1.95rem)}}
/* German interior Fan Deck draft: media in the existing standard case-study cards */
.phx-ge-page[data-phx-case-study="germany-interior-140-preview"] .phx-ge-photo-area{
padding:var(--space-4,1rem);min-height:0;background:var(--phx-surface);overflow:hidden;
}
.phx-ge-page[data-phx-case-study="germany-interior-140-preview"] .phx-ge-product-image{
display:block;width:100%;height:auto;max-height:460px;object-fit:contain;
}
.phx-ge-page[data-phx-case-study="germany-interior-140-preview"] .phx-ge-photo--principal .phx-ge-product-image{
max-height:420px;
}
/* Sipes Color Trend: scoped refinement of the approved case study design */
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-ge-photo-area{min-height:310px;padding:var(--space-6,2rem);background:var(--phx-surface)}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-placeholder{font-size:3.5rem;line-height:1;color:#deded8}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-ge-photo figcaption{font-weight:500}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-chart{margin-top:0;align-self:center}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-chart-count{text-align:center;margin-top:var(--space-6,2rem);font-size:clamp(1.8rem,4vw,3rem);color:#4e5148}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-links a{color:#53564d;text-decoration:underline;text-underline-offset:3px}
@media(max-width:680px){.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-ge-photo-area{min-height:230px}.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-metrics{grid-template-columns:1fr}}
/* PHOENiX: Three case-study rows and Sipes media (scoped; site tokens retained) */
.phx-cs-card-grid:has(.phx-cs-card--row){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--phx-grid-gap,var(--space-5));padding-bottom:var(--space-8)}
.phx-cs-card-grid .phx-cs-card--row{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);align-items:stretch;overflow:hidden;border-style:solid;background:var(--phx-surface)}
.phx-cs-card--row .phx-cs-card-image-link{display:flex;align-items:center;justify-content:center;min-height:280px;padding:var(--space-5);background:var(--phx-surface)}
.phx-cs-card--row .phx-cs-card-image-link img{display:block;max-height:310px;width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;background:var(--phx-surface)}
.phx-cs-card--row .phx-cs-card-content{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--space-6);border-inline-start:1px solid var(--phx-border);border-top:0}
.phx-cs-card--row .phx-cs-card-content h2{font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.3}
.phx-cs-card--row .phx-cs-card-content .phx-cs-read{align-self:flex-start;margin-top:var(--space-3)}
.phx-sipes-photo .phx-ge-photo-area{background:var(--phx-surface);min-height:0;padding:var(--space-3);display:flex;align-items:center;justify-content:center}
.phx-sipes-real-photo{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;object-position:center;background:var(--phx-surface)}
.phx-ge-split .phx-sipes-photo .phx-sipes-real-photo{max-height:345px}
.phx-sipes-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--phx-grid-gap,var(--space-5));align-items:stretch}
.phx-sipes-media-grid .phx-ge-photo-area{padding:var(--space-3);min-height:0;aspect-ratio:3/2}
.phx-sipes-media-grid .phx-sipes-real-photo{max-height:260px;height:100%;object-fit:contain}
.phx-sipes-photo-showcase .phx-ge-heading p{max-width:68ch;color:var(--phx-text-muted,#555)}
@media(max-width:760px){.phx-cs-card-grid .phx-cs-card--row{grid-template-columns:minmax(0,1fr)}.phx-cs-card--row .phx-cs-card-image-link{min-height:0;padding:var(--space-4)}.phx-cs-card--row .phx-cs-card-image-link img{height:auto;max-height:260px}.phx-cs-card--row .phx-cs-card-content{border-inline-start:0;border-top:1px solid var(--phx-border);padding:var(--space-5)}.phx-sipes-media-grid{grid-template-columns:minmax(0,1fr)}.phx-sipes-media-grid .phx-ge-photo-area{aspect-ratio:auto}.phx-sipes-media-grid .phx-sipes-real-photo{max-height:340px}}
/* PHOENiX Case Studies library — approved responsive 3-card presentation */
/* Site spacing tokens only, no full-width colored backgrounds. */
.phx-cs-page[data-phx-case-study="library"] > .wrap:has(> .phx-cs-card-grid){
padding-top:var(--space-8);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid:has(.phx-cs-card--row){
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--phx-grid-gap,var(--space-5));
align-items:stretch;
padding-bottom:var(--space-8);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid .phx-cs-card--row{
display:flex;
flex-direction:column;
min-width:0;
border:1px solid var(--phx-border);
border-radius:var(--phx-radius-12);
background:var(--phx-surface);
overflow:hidden;
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-image-link{
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:clamp(205px,19vw,252px);
min-height:0;
padding:var(--space-4);
overflow:hidden;
background:var(--phx-surface);
}
/* The original image ratios and transparent product boundaries are retained: never crop. */
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-image-link img{
display:block;
width:auto;
height:auto;
max-width:92%;
max-height:92%;
aspect-ratio:auto;
object-fit:contain;
object-position:center;
background:transparent;
}
.phx-cs-page[data-phx-case-study="library"] [data-case-study="germany-interior-140-draft"] .phx-cs-card-image-link img{
max-width:86%;
max-height:86%;
}
.phx-cs-page[data-phx-case-study="library"] [data-case-study="sipes-color-trend-draft"] .phx-cs-card-image-link img{
max-width:89%;
max-height:89%;
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-content{
display:flex;
flex:1;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
min-width:0;
padding:var(--space-5);
border-inline-start:0;
border-top:1px solid var(--phx-border);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-content h2{
font-size:var(--phx-font-subheading);
line-height:var(--phx-leading-heading);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-content .phx-cs-read{
margin-top:auto;
padding-top:var(--space-4);
align-self:flex-start;
}
@media(max-width:980px){
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid:has(.phx-cs-card--row){
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:620px){
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid:has(.phx-cs-card--row){
grid-template-columns:minmax(0,1fr);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-image-link{
height:240px;
padding:var(--space-4);
}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-content{
padding:var(--space-5);
}
}
/* PHOENiX Case Studies — three balanced cards, related projects and media sizing (2026-10-29) */
/* Matches the site's existing spacing tokens, with no additional full-width backgrounds. */
.phx-cs-page[data-phx-case-study="library"] > .wrap:has(> .phx-cs-card-grid){padding-top:var(--space-8)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid:has(> .phx-cs-card--row){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);align-items:stretch;padding-bottom:var(--space-8)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row{display:flex;flex-direction:column;align-items:stretch;height:100%;border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);background:var(--phx-surface);overflow:hidden;min-width:0}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-image-link{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:100%;height:252px;box-sizing:border-box;padding:var(--space-4);background:var(--phx-surface);overflow:hidden;min-width:0}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-image-link img{display:block;width:auto!important;height:auto!important;max-width:92%!important;max-height:92%!important;min-width:0;aspect-ratio:auto!important;object-fit:contain!important;object-position:center;background:transparent!important;border:0!important;box-shadow:none!important}
.phx-cs-page[data-phx-case-study="library"] [data-case-study="germany-interior-140-draft"] .phx-cs-card-image-link img{max-width:84%!important;max-height:84%!important}
.phx-cs-page[data-phx-case-study="library"] [data-case-study="sipes-color-trend-draft"] .phx-cs-card-image-link img{max-width:88%!important;max-height:88%!important}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-content{display:flex;flex:1;flex-direction:column;align-items:stretch;min-width:0;padding:var(--space-5);border-top:1px solid var(--phx-border);border-inline-start:0!important}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-content h2{margin-top:var(--space-2);line-height:var(--phx-leading-heading)}
.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-read{display:inline-flex;align-self:flex-start;margin-top:auto;padding-top:var(--space-4)}
.phx-cs-related-projects{width:min(100% - 2*var(--space-5),1200px);margin:var(--space-8) auto;padding:var(--space-5);border:1px solid var(--phx-border);border-radius:var(--phx-radius-12);background:var(--phx-surface)}
.phx-ge-body .phx-cs-related-projects{width:100%;margin:var(--space-8) 0;padding:var(--space-5)}
.phx-cs-related-projects h2{margin:0 0 var(--space-4);font-size:var(--phx-font-subheading);color:var(--phx-neutral-800)}
.phx-cs-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.phx-cs-related-link{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;padding:var(--space-5);border:1px solid var(--phx-border);border-radius:var(--phx-radius-8);text-decoration:none;color:inherit;background:var(--phx-surface-muted);transition:border-color .2s ease}
.phx-cs-related-link:hover,.phx-cs-related-link:focus-visible{border-color:var(--phx-neutral-600)}
.phx-cs-related-link strong{font-weight:700;line-height:1.4}
.phx-cs-related-link span{font-size:.92em;font-weight:600;text-decoration:underline}
/* Only Sipes has transparent image assets; maintain the other two studies unchanged. */
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-real-photo{object-fit:contain!important;background:transparent!important}
@media(max-width:980px){.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid:has(> .phx-cs-card--row){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.phx-cs-page[data-phx-case-study="library"] .phx-cs-card-grid:has(> .phx-cs-card--row){grid-template-columns:minmax(0,1fr)}.phx-cs-page[data-phx-case-study="library"] .phx-cs-card--row .phx-cs-card-image-link{height:232px}.phx-cs-related-grid{grid-template-columns:minmax(0,1fr)}}
/* Case study image display correction — 2026-10-30, scoped to Sipes gallery and NUMIX feature */
/* Natural picture aspect ratio prevents cut-offs in all three Sipes catalogue cards. */
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-photo-showcase .phx-sipes-media-grid .phx-ge-photo-area{
display:flex;
align-items:center;
justify-content:center;
min-height:0;
height:auto;
aspect-ratio:auto;
padding:var(--space-4);
box-sizing:border-box;
overflow:visible;
background:var(--phx-surface);
}
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-photo-showcase .phx-sipes-gallery-card .phx-sipes-real-photo{
display:block;
flex:none;
width:100%;
max-width:100%;
height:auto!important;
max-height:none!important;
aspect-ratio:auto;
object-fit:contain!important;
object-position:center;
background:transparent!important;
}
/* Reduce only the visual NUMIX product montage; keep its card and caption unchanged. */
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-collage{
transform:scale(.89);
transform-origin:center center;
}
@media(max-width:620px){
.phx-ge-page[data-phx-case-study="sipes-color-trend-preview"] .phx-sipes-photo-showcase .phx-sipes-media-grid .phx-ge-photo-area{padding:var(--space-3)}
.phx-cs-page[data-phx-case-study="numix-automotive"] .phx-cs-feature-card .phx-cs-collage{transform:scale(.94)}
}
/* PHOENIX UNIFIED CARD DNA · 2026-10-30 : case study listings only */
html[data-phx-page="case-studies"] main .phx-cs-card .phx-cs-card-image-link {
box-sizing:border-box;padding:var(--phx-card-image-padding);background:var(--phx-surface);
}
html[data-phx-page="case-studies"] main .phx-cs-card .phx-cs-card-content {
display:flex;flex:1;flex-direction:column;align-items:flex-start;
padding:var(--phx-card-content-padding);
}
html[data-phx-page="case-studies"] main .phx-cs-card .phx-cs-kicker {
margin:0 0 var(--phx-card-label-gap);font-size:var(--phx-font-xs);
line-height:var(--phx-leading-ui);font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--phx-text-muted);
}
html[data-phx-page="case-studies"] main .phx-cs-card .phx-cs-card-content h2 {
margin:0 0 var(--phx-card-heading-gap);line-height:var(--phx-leading-heading);
}
html[data-phx-page="case-studies"] main .phx-cs-card .phx-cs-read {
margin-block-start:auto;padding-block-start:var(--space-4);
}
/* PHOENiX PROJECT SHOWCASE DNA: the same reading flow, different project evidence. */
.phx-cs-page.phx-project-showcase :is(.phx-cs-feature,.phx-ge-intro){position:relative;}
.phx-cs-page.phx-project-showcase :is(.phx-ge-section,.phx-cs-section)[data-phx-stage]{scroll-margin-top:var(--space-8);}
/* The product sits on a neutral stage; the photo itself is never cropped or retinted. */
.phx-cs-page.phx-project-showcase :is(.phx-ge-photo-area,.phx-cs-story-media,.phx-cs-product-image-area){background-color:var(--phx-surface);}
.phx-cs-page.phx-project-showcase :is(.phx-ge-photo-area,.phx-cs-story-media,.phx-cs-product-image-area) img{object-fit:contain;object-position:center;}
/* One subtle signature at the call-to-action: never a full-width section background. */
.phx-cs-page.phx-project-showcase :is(.phx-ge-cta,.phx-cs-cta){position:relative;isolation:isolate;overflow:hidden;}
.phx-cs-page.phx-project-showcase :is(.phx-ge-cta,.phx-cs-cta)::after{content:"";position:absolute;inset-inline-end:var(--space-4);inset-block-end:var(--space-3);width:110px;height:75px;background:var(--phx-signature-image) center/contain no-repeat;opacity:.14;pointer-events:none;z-index:0;}
.phx-cs-page.phx-project-showcase :is(.phx-ge-cta,.phx-cs-cta)>*{position:relative;z-index:1;}
html[lang="ar"] .phx-cs-page.phx-project-showcase :is(.phx-ge-cta,.phx-cs-cta)::after{transform:scaleX(-1);}
/* The result is a metric-driven endpoint rather than another photo-text panel. */
.phx-project-showcase [data-phx-stage="result"] :is(.phx-ge-metrics,.phx-cs-metrics){align-items:stretch;}
@media(max-width:640px){.phx-cs-page.phx-project-showcase :is(.phx-ge-cta,.phx-cs-cta)::after{width:68px;height:46px;opacity:.075;}}
/* PHOENiX Case Studies — Project-specific accessible process flow diagrams */
.phx-process-diagram{width:min(1200px,92%);margin:3rem auto;padding:clamp(1rem,2.5vw,2.2rem);border:1px solid #e2e4e1;border-radius:16px;background:var(--phx-surface-subtle);color:#252b27}
.phx-process-header{text-align:center;margin:0 auto 1.8rem;max-width:750px}
.phx-process-kicker{font-size:.73rem!important;letter-spacing:.12em;font-weight:700;color:#666d67;margin:0 0 .6rem}
.phx-process-header h2{margin:.2rem 0 .6rem;color:#393e3a}.phx-process-header p:last-child{margin:0;color:#646c65}
.phx-flow-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem .85rem;padding:0;margin:0;counter-reset:none}
.phx-flow-node{position:relative;min-width:0;min-height:78px;border:1px solid #dde3dd;border-radius:10px;background:var(--phx-surface);display:flex;align-items:center;gap:.7rem;padding:.8rem;font-size:.86rem;line-height:1.4;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.025)}
.phx-flow-count{flex:none;border-radius:50%;width:2rem;height:2rem;background:#F4F4EF;color:#46564c;display:grid;place-items:center;font-size:.77rem;font-weight:700;font-variant-numeric:tabular-nums}
.phx-flow-node:not(:last-child)::after{content:'→';position:absolute;inset-inline-end:-1rem;top:50%;transform:translateY(-50%);font-size:1.15rem;color:#79857b;z-index:1}
.phx-flow-steps:dir(rtl) .phx-flow-node:not(:last-child)::after{content:'←'}
.phx-flow-shared{max-width:820px;margin:0 auto;text-align:center}.phx-flow-shared h3,.phx-flow-lane h3{font-size:1rem;margin:0 0 1rem;color:#3f5144}
.phx-flow-branch{width:60%;height:45px;border-inline-start:2px solid #aab6ab;border-inline-end:2px solid #aab6ab;border-top:2px solid #aab6ab;margin:2rem auto .6rem;position:relative}
.phx-flow-branch::before{content:'';position:absolute;top:-25px;left:50%;height:25px;border-left:2px solid #aab6ab}
.phx-flow-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.phx-flow-lane{background:#F4F4EF;border:1px solid #e0e6e0;border-radius:12px;padding:1.1rem;min-width:0;text-align:center}
.phx-flow-lane .phx-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem .7rem}.phx-flow-lane .phx-flow-node{font-size:.8rem;min-height:80px;text-align:start}
.phx-flow-note{font-size:.87rem;color:#58655b;text-align:center;margin:1.4rem 0 0}
@media(max-width:850px){.phx-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.phx-flow-dual{grid-template-columns:1fr}.phx-flow-branch{width:0;height:40px;border:0;border-inline-start:2px solid #aab6ab;margin:1rem auto}.phx-flow-branch::before{display:none}}
@media(max-width:520px){.phx-process-diagram{width:94%;padding:1rem}.phx-flow-steps,.phx-flow-lane .phx-flow-steps{grid-template-columns:1fr;gap:1.2rem}.phx-flow-node:not(:last-child)::after{content:'↓'!important;top:auto;bottom:-1.28rem;left:50%;right:auto;transform:translateX(-50%)}.phx-flow-steps:dir(rtl) .phx-flow-node:not(:last-child)::after{content:'↓'!important}.phx-flow-node{min-height:60px}.phx-flow-lane .phx-flow-node{min-height:60px}}
/* PHOENiX Technical Production Flow — scoped redesign */
.phx-process-diagram.phx-technical-flow{width:min(1200px,94%);max-width:1200px;padding:clamp(22px,4vw,52px);background:var(--phx-surface);border:1px solid #e5e7e5;box-shadow:none;border-radius:4px;overflow:visible;color:#343c39}
.phx-technical-flow .phx-process-header{text-align:start;max-width:900px;margin:0 0 38px;padding-bottom:21px;border-bottom:1px solid #dfe4e1}
.phx-technical-flow .phx-process-kicker{letter-spacing:.16em;color:#67766e;font-size:11px}
.phx-technical-flow .phx-process-header h2{margin:.45rem 0 .55rem}
.phx-technical-flow .phx-stage-strip{display:grid;grid-template-columns:repeat(var(--phx-cols,4),minmax(0,1fr));gap:0;margin:0 0 28px;position:relative}
.phx-technical-flow .phx-stage{position:relative;min-width:0;padding:23px 20px 22px;border-top:2px solid #c7d2cc;border-bottom:1px solid #e6eae7;background:var(--phx-surface)}
.phx-technical-flow .phx-stage + .phx-stage{border-inline-start:1px solid #e7eae8}
.phx-technical-flow .phx-stage::before{content:'';position:absolute;top:-5px;inset-inline-start:0;width:8px;height:8px;border-radius:50%;background:#637c70}
.phx-technical-flow .phx-stage-no{display:block;color:#798c81;font-size:11px;font-weight:750;letter-spacing:.14em;margin-bottom:10px}
.phx-technical-flow .phx-stage-title{font-size:clamp(14px,1.4vw,18px);font-weight:700;line-height:1.35;min-height:2.7em;margin:0 0 18px;color:#29332e}
.phx-technical-flow .phx-stage-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.phx-technical-flow .phx-stage-list li{font-size:13px;line-height:1.55;font-weight:450;padding:9px 0;border-top:1px solid #edf0ee;display:flex;gap:10px;align-items:baseline}
.phx-technical-flow .phx-stage-list li::before{content:counter(list-item,decimal-leading-zero);font-size:10px;color:#7c9187;font-weight:700;white-space:nowrap}
.phx-technical-flow .phx-technical-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;position:relative;margin-top:28px}
.phx-technical-flow .phx-route{border:1px solid #dce2de;background:var(--phx-surface);padding:26px 24px;position:relative}
.phx-technical-flow .phx-route::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#627e70}
.phx-technical-flow .phx-route:nth-child(2)::before{background:#88938a}
.phx-technical-flow .phx-route-kicker{font-size:11px;letter-spacing:.14em;color:#6b7a70;font-weight:700;text-transform:uppercase;margin-bottom:9px}
.phx-technical-flow .phx-route h3{font-size:20px;line-height:1.3;margin:0 0 17px;color:#26342c}
.phx-technical-flow .phx-route ol{counter-reset:flowitem;list-style:none;margin:0;padding:0}
.phx-technical-flow .phx-route li{counter-increment:flowitem;position:relative;display:flex;gap:13px;align-items:baseline;border-top:1px solid #e9eeeb;padding:11px 0;line-height:1.5;font-size:14px}
.phx-technical-flow .phx-route li::before{content:counter(flowitem,decimal-leading-zero);color:#72867b;font-size:11px;font-weight:750;min-width:22px}
.phx-technical-flow .phx-flow-gate{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 0 4px;text-align:center;color:#526559;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.phx-technical-flow .phx-flow-gate::before,.phx-technical-flow .phx-flow-gate::after{content:'';height:1px;background:#cdd7d0;flex:1}
.phx-technical-flow .phx-converge{background:#F4F4EF;padding:17px 22px;margin-top:17px;border-inline-start:3px solid #82998b;font-weight:700;font-size:14px;text-align:center}
.phx-technical-flow .phx-legend{font-size:12px;color:#728078;margin-top:10px;line-height:1.7}
@media(max-width:900px){.phx-technical-flow .phx-stage-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.phx-technical-flow .phx-stage:nth-child(odd){border-inline-start:0}.phx-technical-flow .phx-stage{padding:22px 16px}}
@media(max-width:620px){.phx-process-diagram.phx-technical-flow{width:94%;padding:20px 16px}.phx-technical-flow .phx-stage-strip,.phx-technical-flow .phx-technical-split{grid-template-columns:1fr}.phx-technical-flow .phx-stage{padding:18px 10px;border-inline-start:0!important}.phx-technical-flow .phx-stage-title{min-height:0}.phx-technical-flow .phx-route{padding:20px 17px}.phx-technical-flow .phx-technical-split{gap:16px}}
/* Scoped list numbering: explicit counters avoid 00 on browser engines which suppress list-item counters */
.phx-technical-flow .phx-stage-list{counter-reset:phxStageItem;}
.phx-technical-flow .phx-stage-list>li{counter-increment:phxStageItem;}
.phx-technical-flow .phx-stage-list>li::before{content:counter(phxStageItem,decimal-leading-zero)!important;min-width:2ch;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.phx-technical-flow .phx-route ol{counter-reset:flowitem;}
.phx-technical-flow .phx-route ol>li{counter-increment:flowitem;}
.phx-technical-flow .phx-route ol>li::before{content:counter(flowitem,decimal-leading-zero)!important;min-width:2ch;flex:0 0 auto;font-variant-numeric:tabular-nums;}