/* ==========================================================================
   SHUTTERCRAFT STUDIOS — LUXURY MINIMALIST DARK THEME & CMS ENGINE
   Inspired by Spring Studios (Header + Scroll Stack) & Brabben House (Hero)
   Mobile Priority & Architectural Typography
   ========================================================================== */

@font-face {
  font-family: 'Nolan';
  src: url('fonts/Nolan-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nolan';
  src: url('fonts/Nolan-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nolan';
  src: url('fonts/Nolan-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nolan';
  src: url('fonts/Nolan-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nolan';
  src: url('fonts/Nolan-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Palette — Black & Grey Minimal Luxury */
  --bg-dark: #070707;
  --bg-surface: #121212;
  --bg-elevated: #1a1a1a;
  --bg-card: #202022;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.22);
  
  --text-main: #f5f5f7;
  --text-muted: #8e8e93;
  --text-dim: #545458;
  
  --accent-silver: #d1d1d6;
  --accent-white: #ffffff;
  --edit-accent: #3b82f6;
  --edit-danger: #ef4444;

  /* Typography Stack */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Nolan', 'Syne', 'Plus Jakarta Sans', sans-serif;
  
  /* Layout Spacing */
  --header-height: 70px;
  --container-max: 1400px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  /* Animations */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s var(--ease-out-expo);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  background-color: var(--bg-dark);
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.85;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  touch-action: manipulation;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* UTILITY CLASSES */
.section-padding {
  padding: clamp(3.5rem, 8vw, 8rem) 0;
}

.border-bottom {
  border-bottom: 1px solid var(--border-subtle);
}

.border-top {
  border-top: 1px solid var(--border-subtle);
}

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

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 3.5rem; }
.mb-8 { margin-bottom: 5.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

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

.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.body-large {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-main);
  line-height: 1.7;
  font-weight: 300;
}

.body-medium {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* PROJECT DETAIL / CASE STUDY PAGES
   Scoped to the project template only (modal-project-header /
   modal-project-content are unique to buildProjectContentHTML), so the
   rest of the site's typography is untouched. Body copy is bumped ~2pt
   for readability, and the eyebrow/title/client line gets more of a
   hierarchy instead of all sitting at a similar weight. */
.modal-project-header .card-category {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.modal-project-header .section-title {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
}

.modal-project-header .card-client {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.modal-project-content .section-tag {
  font-size: 0.85rem;
}

.modal-project-content .body-large {
  font-size: clamp(1.175rem, 2.2vw, 1.375rem);
  line-height: 1.75;
}

.modal-project-content .body-medium {
  font-size: 1.075rem;
  line-height: 1.65;
}

/* Landscape banner image after the project brief — breaks out to full
   viewport width edge-to-edge, with extra breathing room before the
   Challenge/Approach section that follows it. Scoped to the standalone
   project page only, since the Work-page modal is a fixed-width overlay
   that a full-bleed image would spill out of. */
#project-detail-content .modal-project-media--banner {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 4rem;
  padding: 0 2.5rem;
}

#project-detail-content .modal-project-media--banner img {
  width: 100%;
  display: block;
}

/* BUTTONS */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  background-color: var(--text-main);
  color: var(--bg-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  min-height: 48px;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

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

.btn-pill {
  border-radius: 999px;
  padding: 1rem 2.2rem;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--border-strong);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  min-height: 48px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.05);
  opacity: 1;
}

.btn-full {
  width: 100%;
}

.btn-text-link {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-main);
  text-transform: uppercase;
  padding: 0.5rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.btn-text-link:hover {
  border-bottom-color: var(--text-main);
}

.link-arrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-main);
  text-transform: uppercase;
}

.link-underline {
  border-bottom: 1px solid var(--border-strong);
}

.link-underline:hover {
  border-bottom-color: var(--text-main);
}


/* ==========================================================================
   HEADER (Spring Studios Inspired)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-medium), backdrop-filter var(--transition-medium), border-color var(--transition-medium);
}

.site-header.header-scrolled {
  background-color: rgba(7, 7, 7, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.header-inner .brand-logo {
  justify-self: start;
}

.header-inner .main-nav {
  justify-self: center;
}

.header-inner .header-actions {
  justify-self: end;
}

.brand-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-bold {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--text-main);
}

.logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--text-muted);
  margin-top: 2px;
}

.main-nav .nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2.5rem;
}

.main-nav .nav-list li {
  display: flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
  position: relative;
  padding: 0.5rem 0;
}

.nav-link.active,
.nav-link:hover {
  color: var(--text-main);
  opacity: 1;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--text-main);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
}

.hamburger-bar {
  width: 22px;
  height: 2px;
  background-color: var(--text-main);
  transition: transform var(--transition-fast);
}

/* Mobile Drawer Nav */
.mobile-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height));
  background-color: var(--bg-dark);
  z-index: 999;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.mobile-drawer.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer-inner {
  padding: 2.5rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.25rem 0;
}

.mobile-nav-link.active,
.mobile-nav-link:hover {
  color: var(--text-main);
}

.mobile-drawer-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

.mobile-contact-line {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.mobile-socials {
  display: flex;
  gap: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}


/* ==========================================================================
   PAGE ROUTER SYSTEM
   ========================================================================== */
.app-page {
  display: none;
  min-height: 100vh;
  padding-top: var(--header-height);
}

/* Home page is the exception: the header floats transparently over the
   showreel instead of sitting above it, so it needs no top offset here. */
#page-home {
  padding-top: 0;
}

#page-home .hero-section--split {
  min-height: 100vh;
}

.app-page.active-page {
  display: block;
  animation: fadeIn 0.4s var(--ease-out-expo);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal utility — sections fade/rise into place as they enter view */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   HERO BANNER & CAROUSEL (Mobile Optimized)
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow: hidden;
}

/* SPLIT HERO — two panels (solid color + uncropped image), inspired by the
   NoMadS reference: a bold split composition with the title overlapping
   both halves rather than a single full-bleed cropped background. */
.hero-section--split {
  padding: 0;
  align-items: stretch;
}

.hero-split-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
}

.hero-split-panel--color {
  left: 0;
  background-color: var(--bg-elevated);
  z-index: 1;
}

.hero-split-panel--image {
  right: 0;
  width: 50%;
  background-color: var(--bg-surface);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
}

/* No cropping — the full image is always visible, contained within its panel */
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.9) contrast(1.05);
}

.hero-video {
  animation: none;
}

.hero-overlay {
  display: none; /* not used in the split layout — panels handle contrast on their own */
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  text-align: center;
  width: 100%;
}

/* In the split layout the title sits centered, straddling the seam between
   the two panels, echoing the oversized overlapping wordmark in the
   reference composition. */
.hero-content--split {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  width: 100%;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  z-index: 3;
}

.hero-meta-tag {
  font-size: clamp(0.65rem, 2vw, 0.75rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 1rem;
  word-wrap: break-word;
}

.hero-title--split {
  font-size: clamp(2.75rem, 10vw, 7rem);
  line-height: 0.95;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

.hero-subtext {
  font-size: clamp(0.75rem, 3vw, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--accent-silver);
  font-weight: 600;
  text-transform: uppercase;
  max-width: 680px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Carousel Controls */
.carousel-controls {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.carousel-indicator {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid transparent;
  min-width: 36px;
  min-height: 36px;

  transition: all var(--transition-fast);
}

.carousel-indicator.active,
.carousel-indicator:hover {
  color: var(--text-main);
  border-bottom-color: var(--text-main);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.6;
}

.scroll-text {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, var(--text-main) 0%, transparent 100%);
  animation: pulseLine 2s infinite;
}

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


/* ==========================================================================
   STATEMENT & MISSION SECTION
   ========================================================================== */
.section-statement {
  padding: clamp(4rem, 8vw, 6rem) 0;
  text-align: center;
  background-color: var(--bg-dark);
}

.statement-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.statement-heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--text-main);
  max-width: 950px;
  margin: 0 auto 1.25rem;
}

.statement-heading--large {
  font-size: clamp(1.8rem, 5.5vw, 2.8rem);
  max-width: 1100px;
}

.statement-subtext {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--text-muted);
  font-weight: 300;
  max-width: 750px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ==========================================================================
   SCROLL STACK SHOWCASE (Mobile Touch & Stacking Optimized)
   ========================================================================== */
.scroll-stack-wrapper {
  position: relative;
  margin-top: 2rem;
  /* Break out of the parent .container's max-width so cards run edge-to-edge,
     regardless of how narrow or wide the container itself is */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
}

/* Home page cards go fully edge-to-edge (no side gutter, no gap between cards) */
#home-stack-wrapper {
  margin-top: 0;
  padding: 0;
}

#home-stack-container {
  gap: 0;
}

.scroll-stack-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.stack-card {
  position: sticky;
  top: 90px;
  z-index: 1;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  transform-origin: center top;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* FULL-BLEED HOME CARD — full-viewport image/title, no split panel */
.stack-card--full {
  display: block;
  top: 0;
  height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.full-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* Compensates for placeholder stock photos that are naturally darker/moodier
   than the rest of the set, so they don't stand out as visually inconsistent
   until swapped for real project photography. */
.full-card-img--bright {
  filter: brightness(1.3) saturate(1.15);
}

.stack-card--full:hover .full-card-img {
  transform: scale(1.04);
}

.full-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.full-card-category {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-50%);
  font-family: var(--font-primary);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  max-width: 260px;
  text-align: right;
  line-height: 1.4;
  transition: opacity 0.3s ease;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.90em;
}

.full-card-category li {
  display: block;
}

.full-card-title {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: #fff;
  text-transform: none;
  margin: 0;
  max-width: 32ch;
  transition: opacity 0.3s ease;
}

.stack-card-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  height: 480px;
}

.stack-card-media {
  position: relative;
  overflow: hidden;
  background-color: #000;
  min-height: 250px;
}

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

.stack-card-info {
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #18181a 0%, #111112 100%);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.card-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-client {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--accent-silver);
  font-weight: 600;
}

.card-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ==========================================================================
   WORK PAGE 2-COLUMN GRID
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.5rem;
}

.work-grid-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-medium), border-color var(--transition-fast), box-shadow var(--transition-medium);
}

.work-grid-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.work-grid-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #000;
}

.work-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.work-grid-card:hover .work-grid-img {
  transform: scale(1.04);
}

.work-grid-info {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.work-grid-category {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.work-grid-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.work-grid-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.work-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
  margin-top: auto;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.work-grid-client {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-silver);
  font-weight: 600;
}

@media (max-width: 860px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}



/* ==========================================================================
   SERVICES GRID & CLIENTS
   ========================================================================== */
.section-header-center {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 3rem;
}

/* CLIENT LOGO MARQUEE — two rows of logos running on one continuous white
   banner, edges fading to transparent so it blends into the dark page. */
.client-marquee-band {
  position: relative;
  margin-top: 2rem;
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: 2.25rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.client-marquee {
  overflow: hidden;
}

.client-marquee + .client-marquee {
  margin-top: 1.25rem;
}

.client-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 3rem;
  animation: clientMarqueeScroll 28s linear infinite;
}

.client-marquee-track--reverse {
  animation-name: clientMarqueeScrollReverse;
  animation-duration: 32s;
}

.client-marquee-band:hover .client-marquee-track {
  animation-play-state: paused;
}

@keyframes clientMarqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* track is duplicated via JS, so -50% = one full loop */
}

@keyframes clientMarqueeScrollReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.client-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95px;
  padding: 0 0.5rem;
  transition: transform var(--transition-fast);
}

.client-logo-item:hover {
  transform: translateY(-3px);
}

.client-logo-img {
  max-width: 230px;
  max-height: 92px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* ==========================================================================
   ABOUT PAGE COMPONENTS
   ========================================================================== */
.page-header {
  padding: 4rem 0 3rem;
  background-color: var(--bg-surface);
}

/* About page — split hero with image panel and a faint founding-year watermark */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0 0;
}

.about-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.about-hero-media {
  position: relative;
}

.about-hero-img {
  width: 100%;
  height: clamp(240px, 30vw, 400px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  transform: translateY(-1.5rem);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

.about-hero-year {
  position: absolute;
  top: 46%;
  right: clamp(1rem, 4vw, 3rem);
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 10rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .about-hero-img {
    transform: none;
  }

  .about-hero-year {
    display: none;
  }
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  max-width: 900px;
  margin-bottom: 1.25rem;
}

.page-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 700px;
  font-weight: 300;
}

/* About page — scannable stat row breaking up the surrounding prose */
.about-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin: clamp(2.5rem, 6vw, 3.5rem) 0;
  padding: clamp(1.75rem, 4vw, 2.25rem) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.about-stat {
  flex: 1 1 150px;
}

.about-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.about-stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  max-width: 15ch;
}

.about-who-footnote {
  max-width: 640px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.value-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease-out-expo), border-color 0.3s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.value-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #18181a 0%, #101011 100%);
}

.value-card--tall {
  grid-column: span 1;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.value-card--wide {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  .value-card--featured,
  .value-card--tall,
  .value-card--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.value-num {
  position: absolute;
  top: -0.35em;
  right: 0.6rem;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.value-idx {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 1.25rem;
}

.value-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.value-text {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.team-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  transition: border-color 0.3s ease;
}

.team-card:hover {
  border-color: var(--border-strong);
}

.team-media {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  position: relative;
}

.team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.01);
  transition: filter 0.5s ease, transform 0.6s var(--ease-out-expo);
}

.team-card:hover .team-img {
  filter: grayscale(0);
  transform: scale(1.05);
}

.team-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 0.75rem;
}

.team-bio {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.space-gallery--split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
}

.space-gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.space-gallery-item .space-gallery-img {
  width: 100%;
  height: clamp(280px, 50vh, 540px);
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.space-gallery-item:hover .space-gallery-img {
  transform: scale(1.03);
}

.space-gallery-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Edge-to-edge showreel — only when the viewport is in landscape orientation.
   In portrait, the split layout (color panel + contained video) is kept. */
@media (orientation: landscape) {
  .hero-split-panel--color {
    display: none;
  }

  .hero-split-panel--image {
    width: 100%;
    left: 0;
    right: 0;
  }

  .hero-split-panel--image .hero-image {
    object-fit: cover;
    filter: brightness(0.9) contrast(1.05);
  }
}

@media (max-width: 768px) {
  .space-gallery--split {
    grid-template-columns: 1fr;
  }

  .space-gallery-item .space-gallery-img {
    height: 260px;
  }

  /* Stack the hero's two panels vertically instead of squeezing them side by side */
  .hero-split-panel {
    width: 100%;
    height: 50%;
    left: 0;
    right: 0;
  }

  .hero-split-panel--color {
    top: 0;
    bottom: auto;
  }

  .hero-split-panel--image {
    top: 50%;
    bottom: 0;
  }

  .hero-title--split {
    font-size: clamp(2rem, 11vw, 3.5rem);
  }
}


/* ==========================================================================
   CONTACT PAGE & FORM
   ========================================================================== */
.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.contact-value {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-main);
}

.social-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-link {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-main);
}

.contact-map-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 1rem;
}

.map-header {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.map-graphic {
  height: 180px;
  background: radial-gradient(circle at center, #1c1c1e 0%, #0d0d0e 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-pin {
  width: 12px;
  height: 12px;
  background-color: var(--text-main);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15), 0 0 15px #fff;
  animation: pulsePin 2s infinite;
}

.contact-form {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-md);
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--text-main);
}

.form-feedback {
  margin-top: 1rem;
  font-size: 0.8rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  display: none;
}

.form-feedback.success {
  display: block;
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.vacancies-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.vacancy-item {
  padding: 1.25rem;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vacancy-role {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.vacancy-type {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}


/* ==========================================================================
   MODAL OVERLAYS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* Project modal — extra image gallery grid */
/* Masonry gallery — every photo keeps its own natural size/aspect ratio,
   nothing is ever cropped. Uneven column heights happen naturally because
   real photos aren't all the same shape, which is what makes it feel
   "interesting" without forcing any image into an artificial box. */
.modal-project-gallery {
  columns: 3;
  column-gap: 0.85rem;
}

/* Sin City gets its own 2-column masonry so each image has more room to
   breathe — same "never crop, keep natural aspect ratio" rules as the
   default gallery, just fewer, wider columns. */
.modal-project-gallery--sincity {
  columns: 2;
  column-gap: 4rem;
}

.modal-project-gallery--sincity .modal-gallery-img {
  margin-bottom: 4rem;
}

.modal-project-gallery--sincity .gallery-media-item {
  margin-bottom: 4rem;
}

.modal-gallery-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.85rem;
  border-radius: 8px;
  break-inside: avoid;
  transition: transform var(--transition-fast);
}

.modal-gallery-img:hover {
  transform: scale(1.02);
}

@media (max-width: 900px) {
  .modal-project-gallery {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .modal-project-gallery {
    columns: 1;
  }

  .client-logo-item {
    height: 100px;
    padding: 0.5rem 0.75rem;
  }

  .client-logo-img {
    max-width: 195px;
    max-height: 90px;
  }

  .client-marquee-track {
    animation-duration: 18s; /* faster loop on narrow screens so it doesn't feel sluggish */
  }

  .modal-project-video:not(.modal-project-video--vertical) {
    width: 90%;
    max-width: 90%;
    padding-top: 50.625%; /* 90% width × 56.25% keeps the same 16:9 ratio at the larger mobile size */
  }
}

/* Project modal — embedded video */
.modal-project-video {
  position: relative;
  width: 55%;
  max-width: 55%;
  margin: 0 auto;
  padding-top: 30.9375%; /* 55% width × 56.25% (16:9) keeps the aspect ratio correct at this size */
  border-radius: 8px;
  overflow: hidden;
}

.modal-project-video iframe,
.modal-project-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

/* Vertical (portrait) video — size the box to the video's own aspect ratio
   instead of forcing a guessed 9:16 shape, so there's no extra letterboxing. */
.modal-project-video.modal-project-video--vertical {
  position: static;
  display: flex;
  justify-content: center;
  padding-top: 0;
  background: #000;
}

.modal-project-video.modal-project-video--vertical video {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}

/* Challenge + Approach shown side by side when both are present */
.project-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* Challenge / Approach headings get a whiter, higher-contrast color to
   stand out against the rest of the (muted) section labels. */
.project-two-col .section-tag {
  color: #ffffff;
}

/* Case-study film breakdown (Van Heusen "Unicorn" three-part narrative) */
.project-films-list {
  display: grid;
  gap: 1.5rem;
}

.project-film-entry {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 1.25rem;
}

.project-film-entry .film-no {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  opacity: 0.55;
  margin-bottom: 0.35rem;
}

.project-film-entry .film-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* Video tiles inside the unified media gallery — sit alongside images in
   the same masonry flow instead of a separate section. */
.gallery-media-item {
  width: 100%;
  display: block;
  margin-bottom: 0.85rem;
  break-inside: avoid;
}

.modal-gallery-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background-color: #000;
}

.gallery-media-caption {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .project-two-col {
    grid-template-columns: 1fr;
  }

  .project-film {
    grid-template-columns: 1fr;
  }
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.6rem;
  color: var(--text-muted);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.modal-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}



/* ==========================================================================
   LIGHTBOX FULLSCREEN IMAGE VIEWER
   ========================================================================== */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2.2rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100001;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.lightbox-img-container {
  width: 90vw;
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  border-radius: var(--radius-sm);
}

.modal-gallery-img,
.space-gallery-img,
.about-hero-img,
.work-grid-img,
.full-card-img,
.card-img {
  cursor: pointer;
}

/* ==========================================================================
   GLOBAL FOOTER
   ========================================================================== */
.site-footer {
  padding: clamp(3.5rem, 8vw, 6rem) 0 2.5rem;
  background-color: #040404;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.footer-heading {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-main);
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.8rem;
}

.footer-text {
  font-size: 0.8rem;
  line-height: 1.7;
}

.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}


/* ==========================================================================
   COMPREHENSIVE RESPONSIVE BREAKPOINTS (Mobile Phone Priority)
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-2col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .stack-card-inner {
    grid-template-columns: 1fr;
    height: auto;
  }

  .values-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .grid-4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
  }

  .stack-card {
    top: 75px;
  }

  .stack-card-media {
    min-height: 220px;
    max-height: 320px;
  }

  .stack-card-info {
    padding: 1.5rem;
  }

  .grid-4col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
}

/* ==========================================================================
   ABOUT PAGE EDITORIAL LAYOUT & MINIMAL AMBIENT VENN
   ========================================================================== */

.about-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.about-watermark {
  position: absolute;
  top: 50%;
  right: -2%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 16rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.about-hero-grid {
  position: relative;
  z-index: 1;
}

/* Integrated Stat Row */
.about-hero-stats {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
}

.stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background-color: var(--border-subtle);
}

/* Editorial Media Frame */
.hero-media-wrapper {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: #121214;
}

.about-hero-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo), filter 0.5s ease;
  filter: brightness(0.92) contrast(1.05);
}

.hero-media-wrapper:hover .about-hero-img {
  transform: scale(1.03);
  filter: brightness(1) contrast(1.08);
}

.media-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.6rem 1rem;
  background: rgba(7, 7, 7, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

.caption-fig {
  font-weight: 800;
  color: var(--text-main);
}

.caption-text {
  color: var(--text-muted);
  text-transform: uppercase;
}

/* 3-Column Minimal Discipline Grid */
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
}

.discipline-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.discipline-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.discipline-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-main);
}

.discipline-sub {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 300;
}

/* Minimal Ambient SVG Venn Diagram */
.section-who-we-are {
  position: relative;
  background-color: var(--bg-dark);
}

.venn-diagram-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.venn-diagram-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.venn-center-glow {
  animation: pulseCenterGlow 5s ease-in-out infinite alternate;
}

@keyframes pulseCenterGlow {
  0% { opacity: 0.3; transform: scale(0.95); transform-origin: 220px 205px; }
  100% { opacity: 0.7; transform: scale(1.1); transform-origin: 220px 205px; }
}

.venn-orbit-rotator {
  animation: spinOrbit 35s linear infinite;
  transform-origin: 220px 205px;
}

.venn-aperture-rotator {
  animation: spinAperture 22s linear infinite reverse;
  transform-origin: 220px 205px;
}

@keyframes spinOrbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spinAperture {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Smooth continuous floating drift */
.venn-float-1 { animation: floatNode1 7s ease-in-out infinite alternate; }
.venn-float-2 { animation: floatNode2 8s ease-in-out infinite alternate; }
.venn-float-3 { animation: floatNode3 7.5s ease-in-out infinite alternate; }

@keyframes floatNode1 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, -6px); }
}

@keyframes floatNode2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-5px, 5px); }
}

@keyframes floatNode3 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(5px, 5px); }
}

/* Minimal Hover Glow for Circles */
.venn-circle-group {
  cursor: pointer;
}

.venn-circle {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.2;
  transition: fill 0.4s ease, stroke 0.4s ease, stroke-width 0.4s ease;
}

.venn-circle-group:hover .venn-circle {
  fill: rgba(255, 255, 255, 0.12);
  stroke: #ffffff;
  stroke-width: 2;
}

.venn-text-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  fill: #ffffff;
  pointer-events: none;
}

.venn-text-sub {
  font-family: var(--font-primary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  transition: fill 0.3s ease;
}

.venn-circle-group:hover .venn-text-sub {
  fill: #ffffff;
}

.venn-logo-bg {
  fill: #0d0d0f;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
  transition: stroke 0.3s ease, fill 0.3s ease;
}

.venn-center-logo:hover .venn-logo-bg {
  stroke: #ffffff;
  fill: #18181c;
}

@media (max-width: 768px) {
  .discipline-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-hero-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .stat-divider {
    display: none;
  }
}

/* ==========================================================================
   MILK AGENCY INSPIRED VALUES (IMAGE HOVER TRANSITION CARDS)
   ========================================================================== */
.values-header .page-title--serif {
  font-family: 'Plus Jakarta Sans', var(--font-primary), serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-top: 0.5rem;
}

.milk-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.milk-card {
  position: relative;
  min-height: 440px;
  background-color: #1a1a1c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.4s ease;
}

.milk-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* Background image media container - hidden by default, transitions in on hover */
.milk-card-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.milk-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.7s var(--ease-out-expo);
  filter: brightness(0.85) contrast(1.05);
}

.milk-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.85) 100%);
  transition: opacity 0.4s ease;
}

.milk-card:hover .milk-card-media {
  opacity: 1;
}

.milk-card:hover .milk-card-img {
  transform: scale(1);
}

/* Foreground content over card */
.milk-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.milk-card-top {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.milk-card-num {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.milk-card-headline {
  font-family: 'Plus Jakarta Sans', var(--font-primary), serif;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
}

/* Milk Agency Underline Effect on Keyword */
.milk-underline {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 400;
}

.milk-underline::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease, height 0.3s ease;
}

.milk-card:hover .milk-underline::after {
  background-color: #ffffff;
  height: 2px;
}

.milk-card-body {
  font-size: clamp(0.88rem, 1.5vw, 0.95rem);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
  transition: color 0.3s ease;
}

.milk-card:hover .milk-card-body {
  color: #ffffff;
}

@media (max-width: 1200px) {
  .milk-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .milk-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .milk-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .milk-card {
    min-height: 360px;
  }
}

/* ==========================================================================
   MILK AGENCY HORIZONTAL LEADERSHIP ACCORDION LAYOUT
   ========================================================================== */
.leadership-header .page-title--serif {
  font-family: 'Plus Jakarta Sans', var(--font-primary), serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-top: 0.5rem;
}

.milk-lead-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
  margin-top: 2rem;
}

.milk-lead-row {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  background-color: transparent;
  cursor: pointer;
  padding: 1.5rem 1rem;
  transition: background-color 0.4s ease, padding 0.4s var(--ease-out-expo);
}

.milk-lead-row:hover,
.milk-lead-row.is-active {
  background-color: rgba(255, 255, 255, 0.04);
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.milk-lead-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 240px;
  align-items: flex-start;
  gap: 2rem;
}

.milk-lead-col-name {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.milk-lead-name {
  font-family: 'Plus Jakarta Sans', var(--font-primary), serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
  transition: color 0.3s ease;
}

.milk-lead-row:hover .milk-lead-name {
  color: var(--accent-white);
}

.milk-lead-bio {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
  max-width: 480px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out-expo), opacity 0.4s ease, margin-top 0.4s ease;
}

.milk-lead-row:hover .milk-lead-bio,
.milk-lead-row.is-active .milk-lead-bio {
  max-height: 120px;
  opacity: 1;
  margin-top: 0.5rem;
}

.milk-lead-col-role {
  padding-top: 0.5rem;
}

.milk-lead-role {
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.01em;
}

.milk-lead-col-media {
  justify-self: end;
  width: 100%;
  max-width: 240px;
}

.milk-lead-photo-crop {
  position: relative;
  width: 100%;
  height: 65px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #141416;
  transition: height 0.5s var(--ease-out-expo), box-shadow 0.4s ease;
}

.milk-lead-row:hover .milk-lead-photo-crop,
.milk-lead-row.is-active .milk-lead-photo-crop {
  height: 250px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.milk-lead-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(100%) contrast(1.05) brightness(0.9);
  transition: filter 0.5s ease, transform 0.6s var(--ease-out-expo);
}

.milk-lead-row:hover .milk-lead-img,
.milk-lead-row.is-active .milk-lead-img {
  filter: grayscale(0%) contrast(1) brightness(1);
  transform: scale(1.03);
}

@media (max-width: 900px) {
  .milk-lead-main {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .milk-lead-col-media {
    grid-column: span 2;
    justify-self: start;
    max-width: 100%;
  }
  .milk-lead-photo-crop {
    height: 90px;
  }
  .milk-lead-row:hover .milk-lead-photo-crop {
    height: 220px;
  }
}

@media (max-width: 600px) {
  .milk-lead-main {
    grid-template-columns: 1fr;
  }
  .milk-lead-col-media {
    grid-column: span 1;
  }
  .milk-lead-bio {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.5rem;
  }
  .milk-lead-photo-crop {
    height: 180px;
  }
}