/* Graphonice additions on top of the Clipzo Webflow CSS.
   Rule of thumb: reuse Clipzo classes; only add gx-* classes for things the template had no component for. */

/* ---------- Brand ---------- */
.gx-logo { width: auto; height: 58px; }
.gx-footer-logo { width: auto; height: 72px; }
.footer-left-block .w-inline-block { display: inline-block; }

/* ---------- Hero: Clipzo banner with the reel behind it ---------- */
.section.banner-section.home.gx-hero { background-image: none; overflow: hidden; }
.gx-hero-video {
  position: absolute; inset: 0; z-index: 0; height: 100%; width: 100%;
  background-color: #040404;
}
.gx-hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: 50%; }
.gx-hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,4,4,.55) 0%, rgba(4,4,4,0) 22%, rgba(4,4,4,0) 50%, rgba(4,4,4,.82) 100%);
}
.gx-hero .container { position: relative; z-index: 2; }
.gx-hero-title { white-space: nowrap; }
.gx-hero-right { text-align: right; }

/* ---------- Story tabs: role accent ---------- */
.gx-role { color: var(--color--white); }
.story-slider-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: 50%; }

/* ---------- Selected work cards ---------- */
.gx-work-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 420px; }
.gx-lede { color: var(--color--gray-color, #9a9a9a); font-size: 18px; line-height: 1.5; }
.inner-image-home { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #0d0d0d; }
.project-wrapper-home.v1 > div:first-child .inner-image-home { aspect-ratio: 16 / 9; }
.project-wrapper-home.v1 > div:not(:first-child) .inner-image-home { aspect-ratio: 3 / 4; }
.inner-image-home .project-image-v1,
.inner-image-home .card-loop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.inner-image-home .card-loop { opacity: 0; }
.project-link.is-playing .card-loop { opacity: 1; }
.project-link:hover .project-image-v1 { transform: scale(1.04); }
.project-meta { display: flex; flex-direction: column; gap: 6px; }
.project-sub { color: var(--color--gray-color, #9a9a9a); font-size: 14px; line-height: 1.4; margin: 0; }

/* ---------- Stills ---------- */
.gx-stills-section { padding-bottom: 40px; }
.gx-stills-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.gx-stills-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
}
.gx-still { position: relative; display: block; overflow: hidden; padding: 12px; color: var(--color--white); }
.gx-still img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(.92); }
.gx-still:hover img { transform: scale(1.04); filter: saturate(1); }
/* editorial mosaic: varied spans, six tiles */
.gx-still-1 { grid-column: 1 / span 5; grid-row: span 4; }
.gx-still-2 { grid-column: 6 / span 3; grid-row: span 3; }
.gx-still-3 { grid-column: 9 / span 4; grid-row: span 3; }
.gx-still-4 { grid-column: 6 / span 3; grid-row: span 4; }
.gx-still-5 { grid-column: 9 / span 4; grid-row: span 4; }
.gx-still-6 { grid-column: 1 / span 5; grid-row: span 3; }

/* ---------- About ---------- */
.background-video-2 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gx-about-right { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }

/* ---------- CTA video ---------- */
.cta-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer ---------- */
.gx-footer-grid { grid-template-columns: 1fr; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 991px) {
  .gx-hero-title { white-space: normal; }
  .gx-stills-grid { grid-auto-rows: 90px; }
}
@media screen and (max-width: 767px) {
  .gx-logo { height: 36px; }
  .gx-hero .banner-wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gx-hero .banner-title-wrap { width: 100%; align-items: flex-start; }
  .gx-hero-title { font-size: 14.2vw; letter-spacing: -0.05em; white-space: nowrap; text-align: left; }
  .gx-hero-right { display: none; }
  .inner-image-home,
  .project-wrapper-home.v1 > div .inner-image-home { aspect-ratio: 4 / 3; }
  .gx-stills-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 12px; }
  .gx-stills-grid .gx-still { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; padding: 8px; }
  .gx-stills-grid .gx-still-1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .inner-image-home .card-loop { display: none; }
  .gx-still img, .inner-image-home .project-image-v1 { transition: none; }
}

/* ===================== Inner pages ===================== */

/* ---------- Work list (Clipzo project-link-block) ---------- */
.gx-work-media { position: relative; aspect-ratio: 16 / 10; background: #0d0d0d; }
.gx-work-media .project-image,
.gx-work-media .card-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gx-work-media .card-loop { opacity: 0; z-index: 2; }
.project-link-block.is-playing .card-loop { opacity: 1; }
.project-link-block:hover .project-image { transform: scale(1.03); }
.project-link-block .title-wrap p:last-child { color: var(--color--gray-color, #9a9a9a); }

/* ---------- Film page ---------- */
.gx-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.gx-player video, .gx-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.gx-note { color: var(--color--gray-color, #9a9a9a); font-size: 14px; }
.overview-image-wrapper img { width: 100%; height: auto; display: block; }
.gx-next { margin-top: 120px; padding-top: 40px; border-top: 1px solid var(--color--stroke-color, #222); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.gx-next-link { display: flex; flex-direction: column; gap: 6px; color: var(--color--white); text-decoration: none; margin-bottom: 16px; }
.gx-next-link:hover .heading-4 { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Photography gallery: column masonry, natural ratios, no holes ---------- */
.gx-gallery { margin-top: 96px; column-count: 3; column-gap: 20px; }
.gx-gallery-item { position: relative; display: block; overflow: hidden; padding: 12px; margin-bottom: 20px; break-inside: avoid; color: var(--color--white); }
.gx-gallery-item img { width: 100%; height: auto; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gx-gallery-item:hover img { transform: scale(1.03); }
.gx-gallery-cat { position: absolute; left: 24px; bottom: 20px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .3s ease; }
.gx-gallery-item:hover .gx-gallery-cat, .gx-gallery-item:focus-visible .gx-gallery-cat { opacity: 1; }

.gx-lightbox { position: fixed; inset: 0; z-index: 2000000; background: rgba(4,4,4,.96); display: flex; align-items: center; justify-content: center; }
.gx-lightbox[hidden] { display: none; }
.gx-lightbox figure { margin: 0; max-width: 88vw; max-height: 86vh; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.gx-lightbox img { max-width: 88vw; max-height: 80vh; object-fit: contain; }
.gx-lightbox figcaption { color: var(--color--gray-color, #9a9a9a); font-size: 14px; }
.gx-lightbox button { position: absolute; background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 10px 16px; font: inherit; cursor: pointer; }
.gx-lightbox button:hover { border-color: #fff; }
.gx-lb-close { top: 24px; right: 24px; }
.gx-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.gx-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- About ---------- */
.gx-about-lead { font-size: 22px; line-height: 1.5; color: var(--color--white); }
.gx-muted { color: var(--color--gray-color, #9a9a9a); font-size: 14px; margin-top: 12px; }
.gx-credits { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--color--stroke-color, #222); }
.gx-credits li { border-bottom: 1px solid var(--color--stroke-color, #222); }
.gx-credits a { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 24px; padding: 24px 0; color: var(--color--white); text-decoration: none; transition: padding .3s ease; }
.gx-credits a:hover { padding-left: 12px; }
.gx-credit-title { font-size: 24px; }
.gx-credit-artist, .gx-credit-role { color: var(--color--gray-color, #9a9a9a); align-self: center; }
.gx-credit-role { text-align: right; color: var(--color--white); }

/* ---------- Contact ---------- */
.gx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gx-form .contact-form > div { min-width: 0; }
.gx-span-2 { grid-column: 1 / -1; }
.gx-form-done { padding: 32px; border: 1px solid var(--color--stroke-color, #222); color: var(--color--white); }
.gx-contact-image { width: 100%; height: 100%; object-fit: cover; opacity: .35; }

@media screen and (max-width: 991px) {
  .gx-gallery { column-count: 2; }
}
@media screen and (max-width: 767px) {
  .gx-gallery { column-count: 1; margin-top: 48px; }
  .gx-gallery-item { padding: 8px; margin-bottom: 12px; }
  .gx-gallery-cat { opacity: 1; }
  .gx-credits a { grid-template-columns: 1fr; gap: 4px; }
  .gx-credit-role { text-align: left; }
  .gx-lb-prev, .gx-lb-next { top: auto; bottom: 24px; transform: none; }
}

/* ---------- 404 ---------- */
.gx-404 { min-height: 80vh; display: flex; align-items: center; }
.gx-404-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }