/* ==========================================================================
   Brings the older pages (tags, Compliance Reviewer, case studies, film) into
   line with the homepage: the same page width, a navy hero band, homepage
   style labels and buttons. Loads last, after main.css and case-study.css.
   ========================================================================== */
:root { --max: 1200px; }

/* Labels: mono, sentence case, green dot (the homepage "kicker") */
.eyebrow { gap: 0.55rem; font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: #234e70; }
.eyebrow__tick, .eyebrow--ondark .eyebrow__tick { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4caf50; box-shadow: 0 0 0 4px rgba(76,175,80,0.2); }

/* Buttons: the homepage pill */
.btn { border-radius: 999px; font-family: "Sora", "Segoe UI", Roboto, Arial, sans-serif; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Hero: a full-width navy band. The hero boxes are width-limited, so the colour is carried out to the
   edges of the window with a spread shadow that is clipped top and bottom. */
.pr-hero, .cr-hero, .cs-index__hero {
  position: relative; color: #d7e0ea;
  background: #0c1b30; box-shadow: 0 0 0 100vmax #0c1b30; clip-path: inset(0 -100vmax);
  padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.pr-hero h1, .cr-hero h1, .cs-index__hero h1 { color: #fff; }
.pr-hero .u-green, .cr-hero .u-green, .cs-index__hero .u-green { color: #8fd392; }
.pr-hero .u-blue, .cr-hero .u-blue, .cs-index__hero .u-blue { color: #9cc6f2; }
.pr-hero .lede, .cr-hero .lede, .cs-index__hero .lede, .pr-hero p, .cr-hero p, .cs-index__hero p { color: #d7e0ea; }
.pr-hero .eyebrow, .cr-hero .eyebrow, .cs-index__hero .eyebrow { color: #8fd392; }
.pr-hero a:not(.btn), .cr-hero a:not(.btn), .cs-index__hero a:not(.btn) { color: #8fd392; }

/* tags: the spec strip inside the hero */
.pr-hero .spec-strip { border-color: rgba(255,255,255,0.16); }
.pr-hero .spec-strip b { color: #fff; }
.pr-hero .spec-strip span { color: #8fa0b3; }

/* Compliance Reviewer: the only logo file is dark, so on the navy band it is shown in white; the caption under the screenshot lightens */
.cr-hero .cr-logo { filter: brightness(0) invert(1); }
.cr-hero .cs-fig figcaption { color: #8fa0b3; }
.cr-hero .cs-fig figcaption::before { background: rgba(255,255,255,0.3); }

/* ---- Motion (switched on by js/site-motion.js, which adds html.sm) ---- */
@keyframes sm-rise { from { opacity: 0; transform: translateY(26px); } }
.sm .sm-reveal { opacity: 0; }
.sm.sm-rest .sm-reveal { opacity: 1; animation: none; }
.sm .sm-reveal.is-on { opacity: 1; animation: sm-rise 0.8s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 90ms) backwards; animation-duration: 0.8s !important; }
/* hero entrance on load */
.sm .pr-hero .wrap > *, .sm .cr-hero > div > *, .sm .cr-hero__fig, .sm .cs-index__hero > *, .sm .cs-hero__inner > * { animation: sm-rise 0.8s cubic-bezier(.2,.8,.2,1) backwards; animation-duration: 0.8s !important; }
.sm :is(.pr-hero .wrap, .cr-hero > div, .cs-index__hero, .cs-hero__inner) > :nth-child(1) { animation-delay: 0.05s; }
.sm :is(.pr-hero .wrap, .cr-hero > div, .cs-index__hero, .cs-hero__inner) > :nth-child(2) { animation-delay: 0.15s; }
.sm :is(.pr-hero .wrap, .cr-hero > div, .cs-index__hero, .cs-hero__inner) > :nth-child(3) { animation-delay: 0.27s; }
.sm :is(.pr-hero .wrap, .cr-hero > div, .cs-index__hero, .cs-hero__inner) > :nth-child(n+4) { animation-delay: 0.39s; }
.sm .cr-hero__fig { animation-delay: 0.3s; }
/* the older pages' own reveals keep their timing when the visitor has asked for motion */
.sm .cs-reveal { transition-duration: 0.7s !important; }
/* progress line under the header, as on the homepage */
@supports (animation-timeline: scroll()) {
  @keyframes sm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .sm .sx-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #4a90d9, #4caf50); transform-origin: 0 50%; animation: sm-grow linear both; animation-timeline: scroll(root); animation-duration: auto !important; }
}

@media print {
  .sm .sm-reveal { opacity: 1 !important; animation: none !important; }
  .pr-hero, .cr-hero, .cs-index__hero { background: none; box-shadow: none; clip-path: none; color: inherit; }
  .pr-hero h1, .cr-hero h1, .cs-index__hero h1 { color: inherit; }
}