.site-header {
  z-index: 100;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.brand-mark{display:flex;align-items:center;width:112px;height:48px;overflow:visible}
.brand-mark img{display:block;width:100%;height:auto;object-fit:contain}
.site-footer .brand-mark{width:104px;height:auto;filter:invert(1)}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: -0.06em;
}

.logo span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.08em;
}

.logo sup {
  margin-left: -2px;
}

.menu {
  z-index: 90;
  display: block;
  overflow-y: auto;
  padding: 108px 6vw 44px;
  background: #171716;
  color: #eeeae2;
  clip-path: inset(0 0 100%);
  transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}

.menu.open {
  clip-path: inset(0);
}

.menu-map {
  width: min(1180px, 78vw);
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(238, 234, 226, 0.18);
}

.menu-group {
  display: block;
  padding: 17px 0 19px;
  border-bottom: 1px solid rgba(238, 234, 226, 0.18);
}

.menu .menu-title {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  color: #eeeae2;
  font: 400 clamp(52px, 5.15vw, 86px)/0.9 var(--serif);
  letter-spacing: -0.06em;
  text-decoration: none;
  transition:
    color 0.25s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.menu .menu-title span {
  display: inline-block;
  width: auto;
  margin-right: 0.14em;
  color: #a8a298;
  font: 500 0.22em/1 var(--mono);
  letter-spacing: 0.04em;
  vertical-align: top;
  transform: translateY(0.8em);
  font-variant-numeric: tabular-nums;
}

.menu .menu-title:hover {
  padding-left: 0;
  color: #c9b695;
  transform: translateX(12px);
}

.menu-sub {
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 42px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    max-height 0.38s ease,
    padding 0.38s ease,
    opacity 0.24s ease,
    transform 0.32s ease;
}

.menu-group:hover .menu-sub,
.menu-group:focus-within .menu-sub,
.menu.preview-portfolio .menu-group:first-child .menu-sub {
  max-height: 190px;
  padding-top: 14px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu .menu-sub a {
  display: block;
  min-height: 0;
  width: max-content;
  max-width: 100%;
  padding: 0 0 5px;
  border: 0;
  color: #b9b3a9;
  font: 400 clamp(18px, 1.55vw, 27px)/1.2 var(--serif);
  letter-spacing: -0.025em;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.25s ease;
}

.menu .menu-sub a:hover {
  padding-left: 0;
  color: #f5f1e9;
  transform: translateX(8px);
}

.menu-contact {
  position: fixed;
  right: 6vw;
  bottom: 42px !important;
  min-height: 0 !important;
  padding: 0 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(238, 234, 226, 0.6) !important;
  color: #d8d2c8 !important;
  font: 10px var(--mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.menu-contact:hover {
  padding-left: 0 !important;
  color: #fff !important;
}

body.menu-open .site-header {
  background: #000;
  color: #eeeae2;
  border-color: rgba(238, 234, 226, 0.14);
  backdrop-filter: none;
}

body.menu-open .desktop-nav {
  opacity: 0;
  pointer-events: none;
}

body.menu-open .menu-toggle {
  border-color: rgba(238, 234, 226, 0.7);
  color: #eeeae2;
}

.menu-toggle i {
  display: none !important;
}

@media (min-width: 701px) {
  .tg-head {
    display: none;
  }
  .desktop-nav {
    gap: 32px;
  }
  .desktop-nav a {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .menu-toggle {
    display: flex;
    justify-self: end;
    color: var(--ink);
    padding: 10px 15px;
    border: 1px solid var(--ink);
    border-radius: 22px;
  }
}

/* A tighter, editorial intro rhythm on inner pages. */
.page-title {
  min-height: 330px;
  padding-top: 42px;
  padding-bottom: 46px;
  grid-template-rows: auto auto;
  align-content: start;
  row-gap: 28px;
}

.page-title .eyebrow {
  align-self: start;
}
.page-title h1,
.page-title > p:last-child {
  align-self: end;
}

@media (max-width: 800px) {
  .brand-mark{width:82px;height:38px}
  .menu {
    padding: 90px 24px 32px;
  }
  body.menu-open .menu-toggle {
    display: flex !important;
    position: relative;
    z-index: 101;
    color: #eeeae2;
  }
  .menu-map {
    width: 100%;
  }
  .menu-group {
    padding: 17px 0 20px;
  }
  .menu .menu-title {
    font-size: 51px;
  }
  .menu .menu-title span {
    font-size: 11px;
    transform: translateY(9px);
  }
  .menu-sub {
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 17px 0 0 27px;
  }
  .menu-group:hover .menu-sub,
  .menu-group:focus-within .menu-sub,
  .menu.preview-portfolio .menu-group:first-child .menu-sub {
    max-height: none;
    padding-top: 17px;
  }
  .menu-blog .menu-sub {
    display: none;
  }
  .menu .menu-sub a {
    font-size: 22px;
  }
  .menu-contact {
    position: static;
    display: inline-block !important;
    margin-top: 34px;
  }
  .page-title {
    min-height: 0;
    padding-top: 36px;
    padding-bottom: 42px;
    row-gap: 0;
  }
  .page-title .eyebrow {
    margin-bottom: 37px;
  }
}

/* Client media: motion-led hero, full project film, and the delivered shoot. */
.hero-video {
  display: block;
}

.media-showcase {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 7vw;
  align-items: end;
  padding-top: 110px;
  padding-bottom: 110px;
  background: var(--ink);
  color: var(--paper);
}

.media-copy h2 {
  font: clamp(45px, 5.7vw, 88px)/0.88 var(--serif);
  letter-spacing: -0.065em;
  margin: 18px 0 26px;
}

.media-copy h2 i {
  font-style: italic;
}
.media-copy > p:last-child {
  max-width: 260px;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.feature-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0e0e0d;
}

.gallery-section {
  padding-top: 92px;
  padding-bottom: 140px;
  background: var(--paper);
}

.gallery-count {
  margin: 0;
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.gallery-item {
  margin: 0;
  overflow: hidden;
  background: #d9d3c8;
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

@media (max-width: 800px) {
  .media-showcase {
    display: block;
    padding-top: 74px;
    padding-bottom: 74px;
  }
  .media-copy {
    margin-bottom: 38px;
  }
  .media-copy h2 {
    font-size: 58px;
  }
  .gallery-section {
    padding-top: 68px;
    padding-bottom: 88px;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
}

/* Immersive film treatment: the copy sits in the image instead of beside a player. */
.media-showcase {
  position: relative;
  display: flex;
  min-height: min(78vh, 860px);
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(100px, 14vw, 190px);
  padding-bottom: clamp(72px, 9vw, 132px);
  background: #000;
}

.media-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 9, 8, 0.82), rgba(9, 9, 8, 0.12) 72%),
    linear-gradient(0deg, rgba(9, 9, 8, 0.72), transparent 58%);
}

.media-showcase .feature-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  filter: brightness(0.76) saturate(0.82);
}

.media-showcase .media-copy {
  position: relative;
  z-index: 1;
  max-width: 610px;
  margin: 0;
  color: #f1eee7;
}

.media-showcase .media-copy h2 {
  font-size: clamp(58px, 8vw, 128px);
  line-height: 0.82;
  margin: 20px 0 28px;
}

.media-showcase .media-copy > p:last-of-type {
  max-width: 330px;
  color: rgba(241, 238, 231, 0.86);
}

.media-link {
  display: inline-block;
  margin-top: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(241, 238, 231, 0.72);
  color: #f1eee7;
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.gallery-section .section-head {
  align-items: flex-end;
}

.gallery-head-right {
  display: flex;
  align-items: flex-end;
  gap: 22px;
}

.gallery-actions {
  display: flex;
  gap: 8px;
}

.gallery-actions button {
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.gallery-actions button:hover,
.gallery-actions button:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.gallery-grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 0 0 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(27, 26, 24, 0.5) transparent;
  overscroll-behavior-inline: contain;
}

.gallery-item {
  flex: 0 0 min(36vw, 480px);
  scroll-snap-align: start;
}

/* Number labels are removed from content cards, so the copy gets the full grid. */
.service {
  grid-template-columns: 1.45fr 1fr auto;
}
.packages article {
  grid-template-columns: 1.3fr 0.55fr;
}

/* Keep the two editorial italic endings intact on one visual line. */
.media-showcase .media-copy h2 i,
.approach-scene h2 i {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .media-showcase {
    min-height: 650px;
    padding-top: 120px;
    padding-bottom: 70px;
  }
  .media-showcase .media-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .media-showcase .media-copy h2 {
    font-size: clamp(52px, 14.5vw, 58px);
  }
  .page-title h1 {
    font-size: clamp(50px, 14vw, 64px);
  }
  .service {
    grid-template-columns: 1fr auto;
  }
  .packages article {
    grid-template-columns: 1fr;
  }
  .packages article > a {
    grid-column: 1;
    justify-self: start;
  }
  .gallery-head-right {
    gap: 12px;
  }
  .gallery-actions button {
    padding: 8px 9px;
  }
  .gallery-grid {
    gap: 12px;
  }
  .gallery-item {
    flex-basis: 78vw;
  }
}

@media (max-width: 420px) {
  .media-showcase .media-copy h2 {
    font-size: 54px;
  }
}

.lang-switch {
  position: absolute;
  right: 182px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateY(-50%);
  color: currentColor;
  font: 10px var(--mono);
  letter-spacing: .08em;
}

.lang-switch button {
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
}

.lang-switch button.active,
.lang-switch button:hover,
.lang-switch button:focus-visible {
  border-bottom-color: currentColor;
}

.lang-switch span { opacity: .42; }

@media (max-width: 700px) {
  .lang-switch {
    right: 132px;
    font-size: 9px;
  }
}

/* Unified white top bar and the three direct project entries. */
.site-header{height:88px;min-height:88px;padding:5px 5vw;grid-template-columns:1fr auto;background:#fff;border-bottom:0;box-shadow:none;backdrop-filter:none}
.brand-mark{width:122px;height:78px}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.site-header .desktop-nav,.site-header .tg-head{display:none!important}
.site-header .brand-mark{position:absolute;left:2px;top:5px;margin:0;justify-self:start}
.site-header .menu-toggle{position:absolute!important;right:8px;top:50%;transform:translateY(-50%)}
.menu-toggle{display:flex!important;position:relative;width:48px;height:48px;padding:0!important;border:0!important;background:transparent!important;color:var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:7px}
.menu-toggle i,.menu-toggle i+i{display:block!important;width:34px;height:2px;margin:0!important;background:currentColor;transform:none!important}
.menu-toggle::after{content:"";display:block;width:34px;height:2px;background:currentColor}
.menu-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quick-nav{position:fixed;z-index:68;top:88px;left:0;display:flex;width:100%;justify-content:center;gap:10px;padding:12px max(20px,5vw) 13px;overflow-x:auto;background:#fff;border-top:3px solid #c5c3bf;border-bottom:1px solid rgba(27,26,24,.08);scrollbar-width:none}
.quick-nav::-webkit-scrollbar{display:none}
.quick-nav a{flex:0 0 auto;padding:13px 24px;border:1px solid #d6d5d2;border-radius:999px;background:#e9e9e7;color:#161513;font:600 13px var(--sans);letter-spacing:-.025em;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease}
.quick-nav a:hover,.quick-nav a:focus-visible{background:var(--ink);color:#fff;outline:0}
.subpage{padding-top:143px}
.lang-switch{right:280px;color:var(--ink)}
.site-footer{background:#000}
body.menu-open .menu-toggle{color:#eeeae2}
body.menu-open .menu-toggle::after{background:currentColor}
body.menu-open .brand-mark img{filter:invert(1)}
body.menu-open .lang-switch{color:#eeeae2}
body.menu-open .quick-nav{visibility:hidden}

/* Keep every category visible and fixed instead of making this row horizontally scrollable. */
@media(max-width:1000px){
  .quick-nav{justify-content:stretch;gap:6px;padding:10px 8px 11px;overflow:hidden}
  .quick-nav a{flex:1 1 0;min-width:0;padding:9px 7px;font-size:10px;text-align:center}
}

@media(max-width:700px){
  .site-header{height:78px;min-height:78px;padding:4px 10px 4px 8px}
  .brand-mark{width:112px;height:70px}
  .site-header .brand-mark{left:0;top:4px}
  .site-header .brand-mark img{transform:translateX(-14px)}
  .site-header .menu-toggle{right:6px}
  .menu-toggle{width:38px;height:38px;gap:5px}
  .menu-toggle i,.menu-toggle i+i,.menu-toggle::after{width:25px;height:2px}
  .quick-nav{top:78px;justify-content:stretch;gap:6px;padding:10px 8px 11px;border-top-width:3px;overflow:hidden}
  .quick-nav a{flex:1 1 0;min-width:0;padding:9px 7px;font-size:10px;text-align:center}
  .site-header .lang-switch{display:inline-flex;right:176px;font-size:10px}
  .subpage{padding-top:142px}
  .about-studio-page .about-categories{display:none}
}