html {
scroll-behavior: smooth;
scroll-padding-top: 135px;
}
.mv-site,
.mv-site * {
box-sizing: border-box;
}
body:has(.mv-site) {
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
}
body:has(.mv-site) #background,
body:has(.mv-site) header:not(.mv-topbar) {
display: none !important;
}
body:has(.mv-amazonien-page) .container,
body:has(.mv-amazonien-page) .row.main,
body:has(.mv-amazonien-page) .main {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
}
/* =========================================
HOME — RESET OLD PROCESSWIRE WRAPPERS
========================================= */
body:has(.mv-home-hero) .container,
body:has(.mv-home-hero) .row.main,
body:has(.mv-home-hero) .main {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
}
.mv-site {
position: relative !important;
z-index: 1 !important;
width: 100vw !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* =========================================
TOP BAR — FIXED
========================================= */
.mv-topbar {
position: fixed !important;
z-index: 1000;
top: 0 !important;
left: 0 !important;
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, .10) !important;
box-shadow:
0 4px 10px rgba(0,0,0,.10),
0 8px 22px rgba(0,0,0,.07) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 135px !important;
margin: 0 !important;
padding: 17px 30px 13px !important;
}
/* =========================================
ARTIST NAME
========================================= */
.mv-brand {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 0 28px !important;
padding: 0 !important;
color: #111 !important;
font-family: inherit !important;
font-size: 31px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: .02em !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap;
}
/* =========================================
MENU
========================================= */
.mv-menu {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: none !important;
width: 100% !important;
height: auto !important;
gap: 35px !important;
margin: 0 !important;
padding: 0 !important;
}
.mv-topbar .mv-menu > a {
position: relative !important;
margin: 0 !important;
padding: 0 0 5px !important;
color: #111 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: .01em !important;
text-decoration: none !important;
text-transform: uppercase !important;
}
.mv-work-menu {
position: relative;
}
.mv-work-menu-top {
display: flex;
align-items: center;
gap: 4px;
}
.mv-work-menu-top > a {
position: relative;
padding: 0 0 5px;
color: #111;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: .01em;
text-decoration: none;
text-transform: uppercase;
}
.mv-work-toggle {
margin: 0;
padding: 0 0 4px;
border: 0;
background: none;
color: #111;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
.mv-work-menu-top:hover .mv-work-toggle {
color: #000;
transform: rotate(90deg);
}
/* DESKTOP CURATORIAL DROPDOWN CARD */
.mv-work-dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(8px);
z-index: 2500;
display: block;
width: max-content;
min-width: 250px;
max-width: 340px;
padding: 16px 20px 18px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.04),
0 18px 45px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.28s;
}
.mv-work-dropdown::before {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
}
.mv-work-dropdown::after {
content: "";
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #ffffff;
border-left: 1px solid rgba(0, 0, 0, 0.08);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.mv-work-menu:hover .mv-work-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mv-dropdown-inner {
display: flex;
flex-direction: column;
gap: 2px;
}
.mv-dropdown-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 9px 8px !important;
color: #333333 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
line-height: 1.3 !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
transition: all 0.25s ease !important;
}
.mv-dropdown-item:last-child {
border-bottom: none;
}
.mv-item-idx {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
color: #aaaaaa !important;
transition: color 0.25s ease !important;
}
.mv-item-title {
flex: 1 !important;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}
.mv-item-arrow {
font-size: 11px !important;
color: #cccccc !important;
opacity: 0;
transform: translateX(-6px);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-dropdown-item:hover {
color: #000000 !important;
background: #fafaf9;
padding-left: 12px !important;
}
.mv-dropdown-item:hover .mv-item-idx {
color: #111111 !important;
}
.mv-dropdown-item:hover .mv-item-title {
color: #000000 !important;
}
.mv-dropdown-item:hover .mv-item-arrow {
opacity: 1 !important;
color: #111111 !important;
transform: translateX(0);
}
.mv-work-menu-top > a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #111;
transition: width 0.25s ease;
}
.mv-work-menu-top > a:hover::after {
width: 100%;
}
.mv-topbar .mv-menu > a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: #111;
transition: width .3s ease;
}
.mv-topbar .mv-menu > a:hover {
transform: none !important;
color: #111 !important;
}
.mv-topbar .mv-menu > a:hover::after {
width: 100%;
}
/* =========================================
LANGUAGE SWITCH
========================================= */
.mv-languages {
display: flex !important;
align-items: center !important;
gap: 5px !important;
margin: 0 0 0 10px !important;
padding: 0 !important;
}
.mv-topbar .mv-languages a,
.mv-topbar .mv-languages span {
margin: 0 !important;
padding: 0 !important;
color: #111 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: .01em !important;
text-decoration: none !important;
}
.mv-topbar .mv-languages a {
transition: color .3s ease, opacity .3s ease;
}
.mv-topbar .mv-languages a:hover {
color: #666 !important;
}
.mv-topbar .mv-languages span {
color: #aaa !important;
}
/* =========================================
HOME HERO
========================================= */
.mv-home-hero {
position: relative;
width: 100%;
height: calc(100vh - 145px) !important;
min-height: 565px;
margin: 135px 0 10px !important;
padding: 0 !important;
overflow: hidden;
background: #111;
}
.mv-water-hero {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.mv-home-hero-image {
position: absolute !important;
top: 0 !important;
left: 0 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 0 !important;
z-index: 0;
}
.mv-water-canvas {
position: absolute;
z-index: 1;
inset: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: normal !important;
}
.mv-home-hero::after {
content: "";
position: absolute;
z-index: 2;
inset: 0;
background: rgba(0, 0, 0, 0.16);
pointer-events: none;
}
.mv-home-hero-text {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: 90%;
max-width: 1200px;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.mv-home-hero-text h1 {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 0 18px !important;
padding: 0 !important;
color: #fff !important;
font-family: inherit !important;
font-size: clamp(22px, 2.4vw, 36px) !important;
font-weight: 600 !important;
line-height: 1.1 !important;
letter-spacing: .08em !important;
text-transform: uppercase;
text-shadow: 0 2px 15px rgba(0, 0, 0, .30);
animation: mvHeroTitle 1.4s cubic-bezier(.2,.6,.2,1) both;
}
.mv-home-hero-text p {
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
font-family: inherit !important;
font-size: clamp(15px, 1.5vw, 22px) !important;
font-weight: 300 !important;
line-height: 1.2 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0, 0, 0, .30);
animation: mvHeroName 1.5s .35s cubic-bezier(.2,.6,.2,1) both;
}
.mv-hero-artist-type {
margin-top: 7px;
color: #fff !important;
font-family: inherit !important;
font-size: 12px;
font-weight: 300;
line-height: 1.2;
letter-spacing: .18em;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0, 0, 0, .30);
animation: mvHeroName 1.5s .55s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes mvHeroImage {
0% { transform: scale(1); }
100% { transform: scale(1.06); }
}
@keyframes mvHeroTitle {
0% {
opacity: 0;
transform: translateY(25px);
letter-spacing: .14em;
}
100% {
opacity: 1;
transform: translateY(0);
letter-spacing: .08em;
}
}
@keyframes mvHeroName {
0% {
opacity: 0;
transform: translateY(25px);
letter-spacing: .24em;
}
100% {
opacity: 1;
transform: translateY(0);
letter-spacing: .14em;
}
}
/* =========================================
MAIN SECTIONS (HOME)
========================================= */
.mv-screen {
display: flex !important;
width: 100% !important;
height: calc(100vh - 135px) !important;
min-height: 600px !important;
margin: 0 0 10px;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
.mv-half {
position: relative;
display: flex;
width: 50% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.mv-half-image {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #eee;
}
.mv-half-image img {
position: absolute !important;
top: 0;
left: 0;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transition: transform .8s cubic-bezier(.2,.6,.2,1), opacity .4s ease !important;
}
.mv-half-image:hover img {
transform: scale(1.025) !important;
}
.mv-half-text {
align-items: center;
background: #fff;
}
.mv-copy {
width: 100%;
padding: 8vw;
}
.mv-eyebrow {
margin: 0 0 25px;
color: #111;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
letter-spacing: .1em;
text-transform: uppercase;
transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}
.mv-copy h1 {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 0 30px !important;
padding: 0 !important;
color: #111 !important;
font-size: clamp(38px, 4.5vw, 78px) !important;
font-weight: 600 !important;
line-height: .95 !important;
letter-spacing: -.045em !important;
text-transform: uppercase;
transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}
.mv-description {
max-width: 380px;
margin: 0 0 18px;
color: #111;
font-size: 13px;
line-height: 1.6;
letter-spacing: .035em;
transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}
.mv-date {
margin: 0 0 45px;
color: #111;
font-size: 12px;
letter-spacing: .05em;
transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}
.mv-view {
position: relative !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 0 7px !important;
color: #111 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-decoration: none !important;
border-bottom: 1px solid #111;
transition: transform .4s ease, opacity .4s ease;
}
.mv-view:hover {
transform: translateX(8px) !important;
}
.mv-screen:not(.mv-reverse):hover .mv-copy h1 {
transform: translateX(8px);
}
.mv-screen.mv-reverse:hover .mv-copy h1 {
transform: translateX(-8px);
}
.mv-screen:hover .mv-eyebrow {
transform: translateY(-4px);
}
.mv-screen:hover .mv-description,
.mv-screen:hover .mv-date {
transform: translateX(4px);
}
.mv-screen .mv-half-image,
.mv-screen .mv-copy,
.mv-contact-screen > * {
opacity: 0;
transform: translateY(35px);
transition: opacity 1s ease, transform 1s cubic-bezier(.2,.6,.2,1);
}
.mv-screen.is-visible .mv-half-image,
.mv-screen.is-visible .mv-copy,
.mv-contact-screen.is-visible > * {
opacity: 1;
transform: translateY(0);
}
.mv-screen .mv-half-image {
transition-delay: .08s;
}
.mv-screen .mv-copy {
transition-delay: .18s;
}
/* =========================================
CONTACT BANNER (HOME)
========================================= */
.mv-contact-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 80vh;
margin: 0;
padding: 100px 30px;
text-align: center;
background: #111;
color: #fff;
border: 0 !important;
}
.mv-contact-screen .mv-eyebrow {
color: #999;
}
.mv-contact-eyebrow-link {
color: #999 !important;
text-decoration: none !important;
cursor: pointer;
}
.mv-contact-eyebrow-link:hover {
color: #fff !important;
}
.mv-contact-screen h1 {
position: static !important;
margin: 0 0 40px !important;
padding: 0 !important;
color: #fff !important;
font-size: clamp(40px, 5vw, 80px) !important;
font-weight: 600 !important;
line-height: .85 !important;
letter-spacing: -.045em !important;
transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.mv-contact-name {
font-size: 10px;
letter-spacing: .1em;
transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.mv-contact-screen:hover h1 {
transform: scale(1.03);
}
.mv-contact-screen:hover .mv-eyebrow {
transform: translateY(-5px);
}
.mv-contact-screen:hover .mv-contact-name {
transform: translateY(5px);
}
/* =========================================
PROJECT PAGE (CMS BASE RESETS)
========================================= */
html:has(.mv-amazonien-page),
body:has(.mv-amazonien-page) {
width: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
}
body:has(.mv-amazonien-page) #background,
body:has(.mv-amazonien-page) header:not(.mv-topbar),
body:has(.mv-amazonien-page) .evo,
body:has(.mv-amazonien-page) .side,
body:has(.mv-amazonien-page) .sidebar,
body:has(.mv-amazonien-page) .side-title,
body:has(.mv-amazonien-page) .vertical-title,
body:has(.mv-amazonien-page) .project-item {
display: none !important;
}
body:has(.mv-amazonien-page) .container,
body:has(.mv-amazonien-page) .row.main,
body:has(.mv-amazonien-page) .main {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
}
.mv-amazonien-page {
width: 100% !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
color: #111 !important;
}
/* ==========================================================================
TRAIN LAYOUT: HORIZONTAL KINETIC CAROUSEL LEFT / TEXT RIGHT
========================================================================== */
.mv-amazonien-page .mv-train-layout {
display: grid !important;
grid-template-columns: minmax(0, 0.95fr) minmax(460px, 560px) !important;
column-gap: 65px !important;
width: 100% !important;
max-width: 1650px !important;
min-height: calc(100vh - 135px) !important;
margin: 0 auto !important;
padding: 165px 50px 80px !important; /* Preserves 135px fixed topbar gap */
box-sizing: border-box !important;
align-items: start !important;
}
/* =========================================
LEFT: TRAIN VIEWPORT & CONTROLS
========================================= */
.mv-train-left {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
.mv-train-topbar {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
padding: 0 4px 10px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
box-sizing: border-box !important;
}
.mv-train-counter {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
color: #111111 !important;
}
.mv-train-sep {
color: #cccccc !important;
margin: 0 4px !important;
}
/* OVERVIEW DRAWER BUTTON */
.mv-open-grid-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.16) !important;
padding: 7px 14px !important;
font-family: inherit !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: #111111 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.mv-open-grid-btn:hover {
background: #111111 !important;
color: #ffffff !important;
border-color: #111111 !important;
transform: translateY(-2px) !important;
}
.mv-grid-icon {
font-size: 13px !important;
line-height: 1 !important;
}
/* HORIZONTAL VIEWPORT & CARS */
.mv-train-viewport {
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: none !important;
cursor: grab !important;
padding: 35px 0 25px !important;
box-sizing: border-box !important;
}
.mv-train-viewport::-webkit-scrollbar {
display: none !important;
}
.mv-train-viewport:active {
cursor: grabbing !important;
}
.mv-train-track {
display: inline-flex !important;
align-items: center !important;
gap: 30px !important;
padding: 0 calc(50% - 250px) !important;
box-sizing: border-box !important;
}
/* INDIVIDUAL TRAIN CARS */
.mv-train-car {
--car-scale: 0.88;
--car-opacity: 0.55;
position: relative !important;
flex: 0 0 500px !important;
display: flex !important;
flex-direction: column !important;
user-select: none !important;
scroll-snap-align: center !important;
cursor: pointer !important;
transform: scale(var(--car-scale)) !important;
opacity: var(--car-opacity) !important;
transform-origin: center center !important;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-train-car.is-active {
z-index: 10 !important;
}
/* FRAMELESS FINE-ART MONOLITH */
.mv-car-frame {
position: relative !important;
width: 100% !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
border-radius: 2px !important;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.05),
0 18px 38px rgba(0, 0, 0, 0.08),
0 35px 70px rgba(0, 0, 0, 0.06) !important;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-train-car.is-active .mv-car-frame {
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.06),
0 28px 60px rgba(0, 0, 0, 0.14),
0 55px 110px rgba(0, 0, 0, 0.12) !important;
}
.mv-car-canvas {
position: relative !important;
width: 100% !important;
aspect-ratio: 16 / 11 !important;
background: #111111 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 2px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
}
.mv-car-canvas img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: scale(1.002) !important;
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important;
}
.mv-train-car:hover .mv-car-canvas img {
transform: scale(1.04) !important;
}
.mv-car-frame::before {
content: "" !important;
position: absolute !important;
top: -7px !important;
left: -7px !important;
width: 14px !important;
height: 14px !important;
border-top: 1.5px solid #111111 !important;
border-left: 1.5px solid #111111 !important;
opacity: 0 !important;
transform: translate(-3px, -3px) !important;
transition: all 0.35s ease !important;
pointer-events: none !important;
z-index: 5 !important;
}
.mv-train-car.is-active .mv-car-frame::before {
opacity: 0.85 !important;
transform: translate(0, 0) !important;
}
.mv-car-caption {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
margin-top: 14px !important;
padding: 0 2px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
padding-bottom: 6px !important;
}
.mv-car-idx {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
color: #999999 !important;
}
.mv-car-title {
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #555555 !important;
}
.mv-train-car.is-active .mv-car-idx,
.mv-train-car.is-active .mv-car-title {
color: #111111 !important;
}
.mv-train-swipe-hint {
text-align: center !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
color: #aaaaaa !important;
text-transform: uppercase !important;
margin-top: 6px !important;
}
/* =========================================
RIGHT: STICKY CURATORIAL TEXT
========================================= */
.mv-train-right {
position: relative !important;
width: 100% !important;
}
.mv-sticky-reader {
position: -webkit-sticky !important;
position: sticky !important;
top: 165px !important;
display: flex !important;
flex-direction: column !important;
max-height: calc(100vh - 185px) !important;
overflow-y: auto !important;
scrollbar-width: none !important;
padding-left: 10px !important;
box-sizing: border-box !important;
}
.mv-sticky-reader::-webkit-scrollbar {
display: none !important;
}
.mv-reader-nav {
padding-bottom: 20px !important;
margin-bottom: 25px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.mv-project-back {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #888888 !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: color 0.3s ease, transform 0.3s ease !important;
}
.mv-back-arr {
font-size: 13px !important;
transition: transform 0.3s ease !important;
}
.mv-project-back:hover {
color: #111111 !important;
transform: translateX(-4px) !important;
}
.mv-reader-title {
font-size: clamp(32px, 3.5vw, 48px) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.03em !important;
text-transform: uppercase !important;
color: #111111 !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
border: none !important;
writing-mode: horizontal-tb !important;
transform: none !important;
}
.mv-reader-accent {
width: 44px !important;
height: 2px !important;
background: #111111 !important;
margin-bottom: 25px !important;
}
.mv-reader-summary {
font-size: 15.5px !important;
line-height: 1.7 !important;
font-weight: 500 !important;
color: #111111 !important;
letter-spacing: -0.01em !important;
margin-bottom: 20px !important;
padding-left: 18px !important;
border-left: 2px solid #111111 !important;
}
.mv-reader-body {
font-size: 14px !important;
line-height: 1.8 !important;
color: #555555 !important;
}
.mv-reader-body p {
margin: 0 0 16px 0 !important;
}
/* =========================================
OVERVIEW DRAWER (POPUP GRID)
========================================= */
.mv-overview-drawer {
position: fixed !important;
inset: 0 !important;
z-index: 100000 !important;
display: flex !important;
justify-content: flex-end !important;
visibility: hidden !important;
opacity: 0 !important;
transition: visibility 0.4s ease, opacity 0.4s ease !important;
}
.mv-overview-drawer.is-open {
visibility: visible !important;
opacity: 1 !important;
}
.mv-drawer-backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.45) !important;
backdrop-filter: blur(4px) !important;
}
.mv-drawer-sheet {
position: relative !important;
width: min(880px, 92vw) !important;
height: 100vh !important;
background: #ffffff !important;
display: flex !important;
flex-direction: column !important;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;
transform: translateX(100%) !important;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-overview-drawer.is-open .mv-drawer-sheet {
transform: translateX(0) !important;
}
.mv-drawer-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 24px 35px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.mv-drawer-title {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
color: #111111 !important;
text-transform: uppercase !important;
}
.mv-drawer-count {
color: #888888 !important;
margin-left: 6px !important;
}
.mv-drawer-close {
background: transparent !important;
border: none !important;
font-size: 20px !important;
font-weight: 300 !important;
color: #111111 !important;
cursor: pointer !important;
}
.mv-drawer-grid {
flex: 1 1 auto !important;
overflow-y: auto !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
padding: 35px !important;
box-sizing: border-box !important;
}
.mv-drawer-item {
display: flex !important;
flex-direction: column !important;
cursor: pointer !important;
transition: transform 0.3s ease !important;
}
.mv-drawer-item:hover {
transform: translateY(-4px) !important;
}
.mv-drawer-item-frame {
width: 100% !important;
aspect-ratio: 4 / 3 !important;
background: #ffffff !important;
padding: 6px !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
box-sizing: border-box !important;
}
.mv-drawer-item-frame img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.mv-drawer-item-meta {
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
margin-top: 8px !important;
}
.mv-drawer-num {
font-size: 9px !important;
font-weight: 700 !important;
color: #999999 !important;
}
.mv-drawer-name {
font-size: 10px !important;
color: #333333 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* =========================================
RESPONSIVE DESIGN (TABLET & MOBILE) — PROJECT PAGE
========================================= */
@media (max-width: 1200px) {
.mv-amazonien-page .mv-train-layout {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
/* 165px padding clears the 105px tablet navbar completely */
padding: 165px 24px 60px !important;
row-gap: 30px !important;
box-sizing: border-box !important;
}
.mv-train-left {
position: relative !important;
top: auto !important;
width: 100% !important;
padding: 0 0 10px 0 !important;
box-sizing: border-box !important;
}
.mv-train-topbar {
padding: 0 0 12px 0 !important;
}
.mv-train-viewport {
padding: 15px 0 20px !important;
}
.mv-train-car {
flex: 0 0 420px !important;
}
.mv-train-track {
padding: 0 calc(50% - 210px) !important;
gap: 20px !important;
}
.mv-train-right {
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.mv-sticky-reader {
position: static !important;
max-height: none !important;
overflow-y: visible !important;
padding-left: 0 !important;
}
.mv-drawer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding: 20px !important;
}
}
@media (max-width: 700px) {
.mv-amazonien-page .mv-train-layout {
/* 125px padding clears the 72px mobile navbar completely */
padding: 125px 16px 50px !important;
row-gap: 24px !important;
}
.mv-train-left {
position: relative !important;
top: auto !important;
padding: 0 0 8px 0 !important;
}
.mv-train-topbar {
padding: 0 0 10px 0 !important;
}
.mv-train-viewport {
padding: 12px 0 16px !important;
}
.mv-train-car {
flex: 0 0 280px !important;
}
.mv-train-track {
padding: 0 calc(50% - 140px) !important;
gap: 14px !important;
}
.mv-train-right {
width: 100% !important;
padding: 0 !important;
}
.mv-reader-nav {
padding-bottom: 14px !important;
margin-bottom: 16px !important;
}
.mv-reader-title {
font-size: 28px !important;
margin-bottom: 14px !important;
}
.mv-reader-summary {
font-size: 14px !important;
line-height: 1.65 !important;
margin-bottom: 14px !important;
}
.mv-reader-body {
font-size: 13px !important;
line-height: 1.7 !important;
}
.mv-drawer-grid {
grid-template-columns: 1fr !important;
padding: 16px !important;
}
}
/* =========================================
FULLSCREEN LIGHTBOX VIEWER
========================================= */
.mv-amazonien-page .mv-viewer {
position: fixed;
z-index: 99999;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(255,255,255,.98);
}
.mv-amazonien-page .mv-viewer.is-open {
display: flex;
align-items: center;
justify-content: center;
}
.mv-amazonien-page .mv-viewer-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(100% - 180px);
height: 100%;
padding: 45px;
}
.mv-amazonien-page .mv-viewer-image {
position: static !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: calc(100vh - 130px) !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
}
.mv-amazonien-page .mv-viewer-caption {
margin-top: 12px;
color: #111;
font-size: 11px;
letter-spacing: .05em;
}
.mv-amazonien-page .mv-viewer-close {
position: absolute;
z-index: 10;
top: 25px;
right: 30px;
padding: 10px;
border: 0;
background: transparent;
color: #111;
font-size: 34px;
font-weight: 300;
cursor: pointer;
transition: opacity .3s ease;
}
.mv-amazonien-page .mv-viewer-prev,
.mv-amazonien-page .mv-viewer-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 20px;
border: 0;
background: transparent;
color: #111;
font-size: 30px;
cursor: pointer;
transition: opacity .3s ease;
}
.mv-amazonien-page .mv-viewer-prev { left: 20px; }
.mv-amazonien-page .mv-viewer-next { right: 20px; }
.mv-amazonien-page .mv-viewer-close:hover,
.mv-amazonien-page .mv-viewer-prev:hover,
.mv-amazonien-page .mv-viewer-next:hover {
opacity: .45;
}
.mv-mobile-toggle,
.mv-mobile-close {
display: none;
}
.mv-menu-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 1900 !important; /* Sits directly beneath .mv-menu (z-index: 2000) */
background: rgba(0, 0, 0, 0.45) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.4s ease, visibility 0.4s ease !important;
}
/* =========================================
TABLET RESPONSIVE (ORIGINAL HOMEPAGE LAYOUT RESTORED)
========================================= */
@media (max-width: 1200px) {
.mv-topbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
z-index: 1000 !important;
width: 100% !important;
height: 105px !important;
padding: 0 80px 0 30px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
background: #fff !important;
}
.mv-brand {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
width: max-content !important;
max-width: calc(100% - 140px) !important;
text-align: center !important;
/* Proportional scale: balances standard iPads up through iPad Pro 12.9"/13" */
font-size: clamp(20px, 2.6vw, 29px) !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.04em !important;
white-space: nowrap !important;
}
/* HAMBURGER */
.mv-mobile-toggle {
position: absolute !important;
top: 50% !important;
right: 28px !important;
transform: translateY(-50%) !important;
z-index: 2100 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
.mv-hamburger-box {
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 26px !important;
height: 12px !important;
}
.mv-hamburger-line {
display: block !important;
width: 100% !important;
height: 1.8px !important;
background: #111111 !important;
border-radius: 1px !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
transform-origin: center center !important;
}
.mv-mobile-toggle.is-active .mv-hamburger-box {
height: 15px !important;
}
.mv-mobile-toggle.is-active .mv-hamburger-line:first-child {
transform: translateY(6.5px) rotate(45deg) !important;
}
.mv-mobile-toggle.is-active .mv-hamburger-line:last-child {
transform: translateY(-6.5px) rotate(-45deg) !important;
}
/* DRAWER MENU */
.mv-menu {
position: fixed !important;
top: 0 !important;
right: -100% !important;
z-index: 2000 !important;
width: clamp(320px, 34vw, 420px) !important;
max-width: 85% !important;
height: 100vh !important;
padding: 115px 36px 40px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
box-sizing: border-box !important;
background: #ffffff !important;
box-shadow: -15px 0 45px rgba(0, 0, 0, 0.08) !important;
overflow-y: auto !important;
scrollbar-width: none !important;
transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-menu::-webkit-scrollbar {
display: none !important;
}
.mv-menu.is-mobile-open {
right: 0 !important;
}
/* Shows and dims the backdrop when the drawer is open */
.mv-menu-overlay.is-active,
body:has(.mv-menu.is-mobile-open) .mv-menu-overlay {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.mv-topbar .mv-menu > a:first-of-type {
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.mv-topbar .mv-menu > a,
.mv-work-menu {
display: block !important;
width: 100% !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
box-sizing: border-box !important;
}
.mv-topbar .mv-menu > a {
padding: 18px 4px !important;
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(19px, 2.1vw, 25px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0.02em !important;
color: #111111 !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: transform 0.25s ease, color 0.25s ease !important;
}
.mv-topbar .mv-menu > a:hover {
transform: translateX(4px) !important;
color: #000000 !important;
}
.mv-work-menu-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 18px 4px !important;
box-sizing: border-box !important;
}
.mv-work-menu-top > a {
padding: 0 !important;
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(19px, 2.1vw, 25px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0.02em !important;
color: #111111 !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: transform 0.25s ease !important;
}
.mv-work-menu-top:hover > a {
transform: translateX(4px) !important;
}
.mv-work-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
border-radius: 50% !important;
background: #ffffff !important;
color: #111111 !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
}
.mv-work-menu.is-open .mv-work-toggle {
background: #111111 !important;
color: #ffffff !important;
border-color: #111111 !important;
}
.mv-work-dropdown {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
max-height: 0;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background: #fafaf9 !important;
opacity: 0;
overflow: hidden;
visibility: hidden;
transform: none !important;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease, visibility 0s linear 0.4s !important;
}
.mv-work-menu.is-open .mv-work-dropdown {
max-height: 500px !important;
padding: 12px 14px 14px 18px !important;
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
opacity: 1 !important;
visibility: visible !important;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease 0.05s, padding 0.3s ease, visibility 0s !important;
}
.mv-dropdown-inner {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.mv-dropdown-item {
font-size: clamp(14px, 1.4vw, 16.5px) !important;
font-weight: 500 !important;
color: #555555 !important;
padding: 5px 0 !important;
}
.mv-dropdown-item .mv-item-arrow {
display: none !important;
}
.mv-dropdown-item:hover {
color: #111111 !important;
}
.mv-languages {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 24px !important;
padding: 16px 4px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.mv-topbar .mv-languages a,
.mv-topbar .mv-languages span {
font-size: clamp(14px, 1.4vw, 17px) !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
}
.mv-mobile-close {
display: none !important;
}
/* RESTORED HOMEPAGE TABLET LAYOUT */
.mv-home-hero {
height: calc(100vh - 90px) !important;
margin: 105px 0 0 !important;
padding: 0 !important;
}
.mv-home-hero-text h1 {
font-size: 32px !important;
}
.mv-home-hero-text p {
font-size: 19px !important;
}
.mv-hero-artist-type {
font-size: 14px !important;
}
.mv-screen {
display: flex !important;
flex-direction: column !important;
width: calc(100% - 50px) !important;
height: auto !important;
min-height: 0 !important;
margin: 30px auto !important;
padding: 0 !important;
overflow: visible !important;
background: #fff !important;
}
.mv-screen .mv-half-text {
order: 1 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
flex: none !important;
align-items: flex-start !important;
}
.mv-screen .mv-half-image {
order: 2 !important;
position: relative !important;
display: block !important;
width: 100% !important;
height: 320px !important;
flex: none !important;
overflow: hidden !important;
}
.mv-screen .mv-half {
width: 100% !important;
height: auto !important;
flex: none !important;
}
.mv-screen .mv-half-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
#amazonien .mv-half-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 320px !important;
background: #fff !important;
}
#amazonien .mv-half-image img {
position: relative !important;
top: auto !important;
left: auto !important;
width: 165% !important;
height: auto !important;
max-width: none !important;
object-fit: contain !important;
transform: none !important;
}
.mv-screen .mv-copy {
width: 100% !important;
padding: 35px 30px 40px !important;
}
.mv-screen .mv-eyebrow {
margin-bottom: 15px !important;
font-size: 10px !important;
}
.mv-screen .mv-copy h1 {
margin-bottom: 20px !important;
font-size: 36px !important;
line-height: 1 !important;
}
.mv-screen .mv-description {
margin-bottom: 14px !important;
font-size: 12px !important;
line-height: 1.55 !important;
}
.mv-screen .mv-date {
margin-bottom: 25px !important;
font-size: 11px !important;
}
.mv-screen .mv-view {
font-size: 11px !important;
}
.mv-contact-screen {
width: calc(100% - 50px) !important;
min-height: 0 !important;
margin: 30px auto !important;
padding: 70px 30px !important;
}
.mv-contact-screen h1 {
margin-bottom: 25px !important;
font-size: 42px !important;
line-height: 1 !important;
}
}
/* =========================================
MOBILE RESPONSIVE (ORIGINAL HOMEPAGE LAYOUT RESTORED)
========================================= */
@media (max-width: 700px) {
.mv-topbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
z-index: 1000 !important;
width: 100% !important;
height: 72px !important;
padding: 0 65px 0 18px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
.mv-brand {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
width: max-content !important;
max-width: calc(100% - 90px) !important;
text-align: center !important;
font-size: clamp(12.5px, 3.6vw, 15px) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
white-space: nowrap !important;
}
.mv-mobile-toggle {
right: 14px !important;
width: 38px !important;
height: 38px !important;
}
.mv-menu {
width: 280px !important;
padding: 85px 22px 35px !important;
}
.mv-topbar .mv-menu > a,
.mv-work-menu-top {
padding: 14px 2px !important;
}
.mv-topbar .mv-menu > a,
.mv-work-menu-top > a {
font-size: 16.5px !important;
}
html {
scroll-padding-top: 72px;
}
/* RESTORED HOMEPAGE MOBILE HERO */
.mv-home-hero {
height: calc(100vh - 72px) !important;
margin-top: 72px !important;
}
.mv-home-hero-text h1 {
font-size: 25px !important;
}
.mv-home-hero-text p {
font-size: 16px !important;
}
.mv-hero-artist-type {
font-size: 11px !important;
}
/* RESTORED HOMEPAGE MOBILE COMPACT RECTANGLES */
.mv-screen {
width: calc(100% - 30px) !important;
margin: 22px auto !important;
}
.mv-screen .mv-half-image,
#amazonien .mv-half-image {
height: 245px !important;
}
.mv-screen .mv-copy {
padding: 28px 22px 32px !important;
}
.mv-screen .mv-copy h1 {
font-size: 30px !important;
}
.mv-screen .mv-eyebrow {
font-size: 9px !important;
}
.mv-screen .mv-description {
font-size: 11px !important;
}
.mv-screen .mv-date,
.mv-screen .mv-view {
font-size: 10px !important;
}
.mv-contact-screen {
width: calc(100% - 30px) !important;
margin: 22px auto !important;
padding: 55px 20px !important;
}
.mv-contact-screen h1 {
font-size: 34px !important;
}
}
/* =========================================
KILL CMS CONTAINERS FOR WORK PAGE
========================================= */
html:has(.mv-work-page),
body:has(.mv-work-page) {
width: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
background-image: none !important;
}
body:has(.mv-work-page) #background,
body:has(.mv-work-page) header:not(.mv-topbar) {
display: none !important;
}
/* WORK PAGE — RESET OLD PROCESSWIRE WRAPPERS */
body:has(.mv-work-page) .container,
body:has(.mv-work-page) .row,
body:has(.mv-work-page) .row.main,
body:has(.mv-work-page) .main,
body:has(.mv-work-page) #main,
body:has(.mv-work-page) #content {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
background-image: none !important;
}
/* =========================================
WORK PAGE — ZERO GAP MOSAIC WALL
========================================= */
.mv-work-page.mv-mosaic-wall {
position: relative !important;
z-index: 1 !important;
width: 100vw !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
min-height: 0 !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: visible !important;
}
.mv-work-page.mv-mosaic-wall::before {
display: none !important;
content: none !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-content {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 135px 0 0 !important;
box-sizing: border-box !important;
min-height: 0 !important;
height: auto !important;
}
.mv-work-curatorial-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 28px !important;
background: #ffffff !important;
box-sizing: border-box !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
color: #888888 !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
}
.mv-bar-count {
color: #111111 !important;
font-weight: 700 !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-project {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #000000 !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
opacity: 0;
transform: translateY(32px) scale(0.985);
animation: mvTileReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(1) { animation-delay: 0.05s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(2) { animation-delay: 0.12s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(3) { animation-delay: 0.19s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(4) { animation-delay: 0.26s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(5) { animation-delay: 0.33s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(6) { animation-delay: 0.40s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(7) { animation-delay: 0.47s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(8) { animation-delay: 0.54s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(9) { animation-delay: 0.61s; }
.mv-work-page.mv-mosaic-wall .mv-work-project:nth-child(n+10) { animation-delay: 0.68s; }
@keyframes mvTileReveal {
0% { opacity: 0; transform: translateY(32px) scale(0.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mv-work-page.mv-mosaic-wall .mv-work-project-tile {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 11 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-decoration: none !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-project-tile img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: scale(1.005) !important;
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-project-tile:hover img {
transform: scale(1.06) !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-overlay {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 24px 26px !important;
box-sizing: border-box !important;
opacity: 1 !important;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.80) 0%,
rgba(0, 0, 0, 0.32) 45%,
rgba(0, 0, 0, 0.05) 100%
) !important;
transition: background 0.45s ease !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-project-tile:hover .mv-work-overlay {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.55) 55%,
rgba(0, 0, 0, 0.20) 100%
) !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-overlay-content {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
width: 100% !important;
transform: translateY(0);
}
.mv-work-page.mv-mosaic-wall .mv-work-title-group,
.mv-work-page.mv-mosaic-wall .mv-work-meta-group {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
gap: 7px !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-title-group {
align-items: flex-start !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-meta-group {
align-items: flex-end !important;
margin-left: auto !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-overlay-top {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 6px !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-year {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-action {
color: #ffffff !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.35s ease, transform 0.35s ease !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-project-tile:hover .mv-work-action {
opacity: 1 !important;
transform: translateX(0);
}
.mv-work-page.mv-mosaic-wall .mv-work-title {
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-family: inherit !important;
font-size: clamp(14px, 1.35vw, 19px) !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}
/* WORK — PROJECT NUMBER */
.mv-work-title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mv-work-number {
display: block;
margin: 0 0 0 2px;
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: .14em;
color: #f0f0ee;
opacity: .65;
}
.mv-work-title-group .mv-work-title {
margin-top: 0 !important;
}
/* WORK PAGE RESPONSIVE CLEARANCE */
@media (max-width: 1200px) {
.mv-work-page.mv-mosaic-wall .mv-work-content {
padding-top: 110px !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 700px) {
.mv-work-page.mv-mosaic-wall .mv-work-content {
padding-top: 80px !important;
}
.mv-work-curatorial-bar {
padding: 10px 18px !important;
font-size: 9px !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-grid {
grid-template-columns: 1fr !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-overlay {
padding: 20px !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-action {
opacity: 1 !important;
transform: none !important;
}
.mv-work-page.mv-mosaic-wall .mv-work-title {
font-size: 15px !important;
}
}
.mv-work-page .evo,
.mv-work-page .project-item,
.mv-work-page .side,
.mv-work-page .sidebar,
.mv-work-page .side-title,
.mv-work-page .vertical-title {
display: none !important;
}
.mv-work-page .mv-work-content::before,
.mv-work-page .mv-work-content::after,
.mv-work-page .mv-work-intro::before {
display: none !important;
content: none !important;
}
/* =========================================
ABOUT PAGE — MONOGRAPH SPREAD
========================================= */
html:has(.mv-about-page),
body:has(.mv-about-page) {
width: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
background-image: none !important;
}
body:has(.mv-about-page) #background,
body:has(.mv-about-page) header:not(.mv-topbar),
body:has(.mv-about-page) .evo,
body:has(.mv-about-page) .side,
body:has(.mv-about-page) .sidebar,
body:has(.mv-about-page) .side-title,
body:has(.mv-about-page) .vertical-title,
body:has(.mv-about-page) .project-item {
display: none !important;
}
body:has(.mv-about-page) .container,
body:has(.mv-about-page) .row,
body:has(.mv-about-page) .row.main,
body:has(.mv-about-page) .main,
body:has(.mv-about-page) #main,
body:has(.mv-about-page) #content {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
.mv-about-page.mv-monograph-spread {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
color: #111111 !important;
overflow: visible !important;
}
.mv-about-page.mv-monograph-spread .mv-about-content {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 175px 60px 120px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.mv-about-spread {
display: grid !important;
grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) !important;
column-gap: 90px !important;
row-gap: 60px !important;
align-items: stretch !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.mv-about-left-col {
position: -webkit-sticky !important;
position: sticky !important;
top: 165px !important;
align-self: start !important;
width: 100% !important;
height: auto !important;
z-index: 5 !important;
}
.mv-portrait-monograph {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 14px 16px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.04),
0 18px 45px rgba(0, 0, 0, 0.07) !important;
box-sizing: border-box !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease !important;
}
.mv-portrait-monograph:hover {
transform: translateY(-4px) !important;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.06),
0 26px 60px rgba(0, 0, 0, 0.10) !important;
}
.mv-portrait-canvas {
width: 100% !important;
aspect-ratio: 4 / 5 !important;
overflow: hidden !important;
background: #111111 !important;
}
.mv-portrait-canvas img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mv-portrait-monograph:hover .mv-portrait-canvas img {
transform: scale(1.03) !important;
}
.mv-portrait-meta {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 12px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
color: #111111 !important;
text-transform: uppercase !important;
text-align: center !important;
}
.mv-about-right-col {
width: 100% !important;
min-height: 100% !important;
overflow: visible !important;
}
.mv-about-header {
margin-bottom: 45px !important;
padding-bottom: 24px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.mv-about-tag {
display: block !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.26em !important;
color: #888888 !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
}
.mv-about-header h1 {
margin: 0 !important;
padding: 0 !important;
color: #111111 !important;
font-family: inherit !important;
font-size: clamp(38px, 4.5vw, 68px) !important;
font-weight: 700 !important;
line-height: 0.92 !important;
letter-spacing: -0.03em !important;
text-transform: uppercase !important;
border: none !important;
}
/* BIOGRAPHY TYPOGRAPHY — IDENTICAL EN/DE RENDERING */
.mv-about-body {
width: 100% !important;
max-width: none !important;
color: #444444 !important;
font-family: inherit !important;
font-size: 15px !important;
line-height: 1.85 !important;
letter-spacing: 0.01em !important;
margin-bottom: 70px !important;
}
.mv-about-body * {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
}
.mv-about-body p,
.mv-about-body div {
font-size: 15px !important;
line-height: 1.85 !important;
color: #444444 !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
border: none !important;
}
.mv-about-body p:last-child,
.mv-about-body div:last-child {
margin-bottom: 0 !important;
}
.mv-about-gallery-area {
position: relative !important;
width: 100% !important;
margin-top: 50px !important;
padding-top: 35px !important;
border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.mv-gallery-checkbox {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.mv-gallery-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 25px !important;
}
.mv-gallery-title {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
color: #111111 !important;
text-transform: uppercase !important;
}
.mv-gallery-trigger {
display: inline-flex !important;
align-items: center !important;
cursor: pointer !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
color: #111111 !important;
text-transform: uppercase !important;
padding-bottom: 2px !important;
border-bottom: 1px solid #111111 !important;
transition: opacity 0.3s ease !important;
}
.mv-gallery-trigger:hover {
opacity: 0.6 !important;
}
.mv-trigger-open { display: inline !important; }
.mv-trigger-close { display: none !important; }
.mv-gallery-checkbox:checked ~ .mv-gallery-bar .mv-trigger-open { display: none !important; }
.mv-gallery-checkbox:checked ~ .mv-gallery-bar .mv-trigger-close { display: inline !important; }
.mv-gallery-reel {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
width: 100% !important;
height: 140px !important;
overflow: hidden !important;
opacity: 0.65 !important;
transition: opacity 0.4s ease !important;
}
.mv-reel-item {
position: relative !important;
width: 100% !important;
height: 100% !important;
background: #f0f0ee !important;
overflow: hidden !important;
}
.mv-reel-item img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.mv-gallery-expanded {
display: none !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
}
.mv-gallery-checkbox:checked ~ .mv-gallery-reel {
display: none !important;
}
.mv-gallery-checkbox:checked ~ .mv-gallery-expanded {
display: grid !important;
animation: mvMonographOpen 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes mvMonographOpen {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.mv-expanded-item {
position: relative !important;
display: block !important;
width: 100% !important;
aspect-ratio: 4 / 3 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-sizing: border-box !important;
overflow: hidden !important;
cursor: pointer !important;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease !important;
}
.mv-expanded-item:hover {
transform: translateY(-4px) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}
.mv-expanded-item img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.mv-about-viewer {
position: fixed !important;
z-index: 99999 !important;
inset: 0 !important;
display: none !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(255, 255, 255, 0.98) !important;
}
.mv-about-viewer.is-open {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mv-about-viewer-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: calc(100% - 140px) !important;
height: 100% !important;
padding: 30px !important;
box-sizing: border-box !important;
}
.mv-about-viewer-image {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 92vw !important;
max-height: 88vh !important;
object-fit: contain !important;
}
.mv-about-viewer-close {
position: absolute !important;
top: 24px !important;
right: 30px !important;
border: none !important;
background: transparent !important;
color: #111111 !important;
font-size: 38px !important;
font-weight: 300 !important;
cursor: pointer !important;
}
.mv-about-viewer-prev,
.mv-about-viewer-next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
border: none !important;
background: transparent !important;
color: #111111 !important;
font-size: 55px !important;
font-weight: 300 !important;
cursor: pointer !important;
padding: 15px !important;
}
.mv-about-viewer-prev { left: 20px !important; }
.mv-about-viewer-next { right: 20px !important; }
@media (max-width: 1100px) {
.mv-about-page.mv-monograph-spread .mv-about-content {
padding: 150px 35px 80px !important;
}
.mv-about-spread {
grid-template-columns: 1fr !important;
column-gap: 0 !important;
row-gap: 45px !important;
}
.mv-about-left-col {
position: static !important;
max-width: 440px !important;
}
.mv-gallery-expanded,
.mv-gallery-reel {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 700px) {
.mv-about-page.mv-monograph-spread .mv-about-content {
padding: 105px 20px 60px !important;
}
.mv-about-header {
margin-bottom: 30px !important;
padding-bottom: 16px !important;
}
.mv-about-header h1 {
font-size: 34px !important;
}
.mv-about-body p {
font-size: 13.5px !important;
line-height: 1.75 !important;
}
.mv-gallery-expanded,
.mv-gallery-reel {
grid-template-columns: 1fr !important;
}
.mv-about-viewer-center {
width: calc(100% - 40px) !important;
padding: 10px !important;
}
.mv-about-viewer-prev { left: 5px !important; font-size: 38px !important; }
.mv-about-viewer-next { right: 5px !important; font-size: 38px !important; }
}
/* =========================================
CONTACT PAGE
========================================= */
html:has(.mv-contact-page),
body:has(.mv-contact-page) {
width: 100% !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
}
body:has(.mv-contact-page) #background,
body:has(.mv-contact-page) header:not(.mv-topbar),
body:has(.mv-contact-page) .evo,
body:has(.mv-contact-page) .side,
body:has(.mv-contact-page) .sidebar,
body:has(.mv-contact-page) .side-title,
body:has(.mv-contact-page) .vertical-title,
body:has(.mv-contact-page) .project-item {
display: none !important;
}
body:has(.mv-contact-page) .container,
body:has(.mv-contact-page) .row.main,
body:has(.mv-contact-page) .main {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
overflow: visible !important;
}
.mv-contact-page {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
color: #111 !important;
overflow: visible !important;
}
.mv-contact-page-content {
flex: 1 0 auto !important;
width: 100% !important;
max-width: 1350px !important;
margin: 0 auto !important;
padding: 190px 70px 120px !important;
box-sizing: border-box !important;
}
.mv-contact-page-heading {
position: relative !important;
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
margin: 0 0 55px !important;
padding: 0 0 18px !important;
text-align: left !important;
border-bottom: 1px solid rgba(0,0,0,.22) !important;
}
.mv-contact-page-heading h1 {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: clamp(34px, 4vw, 54px) !important;
font-weight: 600 !important;
line-height: .9 !important;
letter-spacing: -.035em !important;
}
.mv-contact-subheading {
margin-bottom: 2px;
color: #777;
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: .22em;
white-space: nowrap;
}
.mv-contact-page-heading::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 55px;
height: 2px;
background: #111;
transition: width .55s cubic-bezier(.16,1,.3,1);
}
.mv-contact-page-heading:hover::before {
width: 135px;
}
.mv-contact-page-body {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 0 !important;
}
.mv-contact-page-body p {
position: relative !important;
isolation: isolate;
display: grid !important;
grid-template-columns: 150px minmax(0, 1fr) auto !important;
align-items: center !important;
width: 100% !important;
min-height: 105px !important;
margin: 0 !important;
padding: 25px 24px !important;
color: #111 !important;
background: transparent !important;
border-top: 0 !important;
border-bottom: 1px solid rgba(0,0,0,.25) !important;
overflow: hidden;
transition: padding-left .55s cubic-bezier(.16,1,.3,1), color .4s ease !important;
}
.mv-contact-page-body p:first-child {
border-top: 1px solid #111 !important;
}
.mv-contact-page-body p::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #111;
transform: scaleX(0);
transform-origin: left center;
transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.mv-contact-page-body p:hover::before {
transform: scaleX(1);
}
.mv-contact-page-body p:hover {
padding-left: 35px !important;
background: transparent !important;
color: #fff !important;
}
.mv-contact-page-body strong {
position: relative !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #777 !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
transition: color .4s ease, transform .55s cubic-bezier(.16,1,.3,1) !important;
}
.mv-contact-page-body p:hover strong {
color: #999 !important;
transform: translateX(5px);
}
.mv-contact-page-body p a {
grid-column: 2 !important;
justify-self: start !important;
display: inline-block !important;
width: fit-content !important;
margin: 0 !important;
padding: 0 !important;
color: #111 !important;
font: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-decoration: none !important;
transform: none !important;
}
.mv-contact-page-body p:hover a {
color: #fff !important;
transform: none !important;
}
.mv-contact-copy {
position: relative !important;
top: auto !important;
right: auto !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0 !important;
margin-left: 25px !important;
padding: 9px 0 !important;
color: #111 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: .16em !important;
cursor: pointer;
transform: translateX(15px) !important;
opacity: 0;
transition: opacity .35s ease, color .35s ease, transform .55s cubic-bezier(.16,1,.3,1) !important;
}
.mv-contact-copy::after {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 0;
height: 1px;
background: currentColor;
transition: width .35s ease;
}
.mv-contact-copy:hover::after {
width: 100%;
}
.mv-contact-page-body p:hover .mv-contact-copy {
color: #fff !important;
opacity: 1;
transform: translateX(0) !important;
}
.mv-copy-icon {
display: inline-block;
font-size: 15px !important;
font-weight: 300 !important;
transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.mv-contact-copy:hover .mv-copy-icon {
transform: translate(4px,-3px);
}
.mv-contact-copy.is-copied {
color: #fff !important;
background: transparent !important;
}
@media (max-width: 1200px) {
.mv-contact-page-content {
padding: 165px 35px 90px !important;
}
}
@media (max-width: 700px) {
.mv-contact-page-content {
padding: 135px 20px 70px !important;
}
.mv-contact-page-heading {
margin-bottom: 40px !important;
padding-bottom: 15px !important;
}
.mv-contact-page-heading h1 {
font-size: 36px !important;
}
.mv-contact-page-heading::after {
font-size: 7px;
letter-spacing: .16em;
}
.mv-contact-page-body p {
grid-template-columns: 1fr auto !important;
min-height: 115px !important;
padding: 22px 5px !important;
}
.mv-contact-page-body strong {
grid-column: 1 / -1;
margin-bottom: 12px !important;
}
.mv-contact-page-body p a {
grid-column: 1 !important;
justify-self: start !important;
font-size: 15px !important;
word-break: break-word;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
.mv-contact-copy {
opacity: 1;
margin-left: 15px !important;
color: #111 !important;
transform: none !important;
}
.mv-contact-page-body p:hover .mv-contact-copy {
color: #fff !important;
}
}
/* =========================
CONTACT — DISCLAIMER MODAL
========================= */
.mv-disclaimer-open {
background: none;
border: 0;
padding: 0;
margin: 0;
color: #777;
font: inherit;
font-size: 11px;
letter-spacing: 0.08em;
cursor: pointer;
transition: color 0.25s ease;
}
.mv-disclaimer-open:hover,
.mv-disclaimer-open:focus,
.mv-disclaimer-open:active {
color: #fff;
}
.mv-disclaimer-popup {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 30px;
}
.mv-disclaimer-popup.is-open {
display: flex;
}
.mv-disclaimer-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.mv-disclaimer-box {
position: relative;
z-index: 1;
width: min(760px, 100%);
max-height: 80vh;
overflow-y: auto;
background: #fff;
padding: 55px 60px 60px;
}
.mv-disclaimer-box h2 {
margin: 0 0 30px;
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
}
.mv-disclaimer-text {
font-size: 14px;
line-height: 1.7;
}
.mv-disclaimer-close {
position: absolute;
top: 18px;
right: 22px;
padding: 0;
border: 0;
background: none;
font-size: 28px;
font-weight: 300;
line-height: 1;
cursor: pointer;
}
@media (max-width: 700px) {
.mv-disclaimer-popup {
padding: 15px;
}
.mv-disclaimer-box {
max-height: 85vh;
padding: 45px 25px 35px;
}
.mv-disclaimer-box h2 {
margin-bottom: 22px;
font-size: 23px;
}
.mv-disclaimer-text {
font-size: 13px;
line-height: 1.6;
}
}
/* ===========
FOOTER
=========== */
.mv-site-footer {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 30px 35px !important;
background: #111 !important;
color: #777 !important;
box-sizing: border-box !important;
}
.mv-site-footer-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.mv-site-footer-copyright {
margin: 0 !important;
padding: 0 !important;
color: #777 !important;
font-size: 9px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
}
.mv-site-footer .mv-disclaimer-open {
margin-left: auto !important;
color: #777 !important;
font-size: 9px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
}
.mv-site-footer .mv-disclaimer-open:hover {
color: #fff !important;
}
@media (max-width: 700px) {
.mv-site-footer {
padding: 25px 20px !important;
}
.mv-site-footer-copyright,
.mv-site-footer .mv-disclaimer-open {
font-size: 8px !important;
letter-spacing: .06em !important;
}
}