/* About opening ramps retain their smooth authored transitions.
   The closing composition uses the homepage gradient's two color legs;
   their boundary stays blue while FAQ content expands or collapses. */
body.team-story {
  --story-gradient-bridge: #092553;
  --story-gradient-dither: url("./assets/story-refresh/gradient-dither.svg");
}

body.team-story .hero.concept-hero {
  --story-gradient-base: var(--story-ink);
  --story-gradient-ramp: linear-gradient(180deg,
    var(--story-ink) 0%,
    var(--story-ink) 55%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 0.22182%) 57.8125%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 1.60522%) 60.625%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 4.87690%) 63.4375%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 10.35156%) 66.25%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 18.00060%) 69.0625%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 27.52075%) 71.875%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 38.40275%) 74.6875%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 50.00000%) 77.5%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 61.59725%) 80.3125%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 72.47925%) 83.125%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 81.99940%) 85.9375%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 89.64844%) 88.75%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 95.12310%) 91.5625%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 98.39478%) 94.375%,
    color-mix(in srgb, var(--story-ink), var(--story-gradient-bridge) 99.77818%) 97.1875%,
    var(--story-gradient-bridge) 100%);
}

body.team-story #working-principles {
  --story-gradient-base: var(--story-gradient-bridge);
  --story-gradient-ramp: linear-gradient(180deg,
    var(--story-gradient-bridge) 0%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 0.22182%) 6.25%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 1.60522%) 12.5%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 4.87690%) 18.75%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 10.35156%) 25%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 18.00060%) 31.25%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 27.52075%) 37.5%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 38.40275%) 43.75%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 50.00000%) 50%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 61.59725%) 56.25%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 72.47925%) 62.5%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 81.99940%) 68.75%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 89.64844%) 75%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 95.12310%) 81.25%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 98.39478%) 87.5%,
    color-mix(in srgb, var(--story-gradient-bridge), var(--story-blue) 99.77818%) 93.75%,
    var(--story-blue) 100%);
}

body.team-story #approach {
  --story-gradient-base: var(--story-blue);
  --story-gradient-ramp: linear-gradient(180deg,
    var(--story-blue) 0%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 0.22182%) 6.25%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 1.60522%) 12.5%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 4.87690%) 18.75%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 10.35156%) 25%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 18.00060%) 31.25%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 27.52075%) 37.5%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 38.40275%) 43.75%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 50.00000%) 50%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 61.59725%) 56.25%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 72.47925%) 62.5%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 81.99940%) 68.75%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 89.64844%) 75%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 95.12310%) 81.25%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 98.39478%) 87.5%,
    color-mix(in srgb, var(--story-blue), var(--story-paper) 99.77818%) 93.75%,
    var(--story-paper) 100%);
}

/* Homepage source: .bg-home-gradient.padding-top-80.is2 in halo-lab.css,
   navy 26% -> blue 69% -> paper 90%. Isolate the first leg from FAQ's
   variable height: 26 / 69 = 37.681159%. The lead's exact blue endpoint
   joins the blue FAQ surface and CTA start without a horizontal seam. */
body.team-story .story-proof-gradient {
  background: #1964d1 !important;
}
body.team-story .story-proof-lead {
  background: linear-gradient(#000218 37.681159%, #1964d1 100%);
}
body.team-story .story-proof-gradient #love-letters,
body.team-story .story-proof-gradient #numbers {
  background: transparent !important;
}

/* Anchor the light leg to the original CTA, on every breakpoint. The 68%
   paper stop is the measured homepage CTA crop, already used on tablet.
   No component sizing, spacing, or scroll-dependent measuring is involved. */
body.team-story .story-proof-gradient .site-cta {
  background: linear-gradient(#1964d1, #f5f5f7 68%) !important;
}

/* Dither is one background paint, never an overlay on text, photos or video.
   A neutral black/white SVG at 2/255 alpha in overlay blending changes a
   channel by at most 1/255. It breaks quantisation without visible grain.
   The outro retains the homepage source colors. */
body.team-story .hero.concept-hero,
body.team-story #working-principles,
body.team-story #approach {
  background:
    var(--story-gradient-dither) 0 0 / 192px 192px repeat,
    var(--story-gradient-ramp) 0 0 / 100% 100% no-repeat
    var(--story-gradient-base) !important;
  background-blend-mode: overlay, normal;
}

@media (forced-colors: active) {
  body.team-story .hero.concept-hero,
  body.team-story #working-principles,
  body.team-story #approach,
  body.team-story .story-proof-gradient,
  body.team-story .story-proof-lead,
  body.team-story .story-proof-gradient .site-cta { background-image: none !important; }
}