/* Shared look for the case-study reports (public/case-studies/*.html):
   site colours and fonts, top bar, glass sheet, "Back to Works" button, fade-in.
   Each report keeps only its own layout and colour overrides in its <style> blocks. */
:root:root:root{color-scheme:dark}
html{color-scheme:dark}
body{
  background:#07070b !important;
  color:#ece9e2;font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  -webkit-font-smoothing:antialiased}
body *{font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2{font-family:"Instrument Serif",Georgia,"Times New Roman",serif !important;font-weight:400 !important;letter-spacing:-.015em !important}
h3{font-family:"Manrope",ui-sans-serif,system-ui,sans-serif !important;font-weight:600 !important}
/* still backdrop, same as the main site (style.css): violet glow on ink, darker toward the edges */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.65) 100%),
  radial-gradient(60% 50% at 72% 30%,rgba(124,103,242,.12),transparent 70%),
  radial-gradient(50% 45% at 8% 4%,rgba(124,103,242,.10),transparent 70%),
  radial-gradient(42% 40% at 34% 100%,rgba(240,166,255,.05),transparent 70%)}
::selection{background:rgba(184,166,255,.35)}
a{color:#b8a6ff}
.hms-bar{box-sizing:border-box;position:sticky;top:14px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(1136px,calc(100% - 2 * clamp(16px,4vw,40px)));height:64px;margin:14px auto 0;padding:0 26px;border-radius:999px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.016) 45%,rgba(184,166,255,.03)),rgba(10,10,15,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(236,233,226,.14),inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px -30px rgba(0,0,0,.9)}
/* the whole report sits on one frosted glass sheet above the page background */
.wrap{position:relative;z-index:2;border-radius:32px;margin:26px auto 40px !important;max-width:1136px !important;
  width:calc(100% - 2 * clamp(16px,4vw,40px));
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.016) 45%,rgba(184,166,255,.03)),rgba(10,10,15,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(236,233,226,.14),inset 0 1px 0 rgba(255,255,255,.16),0 40px 90px -50px rgba(0,0,0,.95);
  padding:clamp(24px,4.4vw,60px) !important;box-sizing:border-box !important}
@media (max-width:820px){.wrap{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px}}
.hms-bar a{text-decoration:none}
.hms-brand{font-family:"Instrument Serif",Georgia,serif !important;font-size:24px;line-height:1;color:#ece9e2 !important;white-space:nowrap}
.hms-brand span{color:#8f8c99;font-family:inherit !important}
.hms-bar nav{display:flex;gap:clamp(18px,3vw,36px);font-size:13.5px;font-weight:500;letter-spacing:.02em}
.hms-bar nav a{color:rgba(236,233,226,.72) !important;padding:6px 0;border-bottom:1px solid transparent;transition:color .4s ease,border-color .4s ease}
.hms-bar nav a:hover{color:#ece9e2 !important}
.hms-bar nav a.on{color:#b8a6ff !important;border-bottom-color:#b8a6ff}
/* back to Works */
.hms-back{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;justify-self:start;width:max-content;margin-bottom:6px;
  padding:11px 20px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  color:#ece9e2 !important;background:rgba(236,233,226,.06);box-shadow:inset 0 0 0 1px rgba(236,233,226,.24);
  transition:color .35s ease,background .4s ease,box-shadow .4s ease}
.hms-back:hover{color:#140a33 !important;background:linear-gradient(135deg,#c9bcff,#8a74ff 55%,#6a52f0);box-shadow:0 14px 34px -14px rgba(124,103,242,.9)}
.hms-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hms-back:hover svg{transform:translateX(-4px)}
/* fade-in: page lifts from black, then each block fades up as it scrolls in */
.js-hms body::after{content:"";position:fixed;inset:0;z-index:300;background:#07070b;pointer-events:none;transition:opacity 1.1s ease .05s}
.js-hms.hms-ready body::after{opacity:0}
.js-hms .wrap > *{opacity:0;translate:0 32px;transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0ms),translate 1.2s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.js-hms .wrap > .hms-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.js-hms body::after{display:none}.js-hms .wrap > *{opacity:1;translate:none;transition:none}}
@media (max-width:480px){.hms-bar{height:58px;padding:0 18px}.hms-brand{font-size:20px}.hms-bar nav{gap:14px;font-size:13px}}