/* ==========================================================================
   SKR Films — Main Stylesheet
   Migrated from Webflow, hand-coded for editability
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Thicccboi';
  src: url('../fonts/THICCCBOI-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thicccboi';
  src: url('../fonts/THICCCBOI-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thicccboi';
  src: url('../fonts/THICCCBOI-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thicccboi';
  src: url('../fonts/THICCCBOI-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Thicccboi';
  src: url('../fonts/THICCCBOI-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- CSS Variables ---------- */
:root {
  --dark: black;
  --light: #dad7d4;
  --paragraphs: rgba(218, 215, 212, 0.6);
  --border: rgba(218, 215, 212, 0.18);
  --background: rgba(218, 215, 212, 0.07);
  --optional: rgba(218, 215, 212, 0.44);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark);
  color: var(--paragraphs);
  font-family: 'Thicccboi', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 153%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--light);
  text-transform: uppercase;
  font-family: 'Thicccboi', sans-serif;
}

h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 90%;
  margin-bottom: 30px;
}

h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 95%;
  margin-bottom: 28px;
}

h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  margin-bottom: 15px;
}

h5 {
  font-size: 24px;
  font-weight: 700;
  line-height: 115%;
  margin-bottom: 20px;
}

h6 {
  font-size: 20px;
  font-weight: 700;
  line-height: 115%;
  margin-bottom: 20px;
}

p {
  margin-bottom: 35px;
}

em, .accent {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
}

a {
  box-shadow: inset 0 -1px 0 0 var(--light);
  color: var(--light);
  text-decoration: none;
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a:hover {
  box-shadow: inset 0 -26px 0 0 var(--light);
  color: var(--dark);
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  padding: 15px 1.7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

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

.brand {
  padding: 10px 5px;
  box-shadow: none;
}

.brand:hover {
  box-shadow: none;
}

.logo {
  width: 4vw;
  min-width: 36px;
}

.nav-links {
  display: flex;
  align-items: center;
}

.nav-link {
  color: var(--light);
  font-size: 16px;
  font-weight: 600;
  line-height: 110%;
  padding: 16px 22px;
  text-decoration: none;
  box-shadow: none;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-link:hover {
  box-shadow: none;
  color: var(--optional);
}

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


/* Hamburger (mobile) */
.menu-button {
  display: none;
  cursor: pointer;
  z-index: 200;
}

.block-icon-menu {
  background-color: var(--background);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-menu {
  width: 20px;
}

/* Mobile nav overlay */
.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  z-index: 150;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 15px;
}

.nav-overlay.open {
  display: flex;
}

.nav-overlay .nav-link {
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  display: block;
}


/* ---------- Overflow (animation clip container) ---------- */
.overflow {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: -10px;
  padding-left: 10px;
  padding-right: 10px;
}

/* ---------- Scroll Reveal ---------- */
.reveal {
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.reveal.visible {
  transform: translateY(0);
}

/* Hero reveals trigger on page load via JS, not scroll */
.hero-reveal {
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-reveal.visible {
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Hero Sections ---------- */

/* Home hero (horizontal layout) */
.section-hero-c {
  padding: 240px 1.7vw 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hero-c {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 1.2vw;
  align-items: baseline;
  width: 100%;
}

.heading-hero-c {
  font-size: 7vw;
  font-weight: 700;
  line-height: 90%;
  margin-bottom: 0;
  display: inline-block;
}

.heading-accent-c {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 6vw;
  text-transform: none;
  line-height: 90%;
  color: var(--light);
  margin-bottom: 0;
}

/* Narrative hero (centered) */
.section-hero-b {
  padding: 240px 1.7vw 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-b {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.heading-hero-b {
  font-size: 7vw;
  font-weight: 700;
  line-height: 90%;
  margin-bottom: 0;
  display: inline-block;
}

.text-span-accent-b {
  font-family: 'Playfair Display', sans-serif;
  font-size: 6vw;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  line-height: 90%;
}

.block-paragraph-hero-b {
  margin-top: 30px;
  overflow: hidden;
}

.paragraph-hero-b {
  color: var(--light);
  font-size: 20px;
  font-weight: 500;
  line-height: 153%;
  max-width: 450px;
  text-align: center;
}

/* Top-section hero (About, Contact) */
.section-top {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 240px 1.7vw 1.7vw;
  display: flex;
}

.heading-top {
  font-size: 13vw;
  font-weight: 700;
  line-height: 90%;
  margin-bottom: 72px;
  display: inline-block;
}

/* Installation hero */
.section-hero-d {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: auto;
  padding: 90px 1.7vw 52px;
  display: flex;
  overflow: hidden;
  text-align: center;
}

.heading-hero-d {
  align-self: center;
  margin: 3vw 25% 34px;
  font-size: 7vw;
  font-weight: 600;
  display: inline-block;
}

.hero-subtitle {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-size: 50px;
  margin-top: -5%;
  margin-bottom: 4%;
  color: var(--light);
  text-transform: none;
}

.hero-tagline {
  color: var(--light);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  padding-top: 2%;
}

/* ---------- Category Divider ---------- */
.divider-container {
  padding: 0 1.7vw;
}

.divider {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--border);
}

.divider-text {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-size: 20px;
  color: var(--light);
  white-space: nowrap;
}

/* ---------- Project Grids ---------- */

/* Shared list wrapper */
.list {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  margin-top: 15px;
  padding-left: 10%;
  padding-right: 10%;
  font-size: 22px;
  display: flex;
  position: relative;
}

/* Home page — 3-column video grid */
.grid-project-c {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1.2vw;
  grid-row-gap: 2.2vw;
}

/* ---------- Project Tiles (Home) ---------- */
.project-tile {
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  display: block;
}

.project-tile:hover {
  box-shadow: none;
}

.tile-video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  transform: translateZ(0); /* own compositing layer, so playing video stays clipped to the rounded corners */
  height: 17vw;
}

.project-tile .tile-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-tile video.tile-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-tile:hover .tile-bg {
  transform: scale(1.03);
}

.tile-info {
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
}

.tile-info .overflow {
  justify-content: flex-start;
  margin-left: 0;
  padding-left: 0;
}

.tile-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 6px;
}

.tile-subtitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  text-transform: none;
  color: var(--optional);
  margin-bottom: 0;
}

/* ---------- Narrative Grid (one large tile left, two stacked right) ---------- */
.grid-project-b {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 1.2vw;
  grid-row-gap: 1.2vw;
  aspect-ratio: 8 / 3; /* the 2:1 columns at this ratio keep all three tiles close to 16:9 */
}

.grid-project-b .project-tile {
  width: 100%;
  height: 100%;
}

.grid-project-b .project-tile .tile-bg {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

/* Narrative tiles: video fills the grid cell, title sits over its bottom edge */
.grid-project-b .project-tile {
  position: relative;
}

.grid-project-b .tile-video-wrap {
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: 20px;
}

.grid-project-b .tile-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 30px 25px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.tile-subtitle.accent {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-weight: 400;
}

/* Grid positions for narrative cards */
.narrative-leica { grid-area: 1 / 1 / 3 / 2; }
.narrative-btp { grid-area: 1 / 2 / 2 / 3; }
.narrative-guion { grid-area: 2 / 2 / 3 / 3; }

/* ---------- Installation Page ---------- */
.section-installation {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: stretch;
  padding-top: 100px;
  padding-left: 5.7vw;
  padding-right: 5.7vw;
  display: flex;
  gap: 16px;
}

/* Stats grid */
.grid-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
}

.stat-video {
  grid-row: 1 / 5;
  grid-column: 1;
  border-radius: 15px;
  overflow: hidden;
}

.stat-video video,
.stat-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.stat-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.stat-number {
  font-size: 80px;
  font-weight: 800;
  color: var(--light);
  line-height: 100%;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 25px;
  color: var(--paragraphs);
  text-align: center;
}

/* Description grid */
.grid-description {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

.description-text {
  padding-left: 10%;
  font-size: 25px;
  color: var(--paragraphs);
  line-height: 153%;
}

.description-text strong {
  color: var(--light);
}

/* 3D model */
.model-container {
  margin-top: -26%;
  margin-left: 12%;
}

/* Additional description blocks */
.description-wide {
  font-size: 25px;
  color: var(--paragraphs);
  line-height: 153%;
}

.description-wide.left-pad {
  padding-left: 150px;
  padding-right: 68px;
}

.description-wide.center-pad {
  margin-top: 141px;
  margin-left: 10%;
  margin-right: 10%;
}

/* Tour recap */
.tour-recap-heading {
  text-align: center;
  font-size: 50px;
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--light);
  text-transform: none;
  margin-bottom: 0;
}

.youtube-embed {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 20px;
  overflow: hidden;
  margin-top: 41px;
  width: 100%;
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Press Coverage ---------- */
.press-heading {
  font-size: 50px;
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--light);
  text-transform: none;
  margin-bottom: 0;
}

.press-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1.2vw;
  grid-row-gap: 1.2vw;
  padding-top: 50px;
}

.press-card {
  background-color: var(--background);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 17vw;
  min-height: 200px;
  padding: 40px;
  text-decoration: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.press-card:hover {
  box-shadow: none;
}

.press-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  z-index: 1;
}

.press-card-text {
  position: relative;
  z-index: 2;
  backdrop-filter: brightness(31%);
  -webkit-backdrop-filter: brightness(31%);
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0 0 11px 5px #000;
}

.press-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--light);
  text-transform: uppercase;
  margin-bottom: 0;
}

.press-card-subtitle {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--light);
  text-transform: none;
  margin-top: 10px;
  margin-bottom: 0;
}

.press-card-year {
  color: var(--optional);
  font-size: 16px;
  font-weight: 600;
  line-height: 115%;
  margin-left: auto;
  position: relative;
  z-index: 2;
  box-shadow: 2px 0 11px 10px #000;
}

/* ---------- About Page ---------- */
.grid-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 960px;
}

.grid-subsection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  grid-column: 1 / -1;
}

.grid-subsection.border-none {
  border-bottom: none;
}

.heading-subsection {
  font-family: 'Playfair Display', sans-serif;
  font-size: 40px;
  font-weight: 400;
  font-style: italic;
  line-height: 100%;
  color: var(--light);
  text-transform: none;
  margin-bottom: 0;
  margin-right: 22px;
}

.about-image {
  border-radius: 14px;
  width: 30svh;
  max-width: 100%;
  float: right;
}

.clients-name {
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  color: var(--light);
  text-transform: uppercase;
  margin-bottom: 15px;
}

.award-name {
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  color: var(--light);
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 15px;
}

.awards-years {
  margin-bottom: 70px;
}

/* ---------- Contact Grid ---------- */
.grid-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1.2vw;
  grid-row-gap: 1.2vw;
  grid-auto-rows: minmax(40vh, min-content);
  width: 100%;
}

.contact-card {
  background-color: var(--background);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  text-decoration: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.contact-card:hover {
  box-shadow: none;
}

.contact-card-heading {
  font-size: 60px;
  font-weight: 700;
  line-height: 100%;
  color: var(--light);
  text-transform: uppercase;
  margin-bottom: 0;
}

.contact-card-body {
  color: var(--light);
  text-align: right;
  max-width: 300px;
  margin-left: auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 153%;
  position: relative;
  z-index: 10;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.contact-card:hover .color-overlay {
  opacity: 1;
}

.color-email { background-color: #e06c3e; }
.color-phone { background-color: #c74e4e; }
.color-canada { background-color: #337993; }
.color-usa { background-color: #006bdc; }
.color-instagram { background-color: #1a99ee; }

/* ---------- CTA Section ---------- */
.section-cta {
  padding-left: 1.7vw;
  padding-right: 1.7vw;
}

.cta {
  border-bottom: 1px solid var(--border);
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-top: 260px;
  padding-bottom: 30px;
}

.heading-cta {
  color: var(--light);
  font-size: 60px;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  margin-bottom: 0;
  display: inline-block;
}

.link-cta {
  text-decoration: none;
  overflow: hidden;
  box-shadow: none;
  line-height: 100%;
}

.link-cta:hover {
  box-shadow: none;
}

.subheading-cta {
  color: var(--light);
  font-family: 'Playfair Display', sans-serif;
  font-size: 60px;
  font-style: italic;
  font-weight: 400;
  line-height: 100%;
  text-transform: none;
  margin-bottom: 0;
  display: inline-block;
}

/* ---------- Footer ---------- */
.section-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 20px 1.7vw;
  overflow: hidden;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -12px;
  margin-right: -12px;
}

.link-footer {
  color: rgba(218, 215, 212, 0.4);
  font-size: 16px;
  font-weight: 600;
  line-height: 110%;
  padding: 16px 22px;
  text-decoration: none;
  box-shadow: none;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.link-footer:hover {
  color: var(--light);
  box-shadow: none;
}

/* ---------- Lightbox ---------- */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.lightbox-overlay.open {
  display: flex;
}

.lightbox-content {
  width: 90%;
  max-width: 940px;
  position: relative;
}

.lightbox-content .video-wrapper {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
}

.lightbox-content iframe,
.lightbox-content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: var(--light);
  font-size: 30px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Thicccboi', sans-serif;
  font-weight: 400;
}

/* ---------- Spacer ---------- */
.spacer {
  height: 100px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet (991px) */
@media screen and (max-width: 991px) {
  h1 { font-size: 50px; }
  h2 { font-size: 42px; }
  h6 { font-size: 18px; }

  .nav-links { display: none; }
  .menu-button { display: block; }

  .section-hero-c { padding-top: 220px; }
  /* (the hero keeps its desktop layout: everything is sized in vw, so it wraps the same way at every width,
     "S.K. RAPPORT is a" / "FILM DIRECTOR") */

  .section-hero-b { padding: 220px 1.7vw 45px; }

  .section-top { padding-top: 220px; }

  .grid-project-c {
    grid-template-columns: 1fr;
    grid-row-gap: 4vw;
  }

  .tile-video-wrap {
    height: 54vw;
  }

  .grid-project-b {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    aspect-ratio: auto;
    gap: 4vw;
  }

  .grid-project-b .project-tile {
    height: 54vw;
  }

  .narrative-leica,
  .narrative-btp,
  .narrative-guion {
    grid-area: auto;
  }

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

  .stat-number { font-size: 6svh; }

  .heading-cta, .subheading-cta { font-size: 50px; }
  .cta { padding-top: 180px; }

  .grid-about {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .grid-subsection {
    grid-template-columns: 1fr;
    padding: 60px 0;
  }

  .heading-subsection {
    margin-bottom: 30px;
  }

  .contact-card-heading { font-size: 50px; }
  .contact-card { padding: 30px; }

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

  .section-footer {
    flex-direction: column;
    align-items: flex-end;
    padding: 20px 2.7vw;
  }

  .footer {
    flex-direction: column;
    align-items: flex-end;
  }

  .description-wide.left-pad {
    padding-left: 0;
    padding-right: 0;
  }

  .description-wide.center-pad {
    margin-top: 60px;
    margin-left: 5%;
    margin-right: 5%;
  }

  .model-container { display: none; }
}

/* Small tablet (767px) */
@media screen and (max-width: 767px) {
  body { font-size: 18px; }
  h1 { font-size: 44px; }
  h2 { font-size: 35px; }

  .navbar {
    padding-left: 15px;
    padding-right: 15px;
  }

  .list {
    padding-left: 2.7vw;
    padding-right: 2.7vw;
  }

  .section-top {
    padding: 190px 2.7vw 2.7vw;
  }

  .heading-hero-b { font-size: 9vw; }

  .heading-cta, .subheading-cta { font-size: 44px; }
  .cta { padding-top: 160px; }

  .contact-card-heading { font-size: 40px; }

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

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

  .press-card {
    height: 57vw;
    padding: 20px;
  }

  .clients-name,
  .award-name {
    font-size: 30px;
  }

  .description-text,
  .description-wide {
    font-size: 20px;
    padding-left: 0;
  }

  .hero-subtitle { font-size: 35px; }

  .heading-hero-d { font-size: 10vw; }
}

/* Mobile (479px) */
@media screen and (max-width: 479px) {
  body { font-size: 18px; }
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h6 { font-size: 17px; }

  .grid-project-c {
    grid-row-gap: 6vw;
    width: 100%;
  }

  .grid-project-b {
    gap: 7vw;
    width: 90%;
    align-self: center;
  }

  .list {
    width: 85%;
    margin-top: 0;
    padding: 0;
    align-self: center;
  }

  .section-top { padding-top: 150px; }
  .section-hero-c { padding-top: 112px; padding-bottom: 32px; }   /* Film: the name starts just under the logo bar, not a third of the way down */

  .heading-cta, .subheading-cta { font-size: 36px; }
  .cta { padding-top: 130px; }

  .contact-card-heading { font-size: 36px; }
  .contact-card { padding: 20px; }

  .stat-number { font-size: 5svh; }

  .hero-subtitle { font-size: 25px; }

  .clients-name,
  .award-name {
    font-size: 24px;
  }

  .press-card {
    height: auto;
    min-height: 200px;
  }
}

/* ---------- Art Grid (two large tiles) ---------- */
.grid-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1.2vw;
  grid-row-gap: 2.2vw;
}

.grid-art .tile-video-wrap {
  height: auto;
  aspect-ratio: 16 / 9;
}

@media screen and (max-width: 767px) {
  .grid-art {
    grid-template-columns: 1fr;
    grid-row-gap: 6vw;
  }
}

/* ---------- Interactive: cube sculpture (js/interactive.js) ---------- */
.section-cubes {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

/* The page title sits huge and faint behind the block */
.cubes-heading {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  font-size: 15.5vw;
  line-height: 80%;
  white-space: nowrap;
  color: rgba(218, 215, 212, 0.07);
  pointer-events: none;
  user-select: none;
}

.cubes-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;        /* vertical swipes still scroll the page on phones */
  cursor: grab;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.cubes-canvas.live { opacity: 1; }

/* Fade the stage's floor into the page instead of ending on a hard edge */
.cubes-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

/* Soft vignette around the stage (under the project list) */
.section-cubes::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}
.cubes-canvas.dragging { cursor: grabbing; }
.cubes-canvas.over-project { cursor: pointer; }

.cubes-index {
  position: absolute;
  left: 1.7vw;
  bottom: 2.4vw;
  z-index: 2;
  list-style: none;
}

.cubes-index a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  text-decoration: none;
  box-shadow: none;
}

.cubes-index a:hover {
  box-shadow: none;
}

.ci-num {
  width: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--optional);
}

.ci-text {
  display: flex;
  flex-direction: column;
  max-width: 380px;             /* the one-sentence descriptions wrap to two lines */
}

.ci-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 110%;
  text-transform: uppercase;
  color: var(--light);
  transition: color 0.3s ease;
}

.cubes-index a[target="_blank"] .ci-title::after {
  content: ' \2197';          /* ↗ opens in a new tab */
  font-weight: 400;
}

.ci-sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 130%;
  color: var(--optional);
}

/* While one project is picked, the others step back */
.cubes-index.has-active a .ci-title { color: var(--optional); }
.cubes-index.has-active a.is-active .ci-title { color: var(--light); }

.cubes-hint {
  position: absolute;
  right: 1.7vw;
  bottom: 2.4vw;
  z-index: 2;
  font-size: 13px;
  color: var(--optional);
  pointer-events: none;
}

.hint-touch { display: none; }

@media (hover: none) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}

/* No WebGL: the list is the page */
.section-cubes.no-webgl {
  height: auto;
  min-height: 0;
  padding: 220px 1.7vw 60px;
}

.section-cubes.no-webgl .cubes-canvas,
.section-cubes.no-webgl .cubes-hint { display: none; }

.section-cubes.no-webgl .cubes-heading {
  position: static;
  transform: none;
  margin-bottom: 40px;
  font-size: 7vw;
  color: var(--light);
}

.section-cubes.no-webgl .cubes-index { position: static; }

/* Leaving for a project page */
body.leaving {
  opacity: 0;
  transition: opacity 0.32s ease;
}

@media screen and (max-width: 767px) {
  .section-cubes {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
  }

  .cubes-canvas {
    position: relative;
    height: 74svh;
  }

  .cubes-heading {
    top: 37svh;
    font-size: 14.5vw;
  }

  .cubes-index {
    position: relative;
    left: auto;
    bottom: auto;
    padding: 6px 15px 0;
  }

  .cubes-hint {
    position: absolute;
    top: calc(74svh - 28px);
    right: 15px;
    bottom: auto;
  }
}

/* ---------- Coming-soon popup (Snow Dogs) ---------- */
.soon {
  width: min(920px, 92vw);
  max-height: 92svh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0A1030;          /* the game's deepest night: prussian blue, never black */
  color: var(--light);
  box-shadow: 0 30px 120px rgba(10, 16, 48, 0.7);
}

.soon::backdrop {
  background: rgba(10, 16, 48, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.soon[open] { animation: soon-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15); }

@keyframes soon-in {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.soon-stage {
  aspect-ratio: 16 / 8;
}

.soon-stage {
  position: relative;
  overflow: hidden;
}

/* Two pieces of the game's art. The mountain map is always solid underneath; the camp fades in over it and
   back out, so the frame never dips to dark between them. Both drift slowly in and back out (alternate, so the
   zoom never snaps). Opening the popup restarts the animations, so it always opens on the mountain. */
.soon-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: soon-drift 22s ease-in-out infinite alternate;
}

.soon-slide + .soon-slide { animation: soon-drift 22s ease-in-out -11s infinite alternate, soon-swap 20s ease-in-out infinite; }

@keyframes soon-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}

@keyframes soon-swap {          /* mountain 0-8s, crossfade to camp 8-10s, camp 10-18s, crossfade back 18-20s */
  0%, 40%  { opacity: 0; }
  50%, 90% { opacity: 1; }
  100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .soon-slide { animation: none; }
  .soon-slide + .soon-slide { display: none; }
}

.soon-copy {
  padding: 26px 34px 32px;
}

.soon-eyebrow {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFA347;               /* lantern amber */
}

.soon-title {
  margin-bottom: 14px;
  font-size: 44px;
}

.soon-logline {
  max-width: 640px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 145%;
  color: var(--light);
}

.soon-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 16, 48, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #EDF2FF;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .soon { width: 94vw; }
  .soon-stage { aspect-ratio: 4 / 3; }
  .soon-copy { padding: 20px 22px 26px; }
  .soon-title { font-size: 34px; }
  .soon-logline { font-size: 18px; }
}

/* ---------- Film switch (Commercial / Narrative) ----------
   Quiet tracked tabs: both in the nav face, small and letter-spaced. The page you're on is
   cream with a thin underline that sits on the full-width hairline; the other is dim. */
.film-switch-wrap {
  flex: none;
  margin-top: 0;
}

.film-switch {
  display: flex;
  gap: 44px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--border);
}

.film-switch-link {
  position: relative;
  padding: 6px 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--optional);
  text-decoration: none;
  box-shadow: none;
  transition: color 0.3s ease;
}

.film-switch-link:hover {
  color: var(--light);
  box-shadow: none;
}

.film-switch-link.is-active {
  color: var(--light);
}

.film-switch-link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0.18em;              /* letter-spacing leaves trailing space after the last letter */
  bottom: -1px;               /* sits on the hairline */
  height: 1px;
  background: var(--light);
}

/* Interactive is a Film tab on phones only (desktop has it in the top nav) */
.film-switch-link--phone { display: none; }
@media screen and (max-width: 767px) {
  .film-switch-link--phone { display: inline-block; }
  .film-switch { gap: clamp(14px, 4vw, 22px); justify-content: space-between; }   /* three tabs span the track end to end (down to 360px wide), so the last one's underline meets the end of the hairline */
  .film-switch-link { font-size: 13px; letter-spacing: 0.1em; }
  [data-film-tab="interactive"] .section-cta { display: none; }   /* like interactive.html: no CTA under the stage */
  /* Inside the Film page the stage starts below the name and tabs: a shorter stage keeps the cubes and the
     start of the project list on the first screen */
  .film-panel-interactive .cubes-canvas { height: 56svh; }
  .film-panel-interactive .cubes-heading { top: 28svh; }
  .film-panel-interactive .cubes-hint { top: calc(56svh - 28px); }
}

/* Film panels (Commercial / Narrative / Interactive) share the page; only one shows at a time.
   The switch between them is animated from index.html's tab script. */
.film-panel {
  display: flex;
  flex-direction: column;
}

.film-panel[hidden] { display: none; }

html.film-panels-moving { overflow-x: hidden; }   /* the sideways slide must not make the page scroll sideways */

/* One underline that glides between the tabs (the script measures and places it) */
.film-switch { position: relative; }
.film-switch-ink {
  position: absolute;
  left: 0;
  bottom: -1px;               /* sits on the hairline, like the per-tab underline it replaces */
  height: 1px;
  width: 0;
  background: var(--light);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.film-switch.has-ink .film-switch-link.is-active::after { display: none; }
.film-switch-link { -webkit-tap-highlight-color: transparent; }   /* no grey/blue flash box on tap: the underline is the feedback */

/* While the Interactive tab's stage is still loading, hold its space so the page doesn't collapse and jump */
.film-panel-interactive:empty { min-height: 90svh; }

.film-panel-intro-wrap { flex: none; margin-top: 0; }

.film-panel-intro {
  margin-bottom: 24px;
  font-size: 18px;
  color: var(--paragraphs);
}

/* Interactive list: the hovered (or picked) project's description lights up with its title */
.ci-sub { transition: color 0.3s ease; }
.cubes-index a:hover .ci-sub,
.cubes-index a.is-active .ci-sub { color: var(--light); }

/* ---------- Page margins: one column at every width ----------
   Everything lines up with the project grid's column: a 10% inset on desktop and tablets, 2.7vw from 480 to
   767px, and 7.5% below 480px (where the grid is 85% wide and centred). The nav, hero, CTA, page titles,
   Interactive list and footer used Webflow's older frame margin (1.7vw: 24px on desktop, 7px on a phone), which
   only looked right while the hero was centred. The small offsets cancel each element's own inner padding,
   so the visible edge (logo, text) lands exactly on the column line. */
:root { --gutter: 10%; }
@media screen and (max-width: 767px) { :root { --gutter: 2.7vw; } }
@media screen and (max-width: 479px) { :root { --gutter: 7.5%; } }

.navbar { padding-left: calc(var(--gutter) - 5px); padding-right: calc(var(--gutter) - 22px); }   /* .brand: 5px, nav links: 22px of their own padding */
.section-hero-c,
.section-cta,
.section-top,
.section-footer { padding-left: var(--gutter); padding-right: var(--gutter); }
.section-cta .overflow { margin-right: -10px; }        /* the right-aligned CTA: cancel the wrapper's 10px right padding */
.footer { margin-left: -22px; margin-right: 0; }       /* footer links carry 22px side padding */
.section-footer > .link-footer { margin-right: -22px; }
.cubes-index { left: var(--gutter); }
.cubes-hint { right: var(--gutter); }

@media screen and (max-width: 991px) {                 /* nav links fold into the menu button; the footer stacks to the right */
  .navbar { padding-right: var(--gutter); }
  .nav-overlay { padding-left: calc(var(--gutter) - 10px); }   /* menu links carry 10px side padding */
  .footer { margin-left: 0; }
  .section-footer .link-footer { margin-right: -22px; }
}
@media screen and (max-width: 767px) {
  .cubes-index { left: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
}