/* Case-study pages (clearifi.html, inspora.html): skip link, slim header, section menu, phone menu.
   Loaded after /styles.css, which it overrides only inside .case-header and for the few helpers below.
   Mirrors the homepage header in home.css: a 64 px bar, 11.5 px tracked caps, a maroon underline on the
   current section, and below the breakpoint the same menu panel. */
:root { --header-h: 64px; --amber: #8A5A00; --amber-dot: #C98A1B; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 14px; font: 500 14px/1.4 var(--sans); border-radius: 4px; transition: top .2s ease; }
.skip:focus { top: 12px; }

.case-header.site-header { padding: 0; height: var(--header-h); display: flex; align-items: center; pointer-events: auto; border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease; }
.case-header .header-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; align-self: stretch; }
.case-header .brand-lockup { gap: 10px; min-height: 44px; flex: none; }
.case-header .brand-mark { width: 24px; height: 24px; }
.case-nav { margin-left: auto; display: flex; align-items: center; }
.case-nav .nav-list { display: flex; gap: clamp(16px, 1.8vw, 28px); list-style: none; }
.case-nav a, .back-link {
  display: inline-block; position: relative; padding: 12px 0; white-space: nowrap;
  font: 500 11.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute);
  transition: color .3s var(--ease);
}
.case-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px;
  background: var(--maroon); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.case-nav a:hover, .case-nav a[aria-current="true"] { color: var(--ink); }
.case-nav a:hover::after, .case-nav a[aria-current="true"]::after { transform: scaleX(1); }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; margin-left: clamp(14px, 2.2vw, 32px); color: var(--maroon); }
.back-link:hover { color: var(--ink); }
.menu-btn {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; margin-left: 6px;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: none; cursor: pointer;
  font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.menu-btn:hover { border-color: var(--maroon); }
.menu-icon { position: relative; width: 16px; height: 10px; flex: none; }
.menu-icon i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-icon i:first-child { top: 1px; }
.menu-icon i:last-child { top: 7.5px; }
.nav-open .menu-icon i:first-child { top: 4.25px; transform: rotate(45deg); }
.nav-open .menu-icon i:last-child { top: 4.25px; transform: rotate(-45deg); }
.nav-scrim { position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h); z-index: 99; background: rgba(15, 23, 42, .35); }
@media (hover: none), (pointer: coarse) { .menu-btn, .case-nav a, .back-link { cursor: pointer; } }

/* Status in the top label and the status note: amber for "In transition" (text #8A5A00 on paper, 5.6:1). */
.status-tag { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.status-tag.transit { color: var(--amber); }
.status-tag .status-dot, .status-note .status-dot.transit { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-dot); opacity: 1; }
.ext { display: inline-block; }

/* Menu panel: below 960 px on Clearifi (four sections), below 1024 px on Inspora (six). Same rules, two widths. */
@media (max-width: 959px) {
.case-header .menu-btn { display: inline-flex; }
.case-header .back-link { margin-left: auto; }
.case-header .case-nav {
  position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: block;
  background: var(--paper); border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 26px 40px -26px rgba(15, 23, 42, .4);
  padding: 6px var(--pad-x) calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.nav-open .case-header .case-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--ease); }
.nav-open .case-header.site-header { background: var(--paper); border-bottom-color: var(--rule); }
.case-header .case-nav .nav-list { display: grid; gap: 0; }
.case-header .case-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 2px;
  font: 500 25px/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--rule);
}
.case-header .case-nav a::after { display: none; }
.case-header .case-nav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: transparent; }
.case-header .case-nav a[aria-current="true"] { color: var(--maroon); font-style: italic; }
.case-header .case-nav a[aria-current="true"]::before { background: var(--maroon); }
html:not(.js) .case-header .case-nav, html:not(.js) .case-header .menu-btn { display: none; }
}
@media (max-width: 1023px) {
.case-header--long .menu-btn { display: inline-flex; }
.case-header--long .back-link { margin-left: auto; }
.case-header--long .case-nav {
  position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: block;
  background: var(--paper); border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 26px 40px -26px rgba(15, 23, 42, .4);
  padding: 6px var(--pad-x) calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.nav-open .case-header--long .case-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--ease); }
.nav-open .case-header--long.site-header { background: var(--paper); border-bottom-color: var(--rule); }
.case-header--long .case-nav .nav-list { display: grid; gap: 0; }
.case-header--long .case-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 2px;
  font: 500 25px/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--rule);
}
.case-header--long .case-nav a::after { display: none; }
.case-header--long .case-nav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: transparent; }
.case-header--long .case-nav a[aria-current="true"] { color: var(--maroon); font-style: italic; }
.case-header--long .case-nav a[aria-current="true"]::before { background: var(--maroon); }
html:not(.js) .case-header--long .case-nav, html:not(.js) .case-header--long .menu-btn { display: none; }
}
@media (max-width: 599px) {
  .case-header .header-row { gap: 10px; }
  .bk-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-btn { padding: 6px 12px; gap: 8px; }
}