/* Case-study pages (case-studies/*.php): the main site's white navbar pill. Loaded after each page's own
   stylesheet; every page keeps its section links, scroll highlighting and mobile menu. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

/* The main site's type on every case page: Poppins headings, Sora body, Inter small labels */
html:root {
  --f-display: Poppins, "Helvetica Neue", Arial, sans-serif;
  --f-body: Sora, "Helvetica Neue", Arial, sans-serif;
  --f: Sora, "Helvetica Neue", Arial, sans-serif;
  --f-mono: Inter, "Helvetica Neue", Arial, sans-serif;
}

html .nav {
  top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 1.4vw, 24px)); padding: 0 1rem; pointer-events: none;
  background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html .nav.solid { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html .nav .wrap {
  position: relative; pointer-events: auto;
  width: min(100%, 1280px); max-width: none; min-height: 0; margin-inline: auto;
  gap: clamp(1rem, 3vw, 4rem); padding: clamp(10px, 0.9vw, 16px) clamp(18px, 1.8vw, 32px);
  background: #fff; border-radius: clamp(12px, 1vw, 18px); box-shadow: 0 10px 30px -14px rgba(7, 6, 6, 0.25);
}

html .nav .brand { display: flex; flex: none; align-items: center; gap: 0.6rem; color: #070606; }
html .nav .brand img { display: block; height: clamp(20px, 1.6vw, 30px); width: auto; }
html .nav .brand-group { display: flex; flex: none; align-items: center; gap: 0.6rem; }
html .nav .brand-crumb {
  font: 400 clamp(11px, 0.78vw, 14px) / 1 Sora, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(7, 6, 6, 0.45); white-space: nowrap; text-decoration: none; transition: color 0.2s;
}
html .nav .brand-crumb:hover, html .nav .brand-crumb:focus-visible { color: #EF4680; }

html .nav ul { gap: clamp(0.25rem, 1vw, 1rem); }
html .nav ul a {
  padding: 0.5em 0.7em; background: none; white-space: nowrap;
  font: 600 clamp(11px, 0.78vw, 14px) / 1 Sora, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #070606;
}
html .nav ul a:hover, html .nav ul a.on, html .nav.solid ul a:hover, html .nav.solid ul a.on { color: #EF4680; background: none; }
html .nav.solid ul a { color: #070606; }

/* Between phone and wide desktop the links need the room */
@media (max-width: 1200px) { html .nav .brand-crumb { display: none; } }

/* Tablets: no menu button, every section link in one row beside the logo.
   !important beats each page's own mobile-menu rules (hidden lists, dropdown panels, transforms). */
@media (min-width: 641px) { html .nav .menu { display: none !important; } }
@media (min-width: 641px) and (max-width: 960px) {
  html .nav .wrap { flex-wrap: nowrap !important; }
  html .nav ul, html .nav ul.open {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; order: 0;
    flex: 0 1 auto !important; width: auto !important; min-width: 0; max-width: none !important; height: auto !important; max-height: none !important;
    position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
    gap: 2px; margin: 0 0 0 auto !important; padding: 0 !important; overflow-x: auto; scrollbar-width: none;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html .nav ul::-webkit-scrollbar { display: none; }
  html .nav ul li { display: block !important; flex: none; }
  html .nav ul a, html .nav ul.open a { display: block !important; min-height: 0 !important; padding: 0.7em 0.5em !important; font-size: 10.5px !important; letter-spacing: 0.08em; }
}

/* Phones: pages without their own menu get one from js/case-nav.js (.nav--menu) */
.nav--menu .menu { display: none; }
@media (max-width: 640px) {
  html .nav--menu ul:not(.open) { display: none; }
  html .nav--menu .menu {
    display: grid; align-content: center; justify-items: center; gap: 5px; flex: none;
    width: 38px; height: 38px; padding: 0; border: 1px solid; border-radius: 50%; background: none; cursor: pointer;
  }
  .nav--menu .menu span { display: block; width: 15px; height: 1px; background: currentColor; }
  html .nav--menu ul.open { display: flex; flex-direction: column; position: absolute; }
}

/* Mobile menu: dark lines on the white pill, dropdown under it */
html .nav .menu, html .nav.solid .menu { border-color: rgba(7, 6, 6, 0.15); color: #070606; }
html .nav ul.open {
  flex-direction: column; flex-wrap: nowrap;
  top: calc(100% + 8px); left: 0; right: 0; gap: 2px; padding: 10px;
  background: #fff; border: 0; border-radius: clamp(12px, 1vw, 18px); box-shadow: 0 18px 40px -16px rgba(7, 6, 6, 0.3);
}
html .nav ul.open a { display: block; padding: 12px 14px; font-size: 12px; color: #070606; }
html .nav ul.open a.on { color: #EF4680; background: rgba(239, 70, 128, 0.08); }

/* Preview videos open in a popup (js/case-nav.js): play badge on hover */
.cs-tile { cursor: pointer; }
.cs-frame { position: relative; }
.cs-tile::after {
  content: ''; position: absolute; left: var(--cs-x, 50%); top: var(--cs-y, 50%); z-index: 2; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 46% no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.4); box-sizing: border-box;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -8px rgba(7, 6, 6, 0.3);
  opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s; pointer-events: none;
}
.cs-tile:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
@media (hover: none) { .cs-tile::after { opacity: 0.9; transform: scale(0.75); } }

/* Video popup */
.cs-video {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.25rem;
  background: rgba(7, 6, 6, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cs-video[hidden] { display: none; }
.cs-video video {
  display: block; width: auto; height: auto; max-width: min(100%, 1200px); max-height: calc(100svh - 7rem);
  border-radius: 14px; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.cs-video-close {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #070606;
  font: 400 28px / 1 Sora, sans-serif; cursor: pointer;
}
.cs-video-close:hover { color: #EF4680; }
html.cs-video-open, html.cs-video-open body { overflow: hidden; }