/* Static sRGB reflections from the portfolio logo palettes. Explicit HEX stops
   preserve smooth interpolation across browser colour implementations. */
.case-page[data-case-brand="fujitsu"] {--metal-face:#fa99a0;--metal-reflection:#ffdedf;--metal-glint:#fff3f2;--metal-edge:#fab1b6;}
.case-page[data-case-brand="senn"] {--metal-face:#fa9998;--metal-reflection:#ffdedc;--metal-glint:#fff3f1;--metal-edge:#e8bcbb;}
.case-page[data-case-brand="arth"] {--metal-face:#9af9d1;--metal-reflection:#dffef0;--metal-glint:#f5fdf7;--metal-edge:#b7decd;}
.case-page[data-case-brand="spintegrate"] {--metal-face:#b199f8;--metal-reflection:#e6defd;--metal-glint:#f7f3fb;--metal-edge:#c9c0e4;}
.case-page[data-case-brand="satobiz"] {--metal-face:#cac9c8;--metal-reflection:#f4f3f2;--metal-glint:#fcfaf7;--metal-edge:#c3c3c2;}
.case-page :is(.fc-ribbon-bg,.cases-ribbon-bg)::before,
.case-page :is(.fc-ribbon-bg,.cases-ribbon-bg)::after,
.case-page .senn-case::before,
.case-page .senn-case::after {
  /* Cross at y=64px, but extend both ends above the page before rotating.
     The lower ends leave the viewport sides, so article height is irrelevant. */
  top:-256px;
  width:clamp(96px,12vw,170px);
  height:calc(82vw + 448px);
  transform-origin:50% 320px;
  background:repeating-linear-gradient(90deg,
    var(--metal-edge) 0%,var(--metal-edge) .7%,
    var(--metal-face) 1%,var(--metal-reflection) 7%,
    var(--metal-glint) 8%,var(--metal-reflection) 9%,
    var(--metal-face) 27%,var(--metal-reflection) 45%,
    var(--metal-edge) 49.3%,var(--metal-edge) 50%);
  box-shadow:inset 1px 0 0 var(--metal-glint),inset -1px 0 0 var(--metal-edge);
}
/* Keep small introductory text readable across the coloured reflections. */
.case-page :is(.fc-case-h1,.fc-intro,.fc-company-role,.senn-case-h1,.senn-case-eyebrow) {
  color:#3b322c;
}
/* Arth now opens with the metallic results, followed immediately by the photo. */
.case-page[data-case-brand="arth"] .arth-numbers {
  padding-top:clamp(136px,calc(var(--fvh,1vh)*16),180px);
}
.case-page[data-case-brand="arth"] .arth-numbers .arth-case-h1 {
  color:#154d37;
  text-align:center;
}
.case-page[data-case-brand="arth"] .arth-hero {margin-top:0;}