:root {
  --text: #1a1a1a;
  --muted: #767676;
  --rule: #dcdcdc;
  --bg: #ffffff;
  --sidebar-w: 190px;
  --gap: 6px;
  --content-max: 1040px;
  --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body {
  font-size: 11px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* Sidebar */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  overflow-y: auto;
  padding: 32px 20px 32px 32px;
}

.brand h1 {
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.brand .tagline {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.brand .tagline-secondary {
  margin-top: 14px;
  margin-bottom: 28px;
}

.nav-label {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

.nav-label-secondary {
  margin-top: 24px;
}

.clients ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clients li {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 0;
}

.clients li a {
  color: var(--text);
}

.clients li a:hover {
  color: var(--muted);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-link {
  display: inline-flex;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
}

.social-link:hover {
  color: var(--text);
}

/* Homepage sits over the background video, so the icons need to read against it
   regardless of how bright that part of the footage happens to be. */
body.home .social-link {
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

body.home .social-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Email popup */

.email-popup {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 300px;
  background: #1c1c1e;
  color: #f2f2f2;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  font-family: var(--font);
  font-size: 11.5px;
  overflow: hidden;
  z-index: 50;
}

.email-popup.open { display: block; }

.email-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}

.email-popup-label {
  color: #8e8e93;
  flex-shrink: 0;
}

.email-popup-value { color: #f2f2f2; }

.email-popup-divider {
  height: 1px;
  background: #3a3a3c;
  margin: 0 16px;
}

.email-popup-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: #f2f2f2;
  font-family: var(--font);
  font-size: 11.5px;
  outline: none;
}

.email-popup-input::placeholder { color: #6e6e73; }

.email-popup-message {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.email-popup-textarea {
  resize: none;
  height: 110px;
  background: none;
  border: none;
  color: #f2f2f2;
  font-family: var(--font);
  font-size: 11.5px;
  line-height: 1.6;
  outline: none;
}

.email-popup-actions {
  display: flex;
  border-top: 1px solid #3a3a3c;
}

.email-popup-send,
.email-popup-cancel {
  flex: 1;
  border: none;
  padding: 13px 0;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
}

.email-popup-send {
  background: #87a08a;
  color: #ffffff;
  font-weight: 700;
}

.email-popup-cancel {
  background: #4a4a4d;
  color: #e5e5e5;
}

.email-popup-send:hover { background: #799378; }
.email-popup-cancel:hover { background: #56565a; }

/* Top bar */

.topbar {
  position: fixed;
  top: 28px;
  right: 40px;
  display: flex;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--text);
  z-index: 2;
}

.page-year { color: var(--muted); }

/* Main */

main {
  margin-left: var(--sidebar-w);
  padding: 32px 40px 80px 40px;
}

/* Homepage background video — fills everything right of the sidebar. */

.home-video-wrap {
  position: fixed;
  /* Covers the top of the page, flush against the sidebar (left) without cutting into it,
     and now fills all the way to the right edge (the topbar sits above it via z-index). */
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--bg);
  z-index: 0;
}

.home-video-wrap video {
  width: 100%;
  height: 100%;
  /* Always fill the frame edge-to-edge (cropping as needed) so the video reads the same
     way on any screen shape — desktop, iPhone/iPad portrait, iPhone/iPad landscape —
     instead of leaving inconsistent letterboxing depending on the container's proportions. */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Responsive */

@media (max-width: 900px) {
  :root { --sidebar-w: 160px; }
}

@media (max-width: 640px) {
  /* Keep the same side-by-side layout as desktop (sidebar fixed on the left,
     content beside it) instead of stacking the sidebar on top — just narrower. */
  :root { --sidebar-w: 130px; }

  .sidebar {
    padding: 20px 10px 20px 14px;
  }

  .topbar {
    top: 16px;
    right: 14px;
    gap: 12px;
  }

  main { padding: 16px 14px 60px; }

  .email-popup {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }

  /* Scale text down further to fit the narrow sidebar column while staying legible. */
  body { font-size: 9.5px; }
  .brand h1 { font-size: 10.5px; }
  .brand .tagline { font-size: 9px; }
  .nav-label { font-size: 8px; }
  .clients li { font-size: 10.5px; }
  .topbar { font-size: 8px; }
  .social-links { gap: 10px; }
  .email-popup {
    font-size: 10.5px;
  }
  .email-popup-input,
  .email-popup-textarea {
    font-size: 10.5px;
  }
  .email-popup-send,
  .email-popup-cancel {
    font-size: 11px;
  }
}