/* George Youhana portfolio — shared design tokens, animations and interactive states.
   Applies to index.html, all case-study pages, and all-projects.html. */

:root {
  --bg: #0e1116;
  --bg-alt: #131720;
  --surface: #171c26;
  --surface-2: #1c222e;
  --border: #2a3140;
  --border-soft: #20262f;
  --text: #eef1f4;
  --text-soft: #a7afba;
  --text-mute: #6b7382;
  --accent: #4DD8C4;
  --accent-2: #E7A465;
  --accent-3: #8FA8E8;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --head: 'Space Grotesk', 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
::selection { background: var(--accent); color: var(--bg); }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes chatPop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes chatPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 0 rgba(77,216,196,0.35); }
  50% { box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 8px rgba(77,216,196,0); }
}

/* Nav links */
.nav-link { transition: color .2s; }
.nav-link:hover { color: var(--text); }

/* Buttons */
.btn-primary { transition: transform .25s, filter .25s; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }

.btn-outline { transition: transform .25s, border-color .25s; }
.btn-outline:hover { transform: translateY(-2px); border-color: var(--accent); }

.btn-outline--accent2:hover { border-color: var(--accent-2); }

/* Core expertise tiles */
.expertise-card { transition: background .3s; }
.expertise-card:hover { background: var(--surface); }

/* Case study cards (homepage grid) */
.case-card { transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s; }
.case-card:hover { transform: translateY(-6px); background: var(--surface-2); }

/* Other-role experience rows */
.role-row { transition: padding-left .25s; }
.role-row:hover { padding-left: 8px; }

/* Enterprise / research project tiles */
.work-card { transition: background .3s, transform .3s; }
.work-card:hover { background: var(--surface-2); transform: translateY(-3px); }

/* Skill tags */
.skill-tag { transition: border-color .2s, color .2s; }
.skill-tag:hover { border-color: var(--accent); color: var(--text); }

/* Contact rows */
.contact-row { transition: padding-left .25s, color .25s; }
.contact-row:hover { padding-left: 8px; color: var(--accent); }

/* Chat widget */
.chat-close { transition: color .2s; }
.chat-close:hover { color: var(--text); }
.chat-send { transition: filter .2s, transform .15s; }
.chat-send:hover { filter: brightness(1.1); }
.chat-send:active { transform: scale(.96); }
.chat-toggle { transition: transform .25s; }
.chat-toggle:hover { transform: translateY(-3px); }

.chat-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 216, 196, 0.12);
  color: var(--accent);
}
.chat-avatar svg { width: 17px; height: 17px; }

.chat-messages { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }

.chat-bubble {
  max-width: 82%;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 12px;
  white-space: pre-wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  animation: chatBubbleIn .22s cubic-bezier(.16,1,.3,1) both;
}
.chat-bubble--user { background: var(--accent); color: var(--bg); border-bottom-right-radius: 3px; }
.chat-bubble--assistant { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 3px; }
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 3px 2px; }
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
  animation: chatTypingBounce 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-suggestion {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 11px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.chat-suggestion:hover { border-color: var(--accent); color: var(--text); }
.chat-suggestions.is-hidden { display: none !important; }

/* Archive project cards (all-projects.html) */
.archive-card { transition: transform .3s, border-color .3s; }
.archive-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.archive-link { transition: color .2s; }
.archive-link:hover { color: var(--accent); }

/* Case-study page footer nav */
.case-nav-link { transition: color .2s; }
.case-nav-link:hover { color: var(--accent); }

/* Reveal-on-scroll (JS toggles opacity/transform via [data-reveal]) */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Mobile nav toggle (hamburger) — hidden on desktop, shown under 860px */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { width: 18px; height: 18px; display: block; }

/* Lower-emphasis hero CTA text links (Explore Projects / Contact Me) */
.text-link {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.text-link:hover { text-decoration-color: currentColor; }

/* Featured case-study grid: 2 columns, no horizontal overflow */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
}
/* Odd number of cards: stretch a lone trailing card across both columns
   instead of leaving an empty cell beside it. */
.case-grid > .case-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Diagram icon button: small representative icon on a summary card/tile;
   clicking it opens the full architecture diagram in a modal. */
.diagram-icon-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  padding: 0;
}
.diagram-icon-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.diagram-icon-btn svg { width: 26px; height: 26px; display: block; }
.diagram-icon-btn__label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-mute);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.diagram-icon-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }

/* Card stretched-link pattern: the visible text link fills the whole card via
   ::after (containing block = the card, which is position:relative — the
   link itself is NOT positioned, so its ::after stretches to the card, not
   just the link's own text box). The icon button sits at z-index 2, above
   the stretched ::after's z-index 1, so it stays independently clickable. */
.case-card, .work-card { position: relative; }
.case-card__link, .work-card__link { display: inline-block; }
.case-card__link::after, .work-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Diagram modal (click-to-expand architecture view) */
.diagram-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,10,14,0.75);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.diagram-modal.is-open { display: flex; }
.diagram-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 30px 24px 24px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  transition: max-width .25s ease, max-height .25s ease;
}
.diagram-modal.is-enlarged .diagram-modal__panel {
  max-width: min(96vw, 1200px);
  max-height: 94vh;
}
.diagram-modal__close, .diagram-modal__zoom {
  position: absolute;
  top: 8px;
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  padding: 6px;
  transition: color .2s;
}
.diagram-modal__close { right: 12px; font-family: var(--mono); font-size: 22px; line-height: 1; }
.diagram-modal__zoom { right: 44px; }
.diagram-modal__zoom svg { width: 18px; height: 18px; display: block; }
.diagram-modal__close:hover, .diagram-modal__zoom:hover { color: var(--text); }
.diagram-modal__title {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  padding-right: 56px;
}
.diagram-modal__img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.diagram-modal.is-enlarged .diagram-modal__img { cursor: zoom-out; }

/* Enterprise project tiles: responsive, don't force-stretch shorter cards */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  align-items: start;
}

/* About: compact process visual (replaces plain arrow-separated text line) */
.process-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.process-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 13px 6px 8px;
  background: var(--surface);
}
.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.process-arrow {
  color: var(--border);
  font-family: var(--mono);
  padding: 0 4px;
}

/* Reconstructed-diagram caption */
.diagram-caption {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  font-style: italic;
  margin-top: 6px;
}

/* ============================================================
   Motion / "catchy" layer — scroll progress bar, neural-network
   hero background, typewriter eyebrow, staggered card reveals,
   CTA shimmer. All continuous/looping motion is gated behind
   prefers-reduced-motion below.
   ============================================================ */

/* Scroll progress bar */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  z-index: 300;
  transition: width .1s linear;
}

/* Neural-network hero background canvas */
.hero-section { position: relative; overflow: hidden; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.hero-content { position: relative; z-index: 1; }

/* Typewriter eyebrow */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  margin-left: 2px;
  background: var(--accent);
  animation: caretBlink 1s step-end infinite;
}
.typewriter-cursor.is-done { animation-duration: 1s; }

/* Staggered entrance for grid children: each item sets --i (its index) via
   inline style; the section's own [data-reveal].is-visible toggle (already
   in site.js) drives the cascade — no extra JS needed. */
.stagger-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-visible .stagger-item { opacity: 1; transform: none; }

/* Primary CTA shimmer sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: shimmerSweep 3.4s ease-in-out infinite;
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes shimmerSweep {
  0% { left: -60%; }
  45%, 100% { left: 130%; }
}

/* Respect OS-level reduced-motion preference: kill looping/decorative motion,
   keep one-shot state transitions (reveal, hover) which are brief and useful. */
@media (prefers-reduced-motion: reduce) {
  /* !important needed: chatPulse/heroIn are set via inline style="animation:…"
     in the HTML, which otherwise outranks a plain class selector here. */
  .chat-toggle, [style*="heroIn"] { animation: none !important; }
  .btn-primary::before { display: none; }
  .typewriter-cursor { animation: none; }
  .hero-canvas { display: none; }
  .status-dot { animation: none; }
  .tilt-card { transition: none; }
  .nav-indicator { transition: none; }
  #cursor-glow { display: none; }
}

/* ============================================================
   Motion layer, round 2 — boot sequence, status pill, circuit
   dividers, scroll-spy nav indicator, tilt/glow cards, cursor
   glow trail, command palette, text-scramble headings. JS-gated
   behind prefers-reduced-motion for anything purely decorative;
   navigational aids (scroll-spy, command palette) stay available.
   ============================================================ */

/* Terminal boot sequence (home page only, once per session) */
#boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease;
}
#boot-overlay.is-done { opacity: 0; pointer-events: none; }
.boot-lines { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.boot-line {
  opacity: 0;
  transform: translateY(4px);
  margin-bottom: 6px;
  transition: opacity .3s, transform .3s;
}
.boot-line.is-shown { opacity: 1; transform: none; }

/* Hero status pill */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5EE6A8;
  flex-shrink: 0;
  animation: statusPulse 2.2s ease-out infinite;
}
@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(94,230,168,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(94,230,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(94,230,168,0); }
}

/* Hero canvas parallax (JS shifts transform on mousemove) */
.hero-canvas { transition: transform .3s ease-out; }

/* Circuit-trace section dividers (inserted by site.js before each
   [data-reveal] section; draws itself via stroke-dashoffset when
   scrolled into view) */
.circuit-divider { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,4vw,64px); }
.circuit-divider svg { width: 100%; height: 14px; display: block; overflow: visible; }
.circuit-divider path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  opacity: 0.45;
  transition: stroke-dashoffset 1.2s ease-out;
}
.circuit-divider.is-drawn path { stroke-dashoffset: 0; }

/* Scroll-spy nav indicator: JS slides this under the active nav link */
.site-nav__links { position: relative; }
.nav-indicator {
  position: absolute;
  bottom: -7px;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0;
  transition: left .3s ease, width .3s ease, opacity .2s;
  pointer-events: none;
}
.nav-link.is-active { color: var(--text); }

/* Tilt + cursor-glow cards (case studies, work grid) */
.tilt-card { transition: transform .15s ease-out; will-change: transform; }
.case-card::before, .work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(77,216,196,0.14), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.case-card:hover::before, .work-card:hover::before { opacity: 1; }

/* Custom cursor glow trail */
#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(circle, rgba(77,216,196,0.16), transparent 70%);
  filter: blur(4px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s;
}
#cursor-glow.is-active { opacity: 1; }

/* Command palette (press "/" — built entirely in JS, no per-page markup) */
.cmdk-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(8,10,14,0.75);
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 24px 24px;
}
.cmdk-backdrop.is-open { display: flex; }
.cmdk-panel {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: chatPop .2s cubic-bezier(.16,1,.3,1) both;
}
.cmdk-input {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 16px 18px;
  outline: none;
}
.cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 340px; overflow-y: auto; }
.cmdk-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-soft);
}
.cmdk-item.is-selected { background: var(--surface-2); color: var(--text); }
.cmdk-empty { padding: 16px; font-size: 13px; color: var(--text-mute); }
.cmdk-hint-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
}

/* ============================================================
   Responsive layout — phones (iOS/Android) and tablets.
   Most section grids are laid out via inline grid-template-columns;
   the ones that need to reflow below desktop widths have that one
   property moved into a class here so a media query can own it.
   ============================================================ */

/* Reusable grids (class supplies grid-template-columns; inline
   style on the element keeps display/gap/background/etc.) */
.stats-grid { grid-template-columns: repeat(6, 1fr); }
.stats-grid .stat-item { border-right: 1px solid var(--border-soft); }
.stats-grid .stat-item:last-child { border-right: none; }

.split-grid { grid-template-columns: 0.9fr 1.1fr; }

.expertise-grid { grid-template-columns: repeat(5, 1fr); }
.research-grid { grid-template-columns: repeat(6, 1fr); }
.skills-grid { grid-template-columns: repeat(3, 1fr); }

.meta-row { grid-template-columns: 140px 1fr; }
.results-grid-3 { grid-template-columns: repeat(3, 1fr); }
.results-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Simple case-study/archive nav (no hamburger — only 2 items):
   let it wrap rather than overflow on very narrow phones. */
nav:not(.site-nav) { flex-wrap: wrap; row-gap: 8px; }

/* Case-study footer prev/next nav: stack on narrow phones instead
   of squeezing two long links onto one row. */
@media (max-width: 640px) {
  .case-footer-nav { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* Tablet (~900px and down): the widest fixed grids get real breathing room */
@media (max-width: 900px) {
  .hero-section { grid-template-columns: 1fr !important; }
  .hero-photo { order: -1; margin-bottom: 8px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid .stat-item { border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding-bottom: 16px !important; }
  .stats-grid .stat-item:nth-child(3n) { border-right: none; }
  .stats-grid .stat-item:nth-child(n+4) { border-bottom: none; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .research-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small tablet / large phone */
@media (max-width: 800px) {
  .split-grid { grid-template-columns: 1fr; gap: 24px !important; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .role-meta { flex-wrap: wrap; row-gap: 6px; }
}

/* Phones */
@media (max-width: 640px) {
  .results-grid-3, .results-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .meta-row { grid-template-columns: 1fr; gap: 4px !important; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid .stat-item:nth-child(3n) { border-right: 1px solid var(--border-soft); }
  .stats-grid .stat-item:nth-child(2n) { border-right: none; }
  .stats-grid .stat-item:nth-child(n+4) { border-bottom: 1px solid var(--border-soft); }
  .stats-grid .stat-item:nth-child(n+5) { border-bottom: none; }
  .research-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .expertise-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .diagram-modal__panel { padding: 26px 16px 18px; }
}
@media (max-width: 380px) {
  .results-grid-3, .results-grid-4 { grid-template-columns: 1fr; }
}

/* Hero CTA cluster: tighten the vertical rhythm and button size on
   small phones so tags/status/buttons don't read as one crowded block */
@media (max-width: 560px) {
  .hero-tags-row { margin-bottom: 14px !important; gap: 6px !important; }
  .hero-status-row { margin-bottom: 20px !important; }
  .hero-cta-row { gap: 10px 16px !important; }
  .hero-cta-row .btn-primary, .hero-cta-row .btn-outline {
    padding: 10px 16px !important;
    font-size: 12.5px !important;
  }
}

/* Floating chat widget: smaller footprint and tighter inset on phones
   so it reads clearly as a floating control instead of overlapping
   whatever section happens to be scrolled underneath it. */
@media (max-width: 480px) {
  .chat-widget { bottom: 14px !important; right: 14px !important; }
  .chat-widget .chat-toggle { padding: 10px 16px !important; font-size: 12px !important; }
}

/* Chat panel as a mobile bottom sheet: full-width, docked to the
   bottom edge, taller so a conversation is actually usable — instead
   of a small floating card competing with a narrow viewport. Escapes
   the widget's flex layout via its own fixed position so the toggle
   button (still shown when the panel is closed) is unaffected. */
@media (max-width: 640px) {
  .chat-panel {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: min(75vh, 620px) !important;
    border-radius: 16px !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* Mobile nav: collapse the link list into a slide-down panel under
   a hamburger toggle instead of wrapping 8 links across the bar. */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav__links {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    z-index: 60;
  }
  .site-nav__links.is-open { max-height: 420px; overflow-y: auto; }
  .site-nav__links .nav-link, .site-nav__links .btn-primary {
    width: 100%;
    box-sizing: border-box;
    padding: 14px clamp(20px,4vw,64px) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0 !important;
    text-align: left;
  }
  .nav-indicator { display: none; }
}