/**
 * Impactiqa — panel.css
 * Panel chrome header (subpage fixed header) + shared panel content components.
 * Loaded on every page via head.php $base_css_files.
 *
 * The panel chrome is positioned relative to the --panel-sliver variable
 * set by PanelBridge during the 3D flip animation so the chrome slides in
 * from the right edge correctly.
 */

/* ── Panel chrome (subpage fixed header) ──────────────────────────────────── */
.panel-chrome {
  position: fixed;
  top: 0;
  left: var(--panel-sliver, 0);
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  pointer-events: none;
}
.panel-chrome > * { pointer-events: auto; }

.panel-logo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .05em;
  background: var(--panel-fg, #0a0a0a);
  color: var(--panel-bg, #f7f6f4);
  padding: 4px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.panel-logo:hover { opacity: 0.75; }

.panel-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--panel-fg, #0a0a0a);
  color: var(--panel-bg, #f7f6f4);
  border: none; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; line-height: 1;
  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
}
.panel-close:hover { transform: rotate(90deg); }

/* ── Shared panel content components ──────────────────────────────────────── */
/* Used on service, work, contact, careers, ideas, featured (stubs) */
/* and as foundational building blocks for about + case-study pages   */

.eyebrow {
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: 13px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--panel-mute, rgba(10,10,10,.55));
}

.headline {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(64px, 11vw, 168px); line-height: .88;
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--panel-fg, #0a0a0a); max-width: 14ch;
}

.blurb {
  max-width: 640px;
  font-family: 'Barlow', sans-serif; font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55;
  color: var(--panel-fg, #0a0a0a);
}

.coming {
  display: inline-block; margin-top: 24px; padding: 8px 14px;
  border: 1px solid var(--panel-rule, rgba(10,10,10,.15));
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--panel-mute, rgba(10,10,10,.55));
}