/* ===== 1hero.html ===== */
/* =========================================================
MCS PRODUCT HERO
========================================================= */
.mcs-product-hero {
--orange: var(--mcs-orange);
--white: var(--mcs-white);
position: relative;
width: 100%;
height: var(--mcs-hero-min);
min-height: 720px;
overflow: hidden;
background: #090909;
color: var(--white);
font-family: inherit;
}
/* =========================================================
IMAGE
========================================================= */
.mcs-product-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
.mcs-product-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
/*
Slight bias to the machine.
Keeps the container doors visible.
*/
object-position: 51% center;
transform: scale(1.015);
animation:
mcsHeroImageIn
1.8s
cubic-bezier(.16,1,.3,1)
forwards;
}
@keyframes mcsHeroImageIn {
from {
transform: scale(1.07);
filter: brightness(.72);
}
to {
transform: scale(1.015);
filter: brightness(1);
}}
/* =========================================================
CINEMATIC OVERLAYS
========================================================= */
.mcs-product-hero__shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* right side: the floating readouts sit over the bright container
door, so it is knocked back enough to read white text on */
linear-gradient(
270deg,
rgba(5,5,5,.78) 0%,
rgba(5,5,5,.62) 32%,
rgba(5,5,5,0) 68%
),
linear-gradient(
90deg,
rgba(5,5,5,.82) 0%,
rgba(5,5,5,.59) 25%,
rgba(5,5,5,.16) 57%,
rgba(5,5,5,.04) 100%
),
linear-gradient(
0deg,
rgba(5,5,5,.92) 0%,
rgba(5,5,5,.35) 28%,
rgba(5,5,5,.03) 61%
),
linear-gradient(
180deg,
rgba(5,5,5,.48) 0%,
rgba(5,5,5,0) 24%
);
}
/* =========================================================
TECHNICAL GRID
========================================================= */
.mcs-product-hero__grid {
z-index: 2;
mask-image:
linear-gradient(
to right,
black,
rgba(0,0,0,.4) 48%,
transparent 78%
);
-webkit-mask-image:
linear-gradient(
to right,
black,
rgba(0,0,0,.4) 48%,
transparent 78%
);
}
/* =========================================================
TOP META
========================================================= */
.mcs-product-hero__top {
position: absolute;
top: 112px;
left: var(--mcs-section-pad-x);
right: var(--mcs-section-pad-x);
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 15px;
border-bottom:
1px solid rgba(255,255,255,.19);
opacity: 0;
transform: translateY(-10px);
animation:
mcsHeroFadeUp
.8s
.15s
cubic-bezier(.16,1,.3,1)
forwards;
}
/* same color as the left label (a , not : the shared
.mcs-label strong rule would make it brighter) */
.mcs-product-hero__status-text {
color: var(--mcs-ink-73);
}
/* =========================================================
MAIN CONTENT
========================================================= */
.mcs-product-hero__main {
position: absolute;
left: var(--mcs-section-pad-x);
right: var(--mcs-section-pad-x);
top: 50%;
z-index: 4;
transform: translateY(-44%);
}
.mcs-product-hero__copy {
max-width: 930px;
}
.mcs-product-hero__kicker {
margin-bottom: var(--mcs-hero-gap-sm);
color: var(--orange);
font-size:
var(--mcs-text-micro);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
opacity: 0;
transform: translateY(20px);
animation:
mcsHeroFadeUp
.9s
.25s
cubic-bezier(.16,1,.3,1)
forwards;
}
/* =========================================================
GIANT PRODUCT NAME
========================================================= */
.mcs-product-hero__title {
margin: 0 !important;
padding: 0 !important;
color:
var(--mcs-white) !important;
text-wrap:
balance;
opacity: 0;
transform:
translateY(35px);
animation:
mcsHeroFadeUp
1.1s
.32s
cubic-bezier(.16,1,.3,1)
forwards;
}
/* =========================================================
DESCRIPTION + BUTTONS
========================================================= */
.mcs-product-hero__bottom-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap:
var(--mcs-hero-gap-lg);
margin-top:
var(--mcs-hero-gap-md);
opacity: 0;
transform:
translateY(25px);
animation:
mcsHeroFadeUp
.9s
.48s
cubic-bezier(.16,1,.3,1)
forwards;
}
.mcs-product-hero__bottom-copy-text {
width: min(clamp(640px, 36vw, 900px), 100%);
margin:
0 !important;
color: var(--mcs-ink-73);
}
.mcs-product-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
/* =========================================================
FLOATING READOUTS
Same language as the home page specs: a small label, a big value
with an orange unit.
Frosted-glass cards (the header's surface) hanging in the photo at
staggered positions.
========================================================= */
.mcs-product-hero__data {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.mcs-product-hero__data-item {
position: absolute;
min-width: clamp(150px, 13vw, 190px);
opacity: 0;
transform:
translateY(20px);
animation:
mcsHeroFadeUp
.8s
.62s
cubic-bezier(.16,1,.3,1)
forwards;
}
/* staggered, not a row — each one sits at its own height and inset */
.mcs-product-hero__data-item--a {
right: calc(var(--mcs-section-pad-x) + 14vw);
top: 33%;
}
.mcs-product-hero__data-item--b {
right: var(--mcs-section-pad-x);
top: 50%;
animation-delay: .76s;
}
.mcs-product-hero__data-item--c {
right: calc(var(--mcs-section-pad-x) + 9vw);
bottom: 17%;
animation-delay: .9s;
}
.mcs-product-hero__data-body {
position: relative;
padding:
clamp(10px, .9vw, 14px)
clamp(12px, 1.1vw, 16px)
clamp(12px, 1.1vw, 16px);
border:
1px solid var(--mcs-glass-border);
/* same frosted glass as the site header */
background:
var(--mcs-glass-bg);
-webkit-backdrop-filter:
var(--mcs-glass-blur);
backdrop-filter:
var(--mcs-glass-blur);
}
.mcs-product-hero__data-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.mcs-product-hero__data-label,
.mcs-product-hero__data-note {
color: var(--mcs-ink-73);
font-size:
var(--mcs-text-micro);
font-weight: 600;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
}
.mcs-product-hero__data-note {
color: var(--mcs-ink-42);
}
.mcs-product-hero__data-value {
display: flex;
gap: clamp(6px, .6vw, 10px);
align-items: flex-end;
padding-top: clamp(8px, .8vw, 12px);
color: var(--mcs-white);
/* tag-sized readout: well below the home page spec numbers */
font-size:
clamp(22px, 2vw, 30px);
font-weight: 650;
line-height: 1;
letter-spacing: -.045em;
}
.mcs-product-hero__data-value small {
padding-bottom: 2px;
color: var(--orange);
font-size: var(--mcs-text-micro);
font-weight: 650;
line-height: 1;
letter-spacing: .08em;
}
/* =========================================================
SCROLL INDICATOR
========================================================= */
.mcs-product-hero__scroll {
position: absolute;
left:
var(--mcs-section-pad-x);
bottom: 45px;
z-index: 4;
display: flex;
gap: 14px;
align-items: center;
color:
rgba(255,255,255,.46);
font-size: var(--mcs-text-nano);
font-weight: 600;
letter-spacing: .15em;
opacity: 0;
animation:
mcsHeroFadeUp
.8s
.7s
cubic-bezier(.16,1,.3,1)
forwards;
}
.mcs-product-hero__scroll-line {
position: relative;
width: 70px;
height: 1px;
overflow: hidden;
background:
rgba(255,255,255,.21);
}
.mcs-product-hero__scroll-line div {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 1px;
background:
var(--orange);
animation:
mcsScrollLine
2.2s
ease-in-out
infinite;
}
@keyframes mcsScrollLine {
0% {
transform:
translateX(-35px);
}
55%,
100% {
transform:
translateX(75px);
}}
/* =========================================================
LOAD ANIMATION
========================================================= */
@keyframes mcsHeroFadeUp {
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mcs-product-hero {
min-height:
760px;
}
.mcs-product-hero__main {
top: 47%;
}
.mcs-product-hero__bottom-copy {
flex-direction: column;
align-items: flex-start;
gap: 25px;
}
/* readouts: tighter inset, a little lower so they clear the copy */
.mcs-product-hero__data-item--a {
right: calc(var(--mcs-section-pad-x) + 8vw);
top: 30%;
}
.mcs-product-hero__data-item--c {
right: calc(var(--mcs-section-pad-x) + 4vw);
}
.mcs-product-hero__scroll {
display:
none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-product-hero {
height: var(--mcs-hero-min);
min-height:
670px;
}
.mcs-product-hero__media img {
object-position:
46% center;
}
.mcs-product-hero__shade {
background:
linear-gradient(
0deg,
rgba(4,4,4,.96) 0%,
rgba(4,4,4,.62) 48%,
rgba(4,4,4,.25) 100%
),
linear-gradient(
90deg,
rgba(4,4,4,.54),
transparent
);
}
.mcs-product-hero__grid {
background-size:
55px 55px;
opacity:
.10;
}
.mcs-product-hero__top {
top: 90px;
left: var(--mcs-section-pad-x);
right: var(--mcs-section-pad-x);
}
.mcs-product-hero__status {
display:
none;
}
.mcs-product-hero__main {
top: auto;
left: var(--mcs-section-pad-x);
right: var(--mcs-section-pad-x);
bottom: 205px;
transform: none;
}
.mcs-product-hero__kicker {
font-size:
9px;
}
.mcs-product-hero__bottom-copy {
margin-top:
var(--mcs-hero-gap-md);
gap:
var(--mcs-hero-gap-lg);
}
.mcs-product-hero__bottom-copy-text {
max-width:
420px;
}
.mcs-product-hero__actions {
width:
100%;
flex-wrap: nowrap;
gap: 7px;
}
.mcs-product-hero__actions .mcs-btn {
flex: 1;
min-width: 0;
gap: 10px;
padding:
13px 12px;
font-size:
7.5px;
}
}
/* readouts: below 900px there is no room to float them beside the copy —
one tidy row along the bottom instead */
@media (max-width: 900px) {
.mcs-product-hero__data {
inset: auto var(--mcs-section-pad-x) 25px var(--mcs-section-pad-x);
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 14px;
}
.mcs-product-hero__data-item,
.mcs-product-hero__data-item--a,
.mcs-product-hero__data-item--b,
.mcs-product-hero__data-item--c {
position: static;
display: flex;
min-width: 0;
}
.mcs-product-hero__data-body {
flex: 1;
padding: 10px 10px 12px;
}
.mcs-product-hero__data-note {
display: none;
}
.mcs-product-hero__data-label {
font-size:
var(--mcs-text-nano);
letter-spacing: .1em;
white-space: normal;
}
.mcs-product-hero__data-value {
padding-top: 8px;
font-size:
clamp(18px, 5.6vw, 24px);
}
.mcs-product-hero__data-value small {
font-size:
var(--mcs-text-nano);
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.mcs-product-hero *,
.mcs-product-hero__media img {
animation:
none !important;
}
.mcs-product-hero__top,
.mcs-product-hero__kicker,
.mcs-product-hero__title,
.mcs-product-hero__bottom-copy,
.mcs-product-hero__data,
.mcs-product-hero__scroll {
opacity: 1;
transform: none;
}
}
/* ===== 2cleaning-process.html ===== */
/* =========================================================
HOW IT WORKS
========================================================= */
.mcs-process {
--orange: var(--mcs-orange);
--black: var(--mcs-black);
--white: var(--mcs-white);
--line: rgba(255,255,255,.13);
position: relative;
width: 100%;
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
box-sizing: border-box;
overflow: hidden;
background:
var(--black);
color:
var(--white);
font-family:
inherit;
}
/* =========================================================
HEADER
========================================================= */
.mcs-process__header {
padding-bottom:
0;
}
.mcs-process__header-top {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
padding-bottom:
15px;
border-bottom:
1px solid var(--line);
}
.mcs-process__meta {
color:
rgba(255,255,255,.27);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.16em;
}
/* =========================================================
INTRO
========================================================= */
.mcs-process__intro {
display:
grid;
grid-template-columns:
1fr
minmax(280px, 390px);
gap:
clamp(45px, 8vw, 140px);
align-items:
end;
padding:
clamp(48px, 5vw, 70px)
0;
}
.mcs-process__kicker {
margin-bottom:
15px;
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.18em;
}
.mcs-process__title {
margin:
0 !important;
color:
var(--white) !important;
}
.mcs-process__intro-text {
max-width:
390px;
margin:
0 !important;
color:
var(--mcs-ink-60);
line-height:
1.7;
}
/* =========================================================
CHAPTER
========================================================= */
.mcs-process__chapter {
display:
grid;
grid-template-columns:
minmax(260px, .5fr)
minmax(0, 1fr);
gap:
clamp(40px, 6vw, 100px);
align-items:
center;
padding:
clamp(65px, 7vw, 110px)
0;
border-top:
1px solid var(--line);
}
/* the first chapter sits right under the intro: no divider above it */
.mcs-process__chapter--first {
border-top:
0;
}
.mcs-process__chapter--reverse {
grid-template-columns:
minmax(0, 1fr)
minmax(260px, .5fr);
}
.mcs-process__chapter--reverse
.mcs-process__copy {
grid-column:
2;
grid-row:
1;
}
.mcs-process__chapter--reverse
.mcs-process__media {
grid-column:
1;
grid-row:
1;
}
/* =========================================================
COPY
========================================================= */
.mcs-process__copy {
align-self:
center;
max-width:
430px;
}
.mcs-process__chapter-top {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
padding-bottom:
13px;
margin-bottom:
clamp(34px, 3vw, 48px);
border-bottom:
1px solid var(--line);
}
.mcs-process__chapter-top > span {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-process__chapter-top small {
color:
var(--mcs-ink-42);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.14em;
}
.mcs-process__step-title {
margin:
0 !important;
color:
var(--white) !important;
}
.mcs-process__copy-text {
max-width:
390px;
margin:
24px 0 0 !important;
color:
var(--mcs-ink-60);
line-height:
1.7;
}
/* SECONDARY PARAGRAPH */
.mcs-process__copy-text--divider {
margin-top:
16px !important;
padding-top:
16px;
border-top:
1px solid rgba(255,255,255,.09);
color:
rgba(255,255,255,.38);
}
/* =========================================================
DETAIL
========================================================= */
.mcs-process__detail {
display:
flex;
align-items:
center;
gap:
11px;
margin-top:
34px;
color:
var(--mcs-ink-42);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.14em;
}
.mcs-process__detail > span {
width:
28px;
height:
1px;
background:
var(--orange);
}
/* =========================================================
VIDEO
========================================================= */
.mcs-process__media {
position:
relative;
width:
100%;
aspect-ratio:
16 / 9;
overflow:
hidden;
background:
#151515;
}
.mcs-process__media video {
position:
absolute;
inset:
0;
width:
100%;
height:
100%;
object-fit:
cover;
object-position:
center;
transform:
scale(1.002);
transition:
transform
1.2s
cubic-bezier(.16,1,.3,1);
}
.mcs-process__media:hover video {
transform:
scale(1.012);
}
/* =========================================================
VIDEO SHADE
========================================================= */
.mcs-process__media-shade {
position:
absolute;
inset:
0;
z-index:
2;
pointer-events:
none;
background:
linear-gradient(
180deg,
rgba(0,0,0,.25) 0%,
rgba(0,0,0,0) 24%
),
linear-gradient(
0deg,
rgba(0,0,0,.40) 0%,
rgba(0,0,0,0) 25%
);
}
/* =========================================================
VIDEO META
========================================================= */
.mcs-process__media-top,
.mcs-process__media-bottom {
position:
absolute;
z-index:
3;
left:
15px;
right:
15px;
display:
flex;
align-items:
center;
justify-content:
space-between;
pointer-events:
none;
}
.mcs-process__media-top {
top:
14px;
color:
rgba(255,255,255,.58);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.14em;
}
.mcs-process__media-bottom {
bottom:
14px;
}
.mcs-process__media-bottom > span {
color:
rgba(255,255,255,.48);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-process__media-bottom strong {
color:
#fff;
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
/* =========================================================
END STRIP
========================================================= */
.mcs-process__end {
display:
flex;
align-items:
center;
gap:
20px;
padding:
20px 0 0;
border-top:
1px solid var(--line);
color:
rgba(255,255,255,.33);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.14em;
}
.mcs-process__end > div {
display:
flex;
align-items:
center;
gap:
10px;
}
.mcs-process__end-dot {
width:
5px;
height:
5px;
border-radius:
50%;
background:
var(--orange);
}
.mcs-process__end-line {
flex:
1;
height:
1px;
background:
rgba(255,255,255,.12);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.mcs-process__chapter,
.mcs-process__chapter--reverse {
grid-template-columns:
minmax(230px,.5fr)
minmax(0,1fr);
gap:
45px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-process {
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
}
.mcs-process__meta {
display:
none;
}
/* INTRO */
.mcs-process__intro {
grid-template-columns:
1fr;
gap:
30px;
padding:
45px 0;
}
.mcs-process__intro-text {
max-width:
330px;
}
/* CHAPTERS */
.mcs-process__chapter,
.mcs-process__chapter--reverse {
display:
flex;
flex-direction:
column;
gap:
38px;
align-items:
stretch;
padding:
60px 0;
}
.mcs-process__chapter--reverse
.mcs-process__copy,
.mcs-process__chapter--reverse
.mcs-process__media {
grid-column:
auto;
grid-row:
auto;
}
.mcs-process__chapter--reverse
.mcs-process__copy {
order:
1;
}
.mcs-process__chapter--reverse
.mcs-process__media {
order:
2;
}
.mcs-process__copy {
max-width:
100%;
}
.mcs-process__copy-text {
max-width:
350px;
}
.mcs-process__media {
aspect-ratio:
16 / 10;
}
/* END */
.mcs-process__end {
flex-wrap:
wrap;
gap:
14px;
}
.mcs-process__end-line {
min-width:
50px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.mcs-process__media video {
transition:
none !important;
}
}
/* ===== 3payperwhat.html ===== */
/* =========================================================
PAY PER WASH
========================================================= */
.mcs-ppw {
--orange: var(--mcs-orange);
--black: var(--mcs-black);
--offwhite: var(--mcs-white);
--line: rgba(0,0,0,.14);
position: relative;
width: 100%;
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
box-sizing:
border-box;
background:
var(--offwhite);
color:
var(--black);
font-family:
inherit;
}
/* =========================================================
TOP
========================================================= */
.mcs-ppw__top {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
padding-bottom:
14px;
border-bottom:
1px solid var(--line);
}
.mcs-ppw__meta {
color:
rgba(0,0,0,.25);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.15em;
}
/* =========================================================
HERO
========================================================= */
.mcs-ppw__hero {
display:
grid;
grid-template-columns:
minmax(0,1.25fr)
minmax(300px,.55fr);
gap:
clamp(50px,8vw,140px);
align-items:
end;
padding:
clamp(48px,4.5vw,65px)
0
clamp(55px,5vw,75px);
}
.mcs-ppw__kicker {
margin-bottom:
13px;
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.18em;
}
.mcs-ppw__title {
margin:
0 !important;
color:
var(--black) !important;
}
.mcs-ppw__hero-copy-text {
max-width:
420px;
margin:
0 !important;
color:
rgba(0,0,0,.53);
line-height:
1.7;
}
/* =========================================================
RAAS — deliberately understated
========================================================= */
.mcs-ppw__raas {
display:
flex;
align-items:
center;
gap:
12px;
margin-top:
24px;
padding-top:
16px;
border-top:
1px solid var(--line);
}
.mcs-ppw__raas span {
padding:
6px 7px;
border:
1px solid rgba(0,0,0,.18);
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.1em;
}
.mcs-ppw__raas strong {
color:
rgba(0,0,0,.31);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
/* =========================================================
TERMINAL ECONOMICS
========================================================= */
.mcs-ppw__terminal {
display:
grid;
grid-template-columns:
minmax(230px,.42fr)
minmax(0,1fr);
gap:
clamp(45px,7vw,120px);
align-items:
stretch;
padding:
clamp(48px,5vw,70px)
0;
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
}
.mcs-ppw__terminal-copy > span {
display:
block;
margin-bottom:
14px;
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.15em;
}
.mcs-ppw__terminal-title {
margin:
0 !important;
color:
var(--black) !important;
}
.mcs-ppw__terminal-copy-text {
max-width:
360px;
margin:
21px 0 0 !important;
color:
rgba(0,0,0,.44);
line-height:
1.65;
}
/* =========================================================
TERMINAL MODEL
========================================================= */
.mcs-ppw__terminal-model {
display:
grid;
grid-template-columns:
repeat(4,1fr);
border:
1px solid var(--line);
}
.mcs-ppw__service {
display:
flex;
flex-direction:
column;
justify-content:
space-between;
min-height:
165px;
padding:
18px;
box-sizing:
border-box;
border-right:
1px solid var(--line);
}
.mcs-ppw__service:last-child {
border-right:
0;
}
.mcs-ppw__service small {
color:
rgba(0,0,0,.25);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
.mcs-ppw__service strong {
color:
rgba(0,0,0,.68);
font-size:
var(--mcs-text-subtitle);
font-weight:
500;
line-height:
.9;
letter-spacing:
-.03em;
}
.mcs-ppw__service > span {
color:
rgba(0,0,0,.29);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.12em;
}
.mcs-ppw__service--active {
background:
var(--orange);
border-color:
var(--orange);
}
.mcs-ppw__service--active small,
.mcs-ppw__service--active > span {
color:
rgba(255,255,255,.67);
}
.mcs-ppw__service--active strong {
color:
#fff;
}
/* =========================================================
PRINCIPLES
========================================================= */
.mcs-ppw__principles {
display:
grid;
grid-template-columns:
repeat(3,1fr);
border-bottom:
1px solid var(--line);
}
.mcs-ppw__principle {
display:
flex;
flex-direction:
column;
min-height:
255px;
padding:
clamp(25px,2.5vw,36px);
box-sizing:
border-box;
border-right:
1px solid var(--line);
}
.mcs-ppw__principle:last-child {
border-right:
0;
}
.mcs-ppw__principle-top {
display:
flex;
align-items:
center;
justify-content:
space-between;
margin-bottom:
38px;
}
.mcs-ppw__principle-top span {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
}
.mcs-ppw__principle-top small {
color:
rgba(0,0,0,.24);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
.mcs-ppw__principle-title {
margin:
0 !important;
color:
var(--black) !important;
}
.mcs-ppw__principle-text {
max-width:
300px;
margin:
18px 0 0 !important;
color:
rgba(0,0,0,.43);
line-height:
1.6;
}
.mcs-ppw__principle-bottom {
margin-top:
auto;
padding-top:
24px;
color:
rgba(0,0,0,.25);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
/* =========================================================
RATE
========================================================= */
.mcs-ppw__rate {
display:
grid;
grid-template-columns:
minmax(220px,.42fr)
minmax(0,1fr)
minmax(150px,.27fr);
gap:
clamp(35px,5vw,75px);
align-items:
stretch;
padding:
clamp(55px,5vw,75px)
0;
border-bottom:
1px solid var(--line);
}
.mcs-ppw__rate-title > span {
display:
block;
margin-bottom:
13px;
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.15em;
}
.mcs-ppw__rate-title-text {
margin:
0 !important;
color:
var(--black) !important;
}
/* =========================================================
FACTORS
========================================================= */
.mcs-ppw__rate-factors {
border-top:
1px solid var(--line);
}
.mcs-ppw__rate-factors > div {
display:
grid;
grid-template-columns:
32px 1fr;
gap:
12px;
align-items:
center;
min-height:
45px;
border-bottom:
1px solid var(--line);
}
.mcs-ppw__rate-factors span {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
}
.mcs-ppw__rate-factors strong {
color:
rgba(0,0,0,.48);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.12em;
}
/* =========================================================
RATE OUTPUT
========================================================= */
.mcs-ppw__rate-output {
display:
flex;
flex-direction:
column;
justify-content:
space-between;
min-height:
225px;
padding:
20px;
box-sizing:
border-box;
background:
var(--black);
}
.mcs-ppw__rate-output small {
color:
rgba(255,255,255,.32);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
.mcs-ppw__rate-output strong {
color:
#fff;
font-size:
var(--mcs-text-title);
font-weight:
500;
line-height:
.86;
letter-spacing:
-.04em;
}
/* =========================================================
BOTTOM
========================================================= */
.mcs-ppw__bottom {
display:
flex;
align-items:
center;
gap:
18px;
padding-top:
21px;
color:
rgba(0,0,0,.28);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
.mcs-ppw__bottom > div {
display:
flex;
align-items:
center;
gap:
9px;
}
.mcs-ppw__bottom > div:first-child > span {
width:
5px;
height:
5px;
border-radius:
50%;
background:
var(--orange);
}
.mcs-ppw__bottom > i {
flex:
1;
height:
1px;
background:
rgba(0,0,0,.11);
}
.mcs-ppw__bottom strong {
color:
rgba(0,0,0,.55);
font-size:
inherit;
font-weight:
600;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.mcs-ppw__terminal {
grid-template-columns:
1fr;
}
.mcs-ppw__rate {
grid-template-columns:
1fr 1fr;
}
.mcs-ppw__rate-title {
grid-column:
1 / -1;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-ppw {
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
}
.mcs-ppw__meta {
display:
none;
}
.mcs-ppw__hero {
grid-template-columns:
1fr;
gap:
35px;
padding:
42px 0 55px;
}
.mcs-ppw__terminal {
padding:
45px 0;
}
.mcs-ppw__terminal-model {
grid-template-columns:
1fr 1fr;
}
.mcs-ppw__service {
min-height:
130px;
border-bottom:
1px solid var(--line);
}
.mcs-ppw__principles {
grid-template-columns:
1fr;
}
.mcs-ppw__principle {
min-height:
220px;
padding:
28px 0;
border-right:
0;
border-bottom:
1px solid var(--line);
}
.mcs-ppw__rate {
grid-template-columns:
1fr;
gap:
35px;
padding:
50px 0;
}
.mcs-ppw__rate-title {
grid-column:
auto;
}
.mcs-ppw__rate-output {
min-height:
190px;
}
.mcs-ppw__bottom {
flex-wrap:
wrap;
}
}
/* ===== 4implementation.html ===== */
/* =========================================================
IMPLEMENTATION
========================================================= */
.mcs-deploy {
--orange:var(--mcs-orange);
--black:var(--mcs-black);
--white:var(--mcs-white);
--line:rgba(255,255,255,.12);
position:relative;
width: 100%;
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
box-sizing:border-box;
background:
var(--black);
color:
var(--white);
font-family:
inherit;
}
/* =========================================================
TOP
========================================================= */
.mcs-deploy__top {
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding-bottom:15px;
border-bottom:
1px solid var(--line);
}
.mcs-deploy__meta {
color:
rgba(255,255,255,.27);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.15em;
}
/* =========================================================
INTRO
========================================================= */
.mcs-deploy__intro {
display:grid;
grid-template-columns:
minmax(0,1.15fr)
minmax(300px,.58fr);
gap:
clamp(55px,8vw,140px);
align-items:end;
padding:
clamp(50px,5vw,72px)
0
clamp(60px,6vw,85px);
}
.mcs-deploy__kicker {
margin-bottom:14px;
color:
var(--orange);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.18em;
}
.mcs-deploy__title {
margin:0 !important;
color:
var(--white) !important;
}
.mcs-deploy__intro-text {
max-width:420px;
margin:0 !important;
color:
rgba(255,255,255,.48);
line-height:1.7;
}
/* =========================================================
EXPERIENCE
========================================================= */
/* SECTION BODY — fixed 80vh so ScrollTrigger can pin it exactly; the
grid is centred inside it (same frame as the home Impact section). */
.mcs-deploy__experience {
/* room above the plan, so it sits a little lower in the pinned frame */
--deploy-top:clamp(32px,7vh,72px);
box-sizing:border-box;
height:80vh;
padding-top:var(--deploy-top);
overflow:hidden;
display:flex;
align-items:center;
}
/* ACCORDION WRAPPER — plan on the left, accordion on the right, both
aligned to the top. */
.mcs-deploy__grid {
width:100%;
display:grid;
grid-template-columns:
minmax(0,1.18fr)
minmax(330px,.62fr);
gap:
clamp(45px,6vw,95px);
align-items:start;
}
/* =========================================================
PLAN COLUMN
========================================================= */
.mcs-deploy__visual-column {
position:relative;
min-width:0;
}
/* The stage is .575 x its width tall, plus ~150px of rows (title bar,
tags, footer), so cap the width by the viewport height to keep the
whole plan inside the 80vh frame, below its top padding. */
.mcs-deploy__sticky {
width:
min(100%,calc((80vh - var(--deploy-top) - 150px) / .575));
}
/* =========================================================
SITE PLAN SHELL
========================================================= */
.mcs-yard {
/* no card: the plan floats on the section's own background */
overflow:visible;
}
/* =========================================================
TOP / BOTTOM
========================================================= */
.mcs-yard__top,
.mcs-yard__bottom {
display:flex;
align-items:center;
justify-content:
space-between;
gap:20px;
padding:
12px 0;
color:
rgba(255,255,255,.29);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.13em;
}
.mcs-yard__top strong {
color:
var(--orange);
font-size:inherit;
font-weight:600;
}
.mcs-yard__bottom {
padding-top:18px;
}
.mcs-yard__bottom > div {
display:flex;
align-items:center;
gap:8px;
}
.mcs-yard__bottom > div:first-child > span {
width:4px;
height:4px;
border-radius:50%;
background:
var(--orange);
}
.mcs-yard__bottom > i {
flex:1;
height:1px;
background:
rgba(255,255,255,.10);
}
/* =========================================================
CANVAS
The site plan is an isometric line drawing (product-scene.js,
on the Hairline kernel). The stage is a 5:4 SVG that scales as
one piece, so there is nothing to lay out here but its ground.
========================================================= */
.mcs-yard__canvas {
position:relative;
width:100%;
overflow:hidden;
}
.mcs-yard__stage {
/* the drawing's plates are filled with this, so they read as part of the canvas */
--hairline-plate:var(--mcs-black);
--hairline-edge:#9a9da6;
--hairline-mid:#7a7c84;
--hairline-lo:#45464c;
--hairline-hi:#f3f3f1;
display:block;
/* the drawing's own frame: the floor plus a little air, 400 x 230 of the 400 x 320 the scene is drawn in */
aspect-ratio:400 / 230;
}
/* =========================================================
TAGS — what the site needs, one pill each
========================================================= */
.mcs-yard__tags {
display:flex;
flex-wrap:wrap;
gap:8px;
padding-top:14px;
}
.mcs-yard__tag {
display:inline-flex;
align-items:baseline;
gap:8px;
padding:
7px 12px;
border:
1px solid var(--line);
border-radius:999px;
}
.mcs-yard__tag-name {
color:var(--mcs-ink-60);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.10em;
}
.mcs-yard__tag-value {
color:var(--mcs-ink-42);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.06em;
}
/* =========================================================
STEPS — accordion rows. The head is always visible; the body
collapses to 0 height via grid-template-rows and expands when
.is-active (same technique as the home Physical AI accordion).
========================================================= */
.mcs-deploy__steps {
min-width:0;
container-type:inline-size;
/* rows keep resizing during the transition; stop scroll anchoring
from fighting the scroll-driven advance */
overflow-anchor:none;
}
.mcs-deploy-step {
border-bottom:
1px solid var(--line);
}
.mcs-deploy-step__head {
width:100%;
display:flex;
align-items:center;
gap:14px;
padding:
clamp(12px,2vh,24px)
0;
border:0;
background:transparent;
text-align:left;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.mcs-deploy-step__head:focus-visible {
outline:
2px solid var(--orange);
outline-offset:6px;
}
.mcs-deploy-step__number {
color:
var(--mcs-ink-30);
font-family:var(--mcs-font-body);
font-size:var(--mcs-text-label);
font-weight:600;
letter-spacing:.2em;
transition:
color .3s ease;
}
.mcs-deploy-step__phase {
color:
var(--mcs-ink-42);
transition:
color .3s ease;
}
.mcs-deploy-step.is-active .mcs-deploy-step__number,
.mcs-deploy-step.is-active .mcs-deploy-step__phase {
color:
var(--orange);
}
.mcs-deploy-step__body {
display:grid;
grid-template-rows:0fr;
visibility:hidden;
transition:
grid-template-rows .6s var(--mcs-ease),
visibility 0s linear .6s;
}
.mcs-deploy-step.is-active .mcs-deploy-step__body {
grid-template-rows:1fr;
visibility:visible;
transition:
grid-template-rows .6s var(--mcs-ease),
visibility 0s;
}
.mcs-deploy-step__inner {
min-height:0;
overflow:hidden;
}
/* The gap below the content is margin on this last child, not padding
on the collapsing wrapper — padding there would stay reserved even
at 0fr. */
.mcs-deploy-step__content {
margin-bottom:
clamp(14px,2.2vh,26px);
opacity:0;
transition:
opacity .3s ease;
}
.mcs-deploy-step.is-active .mcs-deploy-step__content {
opacity:1;
transition:
opacity .45s ease .2s;
}
.mcs-deploy-step__label {
margin-bottom:11px;
color:
var(--mcs-ink-42);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.14em;
}
.mcs-deploy-step__title {
margin:0;
color:
var(--white);
}
.mcs-deploy-step-text {
margin:
clamp(16px,2.4vh,28px) 0 0;
color:
var(--mcs-ink-60);
line-height:1.6;
}
.mcs-deploy-step__footer {
margin-top:
clamp(14px,2.2vh,25px);
color:
var(--orange);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.13em;
}
/* =========================================================
TABLET AND PHONE
The plan sits above the steps. Reduced-motion users get the plain
version: every step open, one still frame of the plan. Everyone else
gets the same pinned, scroll-driven accordion as desktop, stacked: the
plan on top, the steps below, in one fixed-height frame
(--mcs-pin-frame). The steps keep the height they need and the plan
shrinks to fit what is left (it is an SVG, so it just scales).
========================================================= */
@media (max-width:1050px) {
.mcs-deploy__experience {
display:block;
height:auto;
overflow:visible;
}
.mcs-deploy__grid {
grid-template-columns:1fr;
}
.mcs-deploy__sticky {
width:100%;
margin-bottom:40px;
}
}
@media (max-width:1050px) and (prefers-reduced-motion:reduce) {
.mcs-deploy-step__head {
pointer-events:none;
}
.mcs-deploy-step__number,
.mcs-deploy-step__phase {
color:
var(--orange);
}
.mcs-deploy-step__body {
grid-template-rows:1fr;
visibility:visible;
}
.mcs-deploy-step__content {
margin-bottom:32px;
opacity:1;
}
}
@media (max-width:1050px) and (prefers-reduced-motion:no-preference) {
.mcs-deploy__experience {
display:flex;
height:var(--mcs-pin-frame);
box-sizing:border-box;
padding-top:var(--mcs-pin-pad);
overflow:hidden;
}
.mcs-deploy__grid {
display:flex;
flex-direction:column;
align-items:stretch;
width:100%;
height:100%;
gap:clamp(8px,1.8svh,22px);
}
.mcs-deploy__visual-column {
flex:1 1 0;
min-height:0;
display:flex;
/* lets the plan step aside when the steps need all the room */
container-type:size;
}
.mcs-deploy__sticky {
width:100%;
height:100%;
margin-bottom:0;
}
/* the yard fills the column; the drawing takes whatever the top bar
leaves, scaled to fit (the tags and footer strip are desktop detail) */
.mcs-yard {
height:100%;
display:flex;
flex-direction:column;
}
.mcs-yard__canvas {
flex:1 1 0;
min-height:0;
display:flex;
align-items:center;
justify-content:center;
}
.mcs-yard__stage {
width:100%;
height:100%;
aspect-ratio:auto;
}
.mcs-yard__tags,
.mcs-yard__bottom {
display:none;
}
.mcs-deploy__steps {
flex:0 0 auto;
}
.mcs-deploy-step__head {
padding:clamp(8px,1.5svh,18px) 0;
}
.mcs-deploy-step__content {
margin-bottom:clamp(8px,1.5svh,18px);
}
}
@container (max-height:110px) {
.mcs-yard {
display:none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px) {
.mcs-deploy {
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
}
.mcs-deploy__meta {
display:none;
}
.mcs-deploy__intro {
grid-template-columns:1fr;
gap:28px;
padding:
44px 0 52px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce) {
.mcs-deploy-step__body {
transition:none !important;
}
}
/* ===== certificate.html ===== */
#mcs-certificate {
width: 100%;
max-width: 100%;
margin: 0;
background: var(--mcs-black);
color: var(--mcs-white);
box-sizing: border-box;
overflow: hidden;
}
#mcs-certificate * {
box-sizing: border-box;
}
.mcs-certificate-inner {
max-width: 1800px;
margin: 0 auto;
padding:
clamp(70px, 8vw, 140px)
var(--mcs-section-pad-x)
clamp(70px, 8vw, 140px);
}
.mcs-certificate-kicker {
margin-bottom: clamp(45px, 5vw, 80px);
}
.mcs-certificate-header {
display: grid;
grid-template-columns: minmax(400px, 1.3fr) minmax(280px, .7fr);
gap: clamp(40px, 5vw, 90px);
margin-bottom: clamp(50px, 5vw, 80px);
}
.mcs-certificate-title {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-section);
line-height: .95;
letter-spacing: -.02em;
}
.mcs-certificate-intro {
align-self: end;
font-size: var(--mcs-text-lead);
line-height: 1.5;
color: var(--mcs-ink-73);
}
.mcs-certificate-card {
max-width: 640px;
border: 1px solid var(--mcs-line);
background: var(--mcs-surface);
}
.mcs-certificate-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: clamp(20px, 2vw, 28px);
border-bottom: 1px solid var(--mcs-line);
}
.mcs-certificate-card-top .mcs-label {
margin-bottom: 6px;
color: var(--mcs-ink-42);
}
.mcs-certificate-card-top strong {
display: block;
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-subtitle);
line-height: 1.1;
}
.mcs-certificate-dev {
flex: 0 0 auto;
padding: 4px 8px;
border: 1px solid var(--mcs-line);
color: var(--mcs-ink-42);
}
.mcs-certificate-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-bottom: 1px solid var(--mcs-line);
}
.mcs-certificate-meta > div {
padding: 16px clamp(20px, 2vw, 28px);
border-right: 1px solid var(--mcs-line);
border-bottom: 1px solid var(--mcs-line);
}
.mcs-certificate-meta > div:nth-child(2n) {
border-right: 0;
}
.mcs-certificate-meta > div:nth-last-child(-n+2) {
border-bottom: 0;
}
.mcs-certificate-meta span {
display: block;
margin-bottom: 4px;
font-size: var(--mcs-text-label);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcs-ink-42);
}
.mcs-certificate-meta strong {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-body-sm);
}
.mcs-certificate-status {
color: var(--mcs-orange);
}
.mcs-certificate-evidence-head {
display: flex;
justify-content: space-between;
padding: 16px clamp(20px, 2vw, 28px) 0;
}
.mcs-certificate-evidence-head .mcs-label {
color: var(--mcs-ink-42);
}
.mcs-certificate-evidence {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin: 16px clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px);
background: var(--mcs-line);
border: 1px solid var(--mcs-line);
}
.mcs-certificate-image {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 10px;
background: var(--mcs-black);
text-align: center;
}
.mcs-certificate-image span {
font-size: var(--mcs-text-nano);
color: var(--mcs-orange);
}
.mcs-certificate-image strong {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-label);
}
.mcs-certificate-image small {
font-size: var(--mcs-text-nano);
color: var(--mcs-ink-30);
}
@media (max-width: 900px) {
.mcs-certificate-header {
grid-template-columns: 1fr;
gap: 24px;
}
.mcs-certificate-intro {
align-self: auto;
}
.mcs-certificate-meta {
grid-template-columns: 1fr;
}
.mcs-certificate-meta > div {
border-right: 0;
}
.mcs-certificate-evidence {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== kpis.html ===== */
#mcs-kpi {
width: 100%;
max-width: 100%;
margin: 0;
background: var(--mcs-surface);
color: var(--mcs-white);
box-sizing: border-box;
overflow: hidden;
}
#mcs-kpi * {
box-sizing: border-box;
}
.mcs-kpi-inner {
max-width: 1800px;
margin: 0 auto;
padding:
clamp(70px, 8vw, 140px)
var(--mcs-section-pad-x)
clamp(70px, 8vw, 140px);
}
.mcs-kpi-kicker {
margin-bottom: clamp(45px, 5vw, 80px);
}
.mcs-kpi-header {
display: grid;
grid-template-columns: minmax(400px, 1.3fr) minmax(280px, .7fr);
gap: clamp(40px, 5vw, 90px);
margin-bottom: clamp(50px, 5vw, 80px);
}
.mcs-kpi-title {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-section);
line-height: .95;
letter-spacing: -.02em;
}
.mcs-kpi-intro {
align-self: end;
font-size: var(--mcs-text-lead);
line-height: 1.5;
color: var(--mcs-ink-73);
}
.mcs-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--mcs-line);
border: 1px solid var(--mcs-line);
margin-bottom: clamp(40px, 4vw, 64px);
}
.mcs-kpi-card {
padding: clamp(24px, 2.4vw, 36px);
background: var(--mcs-surface);
}
.mcs-kpi-card-active {
background: var(--mcs-black);
}
.mcs-kpi-card-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.mcs-kpi-num {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-body);
color: var(--mcs-orange);
}
.mcs-kpi-card-top .mcs-label {
color: var(--mcs-ink-42);
}
.mcs-kpi-card h3 {
margin-bottom: 20px;
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-subtitle);
line-height: 1.05;
}
.mcs-kpi-card ul {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
}
.mcs-kpi-card li {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 10px;
border-top: 1px solid var(--mcs-line);
}
.mcs-kpi-card li span {
font-size: var(--mcs-text-label);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mcs-ink-42);
}
.mcs-kpi-card li strong {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-body-sm);
}
.mcs-kpi-bottom {
color: var(--mcs-ink-30);
}
@media (max-width: 900px) {
.mcs-kpi-header {
grid-template-columns: 1fr;
gap: 24px;
}
.mcs-kpi-intro {
align-self: auto;
}
.mcs-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.mcs-kpi-grid {
grid-template-columns: 1fr;
}
}
/* ===== 5customerjourney.html ===== */
/* =========================================================
CUSTOMER JOURNEY / 05
========================================================= */
.mcs-journey {
--orange:var(--mcs-orange);
--black:var(--mcs-black);
--offwhite:var(--mcs-white);
--line:rgba(0,0,0,.13);
position:relative;
width: 100%;
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
box-sizing:border-box;
overflow:hidden;
background:
var(--offwhite);
color:
var(--black);
font-family:
inherit;
}
/* =========================================================
TOP
========================================================= */
.mcs-journey__top {
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding-bottom:15px;
border-bottom:
1px solid var(--line);
}
.mcs-journey__meta {
color:
rgba(0,0,0,.32);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.14em;
}
/* =========================================================
INTRO
========================================================= */
.mcs-journey__intro {
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(320px,.55fr);
gap:
clamp(55px,8vw,140px);
align-items:end;
padding:
clamp(50px,5vw,72px)
0
clamp(58px,5.5vw,78px);
}
.mcs-journey__kicker {
margin-bottom:15px;
color:
var(--orange);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.17em;
}
.mcs-journey__title {
margin:0 !important;
color:
var(--black) !important;
}
.mcs-journey__intro-text {
max-width:430px;
margin:0 !important;
color:
rgba(0,0,0,.55);
line-height:1.65;
}
/* =========================================================
GATE GRID
========================================================= */
.mcs-journey__gates {
position:relative;
display:grid;
grid-template-columns:
repeat(5,1fr);
}
/* =========================================================
BRIDGE LINE
========================================================= */
.mcs-journey__line {
position:absolute;
left:4%;
right:4%;
top:47px;
height:1px;
z-index:0;
background:
linear-gradient(
90deg,
rgba(241,90,36,.95),
rgba(241,90,36,.35)
);
}
/* =========================================================
GATE
========================================================= */
.mcs-journey-gate {
position:relative;
z-index:1;
display:flex;
flex-direction:column;
min-height:475px;
padding:
28px
clamp(18px,1.8vw,30px)
30px;
box-sizing:border-box;
border-right:
1px solid rgba(0,0,0,.11);
background:
var(--offwhite);
transition:
background .25s ease;
}
.mcs-journey-gate:last-child {
border-right:0;
}
/* =========================================================
GATE NODE
========================================================= */
.mcs-journey-gate__node {
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
margin-bottom:40px;
padding:0;
cursor:pointer;
font-family:inherit;
border:
1px solid rgba(0,0,0,.22);
border-radius:50%;
background:
var(--offwhite);
color:
var(--orange);
font-size:var(--mcs-text-nano);
font-weight:600;
}
/* the rotated collapsed-state eyebrow only exists in the desktop accordion */
.mcs-journey-gate__rail {
display:none;
}
/* body = everything but the node; a plain column so the output sits at
the bottom of the gate */
.mcs-journey-gate__body {
display:flex;
flex-direction:column;
flex:1;
}
/* =========================================================
GATE TOP
========================================================= */
.mcs-journey-gate__top {
display:flex;
align-items:center;
justify-content:
space-between;
gap:14px;
padding-bottom:13px;
margin-bottom:30px;
border-bottom:
1px solid rgba(0,0,0,.10);
}
.mcs-journey-gate__top span {
color:
rgba(0,0,0,.30);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.12em;
}
.mcs-journey-gate__top strong {
color:
rgba(0,0,0,.54);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.10em;
text-align:right;
}
/* =========================================================
GATE CONTENT
========================================================= */
.mcs-journey-gate__label {
margin-bottom:12px;
color:
var(--orange);
font-size:var(--mcs-text-micro);
font-weight:600;
letter-spacing:.13em;
}
.mcs-journey-gate__title {
margin:0 !important;
color:
var(--black) !important;
}
.mcs-journey-gate__content-text {
min-height:68px;
margin:
20px 0 0 !important;
color:
rgba(0,0,0,.50);
line-height:1.6;
}
/* =========================================================
LIST
========================================================= */
.mcs-journey-gate ul {
margin:
28px 0 0;
padding:0;
list-style:none;
}
.mcs-journey-gate li {
position:relative;
padding:
12px 0 12px 20px;
border-top:
1px solid rgba(0,0,0,.09);
color:
rgba(0,0,0,.43);
font-size:var(--mcs-text-body-sm);
font-weight:600;
line-height:1.3;
letter-spacing:.10em;
}
.mcs-journey-gate li::before {
content:"";
position:absolute;
left:0;
top:50%;
width:7px;
height:1px;
background:
var(--orange);
}
/* =========================================================
OUTPUT
========================================================= */
.mcs-journey-gate__output {
margin-top:auto;
padding-top:30px;
display:flex;
flex-direction:column;
gap:8px;
}
.mcs-journey-gate__output span {
color:
rgba(0,0,0,.30);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.12em;
}
.mcs-journey-gate__output strong {
color:
rgba(0,0,0,.68);
font-size:var(--mcs-text-body-sm);
font-weight:600;
line-height:1.35;
letter-spacing:.10em;
}
/* =========================================================
BOTTOM RAIL
========================================================= */
.mcs-journey__rail {
display:flex;
align-items:center;
gap:15px;
padding-top:22px;
color:
rgba(0,0,0,.36);
font-size:var(--mcs-text-nano);
font-weight:600;
letter-spacing:.11em;
}
.mcs-journey__rail > div {
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
}
.mcs-journey__rail > div:first-child > span {
width:5px;
height:5px;
border-radius:50%;
background:
var(--orange);
}
.mcs-journey__rail > i {
flex:1;
min-width:15px;
height:1px;
background:
rgba(0,0,0,.13);
}
.mcs-journey__rail-final {
color:
var(--orange);
}
/* =========================================================
HORIZONTAL ACCORDION (desktop and landscape tablet)
The five gates share one row. The active gate takes half the width;
the other four split the rest and show only their numbered node. The
section is pinned while scrolling advances the active gate (see
product-interactive.js). On portrait tablets and phones the same
accordion runs vertically instead (see "VERTICAL ACCORDION" below).
========================================================= */
@media (min-width:1101px), (orientation:landscape) and (min-width:900px) and (min-height:600px) {
.mcs-journey-gate__rail {
display:block;
}
/* PINNED BODY — the element ScrollTrigger pins. Its padding keeps the
gates clear of the header when pinned instead of butting against it. */
.mcs-journey__experience {
height:max(86vh,580px);
padding:
clamp(28px,6vh,64px)
0;
box-sizing:border-box;
}
.mcs-journey__gates {
display:flex;
height:100%;
container-type:inline-size;
overflow:hidden;
}
.mcs-journey-gate {
flex:1 1 0;
min-width:0;
min-height:0;
/* no side padding on the gate itself: it would count on top of the
flex share and the active gate would come out narrower than half */
padding-left:0;
padding-right:0;
overflow:hidden;
transition:
flex-grow .7s var(--mcs-ease),
background .25s ease;
}
.mcs-journey-gate.is-active {
flex-grow:4;
}
/* collapsed: the node sits in the middle of its column */
.mcs-journey-gate__node {
flex:0 0 auto;
margin-left:
calc(50% - 20px);
transition:
margin-left .7s var(--mcs-ease),
border-color .3s ease;
}
/* vertical rhythm scales with the viewport height so the content
always fits the shorter pinned frame */
.mcs-journey-gate {
padding-top:
clamp(18px,3vh,28px);
}
.mcs-journey-gate__node {
margin-bottom:
clamp(16px,4vh,40px);
}
.mcs-journey-gate__top {
margin-bottom:
clamp(14px,3vh,30px);
}
.mcs-journey-gate__content-text {
min-height:0;
margin-top:
clamp(12px,2vh,20px) !important;
}
.mcs-journey-gate ul {
margin-top:
clamp(14px,3vh,28px);
}
.mcs-journey-gate li {
padding-top:
clamp(7px,1.3vh,12px);
padding-bottom:
clamp(7px,1.3vh,12px);
}
.mcs-journey-gate__output {
padding-top:
clamp(14px,3vh,30px);
}
/* two node looks only: the active gate's is orange, the rest are outlined */
.mcs-journey-gate.is-active .mcs-journey-gate__node {
margin-left:
clamp(18px,1.8vw,30px);
border-color:
var(--orange);
background:
var(--orange);
color:
var(--mcs-white);
}
/* collapsed eyebrow: the gate's name, rotated, under its node */
.mcs-journey-gate__rail {
position:absolute;
top:
calc(clamp(18px,3vh,28px) + 40px + clamp(16px,4vh,40px) + 20px);
left:50%;
writing-mode:vertical-rl;
transform:
translateX(-50%)
rotate(180deg);
color:
var(--mcs-onlight-60);
font-size:var(--mcs-text-micro);
font-weight:600;
letter-spacing:.14em;
white-space:nowrap;
transition:
opacity .35s ease .25s;
}
.mcs-journey-gate.is-active .mcs-journey-gate__rail {
opacity:0;
transition:
opacity .15s ease;
}
/* Fixed width (half the row, less the gate padding), so the text
doesn't reflow while the gate grows and shrinks around it. */
.mcs-journey-gate__body {
flex:1;
width:
calc(50cqw - 2 * clamp(18px,1.8vw,30px));
margin-left:
clamp(18px,1.8vw,30px);
opacity:0;
visibility:hidden;
transition:
opacity .25s ease,
visibility 0s linear .25s;
}
.mcs-journey-gate.is-active .mcs-journey-gate__body {
opacity:1;
visibility:visible;
transition:
opacity .45s ease .25s,
visibility 0s;
}
}
/* Short desktop windows (small laptops): same layout, a smaller title
step (via the shared type token, not a one-off size) and a taller pin
frame so every gate still fits. */
/* narrow desktop widths: the half-width gate is narrower, so the title steps
down too */
@media (min-width:1101px) and (max-width:1280px), (orientation:landscape) and (min-width:900px) and (min-height:600px) and (max-width:1280px) {
.mcs-journey-gate {
--mcs-text-title:
clamp(22px,2.2vw,30px);
}
}
@media (min-width:1101px) and (max-height:780px), (orientation:landscape) and (min-width:900px) and (min-height:600px) and (max-height:780px) {
.mcs-journey-gate {
--mcs-text-title:
clamp(22px,2.2vw,30px);
}
.mcs-journey__experience {
height:max(90vh,600px);
padding:
clamp(18px,3vh,28px)
0;
}
}
/* =========================================================
TABLET AND PHONE (portrait, or too small for the horizontal row)
The plain version, used with reduced motion: every gate open and
stacked. Everyone else gets the pinned vertical accordion further
down.
========================================================= */
@media (max-width:1100px) and (orientation:portrait), (max-width:899px), (max-width:1100px) and (max-height:599px) {
.mcs-journey-gate__node {
pointer-events:none;
}
.mcs-journey__gates {
grid-template-columns:
1fr 1fr;
}
.mcs-journey__line {
display:none;
}
.mcs-journey-gate {
min-height:440px;
border-bottom:
1px solid rgba(0,0,0,.11);
}
.mcs-journey-gate:nth-child(even) {
border-right:0;
}
.mcs-journey-gate:last-child {
grid-column:
1 / -1;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px) {
.mcs-journey {
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
}
.mcs-journey__meta {
display:none;
}
.mcs-journey__eyebrow {
font-size:8px;
}
/* INTRO */
.mcs-journey__intro {
grid-template-columns:1fr;
gap:30px;
padding:
44px 0 52px;
}
.mcs-journey__intro-text {
max-width:360px;
line-height:1.65;
}
/* GATES */
.mcs-journey__gates {
grid-template-columns:1fr;
}
.mcs-journey-gate {
min-height:auto;
padding:
34px 0 42px;
border-right:0;
border-bottom:
1px solid rgba(0,0,0,.13);
background:
transparent;
}
.mcs-journey-gate:last-child {
grid-column:auto;
}
.mcs-journey-gate__node {
width:42px;
height:42px;
margin-bottom:34px;
font-size:8px;
}
.mcs-journey-gate__top {
margin-bottom:32px;
}
.mcs-journey-gate__top span,
.mcs-journey-gate__top strong {
font-size:8px;
}
.mcs-journey-gate__label {
font-size:8px;
margin-bottom:14px;
}
.mcs-journey-gate__content-text {
min-height:0;
max-width:400px;
margin-top:22px !important;
line-height:1.65;
}
.mcs-journey-gate ul {
margin-top:30px;
}
.mcs-journey-gate li {
padding:
13px 0 13px 29px;
font-size:9px;
letter-spacing:.09em;
}
.mcs-journey-gate li::before {
width:10px;
}
.mcs-journey-gate__output {
margin-top:48px;
padding-top:0;
}
.mcs-journey-gate__output span {
font-size:7px;
}
.mcs-journey-gate__output strong {
font-size:10px;
}
.mcs-journey__rail {
display:none;
}
}
/* =========================================================
VERTICAL ACCORDION (portrait tablets and phones)
The same scroll-driven accordion as the horizontal row, turned on its
side (needs at least 600px of height, so landscape phones keep the
plain stacked version): one gate per row, the section pinned in a fixed-height frame
(--mcs-pin-frame) while scrolling opens the next gate. Each gate's head
is its numbered node plus its name; the body (title, copy, focus areas,
output) collapses to nothing until the gate is active.
========================================================= */
@media (max-width:1100px) and (orientation:portrait) and (min-height:600px) and (prefers-reduced-motion:no-preference), (max-width:899px) and (min-height:600px) and (prefers-reduced-motion:no-preference) {
.mcs-journey__experience {
display:block;
height:var(--mcs-pin-frame);
box-sizing:border-box;
padding-top:var(--mcs-pin-pad);
overflow:hidden;
}
.mcs-journey__gates {
display:flex;
flex-direction:column;
height:100%;
overflow:hidden;
/* lets the open gate drop detail when the screen is short */
container-type:size;
}
.mcs-journey__line {
display:none;
}
/* head row (node + name) and a collapsing body row */
.mcs-journey-gate {
flex:0 0 auto;
min-height:0;
display:grid;
grid-template-columns:36px minmax(0,1fr);
grid-template-rows:auto 0fr;
column-gap:14px;
padding:0;
border-right:0;
border-bottom:
1px solid var(--mcs-line-onlight);
background:transparent;
transition:
grid-template-rows .6s var(--mcs-ease);
/* the body title steps down through the shared token */
--mcs-text-title:clamp(20px,5.6vw,30px);
}
.mcs-journey-gate:first-child {
border-top:
1px solid var(--mcs-line-onlight);
}
.mcs-journey-gate.is-active {
grid-template-rows:auto 1fr;
}
.mcs-journey-gate__node {
grid-column:1;
grid-row:1;
align-self:center;
width:36px;
height:36px;
margin:clamp(7px,1.2svh,15px) 0;
font-size:var(--mcs-text-nano);
pointer-events:auto;
transition:
border-color .3s ease,
background .3s ease,
color .3s ease;
}
/* two node looks only: the active gate's is orange, the rest outlined */
.mcs-journey-gate.is-active .mcs-journey-gate__node {
border-color:
var(--orange);
background:
var(--orange);
color:
var(--mcs-white);
}
/* the gate's name sits beside its node */
.mcs-journey-gate__rail {
display:block;
grid-column:2;
grid-row:1;
align-self:center;
color:
var(--mcs-onlight-42);
font-size:var(--mcs-text-label);
font-weight:600;
letter-spacing:.14em;
cursor:pointer;
transition:
color .3s ease;
}
.mcs-journey-gate.is-active .mcs-journey-gate__rail {
color:
var(--orange);
}
.mcs-journey-gate__body {
grid-column:1 / -1;
grid-row:2;
min-height:0;
width:auto;
margin:0;
overflow:hidden;
opacity:0;
visibility:hidden;
transition:
opacity .25s ease,
visibility 0s linear .25s;
}
.mcs-journey-gate.is-active .mcs-journey-gate__body {
opacity:1;
visibility:visible;
transition:
opacity .45s ease .2s,
visibility 0s;
}
/* the head already shows the number and name, so the GATE 0N row goes */
.mcs-journey-gate__top {
display:none;
}
.mcs-journey-gate__label {
margin:0 0 clamp(6px,1.1svh,12px);
}
.mcs-journey-gate__content-text {
min-height:0;
max-width:none;
margin-top:clamp(8px,1.4svh,16px) !important;
line-height:1.55;
}
.mcs-journey-gate ul {
margin-top:clamp(10px,1.8svh,20px);
}
.mcs-journey-gate li {
padding:
clamp(5px,.9svh,10px)
0
clamp(5px,.9svh,10px)
20px;
font-size:var(--mcs-text-body-sm);
letter-spacing:0;
}
.mcs-journey-gate li::before {
width:7px;
}
.mcs-journey-gate__output {
margin-top:0;
padding-top:clamp(8px,1.4svh,16px);
/* the space under the open gate is margin here, not padding on the
collapsing body, so it collapses with it */
margin-bottom:clamp(12px,2svh,22px);
}
.mcs-journey-gate__output span {
font-size:var(--mcs-text-nano);
}
.mcs-journey-gate__output strong {
font-size:var(--mcs-text-label);
}
}
/* =========================================================
TALL PORTRAIT SCREENS, WHOLE SECTION PINNED
On portrait tablets tall enough for it (iPad Pro class) the whole
section is the pinned frame: eyebrow, title, intro and the vertical
accordion all stay on screen, so there is no empty space above it.
Keep the media query in step with SECTION_MIN_HEIGHT in
product-interactive.js.
========================================================= */
@media (max-width:1100px) and (orientation:portrait) and (min-height:1100px) and (prefers-reduced-motion:no-preference) {
.mcs-journey {
display:flex;
flex-direction:column;
height:calc(100svh - var(--mcs-header-h));
padding-top:clamp(24px,3.5svh,48px);
padding-bottom:clamp(24px,3.5svh,48px);
}
.mcs-journey__top,
.mcs-journey__intro {
flex:0 0 auto;
}
.mcs-journey__intro {
padding:
clamp(18px,3svh,36px)
0
clamp(18px,3svh,36px);
}
/* the frame is now the section, so the accordion just fills the rest */
.mcs-journey__experience {
flex:1;
min-height:0;
height:auto;
padding-top:0;
}
}
/* very short screens: the open gate drops its output, then its list */
@container (max-height:640px) {
.mcs-journey-gate__output {
display:none;
}
}
@container (max-height:580px) {
.mcs-journey-gate ul {
display:none;
}
}
/* ===== casestudy.html ===== */
#mcs-casestudy {
width: 100%;
max-width: 100%;
margin: 0;
background: var(--mcs-black);
color: var(--mcs-white);
box-sizing: border-box;
overflow: hidden;
}
#mcs-casestudy * {
box-sizing: border-box;
}
.mcs-casestudy-inner {
max-width: 1800px;
margin: 0 auto;
padding:
clamp(70px, 8vw, 140px)
var(--mcs-section-pad-x)
clamp(70px, 8vw, 140px);
}
.mcs-casestudy-kicker {
margin-bottom: clamp(45px, 5vw, 80px);
}
.mcs-casestudy-header {
max-width: 780px;
margin-bottom: clamp(50px, 5vw, 80px);
}
.mcs-casestudy-title {
margin-bottom: 20px;
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-section);
line-height: .95;
letter-spacing: -.02em;
}
.mcs-casestudy-intro {
margin-bottom: 24px;
font-size: var(--mcs-text-lead);
line-height: 1.5;
color: var(--mcs-ink-73);
}
.mcs-casestudy-press {
display: inline-flex;
flex-direction: column;
gap: 4px;
padding: 16px 20px;
border: 1px solid var(--mcs-line);
text-decoration: none;
transition: border-color .25s ease;
}
.mcs-casestudy-press:hover {
border-color: var(--mcs-orange);
}
.mcs-casestudy-press span {
font-size: var(--mcs-text-label);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcs-ink-42);
}
.mcs-casestudy-press strong {
max-width: 480px;
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-body-sm);
color: var(--mcs-white);
}
.mcs-casestudy-press em {
margin-top: 4px;
font-style: normal;
font-size: var(--mcs-text-label);
color: var(--mcs-orange);
}
.mcs-casestudy-comparison {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--mcs-line);
border: 1px solid var(--mcs-line);
margin-bottom: clamp(40px, 4vw, 64px);
}
.mcs-casestudy-panel {
padding: clamp(28px, 2.8vw, 44px);
background: var(--mcs-surface);
}
.mcs-casestudy-panel-after {
background: var(--mcs-black);
}
.mcs-casestudy-panel-top {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--mcs-line);
}
.mcs-casestudy-panel-top .mcs-label {
color: var(--mcs-ink-42);
}
.mcs-casestudy-panel-top strong {
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-title);
}
.mcs-casestudy-steps {
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
}
.mcs-casestudy-steps li {
font-size: var(--mcs-text-body-sm);
line-height: 1.4;
color: var(--mcs-ink-73);
}
.mcs-casestudy-steps li span {
display: block;
margin-bottom: 4px;
font-size: var(--mcs-text-label);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mcs-orange);
}
.mcs-casestudy-footnote {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--mcs-font-heading);
font-size: var(--mcs-text-body-sm);
}
.mcs-casestudy-footnote span {
width: 24px;
height: 1px;
background: var(--mcs-orange);
}
@media (max-width: 767px) {
.mcs-casestudy-comparison {
grid-template-columns: 1fr;
}
}