/* ===================================================
   BRUCE WANG - CYBERSECURITY PORTFOLIO
   Art direction: dark technical, electric-blue accent,
   monospaced details, precise grid layout
   =================================================== */

/* ─── DESIGN TOKENS ─────────────────────────────── */
:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    7rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.25rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem; --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Fonts */
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Transitions */
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── DARK THEME (default) ──────────────────────── */
:root, [data-theme="dark"] {
  --color-bg:              #0d1117;
  --color-surface:         #161b22;
  --color-surface-2:       #1c2128;
  --color-surface-offset:  #21262d;
  --color-border:          #30363d;
  --color-divider:         #21262d;

  --color-text:            #e6edf3;
  --color-text-muted:      #8b949e;
  --color-text-faint:      #7d8590;
  --color-text-inverse:    #0d1117;

  --color-primary:         #58a6ff;
  --color-primary-hover:   #79b8ff;
  --color-primary-active:  #388bfd;
  --color-primary-dim:     rgba(88, 166, 255, 0.15);
  --color-primary-glow:    rgba(88, 166, 255, 0.25);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

/* ─── LIGHT THEME ──────────────────────────────── */
[data-theme="light"] {
  --color-bg:              #f6f8fa;
  --color-surface:         #ffffff;
  --color-surface-2:       #f0f3f6;
  --color-surface-offset:  #e8ecf0;
  --color-border:          #d0d7de;
  --color-divider:         #e8ecf0;

  --color-text:            #1f2328;
  --color-text-muted:      #57606a;
  --color-text-faint:      #656d76;
  --color-text-inverse:    #f6f8fa;

  --color-primary:         #0969da;
  --color-primary-hover:   #0860ca;
  --color-primary-active:  #0550ae;
  --color-primary-dim:     rgba(9, 105, 218, 0.1);
  --color-primary-glow:    rgba(9, 105, 218, 0.2);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #f6f8fa; --color-surface: #ffffff;
    --color-surface-2: #f0f3f6; --color-surface-offset: #e8ecf0;
    --color-border: #d0d7de; --color-divider: #e8ecf0;
    --color-text: #1f2328; --color-text-muted: #57606a;
    --color-text-faint: #656d76; --color-text-inverse: #f6f8fa;
    --color-primary: #0969da; --color-primary-hover: #0860ca;
    --color-primary-active: #0550ae;
    --color-primary-dim: rgba(9,105,218,0.1);
    --color-primary-glow: rgba(9,105,218,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color 0.25s, color 0.25s;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

body.mobile-nav-open {
  width: 100%;
  overflow: hidden;
}

html.mobile-nav-open .site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
}

/*
 * Mobile Safari can rubber-band the root document even when the root declares
 * overscroll-behavior:none. Keep the root fixed and make the body the actual
 * touch scroller so its boundaries can be contained without moving the page.
 */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-16);
  }
  body.mobile-nav-open {
    position: static;
    height: 100%;
    overflow: hidden;
  }
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.15; }
p, li { text-wrap: pretty; max-width: none; }

::selection {
  background: var(--color-primary-dim);
  color: var(--color-text);
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; background: none; border: none; }

/* ─── UTILITY ────────────────────────────────────── */
.container {
  width: min(var(--content-wide), 100% - var(--space-8));
  margin-inline: auto;
}
.mono-text { font-family: var(--font-mono); font-size: var(--text-xs); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ─── HEADER ─────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition), background var(--transition);
}
.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-6);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}
.logo:hover { text-decoration: none; opacity: 0.85; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  letter-spacing: 0.03em;
}
.nav-link:hover, .nav-link.active {
  color: var(--color-text);
  background: var(--color-surface-offset);
  text-decoration: none;
}
.nav-link.active { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--transition), background var(--transition);
}
.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--transition), background var(--transition);
}
.nav-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

/* ─── MOBILE NAV ─────────────────────────────────── */
.mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 64px 0 0 0;
  height: calc(100dvh - 64px);
  max-height: calc(100dvh - 64px);
  z-index: 99;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  gap: var(--space-2);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ─── CUSTOM MOBILE PULL-TO-REFRESH ───────────────── */
.pull-refresh {
  --pull-distance: 0px;
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-2));
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, calc(-100% - var(--space-4) + var(--pull-distance)));
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pull-refresh.is-visible { opacity: 1; }
.pull-refresh.is-ready {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.pull-refresh-icon {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  transform-origin: center;
}
.pull-refresh-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.pull-refresh.is-refreshing .pull-refresh-icon {
  animation: pull-refresh-spin 0.7s linear infinite;
}
@keyframes pull-refresh-spin {
  to { transform: rotate(360deg); }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pull-refresh { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pull-refresh { transition: none; }
  .pull-refresh.is-refreshing .pull-refresh-icon { animation-duration: 1.2s; }
}

.mobile-nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.mobile-nav-link:hover {
  color: var(--color-primary);
  background: var(--color-surface-offset);
  text-decoration: none;
}

/* ─── SECTIONS ───────────────────────────────────── */
.section {
  padding-block: clamp(var(--space-10), 6vw, var(--space-20));
}
/* One separator for every adjacent top-level section. Individual section
   types keep their own backgrounds, while the break itself stays consistent. */
main > section + section {
  border-top: 1px solid var(--color-border);
}
main > #founder + .cta-strip {
  border-top: none;
  padding-top: clamp(var(--space-8), 4vw, var(--space-12));
}
main > #founder {
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
main > .page-hero--media + .media-section {
  border-top: none;
}
.section-label {
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  display: block;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: clamp(var(--space-6), 3vw, var(--space-12));
  letter-spacing: -0.02em;
}
.section-cta {
  margin-top: var(--space-8);
  text-align: center;
}

/* ─── HERO ───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(520px, 80vh, 800px);
  display: flex;
  align-items: center;
  padding-top: clamp(var(--space-12), 6vw, var(--space-24));
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-32));
  overflow: hidden;
}
.hero .container { position: relative; z-index: 2; }

/* ── Hero two-column layout with headshot ─────── */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-16);
}
.hero-text {
  min-width: 0;
}
.hero-headshot-wrap {
  flex-shrink: 0;
}
.hero-headshot {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--color-border);
  box-shadow: 0 0 0 6px var(--color-surface), 0 0 0 7px var(--color-border), var(--shadow-lg);
  display: block;
}

/* Contact card headshot */
.contact-headshot {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--color-border);
  display: block;
}

@media (max-width: 768px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-headshot-wrap {
    display: flex;
    justify-content: center;
    order: -1;
  }
  .hero-headshot {
    width: 160px;
    height: 160px;
  }
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.15;
  mask-image: radial-gradient(ellipse 90% 80% at 20% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 20% 50%, black 0%, transparent 70%);
}

.hero-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 8px #3fb950;
  animation: pulse-dot 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.hero-label .mono-text {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.hero-title .accent { color: var(--color-primary); }
.hero-title .hero-subtitle {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.5;
}

.hero-subtitle {
  color: var(--color-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.hero-description {
  max-width: 56ch;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.hero--company .hero-cta .btn {
  min-height: 44px;
  justify-content: center;
  white-space: nowrap;
}
.hero--company .hero-cta .btn-ghost {
  color: var(--color-text);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero--company .hero-cta .btn-ghost:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.social-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color var(--transition);
}
.social-link:hover { color: var(--color-primary); text-decoration: none; }

/* ─── BUTTONS ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: var(--color-bg);
  box-shadow: 0 0 16px var(--color-primary-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  background: var(--color-surface);
  text-decoration: none;
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary-dim);
  text-decoration: none;
}
.btn-large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-sm);
}

/* ─── SKILLS GRID ────────────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.skill-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
/* ── Canonical card hover ─────────────────────────
   ONE hover treatment for every card on the site. Four had drifted apart:
   .skill-card lifted with a glow, .skill-block and .interest-card used a flat
   1px ring with no lift, and .edu-card only recoloured its border, so the same
   gesture did something different on almost every page.

   .skill-block and .interest-card live in skills.css, which loads AFTER this
   file. Their :hover rules were deleted there so this one wins; do not
   reintroduce a :hover for them in skills.css or the drift returns.

   Every base rule below must list transform in its transition, or the lift
   snaps instead of easing. Reduced motion drops the lift (see the guard near
   the end of this file) and keeps the border and glow. */
.skill-card:hover,
.skill-block:hover,
.interest-card:hover,
.edu-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary-glow);
  transform: translateY(-2px);
}
.skill-icon {
  margin-bottom: var(--space-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-dim);
  border-radius: var(--radius-md);
}
.skill-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.skill-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: none;
}

/* ─── EXPERIENCE TEASER ──────────────────────────── */
.experience-teaser { background: var(--color-surface); }

.exp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.exp-item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}
.exp-item:last-child { border-bottom: none; }
.exp-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.exp-period {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.exp-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #3fb950;
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.exp-role {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.exp-company {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.03em;
}
.exp-summary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: none;
}

/* ─── EDUCATION TEASER ───────────────────────────── */
.edu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.edu-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-5);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.edu-badge {
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.04em;
  background: var(--color-primary-dim);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  height: fit-content;
  white-space: nowrap;
  flex-shrink: 0;
}
.edu-degree {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.team-profile-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.team-profile-card:hover,
.team-profile-card:focus-visible {
  text-decoration: none;
}
.team-profile-card:hover .edu-degree,
.team-profile-card:focus-visible .edu-degree {
  color: var(--color-primary);
}
.team-profile-card:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary-dim);
  outline-offset: 3px;
}
.edu-school {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.03em;
}
.edu-topics {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
  max-width: none;
}

/* ─── CTA STRIP ──────────────────────────────────── */
.cta-strip {
  border-bottom: 1px solid var(--color-border);
}
.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.cta-strip-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.cta-strip-desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 48ch;
}

/* ─── PAGE HERO (inner pages) ────────────────────── */
.page-hero {
  padding-top: clamp(var(--space-8), 3vw, var(--space-12));
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--color-surface);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}
.page-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: none;
}

/* ─── TIMELINE ───────────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.timeline-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 8px var(--color-primary-glow);
  margin-top: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-content {
  padding-top: 0;
}
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
/* ── Company logo layout ────────────────────── */
.timeline-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

/* Generic logo wrapper (adds subtle rounded bg for logos with white backgrounds) */
.company-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  height: 52px;
  min-width: 80px;
  max-width: 160px;
}

/* Logos that need a light bg pill in dark mode (UWaterloo gold/black, TTC) */
.company-logo-wrap--light-bg {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .company-logo-wrap--light-bg {
  background: #f4f4f4;
  border-color: var(--color-border);
}

.company-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.company-logo-wrap--wrsbc {
  width: 160px;
  max-width: 160px;
  overflow: hidden;
}

.company-logo-wrap--wrsbc a {
  display: block;
  width: 100%;
}

.company-logo-wrap--wrsbc .company-logo {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* University source images include generous white margins; scale the artwork
   within a clipped pill so the visible marks match the company-logo weight. */
.company-logo-wrap:has(img[src$="logos/uwaterloo.png"]),
.company-logo-wrap:has(img[src$="logos/ontariotech.jpg"]) {
  width: 160px;
  overflow: hidden;
}

.company-logo-wrap:has(img[src$="logos/uwaterloo.png"]) a,
.company-logo-wrap:has(img[src$="logos/ontariotech.jpg"]) a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.company-logo-wrap img[src$="logos/uwaterloo.png"],
.company-logo-wrap img[src$="logos/ontariotech.jpg"] {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 40px;
  transform: none;
}

/* Tianchen SVG monogram - standalone (no wrap div) */
.company-logo--dark {
  height: 48px;
  width: 120px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

[data-theme="dark"] .company-logo--dark {
  --logo-bg: #e8f0fe;
  --logo-fg: #1a56db;
  --logo-fg-dim: #4a5568;
}
/* ── End company logos ───────────────────────── */

.timeline-role {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.timeline-company {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}
.timeline-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.timeline-period {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.timeline-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #3fb950;
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.timeline-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.timeline-bullets li {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  padding-left: var(--space-5);
  position: relative;
  max-width: none;
}
.timeline-bullets li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-family: var(--font-mono);
}
.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* ─── EDUCATION BLOCKS ───────────────────────────── */
.edu-block {
  display: block;
  padding-block: var(--space-8);
}
.edu-block-degree {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}
.edu-block-school {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  letter-spacing: 0.03em;
}
.edu-block-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.edu-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}
/* University logos */
.edu-logo {
  height: 48px;
  width: 48px;
  object-fit: contain;
}

.edu-header-left .company-logo-wrap:has(img[src$="logos/uwaterloo.png"]) .edu-logo,
.edu-header-left .company-logo-wrap:has(img[src$="logos/ontariotech.jpg"]) .edu-logo {
  width: 100%;
  height: auto;
  max-width: 130px;
}
.edu-block-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #3fb950;
  background: rgba(63, 185, 80, 0.12);
  border: 1px solid rgba(63, 185, 80, 0.3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  height: fit-content;
}
.edu-block-status--complete {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.3);
}
.edu-divider {
  height: 1px;
  background: var(--color-border);
}
.edu-block-section {
  margin-bottom: var(--space-6);
}
.edu-block-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.edu-block-text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: none;
}

.course-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.course-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: var(--color-primary-dim);
  border: 1px solid var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  opacity: 0.85;
}

/* ─── SKILLS MATRIX ──────────────────────────────── */
.skills-matrix-section { background: var(--color-surface); }
.skills-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}
.skills-category {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.skills-cat-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}
.skills-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.skills-list li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-left: var(--space-3);
  position: relative;
  max-width: none;
}
.skills-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-border);
  font-family: var(--font-mono);
}

/* ─── CONTACT PAGE ───────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  align-items: start;
}
.contact-info-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.contact-info-desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 52ch;
}
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.contact-channel:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 16px var(--color-primary-glow);
  transform: translateX(4px);
  text-decoration: none;
}
.contact-channel-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-dim);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  flex-shrink: 0;
}
.contact-channel-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.contact-channel-label {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.contact-channel-value {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-channel-arrow {
  color: var(--color-text-faint);
  flex-shrink: 0;
  transition: color var(--transition), transform var(--transition);
}
.contact-channel:hover .contact-channel-arrow {
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

.contact-availability {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 8px #3fb950;
  animation: pulse-dot 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}
.contact-card-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.contact-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.contact-card-role {
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
  display: block;
}
.contact-card-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.contact-card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
}
.contact-card-item .label {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.status-open {
  color: #3fb950;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ─── FOOTER ─────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  background: var(--color-surface);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-copy {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  max-width: none;
}
.footer-nav {
  display: flex;
  gap: var(--space-4);
}
.footer-nav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
  letter-spacing: 0.03em;
}
.footer-nav a:hover { color: var(--color-primary); }
.footer-social {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
  letter-spacing: 0.03em;
}
.footer-social:hover { color: var(--color-primary); }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: flex; }

  .hero-title { letter-spacing: -0.02em; }
  .hero-cta { flex-direction: column; align-items: flex-start; }

  .edu-block {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-block: var(--space-8);
  }
  .edu-block-body { min-width: 0; }
  .edu-block-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .edu-header-left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .edu-block-school { margin-bottom: 0; }
  .edu-block-status {
    white-space: normal;
    line-height: 1.4;
  }
  .edu-block-section { margin-bottom: var(--space-5); }
  .course-grid { gap: var(--space-2); }
  .course-chip {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .timeline::before { display: none; }
  .timeline-item { grid-template-columns: 1fr; }
  .timeline-marker { display: none; }
  .timeline-header { flex-direction: column; }
  .timeline-header-left { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .timeline-meta { align-items: flex-start; }
  .company-logo-wrap { max-width: 120px; }
  .company-logo-wrap:has(img[src$="logos/uwaterloo.png"]),
  .company-logo-wrap:has(img[src$="logos/ontariotech.jpg"]) {
    width: 160px;
    max-width: min(160px, 100%);
  }
  .company-logo-wrap--wrsbc { width: 160px; max-width: min(160px, 100%); }
  .company-logo--dark { width: 100px; height: 40px; }

  .contact-layout { grid-template-columns: 1fr; }
  .contact-card-aside { order: -1; }

  .cta-strip-inner { flex-direction: column; align-items: flex-start; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-nav { flex-wrap: wrap; gap: var(--space-3); }

  html.main-js-failed .nav-toggle { display: none; }
  html.main-js-failed .mobile-nav {
    position: static;
    inset: auto;
    height: auto;
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-bottom: 1px solid var(--color-border);
  }
}

@media (max-width: 480px) {
  .skills-grid { grid-template-columns: 1fr; }
  .edu-cards { grid-template-columns: 1fr; }
  .skills-matrix { grid-template-columns: 1fr; }
}

@media (scripting: none) and (max-width: 768px) {
  .nav-toggle { display: none; }
  .mobile-nav {
    position: static;
    inset: auto;
    height: auto;
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-bottom: 1px solid var(--color-border);
  }
}

@media (max-width: 768px) and (max-height: 500px) {
  .mobile-nav {
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    gap: 0;
  }
  .mobile-nav-link {
    padding: var(--space-2) var(--space-3);
  }
  .mobile-nav-label {
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
  }
}

/* ─── SCROLL ANIMATION ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .skill-card,
  html.js-reveal .skill-block,
  html.js-reveal .interest-card,
  html.js-reveal .exp-item,
  html.js-reveal .timeline-item,
  html.js-reveal .edu-card,
  html.js-reveal .edu-block,
  html.js-reveal .contact-channel {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease,
                border-color var(--transition), box-shadow var(--transition);
  }
  html.js-reveal .skill-card.is-visible,
  html.js-reveal .skill-block.is-visible,
  html.js-reveal .interest-card.is-visible,
  html.js-reveal .exp-item.is-visible,
  html.js-reveal .timeline-item.is-visible,
  html.js-reveal .edu-card.is-visible,
  html.js-reveal .edu-block.is-visible,
  html.js-reveal .contact-channel.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  html.js-reveal .skill-card.is-visible:hover,
  html.js-reveal .skill-block.is-visible:hover,
  html.js-reveal .interest-card.is-visible:hover,
  html.js-reveal .edu-card.is-visible:hover {
    transform: translateY(-2px);
  }
}

/* Company hero background photo - mobile, light mode only */
@media (max-width: 768px) {
  html[data-theme="light"] .hero--company {
    background:
      linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, rgba(248, 250, 252, 0.82) 45%, rgba(248, 250, 252, 0.30) 100%),
      url("bg-mobile-light-toronto-film.webp") center bottom / cover no-repeat;
  }
  html[data-theme="light"] .hero--company .hero-grid-bg {
    display: none;
  }
}


/* Founder's Background nav dropdown */
.nav-group { position: relative; display: inline-flex; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 180px;
  display: none; flex-direction: column; gap: 2px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 6px; z-index: 60;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown { display: flex; }
.nav-dropdown .nav-link { display: block; }
.nav-caret { font-size: 0.65em; opacity: 0.7; }

/* Mobile drawer grouping */
.mobile-nav-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-muted); margin: 0.9rem 0 0.15rem;
}
.mobile-nav-sub { padding-left: 1.1rem; }

/* Service page media placeholders */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .media-grid { grid-template-columns: 1fr; } }
.media-placeholder {
  border: 2px dashed var(--color-border); border-radius: 12px;
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); background: var(--color-surface);
}
.media-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-video-wrap { min-width: 0; }
.bilibili-mobile-card {
  display: none;
  text-decoration: none;
}
@media (max-width: 768px) {
  .bilibili-desktop-player { display: none; }
  .bilibili-mobile-card {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: #fff;
  }
  .bilibili-mobile-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bilibili-mobile-card::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
    pointer-events: none;
  }
  .bilibili-mobile-card-label {
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  }
  .bilibili-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    font-size: 0.82rem;
    padding-left: 2px;
  }
}


/* Language switcher */
.lang-switch { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; margin-right: 4px; }
.lang-switch a { color: var(--color-text-muted); text-decoration: none; }
.lang-switch a:hover { color: var(--color-primary); }
.lang-switch a.active { color: var(--color-primary); font-weight: 700; }
html[data-lang-options="fr"] .lang-switch a[data-lang="zh"],
html[data-lang-options="zh"] .lang-switch a[data-lang="fr"] { display: none; }


/* Merge media (photo+video) into the title block on service pages */
.page-hero--media { padding-bottom: var(--space-4); }
.media-section {
  background: var(--color-surface);
  padding-top: 0;
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
.media-section .media-grid { gap: 12px; }


/* Data-privacy caption under the AI-page videos */
.media-caption {
  max-width: none;
  margin: var(--space-6) 0 0;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}


/* Lab logo chip on model cards */
.model-logo {
  width: 46px; height: 46px; border-radius: 10px;
  background: #ffffff; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4); overflow: hidden;
}
.model-logo img { width: 40px; height: 40px; object-fit: contain; }

/* App-icon-style marks (Kimi, Z.ai) already carry their own rounded-square
   frame, with transparent corners outside it. Inset inside the white chip they
   read as a box within a box, and the chip's white shows through those corners
   as pale wedges. Let them fill the chip instead, so the icon's own frame IS
   the chip and the white plate is fully covered; overflow:hidden on the parent
   clips them to its radius. Logos with real transparent padding (Cohere) or a
   plain mark on white (DeepSeek) still need the plate, so they keep the
   default inset. */
.model-logo--icon { background: transparent; }
.model-logo--icon img { width: 100%; height: 100%; }

/* Company hero desktop backgrounds: sunset (light) / night skyline (dark) */
@media (min-width: 769px) {
  html[data-theme="light"] .hero--company {
    background:
      linear-gradient(90deg, rgba(246,248,250,0.95) 0%, rgba(246,248,250,0.72) 42%, rgba(246,248,250,0.25) 100%),
      url("bg-desktop-light-toronto.webp") center / cover no-repeat;
  }
  html[data-theme="dark"] .hero--company {
    background:
      linear-gradient(90deg, rgba(13,17,23,0.94) 0%, rgba(13,17,23,0.72) 42%, rgba(13,17,23,0.35) 100%),
      url("bg-desktop-dark.webp?v=2") center / cover no-repeat;
  }
  html[data-theme="light"] .hero--company .hero-grid-bg,
  html[data-theme="dark"] .hero--company .hero-grid-bg { display: none; }
}


/* Tap-to-open dropdown (touch) + larger mobile language tap targets */
.nav-group.open .nav-dropdown { display: flex; }
@media (max-width: 768px) {
  .lang-switch { gap: 2px; margin-right: 2px; }
  .lang-switch a { padding: 8px 7px; font-size: 0.92rem; border-radius: 8px; }
}

/* Company hero - mobile dark mode: Milky Way starfield */
@media (max-width: 768px) {
  html[data-theme="dark"] .hero--company {
    background:
      linear-gradient(180deg, rgba(13,17,23,0.90) 0%, rgba(13,17,23,0.70) 45%, rgba(13,17,23,0.38) 100%),
      url("bg-mobile-dark.webp?v=2") center / cover no-repeat;
  }
  html[data-theme="dark"] .hero--company .hero-grid-bg { display: none; }
}

/* ─── COMPACT SKILL-CARD GRID ────────────────────────
   Opt-in modifier for .skills-grid, used by /personal (Skills & Expertise) and
   /photography (Services) so the two sections look identical.
   style.css collapses .skills-grid to one column below 480px, which left a
   single full-width card per line on phones; this puts two half-width cards on
   a line and scales the card down to suit.
   Appended at the end of the file on purpose: `.skills-grid--compact` has the
   same specificity as `.skills-grid`, so it only wins by source order.
   The homepage deliberately does NOT use this modifier - its cards carry longer
   descriptions and stay full width on phones. */
@media (max-width: 600px) {
  .skills-grid--compact {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .skills-grid--compact .skill-card {
    padding: var(--space-4);
  }
  .skills-grid--compact .skill-icon {
    width: 34px;
    height: 34px;
    margin-bottom: var(--space-3);
  }
  .skills-grid--compact .skill-card-title {
    font-size: var(--text-sm);
    margin-bottom: 0.25rem;
  }
  .skills-grid--compact .skill-card-desc {
    font-size: var(--text-xs);
    line-height: 1.5;
  }
}

/* ─── CANADIAN PROVENANCE ────────────────────────────
   Short declarative provenance fragments in page furniture, in the register
   used by quoted.tech: stated as fact next to the brand, not argued.
   Scope is deliberate:
     - EN and FR only. The Chinese pages are market-neutral by owner decision
       and must not carry Canadian positioning (zh/index.html must never say
       加拿大).
     - The footer line appears only on the five COMPANY pages (c 2026 Biegle).
       The personal/resume pages carry the owner's own copyright, where "a
       proudly Canadian company" would not make sense.
   The leaf is an inline SVG rather than the emoji flag, which renders
   inconsistently across platforms and sizes. */
.ca-leaf {
  /* style.css line ~191 has a global `img, picture, video, svg { display: block }`
     reset. Inside an inline context, such as the "... Matter to Canada" heading,
     a block-level SVG is forced onto its own line no matter what no-break space
     precedes it. Keep this inline-block. Flex items are blockified anyway, so
     this is harmless inside .hero-provenance and .footer-ca. */
  display: inline-block;
  flex: none;
  vertical-align: -2px;
}
.hero-provenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.hero-provenance > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-ca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
@media (max-width: 600px) {
  .hero-provenance {
    gap: var(--space-2) var(--space-4);
  }
}

/* Reduced motion: keep the border and glow, drop the 2px lift. The global
   reduce block only shortens transition-duration, so without this the
   transform still applies, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .skill-card:hover,
  .skill-block:hover,
  .interest-card:hover,
  .edu-card:hover {
    transform: none;
  }
}