/* ============================================================
   JEFTE PORTFOLIO — Editorial Brutalist Stylesheet
   Film Editor / Videographer / Photographer

   Aesthetic: High-fashion magazine meets architectural brutalism
   References: Vogue, Wallpaper*, Kinfolk
   ============================================================ */


/* ============================================================
   0. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-light: #FAF7F2;
  --bg-dark: #1A1A1A;
  --bg-darker: #111111;

  /* Text */
  --text-dark: #1A1A1A;
  --text-light: #FAF7F2;
  --text-muted: #8C8578;
  --text-muted-light: #B0A99F;

  /* Accent */
  --accent: #D4552A;
  --accent-hover: #E06030;

  /* Borders */
  --border-dark: #1A1A1A;
  --border-light: rgba(26, 26, 26, 0.12);
  --border-light-on-dark: rgba(250, 247, 242, 0.15);

  /* Spacing */
  --section-padding: clamp(80px, 10vw, 160px);
  --container-padding: clamp(24px, 4vw, 60px);
}


/* ============================================================
   1. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Film Grain Overlay — static texture, no animation to prevent edge flicker */
body::after {
  content: '';
  position: fixed;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

::selection {
  background-color: var(--accent);
  color: var(--text-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  line-height: 0.95;
}

h1 {
  font-size: clamp(3rem, 10vw, 10rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}

p {
  font-family: 'Source Serif 4', serif;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Dramatic weight contrast — thin italic em inside bold headings */
h1 em,
h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* Section subtitle — monospace label */
.section-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Large decorative section numbers: 01, 02, 03 ... */
.section-number {
  font-family: 'Syne', sans-serif;
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 26, 26, 0.08);
  position: absolute;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* Section numbers on dark backgrounds */
.section--dark .section-number {
  -webkit-text-stroke-color: rgba(250, 247, 242, 0.06);
}


/* ============================================================
   3. LAYOUT
   ============================================================ */

.container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

section {
  padding: var(--section-padding) 0;
  position: relative;
  overflow: hidden;
}

.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

.section--dark p {
  color: var(--text-muted-light);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--text-light);
}

.section--light {
  background-color: var(--bg-light);
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 24px 0;
  transition: background 0.4s ease, padding 0.3s ease, border-color 0.3s ease;
}

.nav-scrolled {
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
  padding: 16px 0;
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--text-dark);
}

.nav-links a.active {
  color: var(--accent);
}

/* CTA link in nav */
.nav-cta {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  transition: color 0.3s ease;
}

.nav-cta:hover {
  color: var(--accent-hover);
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  color: var(--text-dark);
}

.nav-dropdown-arrow {
  font-size: 0.625rem;
  transition: transform 0.3s ease;
}

.nav-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  padding: 12px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.nav-dropdown-menu a:hover {
  color: var(--accent);
  padding-left: 28px;
}

/* Dark nav dropdown */
.section--dark .nav-dropdown-menu,
.nav--dark .nav-dropdown-menu {
  background: var(--bg-dark);
  border-color: var(--border-light-on-dark);
}

/* Mobile sub-items */
.nav-mobile-sub {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  padding-left: 20px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--text-muted-light) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  border-bottom-color: rgba(250, 247, 242, 0.06) !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-mobile-sub::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--accent);
  margin-right: 12px;
  vertical-align: middle;
}

/* Showreel Hero — full-width video at top */
.showreel-hero {
  padding: 0;
  margin-top: 72px; /* clear fixed nav */
  background: var(--bg-darker);
  position: relative;
  overflow: visible;
}

.showreel-hero .video-placeholder {
  min-height: 60vh;
  max-height: 80vh;
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 1001;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-dark);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger.active span {
  background-color: var(--text-light);
}

.nav-hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 40px 40px;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 999;
  overflow-y: auto;
}

.nav-mobile.active {
  opacity: 1;
  visibility: visible;
}

.nav-mobile a {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  transition: color 0.3s ease;
  padding: 12px 0;
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--border-light-on-dark);
}

.nav-mobile a:last-of-type {
  border-bottom: none;
}

.nav-mobile a:hover,
.nav-mobile a:active {
  color: var(--accent);
}

.nav-mobile .btn {
  margin-top: 32px;
  width: 100%;
  justify-content: center;
  border-bottom: none;
  font-size: 0.85rem;
}

/* Dark nav variant — for pages with dark hero */
.nav--dark .nav-logo {
  color: var(--text-light);
}

.nav--dark .nav-hamburger span {
  background-color: var(--text-light);
}

.nav--dark .nav-links a {
  color: var(--text-muted-light);
}

.nav--dark .nav-links a:hover {
  color: var(--text-light);
}

.nav--dark.nav-scrolled {
  background: rgba(26, 26, 26, 0.95);
}

.nav--dark.nav-scrolled .nav-logo {
  color: var(--text-light);
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .nav-hamburger {
    display: none;
  }
}


/* ============================================================
   5. HERO
   ============================================================ */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background-color: var(--bg-light);
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 180px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  margin-bottom: 32px;
}

.hero-subtitle {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 1.125rem;
  max-width: 480px;
  color: var(--text-muted);
  margin-bottom: 48px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Hero stats bar */
.hero-stats {
  position: relative;
  border-top: 1px solid var(--border-light);
  padding: 32px 0;
  margin-top: 48px;
}

.hero-stats .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.stat {
  text-align: center;
  position: relative;
}

.stat-number {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.1;
  display: block;
}

.stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.scroll-indicator span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-indicator::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.4;
    transform: scaleY(0.6);
  }
}

/* Desktop stats — 4 columns with dividers */
@media (min-width: 768px) {
  .hero-stats .container {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat + .stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: var(--border-light);
  }
}


/* ============================================================
   6. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--text-light);
  border: 2px solid var(--accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-dark);
  border: 2px solid var(--text-dark);
}

.btn-secondary:hover {
  background-color: var(--text-dark);
  color: var(--text-light);
}

/* Secondary button on dark sections */
.section--dark .btn-secondary {
  border-color: var(--text-light);
  color: var(--text-light);
}

.section--dark .btn-secondary:hover {
  background-color: var(--text-light);
  color: var(--text-dark);
}

/* Text button — minimal, with arrow */
.btn-text {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-text::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-text:hover::after {
  transform: translateX(4px);
}

.btn-text:hover {
  color: var(--accent-hover);
}


/* ============================================================
   7. SECTION HEADERS
   ============================================================ */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.section-header .section-subtitle {
  display: block;
  margin-bottom: 12px;
}


/* ============================================================
   8. SHOWREEL / VIDEO PLACEHOLDER
   ============================================================ */

.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-light-on-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-placeholder span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  color: var(--text-muted-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 2px solid var(--accent);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.play-btn svg {
  fill: var(--accent);
  width: 24px;
  height: 24px;
  transition: fill 0.3s ease;
}

.play-btn:hover {
  background-color: var(--accent);
}

.play-btn:hover svg {
  fill: var(--text-light);
}


/* ============================================================
   9. PROJECTS — HORIZONTAL SCROLL
   ============================================================ */

.projects-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 24px;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar */
.projects-scroll::-webkit-scrollbar {
  height: 3px;
}

.projects-scroll::-webkit-scrollbar-track {
  background: rgba(250, 247, 242, 0.1);
}

.projects-scroll::-webkit-scrollbar-thumb {
  background-color: var(--accent);
}

/* Project card */
.project-card {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 380px);
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.3s ease;
  border-bottom: 2px solid transparent;
}

.project-card:hover {
  border-bottom-color: var(--accent);
}

.project-card-image {
  aspect-ratio: 3 / 2;
  background-color: #2a2a2a;
  overflow: hidden;
  position: relative;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card-image img {
  transform: scale(1.05);
}

.project-card-category {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(26, 26, 26, 0.8);
  color: var(--text-light);
  padding: 6px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}

.project-card-info {
  padding: 20px 0;
}

.project-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 6px;
}

.project-card-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted-light);
}


/* ============================================================
   10. SERVICES
   ============================================================ */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--border-light);
}

.service-card {
  padding: clamp(32px, 4vw, 48px);
  background-color: var(--bg-light);
  border: none;
}

.service-card h3 {
  font-family: 'Syne', sans-serif;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.service-card:hover h3 {
  color: var(--accent);
}

.service-card p {
  margin-bottom: 24px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  padding: 6px 14px;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.service-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   11. CTA SECTION
   ============================================================ */

.cta-section {
  background-color: var(--bg-dark);
  text-align: center;
  padding: clamp(100px, 12vw, 200px) 0;
}

.cta-section h2 {
  color: var(--text-light);
  margin-bottom: 20px;
}

.cta-section .section-subtitle {
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.cta-section p {
  color: var(--text-muted-light);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.cta-section .btn {
  margin: 0 auto;
}


/* ============================================================
   12. ABOUT PAGE
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.about-image {
  aspect-ratio: 3 / 4;
  background-color: #ddd;
  position: relative;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Decorative accent square */
.about-image::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border: 2px solid var(--accent);
  z-index: -1;
}

/* Info grid — 2x2 structured data */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.info-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.info-value {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* Timeline */
.timeline {
  padding-left: 40px;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--border-light);
}

.timeline-item {
  position: relative;
  padding-bottom: 32px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent);
  border: none;
}

.timeline-year {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  display: block;
}

.timeline-item h4 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.timeline-item p {
  font-size: 0.9375rem;
}

/* Tools grid */
.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tool-item {
  padding: 10px 18px;
  border: 1px solid var(--border-light);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.tool-item:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 5fr 4fr;
  }
}


/* ============================================================
   13. FORMS (Booking, Quote, Contact)
   ============================================================ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 0;
  color: var(--text-dark);
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 85, 42, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

/* Custom select arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238C8578' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Forms on dark backgrounds */
.section--dark .form-input,
.section--dark .form-select,
.section--dark .form-textarea {
  border-color: var(--border-light-on-dark);
  color: var(--text-light);
}

.section--dark .form-input::placeholder,
.section--dark .form-textarea::placeholder {
  color: var(--text-muted-light);
}

.section--dark .form-input:focus,
.section--dark .form-select:focus,
.section--dark .form-textarea:focus {
  border-color: var(--accent);
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-group.full-width {
    grid-column: span 2;
  }
}


/* ============================================================
   14. PAGE HEADER (inner pages)
   ============================================================ */

.page-header {
  padding: 180px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.page-header h1 {
  margin-bottom: 16px;
}

.page-header p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.page-header .section-subtitle {
  display: block;
  margin-bottom: 12px;
}

/* Dark page headers */
.page-header.section--dark {
  border-bottom-color: var(--border-light-on-dark);
}

@media (min-width: 1024px) {
  .page-header {
    padding: 220px 0 100px;
  }
}


/* ============================================================
   15. FILTER BAR
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}

.filter-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 24px;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.filter-btn:hover {
  border-color: var(--text-dark);
  color: var(--text-dark);
}

.filter-btn.active {
  background-color: var(--text-dark);
  color: var(--text-light);
  border-color: var(--text-dark);
}

/* Filter on dark backgrounds */
.section--dark .filter-btn {
  border-color: var(--border-light-on-dark);
  color: var(--text-muted-light);
}

.section--dark .filter-btn:hover {
  border-color: var(--text-light);
  color: var(--text-light);
}

.section--dark .filter-btn.active {
  background-color: var(--accent);
  color: var(--text-light);
  border-color: var(--accent);
}


/* ============================================================
   16. FOOTER
   ============================================================ */

.footer {
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding: 48px 0 24px;
  border-top: none;
}

/* Compact footer layout */
.footer-compact {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-brand .nav-logo {
  display: inline-block;
  margin-bottom: 8px;
}

.footer-brand p {
  color: var(--text-muted-light);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

/* Footer page links — horizontal row */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-muted-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}

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

/* Footer social — icon + label in a column */
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-muted-light);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  border-bottom: 1px solid var(--border-light-on-dark);
}

.footer-social a:last-child {
  border-bottom: none;
}

.footer-social a:hover {
  color: var(--accent);
}

.footer-social svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.footer-social a:hover svg {
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid var(--border-light-on-dark);
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-bottom p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  color: var(--text-muted-light);
  letter-spacing: 0.08em;
}

/* Desktop: footer in one row */
@media (min-width: 768px) {
  .footer-compact {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }

  .footer-brand {
    flex: 1;
  }

  .footer-nav {
    flex-direction: column;
    gap: 8px;
  }

  .footer-social {
    min-width: 180px;
  }
}


/* ============================================================
   17. ANIMATIONS
   ============================================================ */

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Keyframe: Fade in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframe: Grain animation */
@keyframes grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -2%); }
  20% { transform: translate(2%, 2%); }
  30% { transform: translate(-1%, 3%); }
  40% { transform: translate(3%, -1%); }
  50% { transform: translate(-3%, 1%); }
  60% { transform: translate(1%, -3%); }
  70% { transform: translate(-2%, 2%); }
  80% { transform: translate(2%, -2%); }
  90% { transform: translate(-1%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Underline hover effect for links */
.underline-hover {
  position: relative;
  display: inline-block;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.underline-hover:hover::after {
  width: 100%;
}


/* ============================================================
   18. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ----- Max-width 480px: Small phones ----- */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(2.25rem, 9vw, 3.5rem);
  }

  .page-header h1 {
    font-size: clamp(2rem, 8.5vw, 3rem);
    word-break: break-word;
  }

  .hero {
    padding-top: 100px;
    padding-bottom: 200px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .scroll-indicator {
    display: none;
  }
}

/* ----- 768px: Tablet ----- */
@media (min-width: 768px) {
  .hero-stats .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----- 1024px: Desktop ----- */
@media (min-width: 1024px) {
  /* Nav shown in section 4 */

  /* Services grid in section 10 */

  /* About grid in section 12 */

  /* Page header padding in section 14 */
}


/* ============================================================
   19. UTILITY CLASSES
   ============================================================ */

.text-center {
  text-align: center;
}

.text-accent {
  color: var(--accent);
}

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

.mt-24 { margin-top: 24px; }
.mt-48 { margin-top: 48px; }

/* Visually hidden — accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Portfolio grid — for non-scroll layout on portfolio page */
.portfolio-grid,
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .portfolio-grid,
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio-grid,
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   20. PREFERS REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body::after {
    animation: none;
  }

  .scroll-indicator::after {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   Mobile cramp fixes (2026-04-09)
   - Hero stats: on small screens, flow naturally under the buttons
     instead of being absolutely positioned and overlapping them.
   - Ensure `.reveal` sections don't stay invisible forever if the
     IntersectionObserver never fires (e.g. no-JS, bot, screenshot tool).
   ============================================================ */

@media (max-width: 767px) {
  .hero {
    padding-bottom: 32px;
  }
  .hero-stats {
    position: static;
    border-top: 1px solid var(--border-light);
    margin-top: 40px;
    padding: 24px 0 0;
  }
  .hero-stats .container {
    gap: 20px;
  }
}

/* Progressive-enhancement fallback: if the user's browser blocks
   IntersectionObserver (or some oddity prevents the `revealed` class
   from being added), make sure reveal sections still fade in via a
   one-shot CSS animation after a short delay. */
@keyframes bwReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal {
  animation: bwReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}
.reveal.revealed {
  animation: none;
}

/* ============================================================
   Video Lightbox (in-page YouTube player)
   ============================================================ */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  animation: vlFade 0.25s ease;
}
.video-lightbox.active { display: flex; }

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

.video-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  /* A 16:9 box sized off the width alone is taller than a phone held
     sideways, so the film ran off both edges of the screen and took the
     close button with it. Cap it by height as well. */
  max-width: min(1100px, calc((100svh - 120px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}

/* Shorts are shot vertical. */
.video-lightbox.is-vertical .video-lightbox-inner {
  aspect-ratio: 9 / 16;
  max-width: min(460px, calc((100svh - 120px) * 9 / 16));
}
.video-lightbox-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.video-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.video-lightbox-yt {
  position: absolute;
  top: -40px;
  left: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.video-lightbox-yt:hover { color: #fff; text-decoration: underline; }

/* On a phone there is no room above the frame for either control, so they
   sit on the film itself. */
@media (max-width: 620px) {
  .video-lightbox-close {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.35);
  }
  .video-lightbox-yt {
    top: auto;
    bottom: -32px;
    left: 2px;
  }
}

/* Play badge overlay on video-enabled project cards */
.project-card[data-video]::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  pointer-events: none;
  opacity: 0.92;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 3;
}
.project-card[data-video]:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 1;
}

/* ============================================================
   Play badge + showreel centering fixes (2026-04-09)
   ============================================================ */

/* .project-card had no position:relative, so the ::after play
   badge I added earlier was escaping the card bounds. Scope the
   badge to the image container which already has position:relative. */
.project-card[data-video]::after {
  content: none;
}
.project-card[data-video] .project-card-image {
  position: relative;
}
.project-card[data-video] .project-card-image::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  z-index: 3;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.95;
  /* Play triangle, drawn with a clip-path so it crisps at any DPI */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><polygon points='8,5 19,12 8,19'/></svg>");
  background-repeat: no-repeat;
  background-position: 56% center;
  background-size: 28px 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.project-card[data-video]:hover .project-card-image::after {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 1;
}

/* Showreel hero: center and size properly on mobile.
   The inline aspect-ratio + min-height: 60vh combo was breaking
   mobile layout because the forced height fought the aspect-ratio. */
@media (max-width: 767px) {
  .showreel-hero {
    display: block;
    margin-top: 68px;
  }
  /* Full-bleed on mobile — no container padding */
  .showreel-hero .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  .showreel-hero .video-placeholder {
    min-height: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  .showreel-hover,
  .showreel-thumb,
  .showreel-player {
    width: 100% !important;
    border-radius: 0 !important;
  }
  /* Reduce gap between reel and hero */
  .hero {
    padding-top: 40px !important;
  }
  /* Clean up nav logo on mobile */
  .nav-logo-img {
    height: 44px;
    border-radius: 6px;
  }
  /* Footer logo — single, no white box */
  .nav-logo-img--footer {
    height: 52px;
    border-radius: 6px;
  }
}

/* Explicit centering on the showreel play-btn across all breakpoints
   — defensive override in case a parent overrides flex. */
.showreel-hero .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.showreel-hero .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Showreel trigger — anchor wraps the placeholder so the whole
   hero is one giant click target that opens the lightbox. */
.showreel-trigger {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.showreel-trigger .video-placeholder {
  position: relative;
}
/* Dark overlay over the thumbnail so the HIGHLIGHT REEL label
   and play button stay legible even over bright frames. */
.showreel-trigger .video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: background 0.35s ease;
}
.showreel-trigger:hover .video-placeholder::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}
/* Label sits absolute top-left, above the gradient overlay. */
.showreel-trigger .video-placeholder > span {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  left: clamp(16px, 3vw, 28px);
  color: #fff;
  letter-spacing: 0.2em;
  z-index: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  text-transform: uppercase;
}

/* Play button: force absolute center on top of the gradient.
   Previous rule accidentally set position:relative via a combined
   selector and broke centering. */
.showreel-trigger .video-placeholder > .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 10vw, 100px);
  height: clamp(64px, 10vw, 100px);
  margin: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.showreel-trigger .video-placeholder > .play-btn svg {
  fill: #fff;
  width: 32px;
  height: 32px;
}
.showreel-trigger:hover .video-placeholder > .play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255, 255, 255, 0.22);
}

/* ============================================================
   Home polish (2026-04-09 pt 2)
   ============================================================ */

/* Featured Projects: horizontal-scroll stays on desktop, but on
   mobile turn it into a 2x2 grid so all 4 videos are visible
   without swiping. Nobody swipes. */
@media (max-width: 767px) {
  .projects-scroll {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .projects-scroll .project-card {
    width: 100% !important;
    min-width: 0;
    flex-shrink: 1;
  }
}

/* Showreel vignette — darker corners, bright center. Makes the
   centered play button feel inevitable. */
.showreel-trigger .video-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.35) 80%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* Location beat — one-line personality between Featured Projects
   and Services. Thin strip, no background heaviness. */
.location-beat {
  padding: 24px 0;
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  text-align: center;
}
.location-beat p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.location-beat .location-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212, 85, 42, 0.15);
  animation: locationPulse 2.4s ease-in-out infinite;
}
@keyframes locationPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.8); opacity: 0.6; }
}
body.light .location-beat {
  background-color: var(--bg-light);
}


/* ============================================================
   21. NAV LOGO IMAGE (Storybox Studios rebrand)
   ============================================================ */

.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 4px;
}

.nav-logo-img--footer {
  height: 64px;
  border-radius: 6px;
}

/* On scrolled nav, slightly smaller */
.nav-scrolled .nav-logo-img {
  height: 42px;
}


/* ============================================================
   22. ABOUT PAGE — PHOTO GALLERY (Storybox Studios)
   ============================================================ */

/* Hero split: big studio portrait left, bio right */
.about-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 70vh;
}

.about-hero-image {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
}

.about-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-hero-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(26,26,26,0.6), transparent);
  pointer-events: none;
}

.about-hero-bio {
  background: var(--bg-dark);
  color: var(--text-light);
  padding: clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-hero-bio .section-subtitle {
  margin-bottom: 16px;
}

.about-hero-bio h1 {
  color: var(--text-light);
  margin-bottom: 32px;
  font-size: clamp(2.5rem, 7vw, 5rem);
}

.about-hero-bio p {
  color: var(--text-muted-light);
  margin-bottom: 16px;
  max-width: 520px;
}

.about-hero-bio p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .about-hero-split {
    grid-template-columns: 1fr 1fr;
    min-height: 85vh;
  }

  .about-hero-image {
    min-height: 0;
  }
}

/* Behind the Lens — asymmetric photo mosaic */
.photo-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 8px;
}

.photo-mosaic-item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.photo-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-mosaic-item:hover img {
  transform: scale(1.04);
}

/* Tall item spans 2 rows */
.photo-mosaic-item--tall {
  grid-row: span 2;
}

/* Wide item spans 2 columns */
.photo-mosaic-item--wide {
  grid-column: span 2;
}

/* Caption overlay on hover */
.photo-mosaic-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.photo-mosaic-item:hover .photo-mosaic-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .photo-mosaic {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .photo-mosaic {
    gap: 16px;
  }
}

/* Section intro text — centered with max-width */
.section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.section-intro h2 {
  margin-bottom: 16px;
}

.section-intro p {
  font-size: 1.0625rem;
}


/* ==========================================================================
   REEL HERO  —  the footage is the hero
   --------------------------------------------------------------------------
   The old hero put a click-to-play thumbnail above a separate white block,
   which gave the page two competing openings and neither one won. Here the
   reel runs silently full-bleed and the type sits on top of it, so the work
   is moving before anyone decides whether to stay.
   ========================================================================== */
.reel-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0E0E0E;
  margin-top: -1px;
}

.reel-hero-media { position: absolute; inset: 0; z-index: 0; }

.reel-hero-poster {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}

/* Cover-fit a 16:9 iframe into any viewport shape. */
.reel-hero-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.reel-hero-frame.is-playing { opacity: 1; }
.reel-hero-frame iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  min-height: 100svh; min-width: 177.78svh;
  border: 0; pointer-events: none;
}

/* Dark from the bottom so the type has a floor to stand on, with a
   softer wash up top to keep the nav legible over bright footage. */
.reel-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 26%, rgba(10,10,10,.22) 52%, rgba(10,10,10,.88) 100%);
}

.reel-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(90px, 12vw, 150px) 0 clamp(72px, 8vw, 104px);
}

.reel-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(.62rem, 1.1vw, .74rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: clamp(20px, 4vw, 40px);
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.24);
}

.reel-hero-copy h1 {
  color: #fff;
  margin: 0 0 clamp(14px, 2vw, 20px);
  text-shadow: 0 6px 40px rgba(0,0,0,.55);
}
.reel-hero-copy .section-subtitle { color: var(--accent, #E06030); }
.reel-hero-copy .hero-subtitle {
  color: rgba(255,255,255,.82);
  max-width: 46ch;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.reel-hero-copy .hero-buttons { margin-top: clamp(22px, 3vw, 32px); }
.reel-hero-copy .btn-secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.reel-hero-copy .btn-secondary:hover { background: #fff; color: #1A1A1A; }

/* Controls sit under the copy, quiet until you want them. */
.reel-hero-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: clamp(30px, 4vw, 46px);
}
.reel-sound, .reel-expand {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(.62rem, 1vw, .72rem);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease;
}
.reel-sound:hover, .reel-expand:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.reel-sound-on { display: none; }
.reel-sound[aria-pressed="true"] .reel-sound-on { display: inline; }
.reel-sound[aria-pressed="true"] .reel-sound-off { display: none; }

.reel-scroll {
  position: absolute; z-index: 2;
  right: clamp(20px, 5vw, 44px); bottom: clamp(28px, 5vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.6); text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.reel-scroll:hover { color: #fff; }
.reel-scroll-line {
  width: 1px; height: 54px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}

.hero-stats-band { background: var(--paper, #FAF7F2); padding: clamp(44px, 6vw, 72px) 0; }


/* ==========================================================================
   WORK BANDS  —  full-bleed frames instead of a card row
   ========================================================================== */
.work-band { padding: clamp(64px, 8vw, 110px) 0 clamp(20px, 4vw, 40px); }
.work-list { margin-top: clamp(36px, 5vw, 60px); }

.work-item + .work-item { margin-top: clamp(14px, 2.4vw, 28px); }

.work-link {
  display: grid;
  grid-template-columns: 1.55fr .8fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: end;
  text-decoration: none;
  padding: 0 clamp(20px, 5vw, 60px);
}
.work-item--flip .work-link { grid-template-columns: .8fr 1.55fr; }
.work-item--flip .work-media { order: 2; }
.work-item--flip .work-meta  { order: 1; text-align: right; }

.work-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.work-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .5s ease, filter .6s ease;
  filter: saturate(.86) contrast(1.03);
}
.work-link:hover .work-media img { transform: scale(1.035); filter: saturate(1) contrast(1.05); }
.work-media.is-playing img { opacity: 0; }

.work-media iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 56.25%;
  min-height: 100%; min-width: 177.78%;
  border: 0; pointer-events: none;
}

.work-play {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .3s ease, transform .3s ease;
}
.work-link:hover .work-play { background: var(--accent, #E06030); border-color: var(--accent, #E06030); transform: scale(1.06); }

.work-meta { padding-bottom: clamp(4px, 1vw, 14px); }
.work-index {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(.62rem, 1vw, .72rem);
  letter-spacing: .2em; color: var(--accent, #E06030);
  margin-bottom: 10px;
}
.work-cat {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(.6rem, .9vw, .68rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 12px;
}
.work-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  line-height: 1.15; color: #fff; margin: 0 0 10px;
}
.work-year {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem; color: rgba(255,255,255,.42);
}

@media (max-width: 860px) {
  .work-link,
  .work-item--flip .work-link { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .work-item--flip .work-media { order: 0; }
  .work-item--flip .work-meta  { order: 0; text-align: left; }
  .work-item + .work-item { margin-top: clamp(28px, 6vw, 44px); }
  .reel-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-hero-frame { display: none !important; }
  .work-media iframe { display: none !important; }
  .work-media.is-playing img { opacity: 1 !important; }
  .work-media img { transition: none !important; transform: none !important; }
}

/* The hero has to be the height of the screen, not taller — otherwise the
   reel is cropped by the fold and the footage never gets to fill anything.
   Type is smaller than the old white hero on purpose: over moving footage
   the image carries the drama, so the words do not have to shout. */
.reel-hero-inner { padding: clamp(78px, 9vw, 112px) 0 clamp(46px, 5vw, 72px); }
.reel-tag { margin-bottom: clamp(14px, 2vw, 24px); }
.reel-hero-copy h1 {
  font-size: clamp(2.3rem, 6vw, 5.3rem);
  line-height: .97;
  letter-spacing: -.01em;
}
.reel-hero-copy .hero-subtitle { margin: clamp(12px, 1.6vw, 18px) 0 0; }
.reel-hero-copy .hero-buttons { margin-top: clamp(18px, 2.4vw, 28px); }
.reel-hero-controls { margin-top: clamp(20px, 2.6vw, 30px); }

/* Final trim so the reel actually fills one screen at common laptop heights. */
.reel-hero-inner { padding: clamp(64px, 7vw, 88px) 0 clamp(40px, 4vw, 56px); }
.reel-tag { margin-bottom: clamp(10px, 1.4vw, 16px); }
.reel-hero-copy h1 { font-size: clamp(2.2rem, 5.4vw, 4.7rem); }
.reel-hero-copy .hero-subtitle { margin: clamp(10px, 1.2vw, 14px) 0 0; }
.reel-hero-copy .hero-buttons { margin-top: clamp(14px, 1.8vw, 20px); }
.reel-hero-controls { margin-top: clamp(14px, 1.8vw, 22px); }

/* On a short window there is not room for both the paragraph and the
   footage. The footage wins — that is the whole point of the page. */
@media (max-height: 780px) and (min-width: 861px) {
  .reel-hero-copy .hero-subtitle { display: none; }
}

/* YouTube paints its own title bar and logo over the first seconds of an
   embed, and modestbranding no longer suppresses them. Overscale the frame
   so that chrome falls outside the crop — the container hides it. */
.reel-hero-frame iframe { transform: translate(-50%, -50%) scale(1.38); }
.work-media iframe      { transform: translate(-50%, -50%) scale(1.42); }

/* The copy sits left, so the scrim leans left too. A flat overlay would
   have to be heavy enough for the brightest frame in the reel and would
   mute the whole image; this keeps the right side of the frame open. */
.reel-hero-scrim {
  background:
    linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.62) 26%, rgba(10,10,10,.18) 52%, rgba(10,10,10,0) 70%),
    linear-gradient(180deg, rgba(10,10,10,.58) 0%, rgba(10,10,10,.10) 24%, rgba(10,10,10,.18) 55%, rgba(10,10,10,.80) 100%);
}

/* On a phone the copy spans the full width, so a left-weighted scrim
   leaves the right-hand end of every line sitting on bare footage.
   Below 860 the gradient goes vertical instead. */
@media (max-width: 860px) {
  .reel-hero-scrim {
    background: linear-gradient(180deg,
      rgba(10,10,10,.58) 0%,
      rgba(10,10,10,.20) 20%,
      rgba(10,10,10,.52) 46%,
      rgba(10,10,10,.88) 100%);
  }
}


/* ==========================================================================
   STILLS  —  a contact sheet, not a grid
   --------------------------------------------------------------------------
   The photographs are a mix of portrait and landscape, shot that way on
   purpose. A uniform grid would crop that decision out of them, so the strip
   fixes the height and lets each frame take the width it actually needs.
   ========================================================================== */
.stills { background: var(--paper, #FAF7F2); padding: clamp(64px, 8vw, 110px) 0 clamp(56px, 7vw, 96px); }

.stills-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent, #E06030); white-space: nowrap;
}

.stills-strip {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(28px, 4vw, 48px);
  padding: 0 clamp(20px, 5vw, 60px) 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,26,26,.25) transparent;
}
.stills-strip::-webkit-scrollbar { height: 6px; }
.stills-strip::-webkit-scrollbar-thumb { background: rgba(26,26,26,.22); }
.stills-strip::-webkit-scrollbar-track { background: transparent; }

.still {
  flex: 0 0 auto;
  height: clamp(240px, 34vw, 420px);
  padding: 0; border: 0; background: #E8E2D8;
  cursor: zoom-in;
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
}
.still img {
  height: 100%; width: auto; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
  filter: saturate(.92);
}
.still:hover img, .still:focus-visible img { transform: scale(1.04); filter: saturate(1.04); }
.still:focus-visible { outline: 2px solid var(--accent, #E06030); outline-offset: 3px; }

/* ---- lightbox ---- */
.still-box {
  /* The nav is z-index 1000 and its hamburger 1001, so a modal has to
     clear both or the close button ends up behind the header. */
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,8,8,.94);
  padding: clamp(16px, 4vw, 56px);
}
.still-box.is-open { display: flex; }
.still-box img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  animation: stillIn .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes stillIn { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }

.still-box-close, .still-box-prev, .still-box-next {
  position: absolute; z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; font-size: 20px; line-height: 1;
  transition: background .25s ease, border-color .25s ease;
}
.still-box-close:hover, .still-box-prev:hover, .still-box-next:hover {
  background: rgba(255,255,255,.2); border-color: #fff;
}
.still-box-close { top: clamp(14px, 3vw, 26px); right: clamp(14px, 3vw, 26px); }
.still-box-prev  { left: clamp(10px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.still-box-next  { right: clamp(10px, 2vw, 24px); top: 50%; transform: translateY(-50%); }

.still-box-count {
  position: absolute; bottom: clamp(14px, 3vw, 26px); left: 50%;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem; letter-spacing: .18em; color: rgba(255,255,255,.65);
}

@media (max-width: 620px) {
  .still-box-prev, .still-box-next { width: 40px; height: 40px; }
}

/* Services became five cards, so they need to wrap rather than sit in a
   fixed two-up that leaves an orphan on the end. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 28vw, 320px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
a.service-card { text-decoration: none; display: block; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
a.service-card:hover { transform: translateY(-4px); }
a.service-card h3 { transition: color .3s ease; }
a.service-card:hover h3 { color: var(--accent, #E06030); }

@media (prefers-reduced-motion: reduce) {
  .still img, a.service-card { transition: none !important; transform: none !important; }
  .still-box img { animation: none !important; }
}

/* The nav is fixed, so an anchor jump parks the target underneath it and
   clips the heading. Reserve its height on anything that can be linked to. */
section[id], [id^="featured"], #stills, #top {
  scroll-margin-top: clamp(72px, 9vw, 96px);
}