/* ============================================================
   Full Lock Media — Main Stylesheet
   ============================================================ */

/* ─── Custom Properties ──────────────────────────────────── */
:root {
  /*
   * Historical brand palette (from style guide PDF — previous site).
   * Kept here as reference; not applied as the active design system.
   * --flm-green:       #2f403b;
   * --flm-pink:        #ce9e9b;
   * --flm-offwhite:    #fffaf4;
   * --flm-green-light: #7E948E;
   * --flm-orange:      #DB7812;
   */

  /* Active design palette — editorial/magazine build */
  --color-bg-dark:        #0a0a0a;
  --color-bg-light:       #f5f2ec;
  --color-text-light:     #f5f2ec;
  --color-text-dark:      #1a1a1a;
  --color-muted-light:    rgba(255, 255, 255, 0.5);
  --color-muted-dark:     rgba(0, 0, 0, 0.5);
  --color-placeholder:    #222222;

  /* Semantic accent colors adapt to dark/light backgrounds */
  --accent-pink-on-dark:  #d9a19d;
  --accent-green-on-dark: #96aaa2;
  --accent-pink-on-light: #b67672;
  --accent-green-on-light:#647770;
  --accent-pink-current:  var(--accent-pink-on-dark);
  --accent-green-current: var(--accent-green-on-dark);

  --color-accent:         var(--accent-green-current);
  --color-accent-soft:    rgba(200, 216, 76, 0.6);
  --color-green-light:    var(--accent-green-current);   /* available for supporting use */
  --color-accent-pink:    var(--accent-pink-current);    /* highlighted/emphasized text */
  --color-accent-green:   var(--accent-green-current);   /* secondary UI/support color */
  --color-pink:           var(--accent-pink-current);
  --color-orange:         #DB7812;

  /*
   * Fonts:
   * --font-display  → Rylan Regular (Google Fonts) — logo & hero headlines
   * --font-gothic   → ATSackersGothic — commercial, must be self-hosted in /assets/fonts/
   *                   Falls back to Barlow Condensed (Google Fonts) until files are added
   * --font-sans     → Proxima Nova — commercial, must be self-hosted in /assets/fonts/
   *                   Falls back to Nunito Sans (Google Fonts) until files are added
   * --font-black    → Archivo Black (Google Fonts) — display weight
   */
  --font-display:         'Rylan', Georgia, serif;
  --font-gothic:          'ATSackersGothic', 'Barlow Condensed', sans-serif;
  --font-sans:            'Plus Jakarta Sans', 'Nunito Sans', system-ui, sans-serif;
  --font-black:           'Archivo Black', 'Barlow Condensed', sans-serif;
  --font-handwritten:     'Allura', cursive;
  --font-script:          var(--font-display);

  /* Keep serif alias pointing to display for template compatibility */
  --font-serif:           var(--font-display);

  --max-width:            1400px;
  --gutter:               clamp(1.25rem, 3vw, 2rem);
  --section-pad-y:        clamp(5rem, 10vw, 10rem);

  --radius-btn:           10px;
  --transition-base:      0.3s ease;
}

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

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

body {
  font-family:      var(--font-sans);
  font-size:        1rem;
  line-height:      1.6;
  color:            var(--color-text-light);
  background-color: var(--color-bg-dark);
  overflow-x:       hidden;
}

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

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

ul, ol { list-style: none; }

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

/* ─── Layout Utilities ───────────────────────────────────── */
.container {
  width:     100%;
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

.section {
  padding: var(--section-pad-y) 0;
}

.section--dark  {
  background-color: var(--color-bg-dark);
  color:            var(--color-text-light);
  --accent-pink-current:  var(--accent-pink-on-dark);
  --accent-green-current: var(--accent-green-on-dark);
}
.section--light {
  background-color: var(--color-bg-light);
  color:            var(--color-text-dark);
  --accent-pink-current:  var(--accent-pink-on-light);
  --accent-green-current: var(--accent-green-on-light);
}

.hero,
.site-header,
.site-header.is-scrolled,
.mobile-menu,
.site-footer,
.page-hero,
.profile-hero {
  --accent-pink-current:  var(--accent-pink-on-dark);
  --accent-green-current: var(--accent-green-on-dark);
}

/* ─── Typography ─────────────────────────────────────────── */
.t-hero {
  font-family:    var(--font-serif);
  font-size:      clamp(3.5rem, 8vw, 9rem);
  font-weight:    800;
  line-height:    0.95;
  letter-spacing: -0.02em;
}

.t-section-headline {
  font-family:    var(--font-serif);
  font-size:      clamp(2.25rem, 5vw, 4.5rem);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: -0.02em;
}

.t-section-headline em,
.t-sub-headline em {
  font-style: italic;
  color:      var(--color-accent);
}

.t-sub-headline {
  font-family: var(--font-serif);
  font-size:   clamp(1.25rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.3;
}

.t-body {
  font-family: var(--font-sans);
  font-size:   clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.7;
}

.t-label {
  font-family:    var(--font-sans);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-script {
  font-family:    var(--font-script);
  font-size:      clamp(2rem, 5vw, 4rem);
  font-weight:    400;
  line-height:    1.1;
}

.t-section-number {
  display:        inline-flex;
  align-items:    center;
  gap:            0.6rem;
  font-family:    var(--font-sans);
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--color-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-section-number::after {
  content:    '';
  display:    block;
  width:      2rem;
  height:     1px;
  background: currentColor;
  opacity:    0.45;
}

.section--light .t-section-number { color: var(--color-muted-dark); }

.t-muted-light  { color: var(--color-muted-light); }
.t-muted-dark   { color: var(--color-muted-dark); }
.t-accent       { color: var(--color-accent); }
.t-accent-soft  { color: var(--color-accent-soft); }
.t-green-light  { color: var(--color-green-light); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.75rem 1.75rem;
  border-radius:   var(--radius-btn);
  font-family:     var(--font-sans);
  font-size:       0.8125rem;
  font-weight:     600;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  transition:      background-color var(--transition-base), transform var(--transition-base);
  white-space:     nowrap;
}

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

.btn--accent:hover {
  background-color: var(--color-accent-pink);
  transform:        scale(1.02);
}

.btn--outline {
  border:           1.5px solid var(--color-text-light);
  color:            var(--color-text-light);
}

.btn--outline:hover {
  border-color: var(--color-accent-pink);
  color: var(--color-accent-pink);
  background-color: rgba(206, 158, 155, 0.06);
  transform:        scale(1.02);
}

/* ─── Navigation ─────────────────────────────────────────── */
.site-header {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  z-index:    1000;
  padding:    1.25rem var(--gutter);
  display:    flex;
  align-items:   center;
  justify-content: space-between;
  transition: background-color 0.4s ease, padding 0.4s ease;
}

.site-header.is-scrolled {
  background-color: var(--color-bg-dark);
  padding:          0.875rem var(--gutter);
  border-bottom:    1px solid rgba(255, 255, 255, 0.06);
}

.site-logo {
  font-family:    var(--font-sans);
  font-size:      0.9375rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-text-light);
  display:        inline-flex;
  align-items:    center;
  gap:            0.9rem;
}

/* Thin vertical rule shown on the transparent header, fades on scroll */
.site-logo::after {
  content:    '';
  display:    block;
  width:      1px;
  height:     1.1em;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  transition: opacity 0.4s ease;
}

.site-header.is-scrolled .site-logo::after {
  opacity: 0;
}

.site-logo img { height: 36px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 2.5rem; }

.site-nav__list {
  display:     flex;
  align-items: center;
  gap:         2rem;
}

.site-nav__link {
  font-family:    var(--font-sans);
  font-size:      0.8125rem;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-light);
  transition:     color var(--transition-base);
  position:       relative;
}

.site-nav__link:hover { color: var(--color-accent); }

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

.nav-dropdown {
  position:         absolute;
  top:              100%;
  left:             50%;
  transform:        translateX(-50%) translateY(0.5rem);
  background-color: var(--color-bg-dark);
  border:           1px solid rgba(255, 255, 255, 0.1);
  min-width:        160px;
  padding:          0.5rem 0;
  opacity:          0;
  visibility:       hidden;
  pointer-events:   none;
  z-index:          1001;
  transform-origin: top center;
  transition:       opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateX(-50%) translateY(0);
}

.nav-dropdown__link {
  list-style: none;
}

.nav-dropdown__link > a {
  display:        block;
  padding:        0.5rem 1.25rem;
  font-size:      0.75rem;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-light);
  transition:     color var(--transition-base), background-color var(--transition-base);
}

.nav-dropdown__link > a:hover {
  color:            var(--color-accent);
  background-color: rgba(255, 255, 255, 0.04);
}

/* Hamburger */
.nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  width:          28px;
  padding:        4px 0;
}

.nav-toggle__bar {
  display:          block;
  width:            100%;
  height:           2px;
  background-color: var(--color-text-light);
  transition:       transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.mobile-menu {
  display:          none;
  position:         fixed;
  inset:            0;
  z-index:          999;
  background-color: var(--color-bg-dark);
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              2rem;
}

.mobile-menu.is-open { display: flex; }

.mobile-menu__link {
  font-family:    var(--font-serif);
  font-size:      clamp(2rem, 6vw, 3.5rem);
  font-weight:    700;
  color:          var(--color-text-light);
  transition:     color var(--transition-base);
}

.mobile-menu__link:hover { color: var(--color-accent); }

/* ─── Hero Section ───────────────────────────────────────── */
.hero {
  position:         relative;
  min-height:       100vh;
  background-color: var(--color-bg-dark);
  display:          grid;
  grid-template-rows: 1fr;
  overflow:         hidden;
  padding-top:      5rem; /* nav clearance */
}

.hero__bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.32) 34%, transparent 58%),
    linear-gradient(90deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.22) 46%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.36) 0%, transparent 34%, rgba(0,0,0,0.52) 100%);
}

.hero__bg video,
.hero__bg picture,
.hero__bg img {
  width:       100%;
  height:      100%;
}

.hero__video {
  position: absolute;
  inset:    0;
  z-index:  0;
  object-fit: cover;
  opacity:    0;
  transition: opacity 0.35s ease;
}

.hero.is-video-ready .hero__video {
  opacity: 0.65;
}

.hero__fallback {
  position:       absolute;
  inset:          0;
  opacity:        1;
  pointer-events: none;
  z-index:        0;
  transition: opacity 0.35s ease;
}

.hero.is-video-ready .hero__fallback {
  opacity: 0;
}

.hero__fallback img {
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }

  .hero__fallback {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .hero__video {
    display: none;
  }

  .hero__fallback {
    opacity: 1;
  }
}

.hero__content {
  position:       relative;
  z-index:        1;
  display:        grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    auto 1fr auto;
  gap:            var(--gutter);
  padding:        var(--gutter);
  max-width:      var(--max-width);
  margin:         0 auto;
  width:          100%;
  min-height:     calc(100vh - 5rem);
}

.hero__stat {
  grid-column: 1;
  grid-row:    1;
  align-self:  start;
  display:     inline-grid;
  justify-self: start;
  gap:         0.12rem;
  padding:     0.85rem 1rem 0.9rem;
  border-left: 3px solid var(--color-accent-pink);
  background:  rgba(10, 10, 10, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero__stat-number {
  color:       var(--color-text-light);
  font-family: var(--font-black);
  font-size:   clamp(1.45rem, 2.4vw, 2.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.hero__stat-label,
.hero__stat-note {
  color:       rgba(245, 242, 236, 0.88);
  font-family: var(--font-sans);
  font-size:   0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.hero__stat-note {
  max-width:    17rem;
  margin-top:   0.18rem;
  color:        rgba(245, 242, 236, 0.68);
  font-weight:  600;
  letter-spacing: 0.06em;
  text-transform: none;
}

.hero__descriptor {
  grid-column: 2;
  grid-row:    1;
  align-self:  start;
  text-align:  right;
}

.hero__headline {
  grid-column: 1 / -1;
  grid-row:    2;
  align-self:  center;
  color:       var(--color-text-light);
  max-width:   11ch;
  text-shadow: 0 2px 24px rgba(0,0,0,0.62);
}

.hero__headline .accent-pink,
.hero__headline .accent-green {
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
}

.hero__headline em {
  font-style: italic;
  color:      var(--color-accent);
}

.hero__badge {
  grid-column: 1;
  grid-row:    3;
  align-self:  end;
  padding-bottom: 3rem;
}

.hero__section-num {
  grid-column:  2;
  grid-row:     1;
  text-align:   right;
  align-self:   start;
  justify-self: end;
}

.badge {
  display:          inline-flex;
  align-items:      center;
  gap:              0.38rem;
  padding:          0.64rem 0.9rem;
  background:       rgba(10, 10, 10, 0.62);
  color:            var(--color-text-light);
  border:           1px solid rgba(245,242,236,0.2);
  border-left:      4px solid var(--color-accent-green);
  font-family:      var(--font-sans);
  font-size:        0.75rem;
  font-weight:      700;
  letter-spacing:   0.07em;
  text-transform:   uppercase;
  border-radius:    var(--radius-btn);
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.badge__accent {
  color: var(--color-accent-pink);
}

/* ─── Philosophy Section ─────────────────────────────────── */
.philosophy__inner {
  display:        grid;
  grid-template-columns: 3fr 2fr;
  gap:            clamp(2rem, 6vw, 5rem);
  align-items:    center;
}

.philosophy__headline { margin-bottom: 2rem; }

.philosophy__side {
  padding-bottom: 0.5rem;
  border-left:    1px solid rgba(255, 255, 255, 0.08);
  padding-left:   clamp(1rem, 2vw, 1.5rem);
}

.philosophy__body { margin-bottom: 1.75rem; }

/* ─── Portfolio Grid ─────────────────────────────────────── */
.portfolio-grid__header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   2rem;
}

.portfolio-grid__mosaic {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows:        250px;
  gap:                   10px;
}

/* Mosaic cell size variants */
.mosaic-item:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.mosaic-item:nth-child(2) { grid-column: span 5; grid-row: span 1; }
.mosaic-item:nth-child(3) { grid-column: span 5; grid-row: span 1; }
.mosaic-item:nth-child(4) { grid-column: span 4; grid-row: span 2; }
.mosaic-item:nth-child(5) { grid-column: span 4; grid-row: span 1; }
.mosaic-item:nth-child(6) { grid-column: span 4; grid-row: span 1; }

.mosaic-item {
  position:   relative;
  overflow:   hidden;
  background: var(--color-placeholder);
}

.mosaic-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.mosaic-item__overlay {
  position:         absolute;
  inset:            0;
  background:       linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  opacity:          0;
  transition:       opacity var(--transition-base);
  display:          flex;
  align-items:      flex-end;
  padding:          1.25rem;
}

.mosaic-item:hover .mosaic-item__overlay { opacity: 1; }

.mosaic-item__title {
  color:       var(--color-text-light);
  font-family: var(--font-serif);
  font-size:   1.125rem;
  font-weight: 600;
}

/* ─── Section /03 — A Taste uniform grid (neutralizes asymmetric mosaic) ── */
#work .portfolio-grid__mosaic {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows:        auto;
  align-items:           start;
  gap:                   var(--gutter);
}

#work .mosaic-item,
#work .taste-video-card {
  width:        100%;
  aspect-ratio: 1 / 1;
  min-height:   0;
}

/* Neutralize asymmetric nth-child overrides */
#work .mosaic-item:nth-child(n) {
  grid-column: auto !important;
  grid-row:    auto !important;
}

.taste-video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

@media (max-width: 900px) {
  #work .portfolio-grid__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #work .portfolio-grid__mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows:        auto;
  }
}

/* ─── Services Section ───────────────────────────────────── */
.services__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   var(--gutter);
  align-items:           start;
}

.services__list { padding-top: 1rem; }

.service-name {
  font-family:    var(--font-serif);
  font-size:      clamp(2.5rem, 5vw, 4rem);
  font-weight:    700;
  line-height:    1.05;
  color:          var(--color-text-light);
  padding:        0.25rem 0;
  border-top:     1px solid rgba(255,255,255,0.1);
  display:        flex;
  align-items:    baseline;
  gap:            0.5rem;
  transition:     color var(--transition-base);
}

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

.service-name.is-active,
.service-name--active {
  color: var(--color-accent-pink);
}

.service-name em { font-style: italic; }

/* ─── Accent text utilities ───────────────────────────── */
.accent-pink {
  color: var(--color-accent-pink);
}

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

.services__photo {
  position:   relative;
  width:      100%;
  aspect-ratio: 3/4;
  overflow:   hidden;
  background: var(--color-placeholder);
}

.services__photo::before,
.services__detail::before {
  content:    "";
  position:   absolute;
  top:        0;
  bottom:     0;
  left:       0;
  width:      1px;
  background: rgba(255, 255, 255, 0.08);
}

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

.services__detail {
  position:   relative;
  padding-top: 1rem;
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.services__types {
  margin-bottom: 1.5rem;
  color:         var(--color-muted-light);
  font-size:     0.8125rem;
  letter-spacing: 0.04em;
}

.services__body {
  color:         rgba(245, 242, 236, 0.75);
  margin-bottom: 2rem;
}

/* ─── Featured Project ───────────────────────────────────── */
.featured__header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   3rem;
  padding-bottom:  1rem;
  border-bottom:   1px solid rgba(0,0,0,0.1);
}

.featured__inner {
  display:               grid;
  grid-template-columns: 45fr 55fr;
  gap:                   clamp(2rem, 6vw, 5rem);
  align-items:           center;
}

.featured__headline { margin-bottom: 1.5rem; }

.featured__project-label {
  font-family:    var(--font-sans);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  0.5rem;
}

.featured__desc { margin-bottom: 1.5rem; }

.featured__link {
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          var(--color-text-dark);
  border-bottom:  1.5px solid var(--color-text-dark);
  padding-bottom: 2px;
  transition:     color var(--transition-base), border-color var(--transition-base);
}

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

.featured__visual {
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid rgba(0,0,0,0.12);
}

.featured__image {
  width:        100%;
  aspect-ratio: 16/10;
  overflow:     hidden;
  background:   var(--color-placeholder);
}

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

.featured__watermark {
  position:             absolute;
  bottom:               -3.5rem;
  left:                 -1.5rem;
  font-family:          var(--font-black);
  font-size:            clamp(3rem, 9vw, 7rem);
  font-weight:          900;
  color:                transparent;
  -webkit-text-stroke:  1px rgba(26, 26, 26, 0.16);
  white-space:          nowrap;
  line-height:          1;
  user-select:          none;
  pointer-events:       none;
  transition:           opacity 0.4s ease, transform 0.2s ease-out;
}

.featured__visual.is-playing .featured__watermark {
  opacity:        0;
  pointer-events: none;
}

/* ─── Brand Tabs ───────────────────────────────────────── */
.brand-tabs {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.5rem;
  justify-content: center;
  margin-bottom:   1.75rem;
}

.brand-tab {
  font-family:     var(--font-sans);
  font-size:       0.75rem;
  font-weight:     600;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  padding:         0.5rem 1.125rem;
  border:          1px solid rgba(0, 0, 0, 0.15);
  border-radius:   100px;
  color:           var(--color-text-dark);
  background:      transparent;
  transition:      background-color var(--transition-base),
                   color var(--transition-base),
                   border-color var(--transition-base);
  cursor:          pointer;
}

.brand-tab:hover {
  border-color: var(--color-accent-pink);
  color:        var(--color-accent-pink);
}

.brand-tab.is-active {
  background-color: var(--color-accent-pink);
  border-color:     var(--color-accent-pink);
  color:            var(--color-text-dark);
}

.brand-panel {
  max-width:   700px;
  margin:      0 auto 2rem;
  text-align:  center;
  min-height:  var(--brand-panel-min-height, clamp(7.5rem, 9vw, 10rem));
}

.brand-panel__copy {
  font-family: var(--font-sans);
  font-size:   clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  transition:  opacity 0.3s ease;
}

@media (max-width: 600px) {
  .brand-panel {
    min-height: var(--brand-panel-min-height, 11rem);
  }

  .brand-tabs {
    gap: 0.375rem;
  }
  .brand-tab {
    font-size: 0.6875rem;
    padding:   0.375rem 0.875rem;
  }
}

/* ─── Clients Section ────────────────────────────────────── */
.clients__header {
  display:         flex;
  justify-content: space-between;
  margin-bottom:   2rem;
  position:        relative;
}

.clients__header::after,
.clients__footer::after {
  content:    "";
  position:   absolute;
  left:       50%;
  top:        50%;
  width:      1px;
  height:     1.25rem;
  background: rgba(0,0,0,0.12);
  transform:  translate(-50%, -50%);
}

.clients__photo-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   10px;
  margin-bottom:         2.5rem;
}

.clients__photo-item {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 16/10;
  background:   var(--color-placeholder);
  border:       1px solid rgba(0,0,0,0.12);
  opacity:      1;
  transform:    translateY(0);
  transition:   opacity 0.28s ease, transform 0.28s ease;
}

.clients__photo-item::after {
  content:        "";
  position:       absolute;
  inset:          auto 0 0;
  height:         42%;
  background:     linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.58) 100%);
  pointer-events: none;
}

.clients__photo-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(35%) contrast(1.04);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.clients__photo-caption {
  position:       absolute;
  left:           0.75rem;
  right:          0.75rem;
  bottom:         0.65rem;
  z-index:        1;
  color:          var(--color-text-light);
  font-family:    var(--font-sans);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  line-height:    1.2;
  text-transform: uppercase;
}

.clients__photo-grid.is-swapping .clients__photo-item {
  opacity:   0.32;
  transform: translateY(8px);
}

.clients__photo-grid.has-swapped .clients__photo-item {
  animation: clientsBrandImageSettle 0.45s ease both;
}

.clients__photo-grid.has-swapped .clients__photo-item:nth-child(2) { animation-delay: 0.04s; }
.clients__photo-grid.has-swapped .clients__photo-item:nth-child(3) { animation-delay: 0.08s; }

.clients__photo-item:hover img {
  transform: scale(1.03);
  filter:    grayscale(8%) contrast(1.08);
}

@keyframes clientsBrandImageSettle {
  from {
    opacity:   0.55;
    transform: translateY(10px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.clients__watermark-wrap {
  position:   relative;
  overflow:   hidden;
  margin:     0 calc(-1 * var(--gutter));
  padding:    2rem var(--gutter);
}

.clients__watermark {
  font-family:    var(--font-black);
  font-size:      clamp(6rem, 18vw, 16rem);
  font-weight:    900;
  color:          transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,0.08);
  white-space:    nowrap;
  user-select:    none;
  pointer-events: none;
  line-height:    1;
}

.clients__foreground {
  position: absolute;
  inset:    0;
  display:  flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap:      1rem;
  padding:  2rem var(--gutter);
}

.clients__names {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem 2rem;
  justify-content: center;
}

.client-name {
  font-family:    var(--font-sans);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-dark);
}

.clients__stat { text-align: center; }

.clients__footer {
  display:         flex;
  justify-content: space-between;
  margin-top:      2rem;
  padding-top:     2rem;
  border-top:      1px solid rgba(0,0,0,0.1);
  position:        relative;
}

.clients__statement {
  max-width:   700px;
  margin-top:  3rem;
  border-left: 1px solid rgba(0,0,0,0.12);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.clients__statement p { margin-bottom: 1rem; }

.clients__statement strong { text-decoration: underline; }

/* ─── Collective Preview ─────────────────────────────────── */
.collective-preview__headline { margin-bottom: 3rem; }

.collective-preview__headline em {
  font-style: italic;
  color:      var(--color-accent);
}

.team-scroll {
  display:               grid;
  grid-template-columns: repeat(var(--team-cols, 3), 1fr);
  gap:                   var(--gutter);
  margin-bottom:         3rem;
}

.team-card {
  position:   relative;
  overflow:   hidden;
  background: var(--color-placeholder);
  aspect-ratio: 3/4;
}

.team-card img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.6s ease;
  filter:     grayscale(100%);
}

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

.team-card__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  opacity:    0;
  transition: opacity var(--transition-base);
  display:    flex;
  align-items: flex-end;
  padding:    1.25rem;
}

.team-card:hover .team-card__overlay { opacity: 1; }

.team-card__name {
  color:       var(--color-text-light);
  font-family: var(--font-serif);
  font-size:   1rem;
  font-weight: 600;
}

.team-card__role {
  color:          var(--color-muted-light);
  font-size:      0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── CTA Section ────────────────────────────────────────── */
.cta-section { text-align: center; }

.cta-section__headline { margin-bottom: 1.5rem; }

.cta-section__headline em {
  font-style: italic;
  color:      var(--color-accent);
}

.cta-section__body {
  max-width:     560px;
  margin:        0 auto 2.5rem;
  color:         rgba(245, 242, 236, 0.75);
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-bg-dark);
  padding:          5rem var(--gutter) 0;
  border-top:       1px solid rgba(255,255,255,0.06);
}

.footer__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--gutter);
  padding-bottom:        4rem;
  border-bottom:         1px solid rgba(255,255,255,0.08);
}

.footer__col-title {
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-muted-light);
  margin-bottom:  1.25rem;
}

.footer__links { display: flex; flex-direction: column; gap: 0.625rem; }

.footer__link {
  font-size:   0.875rem;
  color:       rgba(245, 242, 236, 0.65);
  transition:  color var(--transition-base);
}

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

.footer__contact-item {
  font-size:   0.875rem;
  color:       rgba(245, 242, 236, 0.65);
  margin-bottom: 0.5rem;
}

.footer__contact-item a { transition: color var(--transition-base); }
.footer__contact-item a:hover { color: var(--color-accent); }

.footer__brandstamp {
  overflow:    hidden;
  line-height: 0.85;
  padding-top: 1rem;
}

.footer__brandstamp-text {
  font-family:    var(--font-black);
  font-size:      clamp(4rem, 14vw, 13rem);
  font-weight:    900;
  color:          transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12);
  white-space:    nowrap;
  letter-spacing: -0.02em;
  display:        block;
  margin-bottom:  -0.15em;
}

/* ─── Scroll Reveal ──────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.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; }

/* ─── Vimeo Facade ───────────────────────────────────────── */
.vimeo-facade {
  position:   relative;
  overflow:   hidden;
  background: var(--color-placeholder);
  cursor:     pointer;
}

.vimeo-facade img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vimeo-facade:hover img { transform: scale(1.03); }

.vimeo-facade__play {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  width:            64px;
  height:           64px;
  background-color: var(--color-accent);
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       transform var(--transition-base), background-color var(--transition-base);
}

.vimeo-facade:hover .vimeo-facade__play {
  transform:        translate(-50%, -50%) scale(1.08);
  background-color: #d6e85a;
}

.vimeo-facade__play svg {
  width:       22px;
  height:      22px;
  fill:        var(--color-text-dark);
  margin-left: 3px;
}

.vimeo-facade iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}

/* ─── Page Hero (inner pages) ────────────────────────────── */
/* ─── Portfolio Hub category tiles ───────────────────────────────────── */
.portfolio-category-tile {
  display:         block;
  text-decoration: none;
}

.portfolio-category-tile__img {
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  margin-bottom: 1.25rem;
}

.portfolio-category-tile__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-category-tile:hover .portfolio-category-tile__img img {
  transform: scale(1.04);
}

.portfolio-category-tile__label {
  font-size:     clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

/* ─── Page Hero ─────────────────────────────────────────────────────── */
.page-hero {
  min-height:       60vh;
  background-color: var(--color-bg-dark);
  display:          flex;
  align-items:      flex-end;
  padding:          8rem var(--gutter) 4rem;
  position:         relative;
  overflow:         hidden;
}

.page-hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.page-hero__bg img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  opacity:     0.3;
}

/* ─── Rotating hero slideshow (photo page) ──────────────── */
.photo-header-slides {
  position: absolute;
  inset:    0;
  opacity:  0.3;
}

.photo-header-slides img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 1.5s ease;
}

.photo-header-slides img.is-active { opacity: 1; }

.page-hero__content {
  position:  relative;
  z-index:   1;
  max-width: var(--max-width);
  width:     100%;
  margin:    0 auto;
}

.page-hero__title {
  color: var(--color-text-light);
}

.page-hero__content .t-body {
  color: rgba(245, 242, 236, 0.8);
}

/* ─── Story Page ─────────────────────────────────────────── */
.story-block {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 6vw, 5rem);
  align-items:           center;
}

.story-block--reverse { direction: rtl; }
.story-block--reverse > * { direction: ltr; }

.story-block__image {
  width:        100%;
  aspect-ratio: 4/3;
  overflow:     hidden;
  background:   var(--color-placeholder);
}

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

.story-gallery {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   12px;
  margin-top:            3rem;
}

.story-gallery__item {
  position: relative;
  grid-column: span 4;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-placeholder);
}

.story-gallery__item--wide { grid-column: span 8; }
.story-gallery__item--tall { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }

/* Flex-column item: photo at natural 4:3 + mosaic fills remaining cell height */
.story-gallery__item--gapfill {
  aspect-ratio: auto;   /* let CSS Grid stretch fill the row height */
  display:       flex;
  flex-direction: column;
  overflow:      visible; /* children manage their own overflow */
}

.sg-photo {
  position:     relative;
  aspect-ratio: 4/3;
  flex-shrink:  0;       /* photo never compresses */
  overflow:     hidden;
}

.sg-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.45s ease;
  display:    block;
}

.story-gallery__item--gapfill:hover .sg-photo img { transform: scale(1.04); }

/* Mosaic inside a gapfill item grows to consume all remaining vertical space */
.story-gallery__item--gapfill .mosaic-filler {
  flex:         1;
  aspect-ratio: auto;
  min-height:   40px;
}

.story-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.story-gallery__item:hover img { transform: scale(1.04); }

.story-gallery__item figcaption,
.sg-photo figcaption {
  position:    absolute;
  left:        0;
  right:       0;
  bottom:      0;
  padding:     0.75rem 0.9rem;
  color:       var(--color-text-light);
  font-size:   0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-left: 2px solid var(--color-accent);
  background:  linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
}

.timeline { max-width: 800px; }

.timeline__item {
  display:       grid;
  grid-template-columns: 100px 1fr;
  gap:           2rem;
  padding:       2rem 0;
  border-top:    1px solid rgba(0,0,0,0.12);
}

.section--dark .timeline__item { border-top-color: rgba(255,255,255,0.08); }

.timeline__year {
  font-family:    var(--font-serif);
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--color-accent);
  padding-top:    0.25rem;
}

.fun-facts {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   1.5rem;
  margin-top:            2.5rem;
}

.fun-fact {
  padding:      1.5rem;
  border-left:  3px solid var(--color-accent);
  background:   rgba(200, 216, 76, 0.04);
}

/* ─── Photo Portfolio / Lightbox ────────────────────────── */
.photo-archive__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}

.photo-filter {
  padding:        0.4rem 0.75rem;
  border:         none;
  border-bottom:  2px solid transparent;
  background:     transparent;
  color:          rgba(26,26,26,0.55);
  font-family:    var(--font-sans);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius:  0;
  transition:     color 0.2s ease, border-color 0.2s ease;
}

.photo-filter.is-active {
  color:        var(--color-text-dark);
  border-bottom-color: var(--color-accent);
}

.photo-filter:hover {
  color: var(--color-text-dark);
  border-bottom-color: rgba(26,26,26,0.25);
}

.photo-archive__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.photo-card {
  position: relative;
  grid-column: span 4;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--color-placeholder);
  text-align: left;
}

/* Editorial sizing — assigned by JS after each filter so layout is based
   on visible position, not DOM position. nth-child is not used. */
.photo-card--span8  { grid-column: span 8; }
.photo-card--stretch { aspect-ratio: auto; align-self: stretch; }

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

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

.photo-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  color: var(--color-text-light);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
}

.photo-card__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.photo-card__meta {
  font-size:      0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(245,242,236,0.82);
}

.photo-card__meta::before {
  content:      '';
  display:      block;
  width:        1.25rem;
  height:       1px;
  background:   var(--color-accent);
  margin-bottom: 0.35rem;
}

/* ─── Photographer grid overlay ─────────────────────────────
   Used in #unified-photo-gallery on page-photographers.php.
   photo-card handles the image and hover-scale; photo-overlay
   is the name+bio panel that lifts in on hover.              */
#unified-photo-gallery .photo-card {
  aspect-ratio: 3 / 4; /* portrait crop for headshots */
  cursor: pointer;
}

#unified-photo-gallery .photo-card a {
  display:  block;
  width:    100%;
  height:   100%;
  position: relative;
}

.photo-overlay {
  position:   absolute;
  inset:      auto 0 0 0;
  padding:    1.1rem 1rem 1rem;
  color:      var(--color-text-light);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.82) 100%);
  transform:  translateY(8px);
  opacity:    0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.photo-card:hover .photo-overlay,
.photo-card:focus-within .photo-overlay {
  opacity:   1;
  transform: translateY(0);
}

.photo-overlay__name {
  font-family:   var(--font-serif);
  font-size:     1.05rem;
  font-weight:   700;
  margin-bottom: 0.3rem;
}

.photo-overlay__bio {
  font-size:      0.75rem;
  line-height:    1.55;
  color:          rgba(245,242,236,0.82);
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.photo-lightbox[hidden] { display: none; }

.photo-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
}

.photo-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: min(1100px, 100%);
}

.photo-lightbox__figure {
  margin: 0;
  background: rgba(10,10,10,0.96);
  border: 1px solid rgba(255,255,255,0.12);
}

.photo-lightbox__figure img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #000;
}

.photo-lightbox__meta {
  padding: 1rem 1.1rem 1.15rem;
  color: rgba(245,242,236,0.9);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.photo-lightbox__close,
.photo-lightbox__nav {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,10,0.7);
  color: var(--color-text-light);
  font-size: 1.2rem;
}

.photo-lightbox__close {
  position: absolute;
  top: -56px;
  right: 0;
  z-index: 2;
}

.photo-lightbox__nav { align-self: center; }

body.has-lightbox-open { overflow: hidden; }

/* ─── Video Portfolio ────────────────────────────────────── */
.page-hero--video .page-hero__bg--video { overflow: hidden; }
.page-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}

.video-directory {
  display:        flex;
  justify-content: space-between;
  gap:            1rem;
  align-items:    baseline;
  margin-bottom:  1.5rem;
  padding:        0.65rem 0;
  border-top:     1px solid rgba(26,26,26,0.12);
  border-bottom:  1px solid rgba(26,26,26,0.12);
}

.video-directory__list {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
}

.video-directory__list span {
  font-size:      0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(26,26,26,0.55);
}

.video-showcase {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.video-showcase__card {
  position: relative;
  grid-column: span 4;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-placeholder);
}

.video-showcase__card:nth-child(1) { grid-column: span 8; aspect-ratio: 16 / 9; }
.video-showcase__card:nth-child(2) { grid-column: span 4; }
.video-showcase__card:nth-child(3),
.video-showcase__card:nth-child(4),
.video-showcase__card:nth-child(5),
.video-showcase__card:nth-child(6) { grid-column: span 3; aspect-ratio: 3 / 4; }

.video-showcase__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-showcase__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-text-light);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.74));
}

.video-showcase__title {
  font-family:           var(--font-serif);
  font-size:             1.15rem;
  font-weight:           700;
  margin-bottom:         0.2rem;
  display:               -webkit-box;
  -webkit-line-clamp:    2;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

/* Tighter type for the 4 narrow cards */
.video-showcase__card:nth-child(n+3) .video-showcase__title {
  font-size: 0.95rem;
}

.video-showcase__desc {
  font-size: 0.78rem;
  max-width: 28ch;
  color: rgba(245,242,236,0.82);
  display:               -webkit-box;
  -webkit-line-clamp:    2;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

.video-showcase__label {
  align-self:     flex-end;
  flex-shrink:    0;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent-pink);
}

/* Move label to top-right on narrow cards so it doesn't compete with title */
.video-showcase__card:nth-child(n+3) .video-showcase__label {
  align-self: flex-start;
}

/* ─── Case Studies ───────────────────────────────────────── */
.case-study-articles {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.case-study-article {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.case-study-article:nth-child(even) {
  direction: rtl;
}

.case-study-article:nth-child(even) > * {
  direction: ltr;
}

.case-study-article__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.case-study-article__body {
  padding: 0.5rem 0;
}

.case-study-article__client {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-pink);
  margin-bottom: 0.5rem;
}

.case-study-article__copy {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ─── Collective Page ────────────────────────────────────── */
.team-grid {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   var(--gutter);
}

.team-grid__item:nth-child(1) { grid-column: span 5; }
.team-grid__item:nth-child(2) { grid-column: span 4; }
.team-grid__item:nth-child(3) { grid-column: span 3; }
.team-grid__item:nth-child(4) { grid-column: span 4; }
.team-grid__item:nth-child(5) { grid-column: span 5; }
.team-grid__item:nth-child(6) { grid-column: span 3; }
.team-grid__item:nth-child(7) { grid-column: span 4; }
.team-grid__item:nth-child(8) { grid-column: span 5; }
.team-grid__item:nth-child(9) { grid-column: span 3; }

.team-grid--balanced .team-grid__item:nth-child(n) { grid-column: span 4; }

.team-member-card { }

.team-member-card__photo {
  width:        100%;
  aspect-ratio: 3/4;
  overflow:     hidden;
  background:   var(--color-placeholder);
  margin-bottom: 1.25rem;
}

.team-member-card__photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-member-card:hover .team-member-card__photo img { transform: scale(1.04); }

.team-member-card__name {
  font-family:   var(--font-serif);
  font-size:     1.1rem;
  font-weight:   700;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  position:      relative;
}

/* Short accent rule under the name */
.team-member-card__name::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     0;
  width:      1.75rem;
  height:     1px;
  background: var(--color-accent);
}

.team-member-card__role {
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  0.6rem;
}

.team-member-card__bio {
  font-size:          0.8rem;
  line-height:        1.6;
  color:              var(--color-muted-dark);
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  margin-bottom:      0.75rem;
}

.section--dark .team-member-card__bio { color: var(--color-muted-light); }

.team-member-card__cta {
  font-size:      0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent-pink);
  display:        block;
  margin-top:     auto;
}

.section--dark .team-member-card__cta { color: var(--color-accent-pink); }

/* Centre an orphaned last card when it opens a new row alone */
.team-grid--balanced .team-grid__item:nth-child(3n+1):last-child {
  grid-column: 5 / span 4;
}

/* ─── Process Page ───────────────────────────────────────── */
.process-block {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 6vw, 5rem);
  align-items:           center;
}

.process-block__number {
  font-family:    var(--font-serif);
  font-size:      clamp(4rem, 10vw, 8rem);
  font-weight:    900;
  color:          var(--color-accent);
  line-height:    1;
  margin-bottom:  0.5rem;
}

/* ─── Connect Page ───────────────────────────────────────── */
.connect__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(2rem, 8vw, 7rem);
  align-items:           start;
}

.connect__form { padding-top: 0.5rem; }

.form-field {
  margin-bottom: 2rem;
}

.form-field label {
  display:        block;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-muted-light);
  margin-bottom:  0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  display:          block;
  width:            100%;
  background:       transparent;
  border:           none;
  border-bottom:    1.5px solid rgba(255,255,255,0.25);
  color:            var(--color-text-light);
  font-family:      var(--font-sans);
  font-size:        1rem;
  padding:          0.5rem 0;
  outline:          none;
  transition:       border-color var(--transition-base);
  -webkit-appearance: none;
}

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

.form-field select option { background: var(--color-bg-dark); }

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

.connect__contact { margin-top: 3rem; }

.connect__contact-item {
  margin-bottom: 0.75rem;
  font-size:     0.875rem;
  color:         var(--color-muted-light);
}

.connect__contact-item a:hover { color: var(--color-accent); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .services__inner       { grid-template-columns: 1fr; }
  .services__photo       { aspect-ratio: 16/7; }
  .philosophy__inner     { grid-template-columns: 1fr; }
  .featured__inner       { grid-template-columns: 1fr; }
  .connect__inner        { grid-template-columns: 1fr; }
  .story-block           { grid-template-columns: 1fr; }
  .process-block         { grid-template-columns: 1fr; }
  .footer__grid          { grid-template-columns: repeat(2, 1fr); }

  .portfolio-masonry .mosaic-item:nth-child(3n+1) { grid-column: span 12; grid-row: span 1; }
  .portfolio-masonry .mosaic-item:nth-child(3n+2) { grid-column: span 6; }
  .portfolio-masonry .mosaic-item:nth-child(3n+3) { grid-column: span 6; }

  .philosophy__side {
    border-left:  0;
    padding-left: 0;
  }

  .services__photo::before,
  .services__detail::before {
    display: none;
  }

  .featured__visual {
    padding-left: 0;
    border-left:  0;
  }

  .clients__header::after,
  .clients__footer::after {
    display: none;
  }

  .clients__statement {
    border-left:  0;
    padding-left: 0;
  }

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

@media (max-width: 768px) {
  .site-nav__list { display: none; }
  .site-nav .btn  { display: none; }
  .nav-toggle     { display: flex; }

  .hero__content {
    grid-template-columns: 1fr;
    grid-template-rows:    auto auto 1fr auto;
  }

  .hero__descriptor { display: none; }

  .hero__badge {
    width: 100%;
    padding-bottom: 1.5rem;
  }

  .badge {
    max-width:   100%;
    white-space:  normal;
    flex-wrap:    wrap;
    line-height:  1.35;
  }

  .hero__stat {
    max-width: min(100%, 18rem);
    padding: 0.75rem 0.85rem;
  }

  .hero__headline {
    max-width: 9ch;
  }

  .hero__badge {
    grid-column: 1 / -1;
  }

  .story-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .story-gallery__item,
  .story-gallery__item--wide,
  .story-gallery__item--tall {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .photo-archive__grid,
  .video-showcase,
  .case-study-articles {
    grid-template-columns: 1fr;
  }

  .photo-card,
  .video-showcase__card,
  .case-study-article {
    grid-column: 1 / -1 !important;
    aspect-ratio: 4 / 3;
  }

  .photo-lightbox__dialog {
    grid-template-columns: 1fr;
  }

  .photo-lightbox__close {
    top: -50px;
  }

  .video-directory {
    flex-direction: column;
    align-items: flex-start;
  }

  .portfolio-grid__mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows:        200px;
  }

  .mosaic-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .mosaic-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }

  .team-scroll { grid-template-columns: repeat(2, 1fr); }

  .team-card__overlay {
    opacity: 1;
  }

  .team-grid__item:nth-child(n) { grid-column: span 12; }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .featured__watermark { display: none; }

  .clients__watermark-wrap { min-height: 150px; }
}

@media (max-width: 480px) {
  .team-scroll { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .fun-facts   { grid-template-columns: 1fr; }
  .clients__photo-grid { grid-template-columns: 1fr; }
  .story-gallery { grid-template-columns: 1fr; }
  .photo-archive__filters { gap: 0.375rem; }
  .photo-filter { width: 100%; justify-content: center; }
}

/* ─── Collective ──────────────────────────────────────────── */
.collective-section-label {
  font-family:    var(--font-gothic);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  0.75rem;
  display:        block;
}

.team-member-card__link {
  display:        inline-block;
  margin-top:     0.875rem;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-accent);
  border-bottom:  1.5px solid currentColor;
  padding-bottom: 2px;
  transition:     color var(--transition-base);
}

.team-member-card__link:hover { color: var(--color-pink); border-color: currentColor; }

/* Photographer grid — slightly different sizing from leadership */
.photographers-grid .team-grid__item:nth-child(1) { grid-column: span 3; }
.photographers-grid .team-grid__item:nth-child(2) { grid-column: span 4; }
.photographers-grid .team-grid__item:nth-child(3) { grid-column: span 5; }
.photographers-grid .team-grid__item:nth-child(4) { grid-column: span 4; }
.photographers-grid .team-grid__item:nth-child(5) { grid-column: span 4; }
.photographers-grid .team-grid__item:nth-child(6) { grid-column: span 4; }

@media (max-width: 768px) {
  .photographers-grid .team-grid__item:nth-child(n) { grid-column: span 12; }
}

/* ─── Individual team member profile page ────────────────── */
.profile-hero {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   clamp(2rem, 6vw, 5rem);
  align-items:           end;
  padding:               8rem var(--gutter) 4rem;
  max-width:             var(--max-width);
  margin:                0 auto;
}

.profile-hero__photo {
  aspect-ratio: 3/4;
  overflow:     hidden;
  background:   var(--color-placeholder);
}

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

.profile-hero__role {
  font-family:    var(--font-gothic);
  font-size:      0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-pink);
  margin-bottom:  0.75rem;
}

.profile-hero__name { color: var(--color-text-light); margin-bottom: 1.5rem; }

.profile-hero__bio {
  color:       rgba(255, 250, 244, 0.8);
  max-width:   540px;
}

@media (max-width: 768px) {
  .profile-hero { grid-template-columns: 1fr; }
}

/* ─── Case Studies ───────────────────────────────────────── */
.case-study-grid {
  display:      grid;
  grid-template-columns: 1fr;
  gap:          5rem;
}

.case-study {
  display:               grid;
  grid-template-columns: 3fr 2fr;
  gap:                   clamp(2rem, 5vw, 4rem);
  align-items:           center;
  padding-bottom:        5rem;
  border-bottom:         1px solid rgba(47,64,59,0.12);
}

.case-study:last-child { border-bottom: none; }

.case-study--reverse { direction: rtl; }
.case-study--reverse > * { direction: ltr; }

.case-study__label {
  font-family:    var(--font-gothic);
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent-pink);
  margin-bottom:  0.5rem;
}

.case-study__headline { margin-bottom: 1rem; }

.case-study__media {
  width:        100%;
  aspect-ratio: 16/10;
  background:   var(--color-placeholder);
  overflow:     hidden;
}

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

.case-study__services {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.375rem;
  margin-top: 1.25rem;
}

.service-tag {
  font-size:        0.6875rem;
  font-weight:      600;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  padding:          0.3rem 0.75rem;
  border:           1px solid var(--color-green-light);
  color:            var(--color-green-light);
}

@media (max-width: 768px) {
  .case-study { grid-template-columns: 1fr; }
  .case-study--reverse { direction: ltr; }
}

/* ─── FAQ Page ───────────────────────────────────────────── */
.faq-list { max-width: 800px; }

.faq-item {
  border-top: 1px solid rgba(47,64,59,0.15);
}

.section--dark .faq-item { border-top-color: rgba(255,250,244,0.12); }

.faq-item:last-child { border-bottom: 1px solid rgba(47,64,59,0.15); }
.section--dark .faq-item:last-child { border-bottom-color: rgba(255,250,244,0.12); }

.faq-item__question {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.5rem 0;
  cursor:          pointer;
  font-family:     var(--font-sans);
  font-size:       1.0625rem;
  font-weight:     600;
  list-style:      none;
  color:           inherit;
  transition:      color var(--transition-base);
}

.faq-item__question::-webkit-details-marker { display: none; }

/* Hover to reveal on desktop */
@media (hover: hover) {
  .faq-item:not([open]):hover .faq-item__question,
  .faq-item:not([open]):focus-within .faq-item__question {
    color: var(--color-accent);
  }
}

.faq-item[open] .faq-item__question { color: var(--color-accent); }

/* Show answer on hover for desktop */
@media (hover: hover) {
  .faq-item:not([open]):hover .faq-item__answer,
  .faq-item:not([open]):focus-within .faq-item__answer {
    opacity:      1;
    max-height:   500px;
    padding-top:  0.5rem;
  }
}

.faq-item[open] .faq-item__answer {
  max-height: 500px;
  opacity:      1;
  padding-top:  0.5rem;
}

.section--dark .faq-item__answer { color: var(--color-muted-light); }

/* ─── sr-only utility ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0,0,0,0);
  border:   0;
}

/* ─── Animated Image Mosaic (Philosophy) ─────────────────── */
#philosophy,
#work,
#services,
#collective-preview,
#cta {
  position: relative;
}

#philosophy::before,
#work::before,
#services::before,
#collective-preview::before,
#cta::before {
  content:       "";
  position:      absolute;
  top:           0;
  left:          var(--gutter);
  right:         var(--gutter);
  height:        1px;
  background:    rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

#philosophy {
  --mosaic-opacity-solid: 0.78;
  --mosaic-opacity-mid:   0.5;
  --mosaic-opacity-soft:  0.28;
}

#philosophy[data-mosaic-preset="a"] {
  --mosaic-opacity-solid: 0.85;
  --mosaic-opacity-mid:   0.6;
  --mosaic-opacity-soft:  0.35;
}

#philosophy[data-mosaic-preset="c"] {
  --mosaic-opacity-solid: 0.7;
  --mosaic-opacity-mid:   0.42;
  --mosaic-opacity-soft:  0.2;
}

.mosaic-frame {
  cursor:        crosshair;
  touch-action:  pan-y;
  user-select:   none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  position:      relative;
  width:         100%;
  max-width:     420px;
  aspect-ratio:  4/3;
  overflow:      hidden;
  border-radius: 0;
}

.philosophy__mosaic-frame { margin: 0 0 1.5rem 0; }

.mosaic-base-image {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  object-fit: cover;
}

.mosaic-overlay-grid {
  position:   absolute;
  inset:      0;
  display:    grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  overflow:   hidden;
}

.mosaic-tile {
  position:     relative;
  background:   #000;
  will-change:  auto;
  transition:   transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* Tone variants */
.mosaic-tile.tone-solid { opacity: var(--mosaic-opacity-solid, 0.78); }
.mosaic-tile.tone-mid { opacity: var(--mosaic-opacity-mid, 0.5); }
.mosaic-tile.tone-soft { opacity: var(--mosaic-opacity-soft, 0.28); }

/* Direction variants - full tile travel */
.mosaic-tile--up {
  --translate-y: -100%;
}
.mosaic-tile--down {
  --translate-y: 100%;
}
.mosaic-tile--left {
  --translate-x: -100%;
}
.mosaic-tile--right {
  --translate-x: 100%;
}

/* Active/open state */
.mosaic-tile.is-open {
  z-index:    10;
  opacity:    1;
  will-change: transform, opacity;
  transform: translate(
    var(--tile-shift-x, var(--translate-x, 0)),
    var(--tile-shift-y, var(--translate-y, 0))
  );
}

/* Permanently revealed — fades out instead of settling opaque on a
   neighbouring cell, so it can never black out content it slides onto. */
.mosaic-tile.is-revealed {
  opacity: 0;
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .mosaic-tile {
    opacity:   0.8;
    transform: none !important;
  }
}

/* Mobile tuning */
@media (max-width: 768px) {
  .philosophy__mosaic-frame {
    margin-left: 0;
    max-width: 100%;
  }
  .mosaic-tile--up { --translate-y: -100%; }
  .mosaic-tile--down { --translate-y: 100%; }
  .mosaic-tile--left { --translate-x: -100%; }
  .mosaic-tile--right { --translate-x: 100%; }
}

/* ─── Grid Mosaic Fillers ───────────────────────────────── */
/* Self-contained mini mosaic tile grid — fills empty cells  */
/* in photo/video/story grids with animated accent squares.  */
.mosaic-filler {
  position:     relative;
  overflow:     hidden;
  grid-column:  span 4;
  aspect-ratio: 4 / 3;
  background:   var(--color-bg-dark);
}

/* Inner grid — no gap so tiles read as a cohesive mosaic */
.mf-grid {
  position:              absolute;
  inset:                 0;
  display:               grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows:    repeat(6, 1fr);
}

/* Base tile — transition only, color set by --green / --pink modifier */
.mf-tile {
  will-change: transform;
  transition:  transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Whole-filler colour — set on the wrapper, not per tile */
.mosaic-filler              { --mf-color: var(--color-accent); }       /* default: green */
.mosaic-filler.mf--pink     { --mf-color: var(--accent-pink-on-dark); }/* pink override  */
.mf-tile { background: var(--mf-color); }

/* Tone (opacity) variants — create depth across the mosaic */
.mf-tile.tone-solid { opacity: 0.92; }
.mf-tile.tone-mid   { opacity: 0.55; }
.mf-tile.tone-soft  { opacity: 0.22; }

/* Tiles slide away exactly one tile-width — clean exit, no overlap */
.mf-tile--up.is-open    { transform: translateY(-100%); }
.mf-tile--down.is-open  { transform: translateY(100%);  }
.mf-tile--left.is-open  { transform: translateX(-100%); }
.mf-tile--right.is-open { transform: translateX(100%);  }

/* Reduced-motion: keep tiles static, skip animation */
@media (prefers-reduced-motion: reduce) {
  .mf-tile { transition: none; }
}

/* ─── Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* === PHOTOGRAPHER GALLERY === */

/* Masonry grid — auto-fill columns, 10 px row units so JS can set
   grid-row-end spans based on each image's natural aspect ratio.    */
#unified-photo-gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows:        10px;   /* row unit — matches rowHeight in setPhotoCardRowSpan */
  gap:                   20px;   /* matches rowGap in setPhotoCardRowSpan */
  padding:               20px 0;
}

/* Cards flow to their image's natural height; override the fixed
   12-col editorial classes applied by relayoutGrid on other pages. */
#unified-photo-gallery .photo-card {
  position:     relative;
  overflow:     visible;         /* lets box-shadow escape the card */
  aspect-ratio: auto;            /* natural ratio — JS controls height via row span */
  grid-column:  auto;            /* auto-fill handles columns */
  border-radius: 8px;
  cursor:       pointer;
  transition:   transform 0.3s ease, box-shadow 0.3s ease;
  background:   var(--color-placeholder);
  display:      flex;
  line-height:  0;               /* prevents white bars under inline images */
}

#unified-photo-gallery .photo-card:hover {
  transform:  translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  z-index:    10;
}

/* Images fill card width; height is controlled by JS row span */
#unified-photo-gallery .photo-card > img {
  width:          100%;
  height:         auto;
  display:        block;
  margin:         0;
  padding:        0;
  vertical-align: bottom;
  transition:     none;
  border-radius:  8px;
  transform:      none;          /* cancel the scale from generic .photo-card:hover img */
}

/* Video cards match image behaviour */
#unified-photo-gallery .photo-card video {
  width:          100%;
  height:         auto;
  display:        block;
  margin:         0;
  padding:        0;
  vertical-align: bottom;
  border-radius:  8px;
  object-fit:     cover;
  transition:     none;
}

/* Photographer header — shown when the gallery is filtered to one person.
   Purple gradient replaced with the site's dark palette + accent rule.   */
#photographer-header {
  background:    var(--color-bg-dark);
  border-left:   3px solid var(--color-accent);
  color:         var(--color-text-light);
  padding:       40px 30px;
  border-radius: 0 12px 12px 0;
  margin-bottom: 30px;
  display:       none;
}

#photographer-header.active { display: block; }

/* Hover overlay — compact horizontal strip in bottom-left corner.
   Shows the photographer's portrait circle and name.               */
#unified-photo-gallery .photo-overlay {
  position:       absolute;
  bottom:         0;
  left:           0;
  width:          auto;
  max-width:      50%;
  height:         auto;
  background:     linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  opacity:        0;
  transition:     opacity 0.4s ease;
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            10px;
  padding:        12px 14px;
  border-radius:  0 8px 0 8px;
  line-height:    1.2;
  aspect-ratio:   auto;
  transform:      none;   /* cancel slide-up from generic .photo-overlay */
}

#unified-photo-gallery .photo-card:hover .photo-overlay,
#unified-photo-gallery .photo-card:focus-within .photo-overlay {
  opacity:   1;
  transform: none;
}

/* 32 px circle portrait shown in the overlay */
.photographer-portrait {
  width:           32px;
  height:          32px;
  min-width:       32px;
  min-height:      32px;
  border-radius:   50%;
  border:          2px solid var(--color-text-light);
  object-fit:      cover;
  object-position: center;
  flex-shrink:     0;
  display:         block;
  line-height:     0;
  transform:       translateX(-10px);
  transition:      transform 0.4s ease 0.1s;
}

#unified-photo-gallery .photo-card:hover .photographer-portrait {
  transform: translateX(0);
}

/* Photographer name text in the overlay */
.photographer-name {
  font-family: var(--font-sans);
  font-size:   0.9rem;
  font-weight: 600;
  margin:      0;
  padding:     0;
  color:       var(--color-text-light);
  line-height: 1.2;
  max-width:   100%;
  word-wrap:   break-word;
  transform:   translateX(-10px);
  transition:  transform 0.4s ease 0.15s;
}

#unified-photo-gallery .photo-card:hover .photographer-name {
  transform: translateX(0);
}

@media (max-width: 768px) {
  #unified-photo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }

  #unified-photo-gallery .photo-overlay {
    max-width: 70%;
    padding:   10px 12px;
    gap:       8px;
  }

  .photographer-portrait {
    width: 28px; height: 28px;
    min-width: 28px; min-height: 28px;
  }

  .photographer-name { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  #unified-photo-gallery .photo-overlay {
    max-width: 80%;
    gap:       6px;
    padding:   8px 10px;
  }

  .photographer-portrait {
    width: 24px; height: 24px;
    min-width: 24px; min-height: 24px;
    border-width: 1px;
  }

  .photographer-name { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════
   SINGLE CASE STUDY — Magazine article layout
═══════════════════════════════════════════════════════════ */

.case-article__hero {
  position:    relative;
  height:      clamp(380px, 55vh, 680px);
  overflow:    hidden;
}

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

.case-article__hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.25) 55%, transparent 100%);
  display:    flex;
  align-items: flex-end;
}

.case-article__hero-meta {
  padding:     clamp(2rem, 4vw, 4rem);
  max-width:   var(--max-width);
  width:       100%;
  margin:      0 auto;
  color:       var(--color-text-light);
}

.case-article__eyebrow {
  font-size:      0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  0.75rem;
  display:        block;
}

.case-article__headline {
  font-size:   clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.15;
  max-width:   820px;
}

.case-article__body {
  max-width: 780px;
  margin:    0 auto;
  padding:   clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 5vw, 2.5rem);
}

.case-article__section { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.case-article__section-label {
  font-size:      0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-accent-pink);
  margin-bottom:  0.6rem;
  display:        block;
}

.case-article__pullquote {
  border-left: 3px solid var(--color-accent-pink);
  padding:     1.5rem 2rem;
  margin:      clamp(2rem, 4vw, 3rem) 0;
}

.case-article__pullquote p {
  font-size:   clamp(1.05rem, 2vw, 1.3rem);
  font-style:  italic;
  line-height: 1.65;
  color:       var(--color-text-dark);
}

.case-article__deliverables {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
}

.case-article__deliverables li {
  background:     var(--color-bg-dark);
  color:          var(--color-text-light);
  padding:        0.3rem 0.85rem;
  font-size:      0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-article__gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   0.75rem;
  margin:                1.5rem 0;
}

.case-article__gallery img {
  width:        100%;
  height:       220px;
  object-fit:   cover;
  display:      block;
}

.case-article__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  margin:    1.5rem 0;
}

.case-article__nav {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
  padding:         3rem 0;
}

.btn--sm {
  padding:        0.5rem 1.25rem;
  font-size:      0.75rem;
  letter-spacing: 0.08em;
}