:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: rgba(10, 10, 10, 0.6);
  --rule: rgba(10, 10, 10, 0.12);
  --hover: rgba(10, 10, 10, 0.75);

  --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", monospace;

  --radius: 0px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --border: 1px solid var(--rule);

  /* Layout: full-bleed with very small horizontal padding */
  --container-max: 100%;
  --gutter-desktop: 40px;
  --gutter-mobile: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* Full height layout for contact page */
body.contact-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.contact-page .page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.contact-page .page > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--fg);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Improve touch scrolling performance on mobile */
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  width: 100%;
  overflow-x: hidden;
  /* Optimize rendering */
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  /* Prevent image dragging on mobile */
  -webkit-user-drag: none;
  user-select: none;
  /* Optimize image loading */
  loading: lazy;
}

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

button {
  font-family: inherit;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
  }
}

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-5);
  display: block;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 var(--space-5);
  font-size: clamp(40px, 5vw, 64px);
}

p {
  margin: 0 0 var(--space-4);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: transparent;
  border-bottom: none;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.site-header-hidden {
  transform: translateY(-100%);
}

.site-header.nav-is-open.site-header-hidden {
  transform: translateY(0);
}

.site-header.nav-is-open {
  overflow: visible;
  z-index: 60;
}

.site-header.nav-is-open::before {
  opacity: 0 !important;
  pointer-events: none;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.site-header-scrolled::before {
  transform: translateY(0);
  opacity: 1;
}

.site-header-over-carousel::before {
  opacity: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--gutter-mobile);
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}

.wordmark {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  pointer-events: auto;
  display: none;
}

/* Show logo when header has white background (scrolling up past carousel) */
.site-header-scrolled .wordmark {
  opacity: 1;
  transform: translate(-50%, -50%);
  top: 52%;
  pointer-events: auto;
}

/* Show logo when over carousel */
.site-header-over-carousel .wordmark {
  opacity: 1;
  transform: translate(-50%, -50%);
  top: 52%;
  pointer-events: auto;
}

/* Hide logo when scrolling down past carousel (no white background, not over carousel) */
.site-header:not(.site-header-scrolled):not(.site-header-over-carousel) .wordmark {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-10px);
  pointer-events: none;
}

.wordmark a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.wordmark img {
  transition: opacity 100ms ease-out;
}

@media (min-width: 768px) {
  .header-inner {
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
  }
}

@media (max-width: 767px) {
  .header-inner {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  
  .wordmark img {
    height: 36px;
  }
  
  .wordmark {
    /* Remove width constraint since text is hidden */
    max-width: none;
  }
  
  .nav-toggle-text {
    /* Hide text on mobile to prevent overlap with logo */
    display: none;
  }
  
  .nav-toggle {
    /* Remove gap on mobile since text is hidden */
    gap: 0;
  }
}

.wordmark span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
}

.wordmark img {
  height: 52px;
  width: auto;
  display: block;
}

.nav-toggle {
  border: none;
  background: transparent;
  padding: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  position: absolute;
  left: var(--gutter-mobile);
  top: 52%;
  transform: translateY(-50%);
  z-index: 60;
  /* Ensure touch target is at least 44x44px on mobile */
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


@media (min-width: 768px) {
  .nav-toggle {
    left: var(--gutter-desktop);
    gap: var(--space-3);
  }
}

.nav-toggle-icon {
  width: 32px;
  height: 16px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.nav-toggle-text {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  transition: color 100ms ease-out, text-shadow 100ms ease-out;
  display: inline-block;
  white-space: nowrap;
}

/* White text with shadow for dark backgrounds */
.nav-toggle-over-dark .nav-toggle-text {
  color: var(--bg);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Black text for light backgrounds - no shadow needed */
.nav-toggle-over-light .nav-toggle-text {
  color: var(--fg);
  text-shadow: none;
}

.nav-toggle-open .nav-toggle-text {
  color: var(--bg);
  z-index: 71;
  position: relative;
}

.site-header-over-carousel .nav-toggle-open .nav-toggle-text {
  color: var(--bg);
}

.nav-toggle-bar {
  height: 1px;
  width: 100%;
  background-color: var(--fg);
  transition: transform 120ms ease-out, opacity 120ms ease-out,
    background-color 100ms ease-out;
}

.nav-toggle-over-dark .nav-toggle-bar {
  background-color: var(--bg);
}

.nav-toggle-over-light .nav-toggle-bar {
  background-color: var(--fg);
}

.nav-toggle-open .nav-toggle-bar:first-child {
  transform: translateY(8px) rotate(45deg);
  transform-origin: center;
}

.nav-toggle-open .nav-toggle-bar:last-child {
  transform: translateY(-8px) rotate(-45deg);
  transform-origin: center;
}

.nav-toggle-open .nav-toggle-bar {
  background-color: var(--bg);
}

/* Force black menu button text on contact page (when closed) */
body.contact-page .nav-toggle-text {
  color: var(--fg) !important;
  text-shadow: none !important;
}

body.contact-page .nav-toggle-over-dark .nav-toggle-text {
  color: var(--fg) !important;
  text-shadow: none !important;
}

body.contact-page .nav-toggle-bar {
  background-color: var(--fg) !important;
}

body.contact-page .nav-toggle-over-dark .nav-toggle-bar {
  background-color: var(--fg) !important;
}

/* When menu is open on contact page, make it white like home page */
body.contact-page .nav-toggle-open .nav-toggle-text {
  color: var(--bg) !important;
  text-shadow: none !important;
}

body.contact-page .nav-toggle-open .nav-toggle-bar {
  background-color: var(--bg) !important;
}

/* Same menu button behavior for privacy policy and terms of use pages */
body.legal-page .nav-toggle-text {
  color: var(--fg) !important;
  text-shadow: none !important;
}

body.legal-page .nav-toggle-over-dark .nav-toggle-text {
  color: var(--fg) !important;
  text-shadow: none !important;
}

body.legal-page .nav-toggle-bar {
  background-color: var(--fg) !important;
}

body.legal-page .nav-toggle-over-dark .nav-toggle-bar {
  background-color: var(--fg) !important;
}

body.legal-page .nav-toggle-open .nav-toggle-text {
  color: var(--bg) !important;
  text-shadow: none !important;
}

body.legal-page .nav-toggle-open .nav-toggle-bar {
  background-color: var(--bg) !important;
}

/* Add padding-top to legal pages to move content down from menu */
body.legal-page .page {
  padding-top: var(--space-8);
}

body.legal-page .page > section.studio {
  padding-top: var(--space-8);
}

/* Remove borders on legal pages */
body.legal-page .studio {
  border-top: none;
  border-bottom: none;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(520px, 90vw);
  z-index: 45;
  background-color: var(--fg);
  color: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
  /* Improve touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .nav-overlay {
    width: 85vw;
  }
}

.nav-overlay-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-overlay-inner {
  height: 100%;
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
}

.nav-close {
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  cursor: pointer;
  margin-bottom: var(--space-6);
}

.nav-close-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.nav-close-icon::before,
.nav-close-icon::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 20px;
  height: 1px;
  background-color: currentColor;
}

.nav-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-close-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-overlay-nav {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-overlay-link {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.04em;
  font-weight: 600;
}

@media (min-width: 768px) {
  .nav-overlay-inner {
    padding-left: calc(var(--gutter-desktop) * 1.5);
    padding-right: calc(var(--gutter-desktop) * 1.5);
  }
}

.page {
  padding-top: 0;
  padding-bottom: var(--space-8);
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

.hero {
  padding-top: 0;
  padding-bottom: var(--space-7);
  border-bottom: none;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.hero-video {
  width: 100%;
  height: 90vh;
  min-height: 500px;
  max-height: none;
  position: relative;
  overflow: hidden;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-carousel {
  width: 100%;
  height: 90vh;
  min-height: 500px;
  max-height: none;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
  margin-top: 0;
  padding-top: 0;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 767px) {
  .hero-carousel {
    height: 70vh;
    min-height: 400px;
    margin-bottom: var(--space-3);
  }
}

.hero-carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  transition: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  will-change: transform;
}

.hero-carousel-slide.active {
  transform: translateX(0);
  z-index: 2;
}

.hero-carousel-slide.prev {
  transform: translateX(-100%);
  z-index: 1;
}

.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease-out;
  will-change: transform;
}

.hero-carousel:hover .hero-carousel-slide.active img {
  transform: scale(1.05);
}

/* Disable hover effect on touch devices */
@media (hover: none) {
  .hero-carousel:hover .hero-carousel-slide.active img {
    transform: none;
  }
}

/* Logo slide styling */
.hero-carousel-slide-logo {
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-carousel-logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 0;
}

.hero-carousel-logo {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  transform: scale(1.002);
  transition: transform 400ms ease-out;
}

/* Disable hover effect on logo slide */
.hero-carousel:hover .hero-carousel-slide-logo.active .hero-carousel-logo {
  transform: scale(1.05);
}

.hero-carousel-title {
  position: absolute;
  bottom: var(--space-6);
  left: var(--gutter-mobile);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-carousel-title {
    left: var(--gutter-desktop);
    bottom: var(--space-8);
  }
}

.hero-carousel-slide.active .hero-carousel-title {
  opacity: 1;
  transform: translateY(0);
}

.hero-carousel-title-text {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: white;
  line-height: 1.1;
}

.hero-carousel-year {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.hero-copy {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
  padding-left: 0;
  padding-right: 0;
}

.hero-copy .label {
  margin-bottom: var(--space-5);
}

.hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-bottom: var(--space-5);
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.4;
  max-width: none;
  color: var(--fg);
  margin-bottom: 0;
  text-align: justify;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.hero-meta-text {
  max-width: 32ch;
  color: var(--muted);
}

@media (min-width: 960px) {
  .hero-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.metrics {
  border-bottom: var(--border);
  padding-top: var(--space-2);
  padding-bottom: var(--space-5);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem;
  width: 100%;
}

.metric-number {
  font-size: clamp(48px, 10vw, 64px);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 960px) {
  .metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12rem;
  }
}

.filters {
  border-bottom: var(--border);
  background-color: var(--bg);
}

.filters-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-4);
}

.filters-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filters-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chip {
  border-radius: var(--radius);
  border: var(--border);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  cursor: pointer;
}

.chip-active {
  background-color: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.select-wrapper {
  position: relative;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--radius);
  border: var(--border);
  padding: 6px 28px 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: transparent;
}

.select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  pointer-events: none;
}

.work {
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

@media (max-width: 767px) {
  .work {
    padding-top: var(--space-3);
    padding-bottom: var(--space-7);
  }
}

.work-list {
  display: block;
  column-count: 1;
  column-gap: var(--space-6);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.work-row {
  border-bottom: none;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: var(--space-6);
}

.work-row-hidden {
  height: 0;
  overflow: hidden;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.work-row-revealing {
  height: auto !important;
  opacity: 0;
  visibility: visible;
  pointer-events: auto;
  margin-bottom: var(--space-6) !important;
  animation: fadeIn 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.work-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 0;
  padding-bottom: 0;
}

.work-media img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  display: block;
  transition: transform 220ms ease-out;
}

.work-media {
  overflow: hidden;
  position: relative;
}

.thumbnail-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(128, 128, 128, 0.9);
  color: white;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  align-items: center;
}

.thumbnail-info span {
  display: inline-block;
}

.thumbnail-separator {
  opacity: 0.7;
}

.work-row:hover .thumbnail-info {
  opacity: 1;
  transform: translateY(0);
}

.work-main {
  display: grid;
  gap: var(--space-2);
}

.work-title {
  font-size: clamp(20px, 5vw, 24px);
  margin-bottom: 0;
  font-weight: 600;
}

.work-meta {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-summary {
  max-width: 60ch;
  color: var(--muted);
}

.work-row:hover .work-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


.work-row:hover .work-media img {
  transform: scale(1.04);
}

.show-more-container {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-6);
  padding-top: 0;
  border-top: none;
}

.show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  background-color: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 150ms ease-out;
  /* Ensure touch target is at least 44x44px on mobile */
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.show-more-btn:hover {
  color: var(--hover);
}

.show-more-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
  transition: transform 150ms ease-out;
  color: transparent;
}

.show-more-icon::before,
.show-more-icon::after {
  content: "";
  position: absolute;
  background-color: var(--fg);
  transition: transform 150ms ease-out;
}

.show-more-icon::before {
  width: 24px;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.show-more-icon::after {
  width: 1px;
  height: 24px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.show-more-btn:hover .show-more-icon {
  transform: rotate(90deg);
}

.show-more-btn:hover .show-more-icon::before,
.show-more-btn:hover .show-more-icon::after {
  background-color: var(--hover);
}

.show-more-btn.hidden {
  display: none;
}

@media (min-width: 960px) {
  /* Regular work-list uses CSS columns */
  .work-list {
    display: block;
    column-count: 3;
    column-gap: var(--space-6);
  }
  
  .work-row {
    break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;
    margin-bottom: var(--space-6);
  }
  
  /* All-movies-list uses JavaScript masonry */
  .all-movies-list {
    position: relative;
  }
  
  .all-movies-list .work-row {
    position: absolute;
    width: calc((100% - 64px) / 3);
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 700ms cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1), left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
  }
}

.studio {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: var(--border);
}

@media (max-width: 767px) {
  .studio {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}

.studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.studio-col h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-bottom: var(--space-5);
}

.studio-col-a {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .studio-col-a {
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
  }
}

.studio-col p {
  font-size: 18px;
  line-height: 1.4;
  max-width: none;
  margin-bottom: var(--space-4);
  text-align: justify;
}

.studio-col .label {
  font-size: 11px;
  line-height: 1.4;
}

.studio-col p:last-child {
  margin-bottom: 0;
}

.studio-col-b p {
  max-width: 75ch;
}

.studio-col-b {
  display: flex;
  flex-direction: column;
  padding-top: calc(11px * 1.4 + var(--space-5));
}

.studio-col-b img,
.studio-col-b video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  flex: 1;
  min-height: 0;
}

/* Approach Graph Styles */
.approach-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.approach-text {
  flex: 1;
}

.approach-text p {
  font-size: 18px;
  line-height: 1.4;
  max-width: none;
  margin-bottom: 0;
}

.approach-graph-container {
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  padding-right: var(--gutter-mobile);
  padding-left: 0;
  flex: 1;
}

.approach-graph {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-width: 70%;
  color: var(--text, #0a0a0a);
}

.approach-graph {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.approach-graph.animated {
  opacity: 1;
}

.grid-line {
  transition: opacity 0.6s ease 0.1s;
}

.approach-graph.animated .grid-line {
  opacity: 0.08;
}

.graph-axis {
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}

.approach-graph.animated .graph-axis {
  opacity: 0.4;
}

.graph-label {
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
  font-weight: 400;
}

.approach-graph.animated .graph-label {
  opacity: 1;
}

.graph-arrow {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s, opacity 0.6s ease 0.4s;
  transform-origin: 80px 320px;
}

.approach-graph.animated .graph-arrow {
  stroke-dashoffset: 0;
  opacity: 1;
}


@media (min-width: 768px) {
  .approach-content-wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }
  
  .approach-text {
    flex: 0 0 40%;
    max-width: 40%;
  }
  
  .approach-graph-container {
    min-height: 350px;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    padding-right: var(--gutter-desktop);
    padding-left: 0;
    flex: 1;
  }
  
  .approach-graph {
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .approach-graph-container {
    min-height: 400px;
  }
}

.what-we-do-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--space-8) + var(--space-4));
}

.what-block {
  width: 100%;
  /* Remove padding on mobile - container already handles it */
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 960px) {
  .what-block {
    /* Remove left padding to align with "What We Do" title */
    padding-left: 0;
    padding-right: var(--space-5);
  }
}

.what-block h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.what-block p {
  font-size: 18px;
  line-height: 1.4;
  max-width: none;
  margin-bottom: var(--space-4);
  text-align: justify;
}

.what-block p:last-child {
  margin-bottom: 0;
}

.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.founder h3 {
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.founder p {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--space-4);
  text-align: justify;
}

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

.founder {
  /* Container already handles padding */
  padding-left: 0;
  padding-right: 0;
}

.founder-photo {
  width: 220px;
  height: 280px;
  object-fit: cover;
  margin-bottom: var(--space-6);
  margin-left: 0;
  margin-right: auto;
  border-radius: var(--radius);
  display: block;
}

@media (min-width: 960px) {
  .studio-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .studio-col-a {
    grid-column: 1 / -1;
  }

  .studio-col-b {
    grid-column: 1 / -1;
    margin-top: var(--space-6);
  }

  .studio--what-we-do .studio-grid {
    grid-template-columns: 1fr;
  }

  .studio--what-we-do .studio-col-a {
    grid-column: 1 / -1;
  }

  .what-we-do-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    width: 100%;
  }

  .founders-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.studio--founders .label {
  margin-bottom: var(--space-5);
}

.contact {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: var(--border);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  .contact {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.contact-copy {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
  padding-left: 0;
  padding-right: 0;
}

.contact-copy h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin-bottom: var(--space-5);
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.contact-copy .label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.contact-copy p {
  font-size: 18px;
  line-height: 1.4;
  max-width: none;
  margin-bottom: var(--space-4);
  text-align: justify;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.contact-copy p:last-child {
  margin-bottom: 0;
}

.contact-email {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.contact-email:hover {
  border-color: var(--fg);
}

@media (min-width: 768px) {
  .contact-inner {
    grid-template-columns: 7fr 5fr;
  }
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  background-color: var(--fg);
  color: var(--bg);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: var(--space-6);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  margin: 0 0 var(--space-2);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: var(--space-2);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  transition: color 150ms ease-out;
}

.footer-nav a:hover {
  color: var(--bg);
}

.footer-newsletter-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 var(--space-4);
  max-width: 40ch;
}

.footer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-input-wrap {
  display: flex;
  gap: var(--space-2);
}

.footer-input-wrap input {
  flex: 1;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--bg);
}

.footer-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.footer-input-wrap button {
  border-radius: var(--radius);
  border: none;
  background-color: var(--bg);
  color: var(--fg);
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 150ms ease-out;
}

.footer-input-wrap button:hover {
  opacity: 0.9;
}

.footer-bottom {
  padding-top: var(--space-4);
}

.footer-copyright {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Video Modal */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.video-modal.video-modal-open {
  opacity: 1;
  pointer-events: auto;
}

.video-modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.95);
}

.video-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.video-modal-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  color: var(--bg);
}

.video-modal-close-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.video-modal-close-icon::before,
.video-modal-close-icon::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 20px;
  height: 1px;
  background-color: currentColor;
}

.video-modal-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.video-modal-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.video-modal-player {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background-color: var(--fg);
}

.video-modal-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Subtle scroll fade animations */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
}

/* Exclude labels from fade animations */
.fade-in .label {
  opacity: 1 !important;
}

/* Fade in for first 9 work rows (film thumbnails) */
.work-row:nth-child(-n+9) {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.work-row:nth-child(-n+9).fade-in-visible {
  opacity: 1;
}

/* Contact Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.contact-form-field input,
.contact-form-field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  background: transparent;
  color: var(--fg);
  transition: border-color 0.2s ease;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
  outline: none;
  border-color: var(--fg);
}

.contact-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form-submit {
  align-self: flex-start;
  padding: 12px 24px;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-form-submit:hover {
  background: var(--fg);
  color: var(--bg);
}

@media (max-width: 768px) {
  .contact-form {
    gap: var(--space-3);
  }
  
  .contact-form-field input,
  .contact-form-field textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}


.hero-video-logo {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-6);
  width: auto;
  height: 80px;
  opacity: 0.5;
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-video-logo {
    height: 50px;
    bottom: var(--space-8);
    right: var(--space-4);
  }
}