/* Intelligence platform shell -------------------------------------------------
   Chrome only: the compact platform bar, its disclosure panel, the edition
   rail, the persistent contact affordance and the platform footer. Page content
   styling stays in the page stylesheet.

   Design tokens are owned by intelligence.css so there is exactly one :root for
   the surface. Every var() here carries the canonical fallback so the shell
   still renders correctly if a future page loads it on its own.

   Typography roles follow the identity: Kumbh Sans 500 for the wordmark and
   display, Hanken Grotesk 300/400/500 for navigation and reading, and IBM Plex
   Mono 500 for metadata labels only.

   The bar mirrors the marketing homepage header: wordmark, a short platform
   nav, one external destination and the mobile menu control. The maison roster
   is never inline in that row — it lives in the panel the triggers open. */

.intelligence-shell,
.shell-contact,
.intelligence-footer {
  --shell-ink: var(--ink, #11110f);
  --shell-paper: var(--paper-strong, #faf8f2);
  --shell-display: var(--display, "Kumbh Sans", sans-serif);
  --shell-body: var(--body, "Hanken Grotesk", sans-serif);
  --shell-mono: var(--mono, "IBM Plex Mono", monospace);
  --shell-signal: var(--red, #e50c0c);
  --shell-gutter: var(--gutter, clamp(1rem, 4vw, 4.5rem));
  --shell-content: var(--content, 84rem);
}

.intelligence-shell {
  position: sticky;
  z-index: 40;
  top: 0;
  max-width: 100vw;
  border-bottom: 1px solid rgb(250 248 242 / 16%);
  background: rgb(17 17 15 / 94%);
  color: var(--shell-paper);
  backdrop-filter: blur(16px) saturate(.8);
}

.intelligence-shell a { color: inherit; text-decoration: none; }

/* --- Level 1: the compact bar --------------------------------------------- */

.shell-bar {
  display: flex;
  width: min(var(--shell-content), calc(100% - (var(--shell-gutter) * 2)));
  min-height: 3.4rem;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-inline: auto;
}

.shell-wordmark {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
  font-family: var(--shell-display);
  font-weight: 500;
  letter-spacing: .035em;
  line-height: .82;
  text-transform: uppercase;
}

.shell-wordmark small { font: 500 .38rem/1 var(--shell-mono); letter-spacing: .08em; }
.shell-wordmark span { display: grid; gap: 1px; font-size: .58rem; white-space: nowrap; }
.shell-wordmark b { display: block; font: inherit; }

.shell-platform-nav {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.5rem);
}

.shell-trigger,
.shell-agency,
.shell-menu {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--shell-body);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
}

.shell-agency { margin-left: auto; }

/* The open trigger is marked, so the reader can see which disclosure the panel
   below belongs to without reading its contents. */
.shell-trigger[aria-expanded="true"] { font-weight: 500; }

.shell-trigger::after {
  width: 0;
  height: 0;
  border-top: 4px solid currentcolor;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  content: "";
  opacity: .55;
}

.shell-trigger[aria-expanded="true"]::after { opacity: 1; transform: rotate(180deg); }

.shell-trigger:hover,
.shell-trigger:focus-visible,
.shell-agency:hover,
.shell-agency:focus-visible { text-decoration: underline; text-underline-offset: .3em; }

.shell-menu { display: none; }

/* --- The disclosure panel -------------------------------------------------- */

/* Absolute, never in flow: opening the panel must not change the sticky header
   height that anchored sections scroll to, and must not push the page. */
.shell-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  max-width: 100vw;
  border-bottom: 1px solid rgb(250 248 242 / 16%);
  background: rgb(17 17 15 / 98%);
  backdrop-filter: blur(16px) saturate(.8);
}

.intelligence-shell[data-shell-open] .shell-panel { display: block; }

.shell-panel-inner {
  display: grid;
  width: min(var(--shell-content), calc(100% - (var(--shell-gutter) * 2)));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem clamp(1rem, 2.4vw, 2.5rem);
  margin-inline: auto;
  padding: 1.1rem 0 1.4rem;
}

.shell-group ul { display: grid; margin: 0; padding: 0; list-style: none; }

.shell-group-label {
  margin: 0 0 .35rem;
  color: rgb(250 248 242 / 46%);
  font: 500 .5rem/1 var(--shell-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.shell-maison,
.shell-group li { display: flex; min-height: 44px; align-items: center; }

.shell-maison > span,
.shell-maison > a,
.shell-group a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .35rem;
  font-family: var(--shell-body);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .01em;
}

/* A peer maison is calm plain text: no link, no control, no written state. */
.shell-maison > span { color: rgb(250 248 242 / 62%); }

.shell-maison--current > span {
  position: relative;
  padding-left: .7rem;
  color: var(--shell-paper);
  font-weight: 500;
}

.shell-category--current > span {
  position: relative;
  padding-left: .7rem;
  color: var(--shell-paper);
  font-weight: 500;
}

.shell-category--current > span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--shell-signal);
  content: "";
  transform: translateY(-50%);
}

.shell-maison--current > span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--shell-signal);
  content: "";
  transform: translateY(-50%);
}

.shell-group a[aria-current="page"] { font-weight: 500; }

.shell-host {
  color: rgb(250 248 242 / 46%);
  font: 500 .48rem/1 var(--shell-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.shell-maison > a:hover,
.shell-maison > a:focus-visible,
.shell-group a:hover,
.shell-group a:focus-visible { text-decoration: underline; text-underline-offset: .3em; }

/* --- Level 2: edition rail ------------------------------------------------ */

.shell-rail-wrap {
  display: flex;
  width: min(var(--shell-content), calc(100% - (var(--shell-gutter) * 2)));
  align-items: center;
  margin-inline: auto;
  border-top: 1px solid rgb(250 248 242 / 14%);
}

/* The shell tracks the section being read and brings that rail item into the
   scroller. Smooth inline scrolling keeps that correction readable rather than
   making the rail jump, and the inline padding stops the marked item from
   landing flush against a clipped edge. */
.shell-rail-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 1rem;
}
.shell-rail { display: flex; align-items: center; gap: 0 clamp(1rem, 2vw, 2rem); }

.shell-rail a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: rgb(250 248 242 / 64%);
  font-family: var(--shell-body);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .28s cubic-bezier(.2, .8, .2, 1), font-weight .28s cubic-bezier(.2, .8, .2, 1);
}

.shell-rail a:hover, .shell-rail a:focus-visible { color: var(--shell-paper); font-weight: 500; }
.shell-rail a[aria-current="page"] { color: var(--shell-paper); font-weight: 500; }

.shell-rail a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  height: 2px;
  background: var(--shell-signal);
  content: "";
}

/* --- Persistent contact affordance ---------------------------------------- */

.shell-contact {
  position: fixed;
  z-index: 25;
  bottom: clamp(14px, 2.4vw, 32px);
  left: clamp(14px, 2.4vw, 32px);
  display: inline-flex;
  max-width: 13rem;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border: 1px solid rgb(250 248 242 / 24%);
  background: rgb(17 17 15 / 94%);
  color: var(--shell-paper);
  text-decoration: none;
  box-shadow: 0 18px 48px rgb(17 17 15 / 22%);
}

.shell-contact-label { font: 400 .74rem/1 var(--shell-body); white-space: nowrap; }
.shell-contact-host { color: rgb(250 248 242 / 52%); font: 500 .46rem/1 var(--shell-mono); letter-spacing: .06em; }
.shell-contact:hover, .shell-contact:focus-visible { border-color: var(--shell-paper); }

/* The consent panel, creative drawer and any visible working controls own the
   reading surface. The contact route remains in the panel and footer while
   this compact affordance yields, so it cannot cover an action or its label.

   Two drawer shapes are covered because the two editions build the drawer
   differently: the Rolex edition marks <body> while its panel is open, and a
   Maison edition opens a real modal <dialog>. Both, and the consent panel, hide
   this affordance unconditionally at every width.

   The working-control collision guard is deliberately separate and scoped to
   the wide layout below, where the affordance actually floats over the page.
   Writing it here and re-showing it inside the compact media query would make
   the two rules race: `body.is-drawer-open .shell-contact` and
   `body.shell-contact-hidden .shell-contact` have identical specificity, so the
   later compact rule would win and put the affordance back over an open drawer
   whenever a working surface happened to be in view. Never hiding on compact
   removes the conflict instead of arbitrating it. */
body.is-drawer-open .shell-contact,
body:has(dialog[open]) .shell-contact,
body:has(.consent-banner:not([hidden])) .shell-contact { display: none; }

@media (min-width: 901px) {
  body.shell-contact-hidden .shell-contact { display: none; }
}

/* --- Footer --------------------------------------------------------------- */

.intelligence-footer {
  display: grid;
  width: min(var(--content, 84rem), calc(100% - (var(--gutter, clamp(1rem, 4vw, 4.5rem)) * 2)));
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
  margin-inline: auto;
  border-top: 1px solid var(--rule, #d6d4cd);
  color: var(--muted, #71726d);
  font: 500 .65rem var(--mono, "IBM Plex Mono", monospace);
}

.intelligence-footer a, .intelligence-footer .cookie-settings {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.intelligence-footer a:hover, .intelligence-footer .cookie-settings:hover { color: var(--ink, #11110f); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  html { max-width: 100%; overflow-x: hidden; }
  @supports (overflow: clip) {
    html { overflow-x: clip; }
  }

  .shell-bar { min-height: 3rem; gap: 1rem; }

  /* Below the bar's comfortable width the platform level collapses into one
     labelled menu. The edition rail stays visible: it is the wayfinding for the
     page you are already reading. */
  .shell-platform-nav, .shell-agency { display: none; }
  .shell-menu { display: inline-flex; min-width: 44px; margin-left: auto; justify-content: center; }
  .shell-rail a { min-width: 44px; justify-content: center; }
  .shell-panel { max-height: 70svh; overflow-y: auto; overscroll-behavior: contain; }

  /* On compact screens the contact route stays in document flow instead of
     floating over the dashboard. It is still an obvious external action and
     remains available in the menu and footer. Because it no longer floats, it
     cannot collide with a working surface, so the collision guard simply does
     not apply here — and nothing in this block re-shows it over an open drawer
     or the consent panel. */
  .shell-contact {
    position: static;
    width: fit-content;
    max-width: calc(100% - (var(--shell-gutter) * 2));
    margin: 1rem var(--shell-gutter) 0;
  }
}

@media (max-width: 620px) {
  .shell-contact { max-width: calc(100vw - 2rem); }
  .intelligence-footer { grid-template-columns: 1fr 1fr; padding: 1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shell-rail a { transition: none; }

  /* The rail still corrects itself to the tracked section; it just arrives
     instead of travelling. */
  .shell-rail-scroll { scroll-behavior: auto; }
}

@media print {
  .intelligence-shell { position: static; border-bottom: 1px solid #000; background: #fff; color: #000; }
  .shell-menu, .shell-trigger, .shell-contact, .shell-rail-scroll { display: none !important; }

  /* Paper has no disclosure. Print the panel in flow so the roster, verticals
     and external destinations are all on the page. */
  .shell-panel { position: static; display: block !important; border-bottom: 0; background: #fff; }
  .intelligence-shell[data-shell-open] .shell-group { display: block !important; }
  .shell-group-label, .shell-host, .shell-contact-host { color: #000; }
  .shell-maison > span,
  .shell-category > span { color: #000; }
  .intelligence-footer .cookie-settings { display: none !important; }
}