/* ============================================================
   THE DESCENT — scroll-driven journey down Neo's body.
   Prototype stylesheet. Standalone (no Tailwind classes) so it
   can't be broken by a stale styles.css rebuild.
   ============================================================ */

:root {
  --forest: #b8c1bb;
  --forest-2: #d8deda;
  --room-high: #e5e9e6;
  --room-low: #9da8a1;
  --ink: #101915;
  --ink-soft: #3e4a44;
  --line: rgba(16,25,21,0.13);
  --glass: rgba(246,249,247,0.64);
  --neon: #23bd70;
  --mint: #147a49;
  --teal: #205f45;
  --chapter-h: 125vh;      /* one viewport plus a short camera transition */
}

html { scroll-behavior: smooth; }

/* Laptop gestures settle on complete compositions instead of stopping in the
   camera-only space between them. Phones keep their natural linear flow. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y mandatory; }
  .chapter,
  #landing {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

body {
  margin: 0;
  background: var(--forest);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The navigation now belongs to the room instead of floating over a black
   HUD. These overrides intentionally sit after the compiled Tailwind sheet. */
header.glass {
  background: rgba(229,234,230,0.78) !important;
  border-bottom: 1px solid rgba(16,25,21,0.10);
  box-shadow: 0 10px 34px rgba(37,49,42,0.06);
  backdrop-filter: blur(18px) saturate(115%);
}
header .text-white { color: var(--ink) !important; }
header .nav-link { color: rgba(16,25,21,0.66) !important; }
header .nav-link:hover { color: var(--ink) !important; }

/* ---------- THE LAYER SANDWICH ----------
   backdrop(0) < .behind(1) < Neo(2) < .front(3) < fx(4).
   The backdrop is opaque, so it MUST live outside #stage — inside it, its
   own stacking context would paint it over every .behind panel. */
#backdrop, #stage, #fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#backdrop { z-index: 0; }
#stage    { z-index: 2; }
#fx       { z-index: 4; }

/* Neo's camera wrapper is positioned entirely from JS. Inside it, the original
   sprite is split at the neck into two lossless visual layers. This lets the
   head tilt independently without redrawing or modifying the source artwork. */
#neo-sprite {
  position: absolute;
  top: 0;
  left: 0;
  height: 86vh;
  transform-origin: 0 0;
  will-change: transform;
}
#neo-idle,
#neo-head-layer,
#neo-body,
#neo-head-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#neo-idle {
  transform-origin: 50% 92%;
  animation: neo-idle 5.8s ease-in-out infinite;
  will-change: transform;
}
#neo-body,
#neo-head-sprite {
  object-fit: fill;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* The split sits through the black neck bellows, where a tiny rotation cannot
   expose a bright seam. The two layers still come from the exact same pixels. */
#neo-body {
  -webkit-clip-path: inset(17.35% 0 0 0);
  clip-path: inset(17.35% 0 0 0);
}
#neo-head-sprite {
  -webkit-clip-path: inset(0 0 82.65% 0);
  clip-path: inset(0 0 82.65% 0);
}
#neo-head-layer {
  transform-origin: 50% 17.15%;
  transform: rotate(var(--head-tilt, 0deg));
  transition: transform 90ms linear;
  will-change: transform;
}
@keyframes neo-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.08deg); }
  50%      { transform: translate3d(0, -0.16%, 0) rotate(0.08deg); }
}

/* Each dark pad covers one baked-in white disc. Its ::after recreates the
   original white neon sensor and is free to glide inside the visor. Because
   this layer is nested under the head, eyes and head always move together. */
#neo-gaze {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
body.neo-ready #neo-gaze { opacity: 1; }
.neo-pupil {
  position: absolute;
  top: 8.4%;
  width: 7.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #070c0a 0 67%, rgba(7,12,10,0.98) 76%, rgba(7,12,10,0) 100%);
}
.neo-pupil[data-eye="left"]  { left: 42.4%; }
.neo-pupil[data-eye="right"] { left: 56.8%; }
.neo-pupil::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #fff 0 54%, #f5fff9 72%, #c9f5df 100%);
  box-shadow: 0 0 7px rgba(255,255,255,0.92), 0 0 15px rgba(75,232,151,0.42);
  transform: translate(calc(-50% + var(--eye-x, 0%)), calc(-50% + var(--eye-y, 0%)));
  will-change: transform;
}
body.rig-3d #neo-gaze { display: none; }

/* A seamless robotics-room cyclorama: broad diffused ceiling light, a
   medium-grey wall that preserves Neo's white silhouette, and soft floor
   falloff. There are no literal props to fight the scroll choreography. */
.stage-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 72% at 58% 42%, rgba(61,77,68,0.24), transparent 73%),
    radial-gradient(72% 46% at 16% 2%, rgba(255,255,255,0.72), transparent 72%),
    linear-gradient(180deg, var(--room-high) 0%, #cbd2cd 56%, var(--room-low) 100%);
}
.stage-haze::before,
.stage-haze::after {
  content: '';
  position: absolute;
  inset: 0;
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.stage-haze::before {
  background: radial-gradient(36% 22% at 50% -3%, rgba(255,255,255,0.9), transparent 76%);
  opacity: 0.72;
}
.stage-haze::after {
  background: radial-gradient(34% 48% at 78% 42%, rgba(52,208,127,0.22), transparent 76%);
  opacity: 0.34;
}
body[data-chapter="1"] .stage-haze::after { opacity: 0.48; transform: translateX(-14%); }
body[data-chapter="2"] .stage-haze::after { opacity: 0.26; transform: translateX(8%) scale(1.08); }
body[data-chapter="3"] .stage-haze::after { opacity: 0.18; transform: translateY(12%); }
body[data-chapter="4"] .stage-haze::after { opacity: 0.42; transform: translateX(-4%) scale(1.12); }

/* A quiet wall/floor horizon and a broad contact shadow ground the subject. */
.stage-grid {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(38% 10% at 56% 91%, rgba(22,35,28,0.20), transparent 72%),
    linear-gradient(180deg,
      transparent 0 78%,
      rgba(66,79,71,0.08) 78.2%,
      rgba(255,255,255,0.05) 78.5%,
      rgba(70,84,76,0.08) 100%);
  will-change: transform;
}

/* Wide soft light shafts replace the old scanlines. */
.stage-fg {
  position: absolute;
  inset: -20% -10%;
  background:
    linear-gradient(108deg, rgba(255,255,255,0.20) 0 8%, transparent 24% 72%, rgba(255,255,255,0.08) 88% 100%);
  opacity: 0.55;
  will-change: transform;
}

/* Dither: large dark gradients band into visible rings on 8-bit displays.
   A sub-perceptual noise tile breaks the steps up. */
#backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.022;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(82% 72% at 52% 46%, transparent 42%, rgba(37,48,42,0.22) 100%);
}

/* The 3D subject. Same stage, same stop list — only the framing maths
   differ, so the two renderers are interchangeable. */
#neo-model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: transparent;
  --poster-color: transparent;
}
body.rig-3d #neo-sprite { display: none; }
body.rig-3d #neo-model { display: block; }

/* Static portrait — phones + reduced motion only */
#poster-frame,
#poster { display: none; }

/* ---------- CHAPTERS ---------- */
#scroll { position: relative; }

.chapter {
  position: relative;
  height: var(--chapter-h);
}
/* Behind Neo: he occludes the panel. Front: the panel occludes him. */
.chapter.behind { z-index: 1; }
.chapter.front  { z-index: 3; }

.chapter .sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: block;
  pointer-events: none;
}

/* ---------- PANELS ---------- */
.panel {
  position: absolute;
  top: 50%;
  width: min(430px, 38vw);
  pointer-events: auto;
  opacity: 1;
  will-change: transform, opacity;
}
.panel.wide   { width: min(470px, 37vw); }
.panel.narrow { width: min(268px, 23vw); }

.panel.align-left   { left: clamp(24px, 4vw, 62px); }
.panel.align-right  { right: clamp(95px, 11vw, 170px); text-align: right; }
.panel.align-center { left: 50%; width: min(640px, 82vw); text-align: center; }
.panel.align-center { transform: translateX(-50%); }
/* A centred panel carries its own translucent light pool for legibility. */
.panel.align-center::before {
  content: '';
  position: absolute;
  inset: -18% -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(238,243,240,0.92), rgba(238,243,240,0) 74%);
}

/* Core copy crosses Neo while the camera travels left. A quiet room-coloured
   surface keeps every line intact throughout that handoff, not only at the
   final camera stop. */
#projects .panel,
#c-core .panel {
  width: min(420px, 35vw);
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 24px;
  background: rgba(232,237,233,0.84);
  box-shadow: 0 20px 48px rgba(42,55,48,0.10);
  backdrop-filter: blur(18px) saturate(108%);
}

/* Three stacked callouts share one column beside the body. The top slot is
   pulled clear of the 4rem fixed header rather than centred on 25%. */
.panel.at-top { top: 28%; }
.panel.at-low { top: 74%; }

/* Typography */
.display {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  margin: 0 0 1.1rem;
  color: var(--ink);
  text-shadow: 0 1px 22px rgba(255,255,255,0.24);
}
.neon { color: #07844a; text-shadow: 0 0 24px rgba(52,208,127,0.20); }

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 14px;
}

.lede {
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  text-shadow: none;
}
.note { font-size: 0.82rem; color: rgba(12,92,54,0.72); letter-spacing: 0.04em; margin: 0; }
.foot { margin-top: 2.6rem; font-size: 0.8rem; color: rgba(16,25,21,0.45); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint);
  border: 1px solid rgba(9,122,67,0.22);
  background: rgba(246,249,247,0.42);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.badge i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Buttons */
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.ctas.center { justify-content: center; }
/* Scoped to .ctas on purpose: the site header reuses .btn-neon with Tailwind
   sizing utilities, and this stylesheet loads after the compiled Tailwind, so
   an unscoped rule here would win and inflate the nav button. */
.ctas .btn-neon, .ctas .btn-ghost {
  display: inline-block;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.ctas .btn-neon {
  background: var(--neon);
  color: #06120C;
  box-shadow: 0 14px 30px rgba(24,126,74,0.18);
}
.ctas .btn-neon:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(24,126,74,0.28); }
.ctas .btn-ghost {
  color: var(--ink);
  border: 1px solid rgba(16,25,21,0.18);
  background: rgba(246,249,247,0.36);
  backdrop-filter: blur(10px);
}
.ctas .btn-ghost:hover { border-color: rgba(9,122,67,0.46); background: rgba(246,249,247,0.58); transform: translateY(-2px); }

/* Numbered track panels */
.panel .num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--neon);
  margin-bottom: 8px;
}
.panel h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.panel p:not(.lede):not(.note):not(.foot) {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  text-shadow: none;
}

/* Legacy vs Neora cards */
.card {
  border-radius: 22px;
  padding: 26px 28px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.52);
  box-shadow: 0 22px 50px rgba(42,55,48,0.12);
  backdrop-filter: blur(18px) saturate(112%);
}
.card.neora {
  border-color: rgba(26,154,88,0.34);
  background: rgba(227,245,235,0.72);
  box-shadow: 0 22px 52px rgba(35,111,72,0.13);
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.align-right .card-head { flex-direction: row-reverse; }
.card-head h3 { margin: 0; }
.mark {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex: none;
}
.mark.bad  { background: rgba(239,68,68,0.10); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }
.mark.good { background: rgba(52,208,127,0.15); border: 1px solid rgba(52,208,127,0.4); color: var(--neon); }
.card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.card li { font-size: 0.9rem; color: var(--ink-soft); }
.card .good-list li { color: #23362d; }

/* Hero stat row */
.stats {
  display: flex;
  gap: 26px;
  margin: 26px 0 0;
  padding: 0;
}
.stats > div { display: flex; flex-direction: column; }
.stats dt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stats dd {
  margin: 2px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(16,25,21,0.48);
}

/* ============================================================
   LANDING — the descent resolves into a compact information dock.
   Opaque and above the stage, so it scrolls cleanly over Neo.
   ============================================================ */
#landing {
  position: relative;
  z-index: 3;
  scroll-margin-top: 64px;
  background:
    linear-gradient(180deg, rgba(157,168,161,0) 0%, #b6c0ba 72px),
    #b6c0ba;
  padding-top: 72px;
}
.site-footer {
  padding: 28px 24px 24px;
}
.footer-shell {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(16,25,21,0.13);
  border-radius: 28px;
  background: rgba(238,242,239,0.54);
  box-shadow: 0 24px 70px rgba(43,55,48,0.10);
  backdrop-filter: blur(18px) saturate(112%);
}
.footer-brand,
.footer-card {
  min-width: 0;
  padding: clamp(26px, 3vw, 38px);
}
.footer-card {
  border-left: 1px solid rgba(16,25,21,0.11);
}
.footer-lockup,
.footer-card-label {
  display: flex;
  align-items: center;
}
.footer-lockup { gap: 11px; }
.footer-lockup img {
  width: 52px;
  height: auto;
}
.footer-wordmark {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.footer-wordmark span { color: #07844a; }
.footer-brand h2,
.footer-card h2 {
  margin: 28px 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink);
  letter-spacing: -0.045em;
}
.footer-brand h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.04;
}
.footer-card h2 {
  margin-top: 22px;
  font-size: clamp(1.35rem, 1.8vw, 1.72rem);
  line-height: 1.08;
}
.footer-brand > p,
.footer-card > p {
  margin: 0;
  color: rgba(16,25,21,0.56);
  font-size: 0.88rem;
  line-height: 1.55;
}
.footer-card-label {
  gap: 9px;
  color: #087a42;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-card-label svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: none;
}
.footer-card > p.footer-phone {
  margin-top: 10px;
}
.footer-phone a {
  color: #087a42;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.footer-phone a:hover,
.footer-phone a:focus-visible {
  text-decoration: underline;
}
.footer-access {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px !important;
  color: rgba(16,25,21,0.72) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.footer-access i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #07844a;
  box-shadow: 0 0 0 4px rgba(7,132,74,0.10);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 4px 0;
  color: rgba(16,25,21,0.48);
  font-size: 0.72rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a {
  color: rgba(16,25,21,0.62);
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--ink); }

@media (max-width: 960px) and (min-width: 768px) {
  .footer-shell { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-card {
    border-top: 1px solid rgba(16,25,21,0.11);
  }
  .footer-card:nth-child(2) { border-left: 0; }
}

/* The scanlines belong to the descent, not to the landing. */
#fx { transition: opacity .45s ease; }
body.landed #fx { opacity: 0; pointer-events: none; }

/* Scroll hint */
.hint {
  margin-top: 2.8rem;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(16,25,21,0.42);
}
.hint-rail {
  width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
  animation: rail 2.4s ease-in-out infinite;
}
@keyframes rail { 0%,100%{transform:scaleX(.4);opacity:.4} 50%{transform:scaleX(1);opacity:1} }
.hint-rail { transform-origin: left center; }

/* ============================================================
   PHONES + REDUCED MOTION — no WebGL, no pinning, plain stack.
   ============================================================ */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  #backdrop, #stage, #fx { display: none; }

  #poster-frame {
    display: block;
    position: relative;
    height: clamp(300px, 44svh, 390px);
    margin-top: 64px;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    background:
      radial-gradient(64% 68% at 50% 38%, rgba(255,255,255,0.62), transparent 72%),
      linear-gradient(180deg, rgba(229,233,230,0.18), rgba(184,193,187,0.08));
  }
  #poster-frame::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 52px;
    background: linear-gradient(180deg, transparent, rgba(210,217,212,0.82));
  }
  #poster {
    display: block;
    position: absolute;
    z-index: 1;
    top: clamp(18px, 3.5svh, 32px);
    left: 50%;
    width: min(94vw, 390px);
    max-width: none;
    height: auto;
    margin: 0;
    transform: translateX(-50%);
    filter: drop-shadow(0 24px 38px rgba(25,38,31,0.20));
  }

  .stats { gap: 20px; flex-wrap: wrap; }
  /* There is no descent on phones, so don't promise one. */
  .hint { display: none; }
  #landing { padding-top: 0; background: #b6c0ba; }
  .site-footer { padding: 24px 18px 20px; }
  .footer-shell {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .footer-brand,
  .footer-card { padding: 26px 24px; }
  .footer-card {
    border-top: 1px solid rgba(16,25,21,0.11);
    border-left: 0;
  }
  .footer-brand h2 { max-width: 13ch; }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 20px 4px 0;
  }
  .footer-bottom nav { order: -1; }

  body {
    background:
      radial-gradient(70% 40% at 50% 0%, rgba(255,255,255,0.62), transparent 72%),
      linear-gradient(180deg, var(--room-high), #b6c0ba 62%, var(--room-low));
  }

  .chapter {
    height: auto;
    z-index: auto !important;
    scroll-margin-top: 72px;
  }
  .chapter .sticky {
    position: static;
    height: auto;
    padding: 56px 22px;
    display: flex;
    flex-direction: column;
    gap: 44px;
  }
  .panel {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    text-align: left !important;
    left: auto; right: auto; top: auto;
  }
  .align-right .card-head { flex-direction: row; }
  .ctas.center { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #neo-idle { animation: none; }
}

/* Keep the fixed brand and menu comfortably separated on compact phones. */
@media (max-width: 359px) {
  header nav {
    padding-left: 14px !important;
    padding-right: 12px !important;
  }
  header nav > a:first-child {
    gap: 5px !important;
    font-size: 0.86rem !important;
    white-space: nowrap;
  }
  header nav > a:first-child img { height: 20px !important; }
  #menuBtn {
    flex: none;
    padding: 6px !important;
  }
}