/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --red:        #C0392B;
  --navy:       #2C3E50;
  --blue:       #1A5276;
  --green:      #117A65;
  --purple:     #6C3483;
  --near-black: #1C1C1C;
  --bg:         #0A0A0A;
  --off-white:  #F5F5F5;
  --mid-gray:   #888888;
  --panel-w:    420px;
  --font-main:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--off-white);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   SCANLINES OVERLAY
   ========================================== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

/* ==========================================
   CANVAS
   ========================================== */
#canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#canvas.dragging {
  cursor: grabbing;
}

/* ==========================================
   CONTACT BUTTON
   ========================================== */
.contact-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 300;
  background: transparent;
  border: 1px solid rgba(245, 245, 245, 0.3);
  color: var(--off-white);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}

.contact-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

body.panel-open .contact-btn {
  right: calc(var(--panel-w) + 24px);
}

/* ==========================================
   NEON FRAME — 3D tube look
   Each tube uses a cross-section gradient (dark → colour → bright white core → colour → dark)
   plus layered inward-biased box-shadows for the glow spill.
   ========================================== */

@keyframes neon-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.78; }
}

/* Realistic tube warm-up: rapid flicker then settles into steady glow */
@keyframes neon-flicker-on {
  0%   { opacity: 0; }
  6%   { opacity: 0.85; }
  12%  { opacity: 0.04; }
  20%  { opacity: 0.92; }
  26%  { opacity: 0.08; }
  36%  { opacity: 1; }
  44%  { opacity: 0.6; }
  56%  { opacity: 1; }
  68%  { opacity: 0.88; }
  80%  { opacity: 1; }
  90%  { opacity: 0.94; }
  100% { opacity: 1; }
}

/* Tubes start fully off — JS adds .lit to trigger each one */
.neon-tube {
  position: fixed;
  z-index: 10;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}

/* Each tube flickers on, then breathes at its own pace */
.neon-top.lit {
  animation: neon-flicker-on 0.9s ease forwards,
             neon-breathe    5.0s ease-in-out 0.9s infinite;
}
.neon-right.lit {
  animation: neon-flicker-on 0.7s ease forwards,
             neon-breathe    4.3s ease-in-out 0.7s infinite;
}
.neon-bottom.lit {
  animation: neon-flicker-on 1.0s ease forwards,
             neon-breathe    5.9s ease-in-out 1.0s infinite;
}
.neon-left.lit {
  animation: neon-flicker-on 0.8s ease forwards,
             neon-breathe    4.8s ease-in-out 0.8s infinite;
}

/* Toggle off — kills animation and hides any lit tube */
.neon-frame.off .neon-tube {
  opacity: 0 !important;
  animation: none;
}

/* Glow-only mode — collapses the tube to a hairline so only the box-shadow halo shows.
   To restore physical tubes: remove "glow-only" from #neon-frame in index.html */
.neon-frame.glow-only .neon-top,
.neon-frame.glow-only .neon-bottom {
  height: 1px !important;
  background: transparent !important;
}
.neon-frame.glow-only .neon-left,
.neon-frame.glow-only .neon-right {
  width: 1px !important;
  background: transparent !important;
}

/* ---- TOP ---- */
.neon-top {
  --nr: 17; --ng: 122; --nb: 101;
  --ncr: 190; --ncg: 255; --ncb: 228;
  top: -10px; left: 40%; right: 40%;
  height: 16px;
  background: linear-gradient(to bottom,
    rgba(var(--nr), var(--ng), var(--nb), 0.0)  0%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 18%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    44%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    50%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    56%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 82%,
    rgba(var(--nr), var(--ng), var(--nb), 0.0) 100%
  );
  box-shadow:
    0   4px   8px   3px rgba(var(--nr), var(--ng), var(--nb), 0.95),
    0   8px  24px   8px rgba(var(--nr), var(--ng), var(--nb), 0.70),
    0  16px  60px  14px rgba(var(--nr), var(--ng), var(--nb), 0.45),
    0  28px 120px  20px rgba(var(--nr), var(--ng), var(--nb), 0.20);
}

/* ---- RIGHT ---- */
.neon-right {
  --nr: 108; --ng: 52; --nb: 131;
  --ncr: 232; --ncg: 195; --ncb: 255;
  top: 40%; right: -10px; bottom: 40%;
  width: 16px;
  background: linear-gradient(to left,
    rgba(var(--nr), var(--ng), var(--nb), 0.0)  0%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 18%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    44%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    50%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    56%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 82%,
    rgba(var(--nr), var(--ng), var(--nb), 0.0) 100%
  );
  box-shadow:
    -4px  0   8px   3px rgba(var(--nr), var(--ng), var(--nb), 0.95),
    -8px  0  24px   8px rgba(var(--nr), var(--ng), var(--nb), 0.70),
    -16px 0  60px  14px rgba(var(--nr), var(--ng), var(--nb), 0.45),
    -28px 0 120px  20px rgba(var(--nr), var(--ng), var(--nb), 0.20);
}

/* ---- BOTTOM ---- */
.neon-bottom {
  --nr: 26; --ng: 82; --nb: 118;
  --ncr: 185; --ncg: 220; --ncb: 255;
  bottom: -10px; left: 40%; right: 40%;
  height: 16px;
  background: linear-gradient(to top,
    rgba(var(--nr), var(--ng), var(--nb), 0.0)  0%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 18%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    44%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    50%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    56%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 82%,
    rgba(var(--nr), var(--ng), var(--nb), 0.0) 100%
  );
  box-shadow:
    0  -4px   8px   3px rgba(var(--nr), var(--ng), var(--nb), 0.95),
    0  -8px  24px   8px rgba(var(--nr), var(--ng), var(--nb), 0.70),
    0 -16px  60px  14px rgba(var(--nr), var(--ng), var(--nb), 0.45),
    0 -28px 120px  20px rgba(var(--nr), var(--ng), var(--nb), 0.20);
}

/* ---- LEFT ---- */
.neon-left {
  --nr: 237; --ng: 208; --nb: 48;
  --ncr: 255; --ncg: 252; --ncb: 180;
  top: 40%; left: -10px; bottom: 40%;
  width: 16px;
  background: linear-gradient(to right,
    rgba(var(--nr), var(--ng), var(--nb), 0.0)  0%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 18%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    44%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    50%,
    rgb(var(--ncr), var(--ncg), var(--ncb))    56%,
    rgba(var(--nr), var(--ng), var(--nb), 0.9) 82%,
    rgba(var(--nr), var(--ng), var(--nb), 0.0) 100%
  );
  box-shadow:
    4px  0   8px   3px rgba(var(--nr), var(--ng), var(--nb), 0.95),
    8px  0  24px   8px rgba(var(--nr), var(--ng), var(--nb), 0.70),
    16px 0  60px  14px rgba(var(--nr), var(--ng), var(--nb), 0.45),
    28px 0 120px  20px rgba(var(--nr), var(--ng), var(--nb), 0.20);
}

/* ==========================================
   NEON TOGGLE
   ========================================== */
.neon-toggle {
  position: fixed;
  bottom: 28px;
  left: 24px;
  z-index: 300;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(245, 245, 245, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.neon-toggle:hover {
  border-color: rgba(245, 245, 245, 0.45);
}

.neon-toggle-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #117A65;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  box-shadow:
    0 0 4px  #117A65,
    0 0 10px #117A65,
    0 0 18px rgba(17, 122, 101, 0.7);
}

.neon-toggle.off .neon-toggle-dot {
  background: rgba(245, 245, 245, 0.15);
  box-shadow: none;
}

/* ==========================================
   INTERACTION HINT — always visible after intro
   ========================================== */
.hint {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow:
    -2px 0   rgba(255, 50,  50,  0.55),
     2px 0   rgba(50,  255, 80,  0.45),
     0   1px rgba(50,  80,  255, 0.55);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1s ease;
}

.hint.visible {
  opacity: 1;
}

/* .hint.hidden no longer used — hint stays on permanently */

/* ==========================================
   SIDE PANEL
   ========================================== */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--panel-w);
  height: 100%;
  background: var(--off-white);
  color: #1a1a1a;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}

.panel.open {
  transform: translateX(0);
}

/* Colour bar at top */
.panel-color-bar {
  flex-shrink: 0;
  height: 6px;
  width: 100%;
  background: var(--red);
  transition: background 0.2s ease;
}

/* Scrollable content area */
.panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 48px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.panel-scroll::-webkit-scrollbar {
  width: 4px;
}
.panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.panel-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

/* Panel header row */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-face-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.panel-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #aaa;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}

.panel-close:hover {
  color: #1a1a1a;
}

/* Face tagline (always the face-level hook) */
.panel-tagline {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
  margin-bottom: 22px;
}

/* Sub-panel title (per-square heading) */
.panel-sub-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 10px;
  padding-top: 4px;
  border-top: 1px solid #e8e8e8;
}

/* Body copy */
.panel-body {
  font-size: 15px;
  line-height: 1.75;
  color: #3a3a3a;
}

.panel-body p {
  margin-bottom: 14px;
}

.panel-body p:last-child {
  margin-bottom: 0;
}

/* Section label */
.panel-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 24px 0 10px;
  display: block;
}

/* Vimeo embed */
.panel-embed {
  margin-top: 20px;
}

.panel-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Client grid */
.clients-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #3a3a3a;
  margin-bottom: 20px;
}

.clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.client-item {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  padding: 11px 12px;
  border: 1px solid #e0e0e0;
  line-height: 1.3;
}

/* Contact info */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-row {}

.contact-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 5px;
}

.contact-value {
  font-size: 15px;
  color: #1a1a1a;
  line-height: 1.6;
}

.contact-value a {
  color: var(--red);
  text-decoration: none;
}

.contact-value a:hover {
  text-decoration: underline;
}

.contact-phone-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.contact-phone-row:last-child {
  margin-bottom: 0;
}

.phone-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: #1a1a1a;
}

.phone-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid-gray);
}

.address-value {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.7;
}

.contact-meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.meta-item {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid-gray);
  display: block;
  margin-bottom: 5px;
}

/* CTA button */
.panel-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 22px;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.panel-cta:hover {
  opacity: 0.82;
}

/* ==========================================
   LOGO CORNER
   Z-order inside .logo-corner:
     z-index 1  →  lab_logo_bg.png  (letterform body, behind spheres)
     z-index 2  →  CSS spheres
     z-index 3  →  lab_logo_fg.png  (arch cap, in front of spheres)

   SPHERE POSITIONS — edit these custom properties to reposition:
     Values are the sphere's centre point in pixels,
     relative to the top-left of the logo image.
     (left = centre_x − radius, top = centre_y − radius)
   ========================================== */
.logo-corner {
  position: fixed;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  z-index: 150;
  overflow: visible;
  pointer-events: none;

  --y-cx: 125;  --y-cy: 35;
  --c-cx: 125;  --c-cy: 20;
  --m-cx: 135;  --m-cy: 10;

  --y-d: 24px;
  --c-d: 15px;
  --m-d: 8px;

  filter:
    drop-shadow(-2px 0   0 rgba(255, 50,  50,  0.55))
    drop-shadow( 2px 0   0 rgba(50,  255, 80,  0.45))
    drop-shadow( 0   1px 0 rgba(50,  80,  255, 0.55));
}

/* Both logo PNGs stack on the same footprint */
.logo-layer {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.logo-bg {
  position: relative;   /* stays in flow → sets container height */
  z-index: 1;
}
.logo-fg {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;           /* in front of spheres */
}
.logo-corner.show .logo-layer { opacity: 1; }

/* ── 3D CSS Sphere base ── */
.logo-sphere {
  position: absolute;
  border-radius: 50%;
  z-index: 2;           /* between bg (1) and fg (3) */
  /* Hidden by default — animation-fill-mode:both alone can flash on load */
  opacity: 0;
  transform: translateY(-260px);
  animation-fill-mode: both;
}

/* ── Yellow sphere ── */
.sphere-yellow {
  width:  var(--y-d);
  height: var(--y-d);
  /* centre at (--y-cx, --y-cy); offset by radius = d/2 */
  left: calc(var(--y-cx) * 1px - var(--y-d) / 2);
  top:  calc(var(--y-cy) * 1px - var(--y-d) / 2);
  background: radial-gradient(circle at 34% 30%,
    rgba(255, 255, 210, 0.98)  0%,
    rgba(255, 245,  80, 0.95) 10%,
    #EDD030                   24%,
    #C8A000                   52%,
    #806400                   78%,
    #3D2E00                  100%
  );
  box-shadow:
     2px  4px 10px rgba(0, 0, 0, 0.65),
    inset  2px  2px  4px rgba(255, 255, 200, 0.55),
    inset -2px -2px  5px rgba(0, 0, 0, 0.22);
  filter: drop-shadow(0 0 5px rgba(237, 208, 48, 0.45));
  animation: sphere-drop 1.4s linear 1.9s both;  /* yellow — with left neon */
}

/* ── Cyan sphere ── */
.sphere-cyan {
  width:  var(--c-d);
  height: var(--c-d);
  left: calc(var(--c-cx) * 1px - var(--c-d) / 2);
  top:  calc(var(--c-cy) * 1px - var(--c-d) / 2);
  background: radial-gradient(circle at 34% 30%,
    rgba(215, 255, 255, 0.98)  0%,
    rgba(120, 228, 248, 0.95) 10%,
    #48BFD5                   25%,
    #2A95AE                   52%,
    #0D5C6E                   78%,
    #042830                  100%
  );
  box-shadow:
     2px  3px  8px rgba(0, 0, 0, 0.60),
    inset  2px  2px  3px rgba(200, 255, 255, 0.55),
    inset -1px -1px  4px rgba(0, 0, 0, 0.20);
  filter: drop-shadow(0 0 4px rgba(72, 191, 213, 0.45));
  animation: sphere-drop 1.2s linear 1.3s both;  /* cyan — with top neon */
}

/* ── Magenta sphere ── */
.sphere-magenta {
  width:  var(--m-d);
  height: var(--m-d);
  left: calc(var(--m-cx) * 1px - var(--m-d) / 2);
  top:  calc(var(--m-cy) * 1px - var(--m-d) / 2);
  background: radial-gradient(circle at 34% 30%,
    rgba(255, 210, 235, 0.98)  0%,
    rgba(248, 100, 175, 0.95) 10%,
    #E8247C                   26%,
    #B50055                   53%,
    #6C0032                   79%,
    #340018                  100%
  );
  box-shadow:
     1px  2px  6px rgba(0, 0, 0, 0.60),
    inset  1px  1px  2px rgba(255, 210, 232, 0.55),
    inset -1px -1px  3px rgba(0, 0, 0, 0.22);
  filter: drop-shadow(0 0 3px rgba(232, 36, 124, 0.50));
  animation: sphere-drop 1.0s linear 0.9s both;  /* magenta — with right neon */
}

/* ── Drop + bounce keyframe ── */
@keyframes sphere-drop {
  0% {
    transform: translateY(-260px);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  6%  { opacity: 1; }
  55% { transform: translateY(0);     animation-timing-function: ease-out; }
  64% { transform: translateY(-26px); animation-timing-function: ease-in;  }
  74% { transform: translateY(0);     animation-timing-function: ease-out; }
  80% { transform: translateY(-10px); animation-timing-function: ease-in;  }
  87% { transform: translateY(0);     animation-timing-function: ease-out; }
  91% { transform: translateY(-4px);  animation-timing-function: ease-in;  }
  95% { transform: translateY(0); }
  98% { transform: translateY(-1px); }
 100% { transform: translateY(0); opacity: 1; }  /* stay visible after landing */
}

@keyframes sphere-glitch {
  0%   { transform: translateX(0)     scale(1);    opacity: 1;   filter: none; }
  8%   { transform: translateX(-10px) scale(1.05); opacity: 0.5; filter: brightness(2) hue-rotate(60deg); }
  16%  { transform: translateX(8px)   scale(0.95); opacity: 1;   filter: none; }
  24%  { transform: translateX(-6px)  scale(1.08); opacity: 0.1; filter: brightness(3); }
  33%  { transform: translateX(12px)  scale(0.92); opacity: 0.9; filter: hue-rotate(-90deg); }
  41%  { transform: translateX(-4px)  scale(1);    opacity: 0;   filter: none; }
  50%  { transform: translateX(9px)   scale(1.06); opacity: 0.7; filter: brightness(2) hue-rotate(120deg); }
  58%  { transform: translateX(-7px)  scale(0.9);  opacity: 0;   filter: none; }
  66%  { transform: translateX(5px)   scale(1.1);  opacity: 0.5; filter: brightness(4); }
  75%  { transform: translateX(-3px)  scale(0.8);  opacity: 0;   filter: none; }
  83%  { transform: translateX(6px)   scale(0.6);  opacity: 0.3; filter: hue-rotate(90deg); }
  91%  { transform: translateX(-2px)  scale(0.3);  opacity: 0.1; filter: none; }
  100% { transform: translateX(0)     scale(0);    opacity: 0;   filter: none; }
}

.logo-sphere.popping {
  animation: sphere-glitch 0.52s linear forwards !important;
}
.sphere-cyan.popping    { animation-delay: 0.04s !important; }
.sphere-yellow.popping  { animation-delay: 0.09s !important; }

/* ==========================================
   RESPONSIVE — MOBILE (≤ 600px)
   ========================================== */
@media (max-width: 600px) {
  :root {
    --panel-w: 100vw;
  }

  .panel {
    width: 100%;
    height: 80dvh;
    top: auto;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  }

  .panel.open {
    transform: translateY(0);
  }

  body.panel-open .contact-btn {
    right: 24px;
  }

  .contact-btn {
    top: 16px;
    right: 16px;
    padding: 9px 18px;
    font-size: 10px;
  }

  .logo-corner {
    width: 190px;
    top: 56px;
  }

  .hint {
    bottom: 96px;
    font-size: 20px;
  }

  .neon-toggle {
    bottom: 20px;
    left: 16px;
  }

  .panel-scroll {
    padding: 22px 20px 40px;
  }

  .panel-tagline {
    font-size: 18px;
  }

  .clients-grid {
    grid-template-columns: 1fr 1fr;
  }
}