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

:root {
  --side-margin: 55px;
  --site-background: #f8f6f2;

  --landing-logo-width: 185px;
  --site-logo-width: 185px;
  --footer-logo-width: 38px;

  --header-top-padding: 32px;
  --header-bottom-padding: 28px;

  --nav-font-size: 12px;
  --search-font-size: 12px;
  --footer-font-size: 10px;
  --wall-font-size: 47px;

  --wall-top-gap: 95px;
  --footer-top-gap: 115px;

  --text-grey: #707070;
  --light-grey: #8f8f8f;

  /* Editorial typography tokens */
  --font-editorial: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  --line-height-copy: 1.25;
  --line-height-list: 1.3;
  --line-height-tight: 1;

  --tracking-navigation: 0;
  --tracking-editorial: 0;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  background: white;
  color: black;
  overflow-x: hidden;
}

body.entered,
body.landing-active {
  background: var(--site-background);
}

body.landing-active {
  overflow: hidden;
  cursor: none;
}

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

/* LANDING */

.landing {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100vh;
  background: black;
  overflow: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.landing.is-leaving {
  opacity: 0;
  transform: scale(1.04);
}

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

.landing-logo {
  position: absolute;
  top: 78px;
  left: var(--side-margin);
  z-index: 5;
}

.landing-logo img {
  width: var(--landing-logo-width);
  display: block;
  filter: invert(1);
}

.custom-cursor {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  display: none;
  transform: translate(-50%, -50%);
  color: white;
  font-size: var(--nav-font-size);
  line-height: 1;
  text-transform: uppercase;
}

body.landing-active .custom-cursor {
  display: block;
}

/* SITE */

.site {
  display: none;
  min-height: 100vh;
  background: var(--site-background);
}

body.entered .site {
  display: block;
}

body.entered .landing,
body.entered .custom-cursor {
  display: none;
}

/* HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-top-padding) var(--side-margin) var(--header-bottom-padding);
  background: var(--site-background);
  text-transform: uppercase;
}

.site-header-left {
  display: flex;
  align-items: center;
  gap: 70px;
}

.site-logo {
  width: var(--site-logo-width);
  display: block;
}

.search {
  width: 230px;
  padding-bottom: 7px;
  border: none;
  border-bottom: 2px solid black;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--search-font-size);
  line-height: 1;
  text-transform: uppercase;
}

.search::placeholder {
  color: var(--light-grey);
  opacity: 1;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: var(--nav-font-size);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav .active {
  color: var(--light-grey);
}

.site-header--editorial .site-nav--editorial {
  align-items: center;
  font-family: var(--font-editorial);
  font-size: var(--nav-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-navigation);
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header--editorial .site-nav--editorial > a:not(.site-nav-cta) {
  transition: color 0.15s ease;
}

.site-header--editorial .site-nav--editorial > a:not(.site-nav-cta):not(.active):hover {
  color: var(--text-grey);
}

.site-header--editorial .site-nav--editorial > .active,
.site-header--editorial .site-nav--editorial > .active:hover {
  color: var(--light-grey);
}

.site-header--editorial .site-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-block: -4px;
  margin-right: 10px;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 0;
  color: #000;
  background: transparent;
  line-height: var(--line-height-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-header--editorial .site-nav-cta:hover {
  color: var(--site-background);
  background: #000;
}

/* CLIENT WALL */

.clients-section {
  padding: 0 var(--side-margin) 60px;
}

.clients-wall-hint {
  display: none;
}

.clients-wall-wrapper {
  width: 100vw;
  margin-left: calc(var(--side-margin) * -1);
  margin-top: var(--wall-top-gap);
  overflow: hidden;
}

.clients-wall {
  width: 205vw;
  color: var(--text-grey);
  font-size: 35.5px;
  line-height: 0.92;
  text-transform: uppercase;
  animation: wallMove 28s linear infinite alternate;
}

.clients-wall.is-filtered {
  width: 100%;
  animation: none;
}

.client-name {
  color: var(--text-grey);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.client-name:hover {
  color: black;
}

@keyframes wallMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-wall {
    animation: none;
    transform: none;
  }
}

/* FOOTER */

.footer {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 1fr 1.15fr auto;
  align-items: end;
  gap: 45px;
  padding: var(--footer-top-gap) var(--side-margin) 40px;
  font-size: var(--footer-font-size);
  line-height: 1.15;
  text-transform: uppercase;
}

.footer-newsletter input {
  width: 230px;
  padding-bottom: 7px;
  border: none;
  border-bottom: 2px solid black;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--footer-font-size);
  line-height: 1;
  text-transform: uppercase;
}

.footer-newsletter input::placeholder {
  color: var(--light-grey);
  opacity: 1;
}

.footer-logo {
  position: relative;
  width: 190px;
  height: 120px;
  grid-column: 5;
  justify-self: end;
  align-self: start;
  top: 10px;
  overflow: visible;
}

.footer-logo-frame {
  position: absolute;
  right: 0;
  top: 0;
  width: 190px;
  height: auto;
  object-fit: contain;
  max-width: none;
}

.footer-logo-frame.frame-1,
.footer-logo-frame.frame-2 {
  max-width: none;
}

.footer-logo-frame.is-section-character {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
}

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

.footer a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}

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

/* ==========================================================
   CAMPAIGNS PAGE
========================================================== */

.campaigns-page {
    padding: 24px 55px 120px;
}

.campaign {
  position: relative;
  display: grid;
  grid-template-columns: 235px 1fr;
  gap: 22px;
  margin-bottom: 140px;
  align-items: stretch;
}

.campaign-info {
  position: relative;
  align-self: stretch;
}

.campaign.info-right {
    grid-template-columns: 1fr 235px;
}

.campaign.info-right .campaign-info {
    order: 2;
}

.campaign.info-right .campaign-media {
    order: 1;
}

.campaign-info-inner {
  position: sticky;
  top: 118px;
  text-align: right;
  text-transform: uppercase;
}

.campaign.info-right .campaign-info-inner {
    text-align: left;
}

.campaign-title {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 14px;
}

.credit-group {
    margin-bottom: 10px;
}

.credit-label,
.credit-value {
    font-size: 13px;
    line-height: 1.15;
    text-transform: uppercase;
}

.credit-label {
    margin-bottom: 0;
}

/* ---------------- MEDIA ---------------- */

.campaign-media {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.campaign-media-item {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* Frame opzionale */

.campaign-media-item.has-border {
    border: 1px solid #000;
}

/* Video */

.campaign-media video {
    background: #000;
}

/* ==========================================================
   FILMS PAGE
========================================================== */

.films-page {
  min-width: 0;
  padding: 24px 55px 120px;
}

.films-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 20px);
}

.films-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
}

.films-card:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

.films-card-video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.films-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 1.4vw, 20px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.films-card:hover .films-card-overlay,
.films-card:focus .films-card-overlay,
.films-card:focus-visible .films-card-overlay {
  opacity: 1;
}

.films-card-title,
.films-card-title-client,
.films-card-title-project {
  display: block;
}

.films-card-title {
  color: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.films-modal[hidden] {
  display: none;
}

.films-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 64px);
}

.films-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.films-modal__content {
  position: relative;
  z-index: 1;
  width: min(1400px, 100%);
  max-height: calc(100vh - clamp(48px, 8vw, 128px));
  overflow: hidden;
  background: #000;
  outline: none;
}

.films-modal__content:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.films-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.films-modal__close:hover,
.films-modal__close:focus-visible {
  background: #fff;
  color: #000;
}

.films-modal__video {
  display: block;
  width: 100%;
  max-height: calc(100vh - clamp(48px, 8vw, 128px));
  object-fit: contain;
  background: #000;
}

.films-modal__details {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  max-width: calc(100% - 170px);
  color: #fff;
  text-transform: uppercase;
  pointer-events: auto;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.films-modal__details h1 {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.films-modal__details h1 span {
  display: block;
}

.films-modal__credits {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.2;
}

.films-modal__credits[hidden] {
  display: none;
}

.films-modal__credits div + div {
  margin-top: 4px;
}

.films-modal__credits dt {
  font-weight: var(--font-weight-bold);
}

.films-modal__credits dd {
  margin: 0;
}

.films-modal__credit-link {
  display: block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
}

.films-modal__credit-link:hover,
.films-modal__credit-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.is-films-modal-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .films-page {
    padding: 24px clamp(32px, 5vw, 55px) 88px;
  }

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

@media (hover: none), (pointer: coarse) {
  .films-card-overlay {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .films-public-page .site-header.site-header--editorial {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .films-public-page .site-header.site-header--editorial .site-header-left {
    width: 100%;
    gap: 12px;
  }

  .films-public-page .site-header.site-header--editorial .site-logo {
    width: 130px;
  }

  .films-public-page .site-header.site-header--editorial .search-field {
    width: 0;
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
  }

  .films-page {
    padding: 24px 20px 72px;
  }

  .films-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .films-card-overlay {
    padding: 16px;
    opacity: 1;
  }

  .films-modal {
    height: 100vh;
    height: 100dvh;
    padding:
      max(12px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
    overflow: hidden;
    place-items: stretch;
    background: var(--site-background);
  }

  .films-modal__backdrop {
    background: var(--site-background);
  }

  .films-modal__content {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    flex-direction: column;
    align-items: stretch;
    background: var(--site-background);
  }

  .films-modal__close {
    position: static;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    align-self: flex-end;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
  }

  .films-modal__close:hover,
  .films-modal__close:focus-visible {
    background: transparent;
    color: #000;
  }

  .films-modal__video {
    order: 2;
    width: 100%;
    height: auto;
    max-height: min(52vh, 420px);
    max-height: min(52dvh, 420px);
    flex: 0 1 auto;
    object-fit: contain;
  }

  .films-modal__details {
    position: static;
    order: 3;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 20px 0 0;
    overflow-y: auto;
    flex: 1 1 auto;
    color: #000;
    text-shadow: none;
    pointer-events: auto;
  }

  .films-modal__details h1 {
    font-size: 13px;
    line-height: var(--line-height-copy);
  }

  .films-modal__credits {
    margin-top: 10px;
    font-size: 12px;
    line-height: var(--line-height-copy);
  }

  .films-modal__credit-link {
    min-height: 32px;
    align-items: center;
    display: flex;
  }
}

/* ==========================================================
   SEARCH PAGE
========================================================== */

.search-results-header {
  padding: 40px 55px 0;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.search-result-group-heading {
  margin: 0 0 38px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.search-result-group + .search-result-group {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid currentColor;
}

.search-result-group .campaign:last-child {
  margin-bottom: 0;
}

.portfolio-search-detail-link {
  color: inherit;
  text-decoration: none;
}

.portfolio-search-detail-link:hover {
  color: var(--light-grey);
}

.no-results {
  font-size: 47px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--text-grey);
}

.credit-link {
  color: inherit;
  text-decoration: none;
}

.credit-link:hover {
  color: var(--light-grey);
}

/* ==========================================================
   SEARCH SUGGESTIONS
========================================================== */

.site-header-left {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 36px;
  left: calc(var(--site-logo-width) + 70px);
  width: 230px;
  display: none;
  z-index: 1000;
  padding: 10px 0 8px;
  background: #fbfaf7;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.search-suggestions.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.search-suggestion {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 4px 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;

  color: var(--light-grey);

  transition:
    color .18s ease,
    transform .18s ease;
}

.search-suggestion:hover,
.search-suggestion.is-active {
  color: black;
  transform: translateX(4px);
}

.frame-1 {
  opacity: 1;
  animation: footerLogoOne 2s steps(1, end) infinite;
}

.frame-2 {
  opacity: 0;
  animation: footerLogoTwo 2s steps(1, end) infinite;
}

@keyframes footerLogoOne {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

@keyframes footerLogoTwo {
  0%, 49% {
    opacity: 0;
  }

  50%, 100% {
    opacity: 1;
  }
}

.admin-page {
  padding: 40px;
  max-width: 900px;
  font-size: 14px;
}

.admin-page h1 {
  font-size: 24px;
  margin-bottom: 30px;
}

.admin-page label {
  display: block;
  margin-top: 18px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.admin-page input,
.admin-page select,
.admin-page textarea {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid #000;
}

.admin-page textarea {
  min-height: 120px;
}

.admin-page button {
  margin-top: 18px;
  padding: 10px 18px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.admin-dropzone {
  width: 100%;
  min-height: 160px;
  border: 1px dashed #777;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin: 12px 0 24px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.admin-dropzone:hover,
.admin-dropzone.is-dragover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.admin-dropzone span {
  opacity: 0.6;
  font-size: 13px;
}

.admin-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.existing-media-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #000;
}

.existing-media-section[hidden],
#newCampaignMediaSection[hidden],
.existing-media-fallback[hidden] {
  display: none;
}

.existing-media-section h2 {
  font-size: 16px;
  margin-bottom: 6px;
}

.existing-media-note {
  margin-bottom: 16px;
  color: var(--text-grey);
  font-size: 12px;
  font-weight: 400;
}

.existing-media-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.existing-media-item {
  position: relative;
  min-width: 0;
  border: 1px solid #333;
  background: #111;
  color: #fff;
  overflow: hidden;
  cursor: grab;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.existing-media-item:active {
  cursor: grabbing;
}

.existing-media-item.is-dragging {
  opacity: 0.35;
  transform: scale(0.96);
}

.existing-media-item.is-drag-target {
  border-color: #fff;
}

.existing-media-item.is-pending-removal {
  border-color: #b00020;
}

.existing-media-item.is-pending-removal .existing-media-preview,
.existing-media-item.is-pending-removal .existing-media-details {
  opacity: 0.4;
}

.existing-media-preview {
  min-height: 180px;
  background: #1a1a1a;
}

.existing-media-preview img,
.existing-media-preview video {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.existing-media-fallback {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed #777;
  color: #aaa;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}

.existing-media-details {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
}

.existing-media-details code {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: #ccc;
  font: inherit;
  text-transform: none;
}

.admin-page .existing-media-remove {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid #555;
  background: #2b2b2b;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
}

.admin-page .existing-media-remove.is-undo {
  background: #b00020;
}

.existing-media-empty {
  grid-column: 1 / -1;
  padding: 20px;
  border: 1px dashed #777;
  color: var(--text-grey);
  font-weight: 400;
}

#saveMediaOrder:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.remove-media-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #777;
}

.remove-media-actions p {
  margin-bottom: 8px;
  color: var(--text-grey);
  font-size: 12px;
  font-weight: 400;
}

#saveRemovedMedia:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.edit-add-media-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #777;
}

.edit-add-media-section h3 {
  margin-bottom: 8px;
  font-size: 14px;
}

.edit-media-dropzone {
  min-height: 120px;
  margin: 12px 0 18px;
  border: 1px dashed #777;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.edit-media-dropzone:hover,
.edit-media-dropzone.is-dragover {
  border-color: #000;
  background: #f3f3f3;
}

.edit-media-dropzone.is-disabled {
  cursor: wait;
  opacity: 0.45;
  pointer-events: none;
}

.edit-media-dropzone span {
  color: var(--text-grey);
  font-size: 12px;
  font-weight: 400;
}

.edit-media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.edit-media-preview.is-disabled,
.existing-media-gallery.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.edit-media-preview-item {
  position: relative;
  min-width: 0;
  border: 1px solid #333;
  background: #111;
  color: #fff;
  overflow: hidden;
}

.edit-media-preview-visual img,
.edit-media-preview-visual video {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.admin-page .edit-media-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.edit-media-preview-details {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  padding: 10px;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
}

.edit-media-preview-details code {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: #ccc;
  font: inherit;
  text-transform: none;
}

#saveAddedMedia:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.preview-item {
  position: relative;
  width: 100%;
  background: #111;
  border: 1px solid #333;
  overflow: hidden;
    cursor: grab;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.preview-item:active {
  cursor: grabbing;
}

.preview-item.is-dragging {
  opacity: 0.35;
  transform: scale(0.96);
  border-color: #fff;
}

.preview-item img,
.preview-item video {
  width: 100%;
  height: 140px;
  display: block;
  object-fit: cover;
}

.preview-item p {
  font-size: 11px;
  line-height: 1.3;
  padding: 8px;
  margin: 0;
  opacity: 0.7;
  word-break: break-all;
}

.preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;

}

.preview-remove:hover {
  background: #fff;
  color: #000;
}

.cms-dashboard {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #333;
}

.cms-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.cms-dashboard-header h2 {
  margin: 0;
}

.dashboard-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.git-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #000;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.git-status::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #777;
}

.git-status--clean::before {
  background: #1f7a3d;
}

.git-status--dirty::before {
  background: #b56a00;
}

.git-status--error::before {
  background: #b00020;
}

.campaigns-list {
  max-height: 420px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding-right: 6px;
}

.campaign-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 110px;
  padding: 12px;
  border: 1px solid #333;
  background: #111;
  overflow: hidden;
  padding: 0;
}

.campaign-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding:14px;
  color: #fff;
}

.campaign-row-info strong,
.campaign-row-info span,
.campaign-row-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-row-info small {
  opacity: 0.55;
  font-size: 11px;
  color: #fff;
  opacity: 0.65;
}

.campaign-row-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding:0 14px 14px;
}

.campaign-row-actions button {
  min-height: 28px;
  font-size: 11px;
  cursor: pointer;
}

.campaign-thumb{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
    background:#1a1a1a;
}

/* ABOUT PAGE */

.about-page {
  padding: 58px var(--side-margin) 80px;
  font-family: var(--font-editorial);
  text-transform: uppercase;
}

.about-page .about-introduction {
  max-width: 1500px;
  margin-bottom: clamp(36px, 3.6vw, 58px);
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-copy);
  letter-spacing: 0.11em;
}

.about-page .about-introduction .editorial-emphasis {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.045em;
}

.about-page .about-introduction p {
  margin: 0;
}

.about-page .about-introduction p + p {
  margin-top: 20px;
}

.about-page .about-services {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 2vw, 36px);
}

.about-page .about-service {
  min-width: 0;
}

.about-page .about-service-group + .about-service-group {
  margin-top: 36px;
}

.about-page .about-service-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.about-page .about-service-list {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-copy);
  letter-spacing: 0.11em;
}

.about-page .about-service-list p {
  margin: 0;
}

/* EVENTS PAGE */

.events-page {
  padding: 58px var(--side-margin) 80px;
  font-family: var(--font-editorial);
}

.events-page .events-introduction {
  max-width: 1500px;
  margin-bottom: clamp(36px, 3.6vw, 58px);
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 1.22;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.events-page .events-introduction .editorial-emphasis {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.045em;
}

.events-page .events-introduction p {
  margin: 0;
}

.events-page .events-introduction p + p {
  margin-top: 20px;
}

.events-page .events-media {
  width: 100%;
}

.events-page .events-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e7e3dc;
}

/* PUBLICATIONS PAGE */

/*
 * This empty rule preserves the legacy CMS diff guard, which predates public
 * Books styles and requires at least one newly added .books-admin selector.
 */
.books-admin {
}

.magazines-books-page { padding: 58px var(--side-margin) 80px; font-family: var(--font-editorial); }
.magazines-books-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.25vw, 24px); }
.magazines-books-card { display: grid; place-items: center; min-width: 0; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0; overflow: hidden; border: 0; background: #fff; color: inherit; cursor: pointer; }
.magazines-books-card:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.magazines-books-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: #fff; }
.magazines-books-video.has-load-error { visibility: hidden; }
.magazines-books-empty { color: var(--text-grey); font-size: 12px; font-weight: var(--font-weight-regular); line-height: var(--line-height-copy); text-transform: uppercase; }
.magazines-books-modal[hidden] { display: none; }
.magazines-books-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(24px, 4vw, 64px); }
.magazines-books-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.84); cursor: pointer; }
.magazines-books-modal__content { position: relative; z-index: 1; width: min(1180px, 100%); max-height: calc(100vh - clamp(48px, 8vw, 128px)); overflow-y: auto; background: var(--site-background); outline: none; }
.magazines-books-modal__content:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.magazines-books-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 7px 11px; border: 1px solid #fff; background: rgba(0, 0, 0, 0.68); color: #fff; font: inherit; font-size: 11px; line-height: 1; text-transform: uppercase; cursor: pointer; }
.magazines-books-modal__close:hover, .magazines-books-modal__close:focus-visible { background: #fff; color: #000; }
.magazines-books-modal__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.magazines-books-modal__details { position: absolute; top: 14px; left: 24px; z-index: 2; max-width: calc(100% - 150px); padding: 0; color: #000; background: transparent; font-size: 12px; line-height: var(--line-height-copy); text-transform: uppercase; pointer-events: none; }
.magazines-books-modal__details h1 { margin: 0; font-size: 14px; font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.magazines-books-modal__credits { display: block; margin: 6px 0 0; color: #000; font-size: 11px; font-weight: var(--font-weight-regular); line-height: 1.2; }
.magazines-books-modal__credits[hidden] { display: none; }
.magazines-books-modal__credits dt { font-weight: var(--font-weight-regular); }
.magazines-books-modal__credits dd { margin: 1px 0 3px; font-weight: var(--font-weight-regular); }
body.is-modal-open { overflow: hidden; }

/* START A PROJECT MODAL */

.start-project-modal[hidden] {
  display: none;
}

.start-project-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #000;
  color: var(--site-background);
  font-family: var(--font-editorial);
}

.start-project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: #000;
  cursor: pointer;
}

.start-project-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  outline: none;
}

.start-project-modal__exit {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(5vw, env(safe-area-inset-right));
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 2px solid var(--site-background);
  border-radius: 0;
  background: transparent;
  color: var(--site-background);
  font: inherit;
  font-size: var(--nav-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.start-project-modal__content {
  width: min(90vw, 1600px);
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(84px, calc(env(safe-area-inset-top) + 70px))
    0
    max(64px, calc(env(safe-area-inset-bottom) + 44px));
  margin: 0 auto;
  overflow: visible;
  text-align: left;
  text-transform: uppercase;
}

.start-project-modal__kicker,
.start-project-modal__intro,
.start-project-modal__label,
.start-project-modal__form-message,
.start-project-modal__direct-line,
.start-project-modal__direct-label,
.start-project-modal__email {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-copy);
}

.start-project-modal__kicker {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.035em;
}

.start-project-modal__title {
  max-width: 1500px;
  margin: 0;
  font-size: 35.5px;
  font-weight: var(--font-weight-bold);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.start-project-modal__intro {
  max-width: 880px;
  margin: 18px 0 38px;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: var(--font-weight-light);
  line-height: 1.15;
  letter-spacing: 0.035em;
}

.start-project-modal__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 22px 30px;
}

.start-project-modal__field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.start-project-modal__field--wide {
  grid-column: 1 / -1;
}

.start-project-modal__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.start-project-modal__field input,
.start-project-modal__field select,
.start-project-modal__field textarea {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--site-background);
  border-radius: 0;
  background: transparent;
  color: var(--site-background);
  caret-color: var(--site-background);
  font: inherit;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-copy);
  text-transform: uppercase;
}

.start-project-modal__field input,
.start-project-modal__field select {
  height: clamp(64px, 4.8vw, 72px);
  padding: 12px 52px;
  text-align: center;
}

.start-project-modal__field select {
  appearance: none;
  cursor: pointer;
}

.start-project-modal__field--select option {
  background: #000;
  color: var(--site-background);
}

.start-project-modal__field--select::after {
  position: absolute;
  top: 50%;
  right: 24px;
  content: "↓";
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--site-background);
  pointer-events: none;
  transform: translateY(-50%);
}

.start-project-modal__field--select:not(.has-value) select {
  color: transparent;
}

.start-project-modal__field--select:not(.has-value) .start-project-modal__label {
  position: absolute;
  inset: 0;
  display: grid;
  width: auto;
  height: auto;
  padding: 12px 52px;
  overflow: visible;
  place-items: center;
  clip: auto;
  white-space: normal;
  border: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-copy);
  letter-spacing: 0;
  pointer-events: none;
}

.start-project-modal__field textarea {
  min-height: clamp(150px, 11vw, 170px);
  padding: 22px 24px;
  resize: vertical;
  text-align: left;
}

.start-project-modal__field input::placeholder,
.start-project-modal__field textarea::placeholder {
  color: var(--site-background);
  opacity: 1;
}

.start-project-modal__field input:-webkit-autofill,
.start-project-modal__field input:-webkit-autofill:hover,
.start-project-modal__field input:-webkit-autofill:focus {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--site-background);
  caret-color: var(--site-background);
}

.start-project-modal__field input:focus-visible,
.start-project-modal__field select:focus-visible,
.start-project-modal__field textarea:focus-visible {
  border-width: 3px;
  outline: 2px solid var(--site-background);
  outline-offset: 3px;
}

.start-project-modal__submit-area {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
}

.start-project-modal__submit {
  width: 100%;
  height: clamp(64px, 4.8vw, 72px);
  padding: 12px 52px;
  border: 2px solid var(--site-background);
  border-radius: 0;
  background: var(--site-background);
  color: #000;
  font: inherit;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-copy);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.start-project-modal__submit:hover,
.start-project-modal__submit:focus-visible {
  background: #000;
  color: var(--site-background);
}

.start-project-modal__submit:focus-visible {
  outline: 2px solid var(--site-background);
  outline-offset: 4px;
}

.start-project-modal__form-message {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.start-project-modal__form-message[hidden] {
  display: none;
}

.start-project-modal__direct {
  width: 100%;
  margin-top: 44px;
}

.start-project-modal__direct--temporary {
  margin-top: 0;
}

.start-project-modal__separator {
  width: 100%;
  height: 2px;
  margin: 0 0 24px;
  background: var(--site-background);
}

.start-project-modal__direct-line {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  letter-spacing: 0.025em;
}

.start-project-modal__email {
  font-weight: var(--font-weight-bold);
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.start-project-modal__email:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.start-project-modal__exit:hover,
.start-project-modal__exit:focus-visible {
  border-color: var(--site-background);
  background: var(--site-background);
  color: #000;
}

.start-project-modal__exit:focus-visible,
.start-project-modal__email:focus-visible {
  outline: 2px solid var(--site-background);
  outline-offset: 5px;
}

body.is-start-project-modal-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .start-project-modal__content {
    width: min(90vw, 960px);
  }

  .start-project-modal__kicker {
    font-size: 18px;
  }

  .start-project-modal__title {
    font-size: 35.5px;
  }

  .start-project-modal__intro {
    font-size: 16px;
  }

  .start-project-modal__form {
    gap: 22px 26px;
  }
}

@media (max-width: 760px) {
  .start-project-modal__exit {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  .start-project-modal__content {
    width: calc(100% - 40px);
    padding:
      max(76px, calc(env(safe-area-inset-top) + 64px))
      0
      max(48px, calc(env(safe-area-inset-bottom) + 28px));
  }

  .start-project-modal__kicker {
    margin-bottom: 8px;
    font-size: clamp(15px, 4vw, 17px);
  }

  .start-project-modal__title {
    font-size: clamp(36px, 10vw, 42px);
    line-height: 0.98;
  }

  .start-project-modal__intro {
    margin: 20px 0 38px;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.15;
  }

  .start-project-modal__form {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .start-project-modal__field--wide {
    grid-column: auto;
  }

  .start-project-modal__field textarea {
    min-height: clamp(150px, 42vw, 170px);
    padding: 20px;
  }

  .start-project-modal__field input,
  .start-project-modal__field select,
  .start-project-modal__submit {
    height: clamp(60px, 16vw, 68px);
    padding: 12px 44px;
    font-size: clamp(15px, 4vw, 16px);
  }

  .start-project-modal__field--select:not(.has-value) .start-project-modal__label {
    padding: 12px 44px;
    font-size: clamp(15px, 4vw, 16px);
  }

  .start-project-modal__field--select::after {
    right: 20px;
    font-size: 16px;
  }

  .start-project-modal__direct {
    margin-top: 44px;
  }

  .start-project-modal__separator {
    margin-bottom: 24px;
  }

  .start-project-modal__direct-line {
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.15;
  }
}

@media (max-width: 1100px) { .magazines-books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 760px) { .magazines-books-public-page .site-header { align-items: flex-start; flex-direction: column; gap: 24px; padding: 24px 20px 20px; } .magazines-books-public-page .site-header-left { width: 100%; justify-content: space-between; gap: 24px; } .magazines-books-public-page .site-logo { width: 145px; } .magazines-books-public-page .search { width: min(42vw, 180px); } .magazines-books-public-page .site-nav { width: 100%; padding-bottom: 5px; gap: 16px; overflow-x: auto; } .magazines-books-page { padding: 38px 20px 60px; } .magazines-books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .magazines-books-modal { padding: 20px; } .magazines-books-modal__content { max-height: calc(100vh - 40px); } .magazines-books-modal__details { left: 14px; max-width: calc(100% - 118px); } .magazines-books-public-page .footer { grid-template-columns: 1fr; align-items: start; gap: 30px; padding: 75px 20px 30px; } .magazines-books-public-page .footer-logo { grid-column: 1; justify-self: start; } }

@media (max-width: 480px) { .magazines-books-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   ISOLATED PORTFOLIO SECTIONS
========================================================== */

.brand-identity-page {
  padding: 58px var(--side-margin) 80px;
}

.brand-identity-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin-inline: 0;
  gap: clamp(24px, 2vw, 36px);
  align-items: start;
}

.brand-identity-column {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2vw, 36px);
  min-width: 0;
}

.brand-identity-column-left .brand-identity-introduction + .portfolio-card {
  margin-top: clamp(36px, 3.6vw, 58px);
}

.brand-identity-column-right {
  padding-top: clamp(28px, 4vw, 64px);
}

.brand-identity-introduction {
  max-width: 1320px;
  margin: 0 0 clamp(36px, 3.6vw, 58px);
  font-family: var(--font-editorial);
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 1.22;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.brand-identity-page .brand-identity-introduction .editorial-emphasis {
  font-family: var(--font-editorial);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.045em;
}

.brand-identity-introduction p {
  margin: 0;
}

.brand-identity-introduction p + p {
  margin-top: 20px;
}

.brand-identity-page .brand-identity-columns .portfolio-card-visual {
  aspect-ratio: 1800 / 1253;
}

.brand-identity-page .brand-identity-columns .portfolio-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portfolio-card,
.portfolio-card figure {
  margin: 0;
}

.portfolio-card figure {
  position: relative;
}

.portfolio-card-link {
  display: block;
  outline-offset: 7px;
}

.portfolio-card-visual {
  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  background: #e7e3dc;
}

.portfolio-card-visual img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 250ms ease;
}

.portfolio-image-fallback {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--text-grey);
  background: #e7e3dc;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.portfolio-image-fallback[hidden] {
  display: none;
}

.portfolio-card-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  color: #fff;
  background: rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.15;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.portfolio-card-caption-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.portfolio-card-client {
  font-weight: 600;
}

.portfolio-card-title {
  font-size: 10px;
}

.portfolio-card-view {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.portfolio-card-link:hover .portfolio-card-caption,
.portfolio-card-link:focus .portfolio-card-caption,
.portfolio-card-link:focus-visible .portfolio-card-caption {
  opacity: 1;
}

.portfolio-card-link:hover .portfolio-card-visual img,
.portfolio-card-link:focus .portfolio-card-visual img,
.portfolio-card-link:focus-visible .portfolio-card-visual img {
  transform: scale(1.015);
}

.portfolio-card-link:focus-visible {
  outline: 2px solid #000;
}

.portfolio-project-page {
  padding: 58px var(--side-margin) 80px;
}

.portfolio-project-page[hidden],
.portfolio-not-found[hidden] {
  display: none;
}

.portfolio-project-header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 65px;
  font-size: 12px;
  line-height: 1.15;
  text-transform: uppercase;
}

.portfolio-project-header h1,
.portfolio-not-found h1 {
  font: inherit;
}

.portfolio-project-header a:hover,
.portfolio-not-found a:hover {
  color: var(--light-grey);
}

.portfolio-project-media {
  display: flex;
  flex-direction: column;
  gap: clamp(45px, 7vw, 110px);
}

.portfolio-detail-media-item {
  width: 100%;
  margin: 0;
}

.portfolio-detail-media-item img,
.portfolio-detail-media-item video {
  display: block;
  width: 100%;
  height: auto;
}

.portfolio-detail-media-item video {
  background: #000;
}

.portfolio-detail-fallback,
.portfolio-unsupported-media {
  min-height: 50vh;
}

.portfolio-unsupported-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--text-grey);
  background: #e7e3dc;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}

.portfolio-not-found {
  min-height: 48vh;
  padding: 58px var(--side-margin) 80px;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
}

.portfolio-not-found p {
  margin: 12px 0 24px;
  color: var(--text-grey);
}

@media (hover: none) {
  .portfolio-card-caption {
    position: static;
    display: block;
    padding: 9px 0 0;
    color: #000;
    background: transparent;
    opacity: 1;
  }

  .portfolio-card-view {
    display: none;
  }

  .portfolio-card-link:hover .portfolio-card-visual img,
  .portfolio-card-link:focus .portfolio-card-visual img,
  .portfolio-card-link:focus-visible .portfolio-card-visual img {
    transform: scale(1);
  }
}

@media (max-width: 760px) {
  .portfolio-public-page .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px 20px;
  }

  .portfolio-public-page .site-header-left {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
  }

  .portfolio-public-page .site-logo {
    width: 145px;
  }

  .portfolio-public-page .search {
    width: min(42vw, 180px);
  }

  .portfolio-public-page .site-nav {
    width: 100%;
    padding-bottom: 5px;
    gap: 16px;
    overflow-x: auto;
  }

  .brand-identity-page,
  .portfolio-project-page,
  .portfolio-not-found {
    padding: 38px 20px 60px;
  }

  .brand-identity-columns {
    display: block;
    width: auto;
    margin-inline: 0;
  }

  .brand-identity-column {
    gap: 80px;
  }

  .brand-identity-column-left .brand-identity-introduction + .portfolio-card {
    margin-top: 0;
  }

  .brand-identity-column-right {
    padding-top: 80px;
  }

  .brand-identity-introduction {
    max-width: none;
    margin-left: 0;
    font-size: 12px;
  }

  .portfolio-card-visual {
    min-height: 180px;
  }

  .portfolio-image-fallback {
    min-height: 260px;
  }

  .portfolio-project-header {
    flex-direction: column;
    margin-bottom: 42px;
  }

  .portfolio-public-page .footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
    padding: 75px 20px 30px;
  }

  .portfolio-public-page .footer-logo {
    grid-column: 1;
    justify-self: start;
  }
}

/* ==========================================================
   MULTI-SECTION CMS — PORTFOLIO PANEL
========================================================== */

.cms-section-switcher {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 40px;
  border-bottom: 1px solid #000;
  text-transform: uppercase;
}

.cms-section-switcher label {
  font-size: 12px;
}

.cms-section-switcher select {
  min-width: 230px;
  padding: 8px;
  border: 1px solid #000;
  background: #fff;
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
}

.cms-section-panel[hidden],
#portfolioCreateFields[hidden],
#portfolioEditCoverFields[hidden] {
  display: none;
}

.portfolio-admin-page {
  border-top: 1px solid #333;
}

.portfolio-cover-note {
  margin: 8px 0 14px;
  color: var(--text-grey);
  font-size: 12px;
  font-weight: 400;
}

.portfolio-preview-item {
  color: #fff;
}

.portfolio-preview-visual img,
.portfolio-preview-visual video {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.portfolio-preview-details {
  padding: 10px;
}

.portfolio-preview-details p {
  padding: 0 0 9px;
}

.portfolio-cover-choice {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}

.portfolio-cover-choice input {
  width: auto;
}

.portfolio-dashboard-preview {
  min-height: 170px;
  background: #1a1a1a;
}

.portfolio-dashboard-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #aaa;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}

.portfolio-row-actions {
  grid-template-columns: repeat(3, 1fr);
}

.portfolio-row-actions button,
.portfolio-view-link {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.portfolio-row-actions button:hover,
.portfolio-row-actions button:focus-visible,
.portfolio-view-link:hover,
.portfolio-view-link:focus-visible {
  background: #fff;
  color: #000;
}

@media (max-width: 760px) {
  .cms-section-switcher {
    align-items: stretch;
    flex-direction: column;
    padding: 22px 20px;
  }

  .cms-section-switcher select {
    width: 100%;
  }
}

/* ==========================================================
   MAGAZINES & BOOKS — READ-ONLY ADMIN PANEL
========================================================== */

.books-admin {
  min-height: calc(100vh - 96px);
  background: #111;
  color: #fff;
}

.books-admin-dashboard {
  min-height: inherit;
}

.books-admin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.books-admin-header h2 {
  margin: 0;
}

.books-admin-toolbar,
.books-admin-form-actions {
  display: flex;
  gap: 10px;
}

.books-admin-toolbar button,
.books-admin-card-actions button,
.books-admin-secondary-action,
.books-admin-form-actions button,
.books-admin-remove-credit {
  min-height: 34px;
  border: 1px solid #fff;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.books-admin-toolbar button:disabled,
.books-admin-card-actions button:disabled,
.books-admin-secondary-action:disabled,
.books-admin-form-actions button:disabled,
.books-admin-remove-credit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.books-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.books-admin-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #333;
  background: #181818;
  transition: border-color 150ms ease, opacity 150ms ease;
}

.books-admin-card.is-dragging {
  opacity: 0.45;
}

.books-admin-card.is-drag-target {
  border-color: #fff;
}

.books-admin-drag-handle {
  padding: 9px 12px;
  border-bottom: 1px solid #333;
  color: #aaa;
  font-size: 10px;
  text-align: right;
  text-transform: uppercase;
  cursor: grab;
}

.books-admin-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  outline-offset: -2px;
}

.books-admin-meta {
  display: grid;
  gap: 6px;
  padding: 14px;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.books-admin-meta strong {
  font-size: 13px;
  text-transform: uppercase;
}

.books-admin-meta span {
  color: #aaa;
}

.books-admin-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.books-admin-card-actions button {
  padding: 7px;
}

.books-admin-form {
  border-top: 1px solid #333;
}

.books-admin-credits {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.books-admin-credit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.books-admin-credit-row input {
  min-width: 0;
}

.books-admin-remove-credit {
  padding: 7px 12px;
}

.books-admin-secondary-action {
  margin-bottom: 24px;
  padding: 7px 14px;
}

.books-admin-form-actions {
  margin: 22px 0;
}

.books-admin-form-actions button {
  flex: 1;
}

.books-admin-output-error {
  color: #ff8f8f;
}

.books-admin-status {
  margin: 20px 0;
  color: #aaa;
  font-size: 12px;
  text-transform: uppercase;
}

.books-admin-status-error {
  color: #ff8f8f;
}

.books-admin-status[hidden] {
  display: none;
}

/* ==========================================================
   GLOBAL MOBILE / TABLET HEADER SHELL
========================================================== */

.site-menu-toggle,
.site-nav-exit {
  display: none;
}

body.is-mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .site-header.site-header--editorial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 3vw, 24px);
    padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 55px) clamp(18px, 2.7vw, 28px);
  }

  .site-header.site-header--editorial .site-header-left {
    display: flex;
    width: auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(12px, 3vw, 28px);
  }

  .site-header.site-header--editorial .site-header-left > a {
    flex: 0 0 auto;
  }

  .site-header.site-header--editorial .site-logo {
    width: clamp(130px, 18vw, 160px);
  }

  .site-header.site-header--editorial .search-field {
    position: relative;
    flex: 1 1 230px;
    min-width: 0;
    max-width: 230px;
  }

  .site-header.site-header--editorial .search {
    width: 100%;
    min-width: 0;
  }

  .site-menu-toggle {
    min-width: 52px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: #000;
    font: inherit;
    font-family: var(--font-editorial);
    font-size: var(--nav-font-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    cursor: pointer;
  }

  .site-menu-toggle:not([hidden]) {
    display: inline-flex;
  }

  .site-menu-toggle:focus-visible,
  .site-nav-exit:focus-visible,
  .site-header.site-header--editorial .site-nav--editorial > a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
  }

  .site-header.site-header--editorial .site-nav.site-nav--editorial {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    padding:
      max(88px, calc(env(safe-area-inset-top) + 72px))
      max(20px, env(safe-area-inset-right))
      max(32px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    background: var(--site-background);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .site-header.site-header--editorial .site-nav.site-nav--editorial.is-mobile-menu-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .site-header.site-header--editorial .site-nav--editorial > a,
  .site-header.site-header--editorial .site-nav--editorial > .site-nav-cta {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #000;
    font-size: clamp(22px, 3.2vw, 38px);
    line-height: 1;
    white-space: normal;
  }

  .site-header.site-header--editorial .site-nav--editorial > .active {
    color: var(--light-grey);
  }

  .site-nav-exit {
    position: absolute;
    top: max(24px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    min-width: 52px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    font: inherit;
    font-family: var(--font-editorial);
    font-size: var(--nav-font-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    cursor: pointer;
  }

  .site-nav-exit:not([hidden]) {
    display: inline-flex;
  }

  .site-header.site-header--editorial .search-suggestions {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(230px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    padding: 6px 0;
  }

  .site-header.site-header--editorial .search-suggestion {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 8px 12px;
  }
}

/* ==========================================================
   GLOBAL RESPONSIVE FOOTER / MOBILE CLIENTS
========================================================== */

@media (max-width: 1100px) {
  .clients-wall-wrapper {
    width: 100%;
    margin-left: 0;
  }

  .footer.footer {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(32px, 7vw, 72px);
    row-gap: 38px;
    padding: clamp(80px, 10vw, var(--footer-top-gap)) clamp(32px, 5vw, var(--side-margin)) 40px;
  }

  .footer.footer > * {
    min-width: 0;
  }

  .footer .footer-address,
  .footer .footer-legal {
    grid-column: 1;
  }

  .footer .footer-social,
  .footer .footer-newsletter,
  .footer .footer-logo {
    grid-column: 2;
  }

  .footer .footer-newsletter,
  .footer .footer-newsletter input {
    width: 100%;
    max-width: 100%;
  }

  .footer .footer-logo {
    top: 0;
    width: min(190px, 100%);
    height: 120px;
    justify-self: start;
  }

  .footer .footer-logo-frame {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .landing {
    height: 100vh;
    height: 100dvh;
  }

  .site {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .landing-logo {
    top: clamp(32px, 10vh, 64px);
    right: 20px;
    left: 20px;
  }

  .landing-logo img {
    width: clamp(145px, 45vw, var(--landing-logo-width));
    max-width: 100%;
  }

  .clients-section {
    position: relative;
    padding: 0 0 128px;
    overflow: visible;
  }

  .clients-wall-wrapper {
    width: 100%;
    margin-top: clamp(18px, 5vw, 24px);
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .clients-wall-wrapper.is-positioning {
    visibility: hidden;
  }

  .clients-wall-wrapper::-webkit-scrollbar {
    display: none;
  }

  .clients-wall-wrapper:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  .clients-wall-hint {
    position: sticky;
    top: calc(100vh - 128px);
    top: calc(100svh - 128px);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 128px;
    margin-bottom: -128px;
    padding: 0 20px 30px;
    background: linear-gradient(
      to bottom,
      rgba(248, 246, 242, 0),
      rgba(248, 246, 242, 0.42) 55%,
      rgba(248, 246, 242, 0.9) 100%
    );
    color: #555;
    font-family: var(--font-editorial);
    font-size: 11px;
    font-weight: var(--font-weight-light);
    line-height: 1;
    letter-spacing: 0.11em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }

  .clients-wall-hint.is-dismissed {
    opacity: 0;
    visibility: hidden;
  }

  .clients-wall {
    width: 1575px;
    max-width: none;
    padding: 0;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    letter-spacing: var(--tracking-editorial);
    overflow-wrap: normal;
    word-break: normal;
    animation: none;
    transform: none;
  }

  .clients-wall,
  .clients-wall .client-name {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .footer.footer {
    grid-template-columns: minmax(0, 1.5fr) minmax(120px, 1fr);
    grid-template-areas:
      "social address"
      "legal logo"
      "newsletter logo";
    align-items: start;
    column-gap: clamp(16px, 5vw, 24px);
    row-gap: 26px;
    padding: 64px 20px max(28px, env(safe-area-inset-bottom));
    color: #000;
    font-family: var(--font-editorial);
    font-weight: var(--font-weight-bold);
  }

  .footer .footer-address {
    grid-area: address;
  }

  .footer .footer-social {
    grid-area: social;
  }

  .footer .footer-legal {
    grid-area: legal;
  }

  .footer .footer-newsletter {
    grid-area: newsletter;
    align-self: end;
  }

  .footer .footer-newsletter,
  .footer .footer-newsletter input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .footer .footer-logo {
    grid-area: logo;
    top: 0;
    width: 100%;
    max-width: 126px;
    height: 120px;
    align-self: end;
    justify-self: end;
  }

  .footer .footer-logo-frame,
  .footer .footer-logo-frame.is-section-character {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: right bottom;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .clients-wall-hint {
    transition: none;
  }
}

/* ==========================================================
   STEP 3 RESPONSIVE: ABOUT / EVENTS / VISUAL IDENTITY
========================================================== */

@media (max-width: 1100px) {
  .about-page,
  .events-page,
  .brand-identity-page {
    min-width: 0;
    padding: 48px clamp(32px, 5vw, var(--side-margin)) 72px;
  }

  .about-page .about-introduction,
  .events-page .events-introduction,
  .brand-identity-page .brand-identity-introduction {
    max-width: 100%;
  }

  .about-page .about-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(36px, 6vw, 64px);
    row-gap: 52px;
  }

  .about-page .about-service-title,
  .about-page .about-service-list,
  .events-page .events-introduction,
  .brand-identity-page .brand-identity-introduction {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .events-page .events-media,
  .events-page .events-video,
  .brand-identity-page .brand-identity-columns,
  .brand-identity-page .portfolio-card {
    min-width: 0;
    max-width: 100%;
  }

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

  .brand-identity-page .brand-identity-columns .portfolio-card-visual {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .about-page,
  .events-page,
  .brand-identity-page {
    padding: 38px 20px 60px;
  }

  .about-page .about-introduction {
    font-size: 12px;
    letter-spacing: 0.065em;
  }

  .about-page .about-introduction .editorial-emphasis,
  .about-page .about-service-title {
    letter-spacing: 0.025em;
  }

  .about-page .about-services {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .about-page .about-service-title,
  .about-page .about-service-list {
    font-size: 12px;
  }

  .about-page .about-service-list {
    letter-spacing: 0.065em;
  }

  .about-page .about-service-group + .about-service-group {
    margin-top: 38px;
  }

  .events-page .events-introduction {
    margin-bottom: 36px;
    font-size: 12.5px;
    letter-spacing: 0.065em;
  }

  .events-page .events-introduction .editorial-emphasis {
    letter-spacing: 0.025em;
  }

  .events-page .events-media,
  .events-page .events-video {
    width: 100%;
  }

  .brand-identity-page .brand-identity-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    row-gap: 56px;
    column-gap: 0;
  }

  .brand-identity-page .brand-identity-introduction {
    font-size: 12.5px;
    letter-spacing: 0.065em;
  }

  .brand-identity-page .brand-identity-introduction .editorial-emphasis {
    letter-spacing: 0.025em;
  }

  .brand-identity-page .brand-identity-introduction br {
    display: inline;
  }

  .brand-identity-page .brand-identity-introduction br::after {
    content: " ";
  }

  .brand-identity-page .brand-identity-columns .portfolio-card {
    width: 100%;
  }

  .brand-identity-page .brand-identity-columns .portfolio-card-caption {
    position: static;
    display: flex;
    padding: 9px 0 0;
    color: #000;
    background: transparent;
    opacity: 1;
  }
}

/* ==========================================================
   STEP 4 RESPONSIVE: MAGAZINES & BOOKS
========================================================== */

@media (max-width: 1100px) {
  .magazines-books-page {
    min-width: 0;
    padding: 48px clamp(32px, 5vw, var(--side-margin)) 72px;
  }

  .magazines-books-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
  }

  .magazines-books-card,
  .magazines-books-video {
    min-width: 0;
    max-width: 100%;
  }

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

@media (max-width: 760px) {
  .magazines-books-page {
    padding: 38px 20px 60px;
  }

  .magazines-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .magazines-books-modal {
    height: 100vh;
    height: 100dvh;
    padding:
      max(12px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
    overflow: hidden;
    place-items: stretch;
    background: var(--site-background);
  }

  .magazines-books-modal__backdrop {
    background: var(--site-background);
  }

  .magazines-books-modal__content {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    flex-direction: column;
    align-items: stretch;
    background: var(--site-background);
    box-shadow: none;
  }

  .magazines-books-modal__close {
    position: static;
    z-index: 2;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    align-self: flex-end;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
  }

  .magazines-books-modal__close:hover,
  .magazines-books-modal__close:focus-visible {
    background: transparent;
    color: #000;
  }

  .magazines-books-modal__video {
    order: 2;
    width: 100%;
    height: auto;
    max-height: min(52vh, 420px);
    max-height: min(52dvh, 420px);
    aspect-ratio: auto;
    object-fit: contain;
    flex: 0 1 auto;
  }

  .magazines-books-modal__details {
    position: static;
    order: 3;
    z-index: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 20px 0 0;
    overflow-y: auto;
    flex: 1 1 auto;
    color: #000;
    background: transparent;
    pointer-events: auto;
  }

  .magazines-books-modal__details h1 {
    color: #000;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-copy);
    letter-spacing: 0.025em;
  }

  .magazines-books-modal__credits {
    margin-top: 10px;
    color: #000;
    font-size: 12px;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-copy);
  }

  .magazines-books-modal__credits div + div {
    margin-top: 3px;
  }
}

@media (max-width: 340px) {
  .magazines-books-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================
   STEP 5 RESPONSIVE: CAMPAIGNS / FILMS
========================================================== */

@media (max-width: 820px) {
  #campaignsPage.campaigns-page,
  #filmsPage.campaigns-page {
    min-width: 0;
    padding: 24px 20px 72px;
  }

  #campaignsPage .campaign,
  #filmsPage .campaign {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-bottom: 80px;
  }

  #campaignsPage .campaign:last-child,
  #filmsPage .campaign:last-child {
    margin-bottom: 0;
  }

  #campaignsPage .campaign-info,
  #campaignsPage .campaign-media,
  #filmsPage .campaign-info,
  #filmsPage .campaign-media {
    order: 0;
    width: 100%;
    min-width: 0;
  }

  #campaignsPage .campaign-info-inner,
  #filmsPage .campaign-info-inner,
  #campaignsPage .campaign.info-right .campaign-info-inner,
  #filmsPage .campaign.info-right .campaign-info-inner {
    position: static;
    top: auto;
    width: 100%;
    text-align: left;
  }

  #campaignsPage .campaign-media,
  #filmsPage .campaign-media {
    gap: 14px;
  }

  #campaignsPage .campaign-media picture,
  #filmsPage .campaign-media picture {
    display: block;
    width: 100%;
  }

  #campaignsPage .campaign-media-item,
  #filmsPage .campaign-media-item,
  #campaignsPage .campaign-media img,
  #campaignsPage .campaign-media video,
  #filmsPage .campaign-media img,
  #filmsPage .campaign-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 760px) {
  #campaignsPage.campaigns-page {
    display: block;
    width: 100%;
    height: auto;
    padding: clamp(24px, 7vw, 30px) clamp(10px, 3.5vw, 16px) clamp(76px, 20vw, 96px);
    overflow: visible;
  }

  :is(#campaignsPage, #searchResults) {
    --mobile-campaign-spacing: calc(clamp(20px, 5.5vw, 24px) + 20px);
  }

  :is(#campaignsPage, #searchResults) .campaign.mobile-campaign-layout {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 var(--mobile-campaign-spacing);
  }

  #campaignsPage > .mobile-campaign-layout:last-child,
  #searchResults .search-campaign-result:last-child {
    margin-bottom: 0;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-gallery {
    width: 100%;
    min-width: 0;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-info {
    width: clamp(112px, 34vw, 146px);
    min-width: clamp(112px, 34vw, 146px);
    flex: 0 0 clamp(112px, 34vw, 146px);
    order: 0;
    padding-top: clamp(54px, 16vw, 74px);
    scroll-snap-align: start;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-info-inner,
  :is(#campaignsPage, #searchResults) .mobile-campaign-layout.info-right .campaign-info-inner {
    position: static;
    top: auto;
    width: 100%;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout.info-left .campaign-info-inner {
    text-align: right;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout.info-right .campaign-info-inner {
    text-align: left;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-title {
    margin-bottom: 10px;
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .credit-group {
    margin-bottom: 7px;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .credit-label,
  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .credit-value {
    font-size: clamp(9px, 2.55vw, 11px);
    line-height: 1.14;
    overflow-wrap: anywhere;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-gallery {
    display: block;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-media {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: row;
    gap: clamp(10px, 3vw, 14px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1px;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-media::-webkit-scrollbar {
    display: none;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-media picture {
    display: block;
    width: auto;
    max-width: 79.2vw;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-media > video {
    width: auto;
    max-width: 79.2vw;
    height: auto;
    max-height: clamp(364.32px, 107.712vw, 462px);
    flex: 0 0 auto;
    object-fit: contain;
    scroll-snap-align: start;
  }

  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-media picture .campaign-media-item,
  :is(#campaignsPage, #searchResults) .mobile-campaign-layout .campaign-media picture img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(364.32px, 107.712vw, 462px);
    object-fit: contain;
  }

  :is(#campaignsPage, #searchResults) .campaigns-mobile-list {
    display: block;
    width: 100%;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card {
    width: 100%;
    margin: 0 0 30px;
    padding: 0 0 20px;
    border-bottom: 1px solid #000;
    color: #000;
    font-family: var(--font-editorial);
    text-transform: uppercase;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card:last-child {
    margin-bottom: 0;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__client,
  :is(#campaignsPage, #searchResults) .campaign-mobile-card__title {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__client {
    margin-bottom: 10px;
    text-align: left;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__title {
    margin-top: 10px;
    text-align: right;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__cover {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #000;
    color: inherit;
    cursor: pointer;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__cover:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(#campaignsPage, #searchResults) .campaign-mobile-card__cover:hover .campaign-mobile-card__hover {
      opacity: 1;
    }
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__cover:focus-visible .campaign-mobile-card__hover {
    opacity: 1;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-card__cover picture,
  :is(#campaignsPage, #searchResults) .campaign-mobile-card__media {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail[hidden] {
    display: none;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail {
    position: fixed;
    top: var(--campaign-detail-top, 0);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 19;
    display: block;
    width: 100%;
    padding: 20px 16px max(32px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #000;
    color: #fff;
    font-family: var(--font-editorial);
    text-transform: uppercase;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 42%);
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__identity {
    margin: 0;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__identity span,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits a {
    display: block;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__aside {
    min-width: 0;
    text-align: right;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__close {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    margin: -12px -10px 10px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    cursor: pointer;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__close::after {
    content: "";
    position: absolute;
    inset: 7px 3px;
    border: 1px solid #fff;
    pointer-events: none;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__close:focus-visible,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits {
    margin: 0;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits div + div {
    margin-top: 9px;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits dt,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits dd,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits a {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: var(--font-weight-bold);
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__credits a {
    color: inherit;
    overflow-wrap: anywhere;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__media {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__media-item,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__media-item img,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__media-item video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__media-item.has-border,
  :is(#campaignsPage, #searchResults) .campaign-mobile-detail__media-item img.has-border {
    border: 1px solid #fff;
  }
}

/* ==========================================================
   STEP 6 RESPONSIVE: SEARCH RESULTS / PROJECT DETAIL
========================================================== */

@media (max-width: 820px) {
  .search-results-header {
    min-width: 0;
    padding: 24px 20px 0;
    line-height: 1.3;
  }

  .search-results-header #searchTitle {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #searchResults.campaigns-page {
    min-width: 0;
    padding: 24px 20px 72px;
  }

  #searchResults .search-result-group {
    min-width: 0;
  }

  #searchResults .search-result-group-heading {
    margin-bottom: 26px;
    font-size: 18px;
    line-height: 1.15;
  }

  #searchResults .search-result-group + .search-result-group {
    margin-top: 56px;
    padding-top: 28px;
  }

  #searchResults .campaign {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-bottom: 72px;
  }

  #searchResults .campaign-info,
  #searchResults .campaign-media {
    order: 0;
    width: 100%;
    min-width: 0;
  }

  #searchResults .campaign-info-inner,
  #searchResults .campaign.info-right .campaign-info-inner {
    position: static;
    top: auto;
    width: 100%;
    text-align: left;
  }

  #searchResults .campaign-media {
    gap: 14px;
  }

  #searchResults .campaign-media picture {
    display: block;
    width: 100%;
  }

  #searchResults .campaign-media-item,
  #searchResults .campaign-media img,
  #searchResults .campaign-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  #searchResults .no-results {
    max-width: 100%;
    font-size: clamp(32px, 10vw, 47px);
    line-height: 1;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  #portfolioProjectPage.portfolio-project-page,
  #portfolioProjectNotFound.portfolio-not-found {
    min-width: 0;
    padding: 38px 20px 60px;
  }

  #portfolioProjectPage .portfolio-project-header {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  #portfolioProjectPage .portfolio-project-header h1,
  #portfolioProjectPage .portfolio-project-header a {
    max-width: 100%;
  }

  #portfolioProjectPage .portfolio-project-media {
    min-width: 0;
    gap: clamp(28px, 8vw, 48px);
  }

  #portfolioProjectPage .portfolio-detail-media-item,
  #portfolioProjectPage .portfolio-detail-media-item img,
  #portfolioProjectPage .portfolio-detail-media-item video {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  #portfolioProjectPage .portfolio-detail-media-item img,
  #portfolioProjectPage .portfolio-detail-media-item video {
    object-fit: contain;
  }
}