/* =========================================================
FRAMEssOR
PREMIUM CREATIVE DIGITAL STUDIO
MAIN STYLE SYSTEM
========================================================= */
/* =========================================================
ROOT
========================================================= */
:root {
--black: #050505;
--black-soft: #0a0a0a;
--black-light: #111111;
--white: #ffffff;
--off-white: #f3f3ef;
--gray-100: #e7e7e3;
--gray-200: #bdbdb8;
--gray-300: #858580;
--gray-400: #555550;
--border: rgba(255, 255, 255, 0.14);
--border-light: rgba(255, 255, 255, 0.08);
--display: "Space Grotesk", sans-serif;
--body: "Inter", sans-serif;
--mono: "DM Mono", monospace;
--container: 1380px;
--ease:
cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
RESET
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--black);
color: var(--off-white);
font-family: var(--body);
font-size: 15px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
body::selection {
background: var(--off-white);
color: var(--black);
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font: inherit;
}
/* =========================================================
GLOBAL CONTAINER
========================================================= */
.container {
width: min(
calc(100% - 80px),
var(--container)
);
margin: 0 auto;
}
/* =========================================================
CUSTOM CURSOR
========================================================= */
.cursor {
position: fixed;
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
transform: translate(-50%, -50%);
transition:
transform 0.2s ease,
width 0.2s ease,
height 0.2s ease;
}
.cursor-follower {
position: fixed;
width: 34px;
height: 34px;
border: 1px solid
rgba(255, 255, 255, 0.35);
border-radius: 50%;
pointer-events: none;
z-index: 999998;
transform: translate(-50%, -50%);
transition:
width 0.3s ease,
height 0.3s ease,
border-color 0.3s ease;
}
/* =========================================================
PAGE LOADER
========================================================= */
.page-loader {
position: fixed;
inset: 0;
background: var(--black);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
}
.loader-content {
width: min(420px, 80vw);
}
.loader-brand {
font-family: var(--display);
font-size: 34px;
font-weight: 700;
letter-spacing: -2px;
margin-bottom: 25px;
}
.loader-brand span {
color: var(--gray-300);
}
.loader-progress {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.loader-progress span {
display: block;
width: 0;
height: 100%;
background: #ffffff;
}
.loader-number {
margin-top: 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--gray-300);
}
/* =========================================================
NAVIGATION
========================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 22px 0;
transition:
padding 0.4s ease,
background 0.4s ease,
border-color 0.4s ease;
}
.site-header.scrolled {
padding: 14px 0;
background:
rgba(5, 5, 5, 0.82);
backdrop-filter: blur(18px);
border-bottom: 1px solid
rgba(255, 255, 255, 0.08);
}
.nav-container {
width: min(
calc(100% - 60px),
1480px
);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand-logo {
display: flex;
flex-direction: column;
gap: 2px;
}
.brand-main {
font-family: var(--display);
font-size: 22px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1;
}
.brand-main span {
color: var(--gray-300);
}
.brand-sub {
font-family: var(--mono);
font-size: 7px;
letter-spacing: 2px;
color: var(--gray-300);
}
.desktop-nav {
display: flex;
align-items: center;
gap: 34px;
}
.nav-link {
position: relative;
color: var(--gray-200);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.7px;
transition: color 0.3s ease;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 1px;
background: #ffffff;
transition: width 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: #ffffff;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-cta {
display: flex;
align-items: center;
gap: 18px;
padding: 12px 17px;
border: 1px solid
rgba(255, 255, 255, 0.22);
font-size: 10px;
letter-spacing: 1px;
transition:
background 0.3s ease,
color 0.3s ease;
}
.nav-cta:hover {
background: #ffffff;
color: #050505;
}
.menu-toggle {
display: none;
width: 42px;
height: 42px;
border: 1px solid
rgba(255, 255, 255, 0.2);
background: transparent;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 18px;
height: 1px;
background: #ffffff;
margin: 5px auto;
}
/* =========================================================
MOBILE MENU
========================================================= */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #050505;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s ease,
visibility 0.4s ease;
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
}
.mobile-menu-inner {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
}
.mobile-menu-inner a {
font-family: var(--display);
font-size: clamp(38px, 8vw, 70px);
font-weight: 600;
letter-spacing: -3px;
}
/* =========================================================
HERO
========================================================= */
.hero-premium {
position: relative;
min-height: 100vh;
padding:
150px 60px
70px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--black);
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);
background-size: 90px 90px;
mask-image:
linear-gradient(
to bottom,
black,
transparent 90%
);
pointer-events: none;
}
.hero-noise {
position: absolute;
inset: 0;
opacity: 0.045;
pointer-events: none;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-top-line {
position: absolute;
top: 112px;
left: 60px;
right: 60px;
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
color: var(--gray-300);
}
.hero-premium-inner {
position: relative;
z-index: 2;
width: min(1480px, 100%);
margin: 0 auto;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--gray-300);
}
.eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 15px
rgba(255, 255, 255, 0.8);
}
.hero-title {
font-family: var(--display);
font-size: clamp(
70px,
11.5vw,
190px
);
line-height: 0.82;
font-weight: 600;
letter-spacing: -0.075em;
text-transform: uppercase;
}
.hero-title-line {
display: block;
}
.hero-title-outline {
color: transparent;
-webkit-text-stroke:
1px rgba(255, 255, 255, 0.65);
}
.hero-bottom {
display: grid;
grid-template-columns:
1fr 1fr auto;
align-items: end;
gap: 50px;
margin-top: 80px;
}
.mini-label {
display: block;
margin-bottom: 14px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
color: var(--gray-400);
}
.hero-description {
max-width: 380px;
}
.hero-description p {
color: var(--gray-200);
font-size: 14px;
line-height: 1.8;
}
.hero-actions {
display: flex;
gap: 10px;
}
.hero-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
min-width: 180px;
padding: 16px 18px;
border: 1px solid
rgba(255, 255, 255, 0.25);
font-size: 10px;
letter-spacing: 1px;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.hero-btn-primary {
background: #ffffff;
color: #050505;
}
.hero-btn-primary:hover {
background: transparent;
color: #ffffff;
}
.hero-btn-secondary:hover {
background: #ffffff;
color: #050505;
}
.hero-btn-arrow {
font-size: 18px;
}
.hero-scroll-indicator {
display: flex;
align-items: center;
gap: 15px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1px;
color: var(--gray-400);
white-space: nowrap;
}
.scroll-line {
width: 70px;
height: 1px;
background: var(--gray-400);
}
.hero-corner {
position: absolute;
z-index: 3;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1px;
color: var(--gray-400);
}
.hero-corner-tl {
left: 60px;
bottom: 35px;
}
.hero-corner-br {
right: 60px;
bottom: 35px;
}
/* =========================================================
MARQUEE
========================================================= */
.marquee-section {
position: relative;
overflow: hidden;
width: 100%;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--off-white);
color: var(--black);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
padding: 22px 0;
animation: marqueeMove 22s linear infinite;
will-change: transform;
}
.marquee-group {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 35px;
padding-right: 35px;
}
.marquee-item {
display: block;
flex-shrink: 0;
font-family: var(--display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.5px;
white-space: nowrap;
}
.marquee-group > span {
display: block;
flex-shrink: 0;
font-size: 15px;
line-height: 1;
}
@keyframes marqueeMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 700px) {
.marquee-track {
padding: 17px 0;
animation-duration: 18s;
}
.marquee-group {
gap: 24px;
padding-right: 24px;
}
.marquee-item {
font-size: 15px;
}
.marquee-group > span {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
}
/* =========================================================
SECTION META
========================================================= */
.section-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
color: var(--gray-400);
}
/* =========================================================
INTRO
========================================================= */
.intro-section {
padding: 160px 0;
}
.intro-layout {
display: grid;
grid-template-columns:
1.2fr 0.8fr;
gap: 100px;
padding-top: 75px;
}
.intro-title h2 {
font-family: var(--display);
font-size: clamp(
55px,
7vw,
105px
);
line-height: 0.88;
letter-spacing: -0.065em;
font-weight: 500;
}
.intro-title em {
color: transparent;
-webkit-text-stroke:
1px rgba(255, 255, 255, 0.5);
font-style: normal;
}
.intro-content {
padding-top: 12px;
}
.intro-large {
font-size: 23px;
line-height: 1.45;
color: var(--off-white);
margin-bottom: 30px;
}
.intro-content > p:not(.intro-large) {
color: var(--gray-300);
line-height: 1.9;
margin-bottom: 35px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 20px;
padding-bottom: 10px;
border-bottom: 1px solid
rgba(255, 255, 255, 0.35);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
transition:
gap 0.3s ease,
border-color 0.3s ease;
}
.text-link:hover {
gap: 30px;
border-color: #ffffff;
}
/* =========================================================
STATS
========================================================= */
.stats-section {
padding: 0 0 160px;
}
.stats-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stat-item {
padding: 45px 25px;
border-right: 1px solid var(--border);
}
.stat-item:last-child {
border-right: none;
}
.stat-number {
display: block;
font-family: var(--display);
font-size: clamp(
55px,
6vw,
90px
);
line-height: 1;
letter-spacing: -0.07em;
}
.stat-number span {
color: var(--gray-400);
}
.stat-label {
display: block;
margin-top: 15px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.5px;
color: var(--gray-400);
}
/* =========================================================
SERVICES
========================================================= */
.services-section {
padding: 150px 0;
background: var(--off-white);
color: var(--black);
}
.services-section .section-meta {
border-color: rgba(0, 0, 0, 0.15);
color: #666666;
}
.section-heading-row {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 80px;
align-items: start;
}
.section-intro {
max-width: 420px;
font-size: 18px;
line-height: 1.6;
color: #555555;
}
.services-list {
margin-top: 90px;
border-top: 1px solid
rgba(0, 0, 0, 0.18);
}
.service-row {
position: relative;
display: grid;
grid-template-columns:
80px 1fr 0.8fr 50px;
align-items: center;
gap: 30px;
padding: 30px 0;
border-bottom: 1px solid
rgba(0, 0, 0, 0.18);
overflow: hidden;
transition:
padding 0.5s var(--ease);
}
.service-row::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 100%;
background: var(--black);
z-index: 0;
transition: width 0.55s var(--ease);
}
.service-row:hover {
padding-left: 25px;
padding-right: 25px;
color: #ffffff;
}
.service-row:hover::before {
width: 100%;
}
.service-row > * {
position: relative;
z-index: 1;
}
.service-number {
font-family: var(--mono);
font-size: 10px;
color: #777777;
}
.service-row:hover
.service-number {
color: #aaaaaa;
}
.service-row h3 {
font-family: var(--display);
font-size: clamp(
32px,
4vw,
60px
);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 1;
}
.service-description {
max-width: 280px;
font-size: 13px;
line-height: 1.6;
color: #777777;
}
.service-row:hover
.service-description {
color: #aaaaaa;
}
.service-arrow {
font-size: 25px;
text-align: right;
transition:
transform 0.4s ease;
}
.service-row:hover
.service-arrow {
transform:
translate(5px, -5px);
}
/* =========================================================
WORK
========================================================= */
.work-section {
padding: 160px 0;
}
.work-section .section-heading-row {
margin-bottom: 80px;
}
.work-grid {
display: grid;
grid-template-columns:
1.35fr 0.65fr;
gap: 25px;
}
.work-card {
overflow: hidden;
}
.work-card:nth-child(3) {
grid-column: 1 / -1;
}
.work-image {
position: relative;
min-height: 520px;
overflow: hidden;
background: #111111;
}
.work-card:nth-child(2)
.work-image {
min-height: 520px;
}
.work-card:nth-child(3)
.work-image {
min-height: 650px;
}
.work-placeholder {
width: 100%;
height: 100%;
min-height: inherit;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at 30% 30%,
#252525,
#070707 65%
);
font-family: var(--display);
font-size: clamp(
45px,
8vw,
120px
);
font-weight: 600;
letter-spacing: -0.08em;
color: rgba(255, 255, 255, 0.9);
transition:
transform 0.8s var(--ease);
}
.work-placeholder-alt {
background:
linear-gradient(
135deg,
#161616,
#050505
);
}
.work-placeholder-third {
background:
radial-gradient(
circle at 70% 40%,
#303030,
#060606 60%
);
}
.work-card:hover
.work-placeholder {
transform: scale(1.045);
}
.work-info {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 0;
border-bottom: 1px solid var(--border);
}
.work-category {
display: block;
margin-bottom: 8px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.5px;
color: var(--gray-400);
}
.work-info h3 {
font-family: var(--display);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.04em;
}
.work-year {
font-family: var(--mono);
font-size: 9px;
color: var(--gray-400);
}
/* =========================================================
PROCESS
========================================================= */
.process-section {
padding: 150px 0;
background: #0a0a0a;
}
.process-list {
margin-top: 90px;
border-top: 1px solid var(--border);
}
.process-item {
display: grid;
grid-template-columns:
100px 1fr 50px;
gap: 30px;
align-items: center;
padding: 38px 0;
border-bottom: 1px solid var(--border);
transition:
padding 0.4s ease;
}
.process-item:hover {
padding-left: 25px;
}
.process-number {
font-family: var(--mono);
font-size: 10px;
color: var(--gray-400);
}
.process-item h3 {
font-family: var(--display);
font-size: clamp(
35px,
5vw,
70px
);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 1;
}
.process-item p {
max-width: 500px;
margin-top: 10px;
color: var(--gray-300);
font-size: 13px;
}
.process-arrow {
font-size: 24px;
}
/* =========================================================
TESTIMONIAL
========================================================= */
.testimonial-section {
padding: 170px 0;
}
.testimonial-content {
max-width: 1100px;
margin: 90px auto 0;
}
.quote-mark {
font-family: Georgia, serif;
font-size: 100px;
line-height: 0.5;
color: var(--gray-400);
}
.testimonial-content blockquote {
font-family: var(--display);
font-size: clamp(
42px,
6vw,
85px
);
line-height: 0.98;
letter-spacing: -0.06em;
font-weight: 500;
}
.testimonial-author {
display: flex;
justify-content: space-between;
max-width: 500px;
margin-top: 55px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.4px;
color: var(--gray-400);
}
/* =========================================================
CTA
========================================================= */
.cta-section {
position: relative;
overflow: hidden;
padding: 150px 0;
background: var(--off-white);
color: var(--black);
}
.cta-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(0, 0, 0, 0.06) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0, 0, 0, 0.06) 1px,
transparent 1px
);
background-size: 80px 80px;
}
.cta-section .container {
position: relative;
z-index: 2;
}
.cta-meta {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
padding-bottom: 25px;
border-bottom: 1px solid
rgba(0, 0, 0, 0.2);
}
.cta-section h2 {
max-width: 1250px;
margin-top: 65px;
font-family: var(--display);
font-size: clamp(
65px,
10vw,
155px
);
line-height: 0.82;
letter-spacing: -0.075em;
font-weight: 600;
}
.cta-section h2 span {
color: transparent;
-webkit-text-stroke:
1px rgba(0, 0, 0, 0.65);
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 45px;
margin-top: 70px;
padding: 18px 22px;
background: var(--black);
color: #ffffff;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.cta-button:hover {
transform: translateY(-5px);
background: #222222;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
padding: 90px 0 30px;
background: var(--black);
}
.footer-top {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 100px;
padding-bottom: 90px;
}
.footer-logo {
font-family: var(--display);
font-size: 45px;
font-weight: 700;
letter-spacing: -3px;
}
.footer-logo span {
color: var(--gray-400);
}
.footer-brand p {
max-width: 270px;
margin-top: 20px;
color: var(--gray-400);
font-size: 13px;
}
.footer-links {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 30px;
}
.footer-column {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-label {
margin-bottom: 8px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.5px;
color: var(--gray-400);
}
.footer-column a {
width: fit-content;
font-size: 12px;
color: var(--gray-200);
transition:
color 0.3s ease;
}
.footer-column a:hover {
color: #ffffff;
}
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: 22px;
border-top: 1px solid var(--border);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1px;
color: var(--gray-400);
}
/* =========================================================
SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: var(--black);
}
::-webkit-scrollbar-thumb {
background: #444444;
}
::-webkit-scrollbar-thumb:hover {
background: #777777;
}
/* =========================================================
KEYFRAMES
========================================================= */
@keyframes marqueeMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 1100px) {
.desktop-nav {
gap: 20px;
}
.nav-cta {
display: none;
}
.hero-bottom {
grid-template-columns:
1fr 1fr;
}
.hero-scroll-indicator {
display: none;
}
.intro-layout {
gap: 60px;
}
}
@media (max-width: 900px) {
.desktop-nav {
display: none;
}
.menu-toggle {
display: block;
}
.hero-premium {
padding-left: 30px;
padding-right: 30px;
}
.hero-top-line {
left: 30px;
right: 30px;
}
.hero-corner-tl {
left: 30px;
}
.hero-corner-br {
right: 30px;
}
.hero-bottom {
grid-template-columns: 1fr;
margin-top: 55px;
}
.intro-layout {
grid-template-columns: 1fr;
}
.section-heading-row {
grid-template-columns: 1fr;
gap: 35px;
}
.stats-grid {
grid-template-columns:
repeat(2, 1fr);
}
.stat-item:nth-child(2) {
border-right: none;
}
.stat-item:nth-child(3) {
border-top: 1px solid var(--border);
}
.stat-item:nth-child(4) {
border-top: 1px solid var(--border);
}
.work-grid {
grid-template-columns: 1fr;
}
.work-card:nth-child(3) {
grid-column: auto;
}
.footer-top {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.container {
width: min(
calc(100% - 40px),
var(--container)
);
}
.nav-container {
width: calc(100% - 40px);
}
.site-header {
padding: 18px 0;
}
.hero-premium {
min-height: 850px;
padding:
145px 20px
60px;
}
.hero-top-line {
top: 95px;
left: 20px;
right: 20px;
}
.hero-top-line span:nth-child(2) {
display: none;
}
.hero-title {
font-size:
clamp(
57px,
16vw,
95px
);
}
.hero-eyebrow {
font-size: 8px;
}
.hero-description {
max-width: 100%;
}
.hero-actions {
flex-direction: column;
}
.hero-btn {
width: 100%;
}
.hero-corner {
display: none;
}
.intro-section,
.work-section,
.process-section,
.testimonial-section {
padding: 100px 0;
}
.services-section,
.cta-section {
padding: 100px 0;
}
.intro-title h2 {
font-size: 55px;
}
.intro-large {
font-size: 19px;
}
.stats-section {
padding-bottom: 100px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item,
.stat-item:nth-child(2),
.stat-item:nth-child(3),
.stat-item:nth-child(4) {
border-right: none;
border-bottom: 1px solid var(--border);
}
.stat-item:last-child {
border-bottom: none;
}
.service-row {
grid-template-columns:
40px 1fr 30px;
gap: 15px;
}
.service-description {
display: none;
}
.service-row h3 {
font-size: 31px;
}
.work-image,
.work-card:nth-child(2) .work-image,
.work-card:nth-child(3) .work-image {
min-height: 360px;
}
.process-item {
grid-template-columns:
45px 1fr 25px;
gap: 15px;
}
.process-item p {
font-size: 12px;
}
.testimonial-content {
margin-top: 60px;
}
.testimonial-author {
flex-direction: column;
gap: 10px;
}
.cta-section h2 {
font-size: 62px;
}
.footer-links {
grid-template-columns:
1fr 1fr;
row-gap: 45px;
}
.footer-column:last-child {
grid-column: 1 / -1;
}
.footer-bottom {
flex-direction: column;
gap: 10px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================
HERO VIDEO + SPLIT HERO REFINEMENT
========================================================= */
.hero-background-video {
position: absolute;
top: 0;
left: 0;
width: 72%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.9;
filter:
grayscale(100%)
contrast(1.08)
brightness(0.72);
}
.hero-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 72%;
height: 100%;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(5, 5, 5, 0.18) 0%,
rgba(5, 5, 5, 0.12) 65%,
rgba(5, 5, 5, 0.58) 100%
);
}
.hero-premium-inner {
position: relative;
z-index: 5;
width: 28%;
max-width: none;
margin-left: auto;
margin-right: 0;
padding-left: 35px;
}
.hero-title {
font-size: clamp(
52px,
5.2vw,
92px
);
line-height: 0.86;
letter-spacing: -0.075em;
max-width: 100%;
}
.hero-title-line {
white-space: nowrap;
}
.hero-bottom {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 55px;
}
.hero-description {
max-width: 310px;
}
.hero-actions {
flex-wrap: wrap;
}
.hero-scroll-indicator {
display: none;
}
.hero-top-line {
z-index: 6;
}
.hero-corner {
z-index: 6;
}
/* Keep the video behind every hero layer */
.hero-grid,
.hero-noise {
z-index: 2;
pointer-events: none;
}
/* Desktop balance */
@media (min-width: 1101px) {
.hero-premium {
padding-left: 60px;
padding-right: 60px;
}
.hero-top-line {
left: 60px;
right: 60px;
}
}
/* Tablet */
@media (max-width: 1100px) {
.hero-background-video,
.hero-video-overlay {
width: 65%;
}
.hero-premium-inner {
width: 35%;
padding-left: 25px;
}
.hero-title {
font-size: clamp(
45px,
6vw,
75px
);
}
}
/* Mobile */
@media (max-width: 900px) {
.hero-background-video,
.hero-video-overlay {
width: 100%;
height: 100%;
}
.hero-video-overlay {
background:
linear-gradient(
180deg,
rgba(5, 5, 5, 0.42),
rgba(5, 5, 5, 0.9)
);
}
.hero-premium-inner {
width: 100%;
margin: 0;
padding-left: 0;
}
.hero-title {
font-size: clamp(
57px,
15vw,
95px
);
}
}
/* =========================================================
FINAL HERO BALANCE
========================================================= */
@media (min-width: 1101px) {
.hero-premium-inner {
width: 31%;
max-width: 500px;
padding-left: 28px;
padding-right: 10px;
}
.hero-title {
font-size: clamp(48px, 4.15vw, 76px);
line-height: 0.88;
letter-spacing: -0.065em;
overflow: visible;
}
.hero-title-line {
display: block;
white-space: nowrap;
}
.hero-bottom {
margin-top: 48px;
gap: 22px;
}
.hero-description {
max-width: 360px;
}
.hero-actions {
gap: 8px;
}
.hero-btn {
min-width: 155px;
padding: 14px 15px;
}
}
@media (min-width: 1500px) {
.hero-background-video,
.hero-video-overlay {
width: 70%;
}
.hero-premium-inner {
width: 30%;
max-width: 510px;
}
.hero-title {
font-size: clamp(52px, 4vw, 78px);
}
}
@media (max-width: 1100px) and (min-width: 901px) {
.hero-premium-inner {
width: 36%;
padding-left: 22px;
}
.hero-title {
font-size: clamp(42px, 5.2vw, 62px);
line-height: 0.9;
}
.hero-title-line {
white-space: normal;
}
}
@media (max-width: 900px) {
.hero-premium-inner {
width: 100%;
max-width: 700px;
padding: 0;
}
.hero-title {
font-size: clamp(57px, 15vw, 95px);
line-height: 0.84;
}
.hero-title-line {
white-space: normal;
}
.hero-background-video {
opacity: 0.55;
}
}
/* =========================================================
FINAL HERO
FULL VIDEO BACKGROUND + TEXT OVER VIDEO
========================================================= */
.hero-premium {
position: relative;
min-height: 100svh;
height: 100vh;
padding: 150px 60px 70px;
display: flex;
align-items: center;
overflow: hidden;
background: #050505;
}
.hero-background-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 1;
filter:
grayscale(100%)
contrast(1.08)
brightness(0.62);
}
.hero-video-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(5, 5, 5, 0.78) 0%,
rgba(5, 5, 5, 0.48) 38%,
rgba(5, 5, 5, 0.18) 72%,
rgba(5, 5, 5, 0.38) 100%
);
}
.hero-grid {
z-index: 2;
pointer-events: none;
}
.hero-noise {
z-index: 2;
pointer-events: none;
}
.hero-premium-inner {
position: relative;
z-index: 5;
width: min(1480px, 100%);
max-width: 1480px;
margin: 0 auto;
padding: 0;
}
.hero-eyebrow {
position: relative;
z-index: 2;
margin-bottom: 30px;
}
.hero-title {
position: relative;
z-index: 2;
max-width: 900px;
font-size: clamp(70px, 8.2vw, 150px);
line-height: 0.84;
letter-spacing: -0.075em;
text-shadow: 0 3px 30px rgba(0, 0, 0, 0.28);
}
.hero-title-line {
white-space: nowrap;
}
.hero-title-outline {
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.78);
text-shadow: none;
}
.hero-bottom {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 60px;
max-width: 820px;
margin-top: 48px;
}
.hero-description {
max-width: 470px;
}
.hero-description p {
color: rgba(255, 255, 255, 0.78);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-actions {
display: flex;
gap: 10px;
}
.hero-btn {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-btn-secondary {
background: rgba(5, 5, 5, 0.24);
}
.hero-scroll-indicator {
display: none;
}
.hero-top-line {
z-index: 6;
}
.hero-corner {
z-index: 6;
}
@media (max-width: 1100px) {
.hero-premium {
padding-left: 40px;
padding-right: 40px;
}
.hero-premium-inner {
width: 100%;
max-width: 100%;
margin: 0;
}
.hero-title {
max-width: 780px;
font-size: clamp(62px, 9vw, 120px);
}
.hero-bottom {
max-width: 760px;
grid-template-columns: 1fr;
gap: 28px;
}
.hero-scroll-indicator {
display: none;
}
}
@media (max-width: 700px) {
.hero-premium {
min-height: 100svh;
height: auto;
padding: 125px 20px 55px;
align-items: center;
}
.hero-background-video {
opacity: 1;
filter:
grayscale(100%)
contrast(1.05)
brightness(0.5);
}
.hero-video-overlay {
background:
linear-gradient(
180deg,
rgba(5, 5, 5, 0.52) 0%,
rgba(5, 5, 5, 0.38) 32%,
rgba(5, 5, 5, 0.72) 72%,
rgba(5, 5, 5, 0.94) 100%
);
}
.hero-top-line {
top: 86px;
left: 20px;
right: 20px;
}
.hero-top-line span:nth-child(2) {
display: none;
}
.hero-eyebrow {
margin-bottom: 22px;
font-size: 8px;
}
.hero-title {
max-width: 100%;
font-size: clamp(48px, 14.5vw, 82px);
line-height: 0.87;
}
.hero-title-line {
white-space: normal;
}
.hero-title-outline {
-webkit-text-stroke: 0.8px rgba(255, 255, 255, 0.75);
}
.hero-bottom {
grid-template-columns: 1fr;
gap: 26px;
max-width: 100%;
margin-top: 42px;
}
.hero-description {
max-width: 430px;
}
.hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.hero-btn {
min-width: 0;
width: 100%;
}
.hero-corner {
display: none;
}
}
@media (max-width: 430px) {
.hero-premium {
padding-left: 18px;
padding-right: 18px;
}
.hero-top-line {
left: 18px;
right: 18px;
}
.hero-title {
font-size: clamp(44px, 14.5vw, 68px);
}
.hero-actions {
grid-template-columns: 1fr;
}
}
/* =========================================================
FINAL HEADER REFINEMENT
========================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 82px;
padding: 0;
z-index: 1000;
display: flex;
align-items: center;
background: linear-gradient(
180deg,
rgba(5, 5, 5, 0.48) 0%,
rgba(5, 5, 5, 0.16) 100%
);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.site-header.scrolled {
height: 72px;
padding: 0;
background: rgba(5, 5, 5, 0.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.nav-container {
width: min(calc(100% - 80px), 1580px);
height: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 230px 1fr 230px;
align-items: center;
}
.brand-logo {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
width: fit-content;
}
.brand-main {
font-family: var(--display);
font-size: 23px;
font-weight: 700;
letter-spacing: -1.5px;
line-height: 0.95;
}
.brand-main span {
color: rgba(255, 255, 255, 0.55);
}
.brand-sub {
font-family: var(--mono);
font-size: 7px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.45);
line-height: 1;
}
.desktop-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 38px;
height: 100%;
}
.nav-link {
display: flex;
align-items: center;
height: 100%;
position: relative;
color: rgba(255, 255, 255, 0.68);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.8px;
transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: #ffffff;
}
.nav-link::after {
bottom: 22px;
height: 1px;
}
.nav-cta {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 190px;
height: 48px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(5, 5, 5, 0.16);
font-size: 9px;
letter-spacing: 1.2px;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.nav-cta:hover {
background: #ffffff;
color: #050505;
border-color: #ffffff;
}
.menu-toggle {
justify-self: end;
}
@media (max-width: 1100px) {
.nav-container {
width: calc(100% - 60px);
grid-template-columns: 190px 1fr 190px;
}
.desktop-nav {
gap: 24px;
}
.nav-cta {
width: 170px;
}
}
@media (max-width: 980px) {
.site-header,
.site-header.scrolled {
height: 72px;
}
.nav-container {
width: calc(100% - 40px);
display: flex;
justify-content: space-between;
}
.brand-main {
font-size: 21px;
}
.nav-cta {
display: none;
}
.menu-toggle {
display: block;
width: 42px;
height: 42px;
}
}
@media (max-width: 500px) {
.site-header,
.site-header.scrolled {
height: 68px;
}
.nav-container {
width: calc(100% - 32px);
}
.brand-main {
font-size: 19px;
}
.brand-sub {
font-size: 6px;
letter-spacing: 1.6px;
}
}
/* =========================================================
FINAL LOGO
TRANSPARENT + COMPACT
========================================================= */
.brand-logo {
display: flex;
align-items: center;
width: auto;
height: auto;
}
.brand-image {
display: block;
width: 138px;
height: auto;
max-height: 52px;
object-fit: contain;
object-position: left center;
}
.loader-logo {
display: block;
width: 155px;
height: auto;
max-height: 60px;
object-fit: contain;
}
.footer-logo-image {
display: block;
width: 150px;
height: auto;
max-height: 58px;
object-fit: contain;
}
@media (max-width: 700px) {
.brand-image {
width: 112px;
max-height: 44px;
}
.loader-logo {
width: 135px;
}
.footer-logo-image {
width: 125px;
}
}
/* =========================================================
FINAL SEAMLESS MARQUEE
========================================================= */
.marquee-section {
width: 100%;
overflow: hidden;
background: #f5f5f2;
}
.marquee-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: max-content;
white-space: nowrap;
animation: framessorMarquee 26s linear infinite;
will-change: transform;
}
.marquee-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
}
.marquee-item {
flex: 0 0 auto;
white-space: nowrap;
display: block;
}
.marquee-group > span {
flex: 0 0 auto;
display: inline-block;
margin: 0 34px;
}
@keyframes framessorMarquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (max-width: 700px) {
.marquee-track {
animation-duration: 20s;
}
.marquee-group > span {
margin: 0 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
transform: none;
}
}
/* =========================================================
PREMIUM ABOUT SECTION
========================================================= */
.about-premium-layout {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 90px;
align-items: start;
margin-top: 80px;
}
.about-premium-heading {
position: sticky;
top: 120px;
}
.about-kicker {
display: block;
margin-bottom: 30px;
font-family: "DM Mono", monospace;
font-size: 9px;
line-height: 1;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.42);
}
.about-premium-heading h2 {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(54px, 6.4vw, 112px);
line-height: 0.84;
letter-spacing: -0.07em;
font-weight: 600;
}
.about-premium-heading h2 em {
color: transparent;
font-style: normal;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.48);
}
.about-premium-visual {
min-width: 0;
}
.about-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #111;
}
.about-studio-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.04);
transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.about-image-wrap:hover .about-studio-image {
transform: scale(1.035);
}
.about-image-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.08) 45%,
rgba(0, 0, 0, 0.62) 100%
);
}
.about-image-label {
position: absolute;
left: 24px;
bottom: 22px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: 0.16em;
color: #fff;
}
.about-image-label span:last-child {
opacity: 0.55;
}
.about-image-number {
position: absolute;
top: 22px;
right: 24px;
z-index: 2;
font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.7);
}
.about-premium-copy {
max-width: 680px;
margin-top: 42px;
}
.about-premium-copy .intro-large {
margin-bottom: 28px;
}
.about-premium-copy p:not(.intro-large) {
max-width: 590px;
color: rgba(255, 255, 255, 0.52);
line-height: 1.8;
}
.about-premium-copy .text-link {
margin-top: 34px;
}
@media (max-width: 980px) {
.about-premium-layout {
grid-template-columns: 1fr;
gap: 55px;
margin-top: 60px;
}
.about-premium-heading {
position: static;
}
.about-premium-heading h2 {
font-size: clamp(58px, 11vw, 105px);
}
.about-premium-visual {
width: 100%;
}
}
@media (max-width: 700px) {
.about-premium-layout {
gap: 42px;
margin-top: 48px;
}
.about-kicker {
margin-bottom: 22px;
font-size: 8px;
}
.about-premium-heading h2 {
font-size: clamp(48px, 14vw, 76px);
line-height: 0.88;
}
.about-image-wrap {
aspect-ratio: 4 / 3;
}
.about-image-label {
left: 16px;
bottom: 16px;
font-size: 7px;
}
.about-image-number {
top: 16px;
right: 16px;
}
.about-premium-copy {
margin-top: 30px;
}
}
/* =========================================================
SELECTED WORK
EDITORIAL CASE STUDY LIST
========================================================= */
.work-section {
padding: 145px 0 160px;
background: #050505;
overflow: hidden;
}
.work-section-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: start;
padding-bottom: 32px;
border-bottom: 1px solid var(--border);
}
.work-head-copy {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 35px;
}
.work-head-copy p {
max-width: 300px;
margin: 0;
color: rgba(255, 255, 255, 0.58);
font-size: 13px;
line-height: 1.7;
}
.work-head-copy .text-link {
flex-shrink: 0;
}
.case-study-list {
margin-top: 0;
}
.case-study-card {
border-bottom: 1px solid var(--border);
}
.case-study-card > a {
display: block;
color: inherit;
}
.case-study-number {
padding-top: 28px;
color: rgba(255, 255, 255, 0.38);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.case-study-main {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 70px;
align-items: center;
padding: 38px 0 55px;
}
.case-study-copy {
max-width: 510px;
}
.case-study-category {
display: block;
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.42);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.case-study-copy h3 {
margin: 0;
color: #f4f4f2;
font-family: var(--display);
font-size: clamp(45px, 5.2vw, 82px);
line-height: 0.9;
letter-spacing: -0.065em;
font-weight: 500;
transition: transform 0.55s var(--ease);
}
.case-study-copy p {
max-width: 390px;
margin: 28px 0 30px;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
line-height: 1.75;
}
.case-study-link {
display: inline-flex;
align-items: center;
gap: 18px;
color: #f4f4f2;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.8px;
}
.case-study-link span {
font-size: 17px;
transition: transform 0.35s ease;
}
.case-study-visual {
position: relative;
min-height: 420px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #101010;
isolation: isolate;
}
.case-study-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.9;
transition: transform 0.8s var(--ease);
}
.visual-one::before {
background:
radial-gradient(circle at 25% 30%, #3a3a3a 0, transparent 35%),
radial-gradient(circle at 75% 70%, #191919 0, transparent 42%),
linear-gradient(135deg, #202020, #050505);
}
.visual-two::before {
background:
radial-gradient(circle at 70% 25%, #303030 0, transparent 34%),
linear-gradient(145deg, #171717, #050505 70%);
}
.visual-three::before {
background:
radial-gradient(circle at 35% 65%, #353535 0, transparent 32%),
linear-gradient(120deg, #222222, #050505);
}
.case-study-visual::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.08),
transparent 32%,
transparent 68%,
rgba(255,255,255,0.025)
);
pointer-events: none;
}
.case-study-visual span {
position: relative;
z-index: 2;
color: rgba(255,255,255,0.92);
font-family: var(--display);
font-size: clamp(55px, 8vw, 125px);
font-weight: 600;
letter-spacing: -0.08em;
transition:
transform 0.7s var(--ease),
opacity 0.5s ease;
}
.case-study-card:hover .case-study-visual::before {
transform: scale(1.08);
}
.case-study-card:hover .case-study-visual span {
transform: scale(1.035);
opacity: 0.82;
}
.case-study-card:hover .case-study-copy h3 {
transform: translateX(8px);
}
.case-study-card:hover .case-study-link span {
transform: translate(5px, -5px);
}
@media (max-width: 980px) {
.work-section-head {
grid-template-columns: 1fr;
gap: 30px;
}
.work-head-copy {
max-width: 650px;
}
.case-study-main {
grid-template-columns: 1fr;
gap: 40px;
}
.case-study-visual {
min-height: 420px;
}
}
@media (max-width: 700px) {
.work-section {
padding: 100px 0 110px;
}
.work-head-copy {
flex-direction: column;
gap: 25px;
}
.case-study-number {
padding-top: 22px;
}
.case-study-main {
padding: 30px 0 42px;
gap: 30px;
}
.case-study-copy h3 {
font-size: clamp(42px, 12vw, 65px);
}
.case-study-copy p {
margin: 22px 0 25px;
}
.case-study-visual {
min-height: 260px;
}
.case-study-visual span {
font-size: clamp(55px, 16vw, 90px);
}
}
@media (prefers-reduced-motion: reduce) {
.case-study-visual::before,
.case-study-copy h3,
.case-study-link span {
transition: none;
}
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testimonial-section {
position: relative;
padding: 145px 0 155px;
background: #050505;
overflow: hidden;
}
.testimonial-section::before,
.follow-section::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: var(--border);
}
.testimonial-top,
.follow-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30px;
border-bottom: 1px solid var(--border);
}
.testimonial-top-label,
.follow-small {
color: rgba(255,255,255,0.38);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.testimonial-intro {
padding: 65px 0 75px;
}
.testimonial-eyebrow,
.follow-eyebrow {
color: rgba(255,255,255,0.38);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.testimonial-intro h2,
.follow-heading h2 {
margin: 20px 0 0;
color: #f5f5f3;
font-family: var(--display);
font-size: clamp(70px, 10vw, 155px);
line-height: 0.78;
letter-spacing: -0.08em;
font-weight: 500;
}
.testimonial-intro h2 span,
.follow-heading h2 > span {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.68);
}
.testimonial-list {
border-top: 1px solid var(--border);
}
.testimonial-card {
display: grid;
grid-template-columns: 70px 1fr 220px;
gap: 45px;
padding: 48px 0;
border-bottom: 1px solid var(--border);
transition: padding 0.4s ease;
}
.testimonial-card:hover {
padding-left: 12px;
padding-right: 12px;
}
.testimonial-card-number {
color: rgba(255,255,255,0.32);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.testimonial-quote {
max-width: 850px;
}
.quote-mark {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,0.25);
font-family: Georgia, serif;
font-size: 55px;
line-height: 0.5;
}
.testimonial-quote blockquote {
margin: 0;
color: rgba(255,255,255,0.9);
font-family: var(--display);
font-size: clamp(28px, 3.2vw, 48px);
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 400;
}
.testimonial-author {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
}
.testimonial-author div {
display: flex;
flex-direction: column;
gap: 8px;
}
.testimonial-author strong {
color: #f5f5f3;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
font-weight: 400;
}
.testimonial-author span:not(.testimonial-arrow) {
color: rgba(255,255,255,0.35);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.2px;
}
.testimonial-arrow {
color: rgba(255,255,255,0.55);
font-size: 18px;
transition: transform 0.3s ease;
}
.testimonial-card:hover .testimonial-arrow {
transform: translate(5px, -5px);
}
/* =========================================================
FOLLOW / SUBSCRIBE
========================================================= */
.follow-section {
position: relative;
padding: 145px 0 150px;
background: #050505;
overflow: hidden;
}
.follow-main {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 90px;
padding-top: 65px;
}
.follow-heading h2 > span {
display: block;
}
.follow-content {
padding-top: 12px;
}
.follow-content > p {
max-width: 430px;
margin: 0 0 42px;
color: rgba(255,255,255,0.62);
font-size: 14px;
line-height: 1.75;
}
.social-links {
border-top: 1px solid var(--border);
}
.social-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--border);
color: #f5f5f3;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.8px;
transition: padding 0.35s ease;
}
.social-link:hover {
padding-left: 10px;
}
.social-link span:last-child {
font-size: 15px;
transition: transform 0.35s ease;
}
.social-link:hover span:last-child {
transform: translate(4px, -4px);
}
.subscribe-box {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 35px;
align-items: end;
margin-top: 55px;
padding-top: 28px;
border-top: 1px solid var(--border);
}
.subscribe-label {
display: block;
margin-bottom: 12px;
color: rgba(255,255,255,0.4);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.7px;
}
.subscribe-box p {
margin: 0;
color: rgba(255,255,255,0.48);
font-size: 11px;
line-height: 1.6;
}
.subscribe-form {
display: flex;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.subscribe-form input {
width: 100%;
min-width: 0;
padding: 15px 0;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.4px;
}
.subscribe-form input::placeholder {
color: rgba(255,255,255,0.35);
}
.subscribe-form button {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 15px;
border: 0;
background: transparent;
color: #fff;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.5px;
cursor: pointer;
}
.subscribe-form button span {
font-size: 16px;
transition: transform 0.3s ease;
}
.subscribe-form button:hover span {
transform: translate(4px, -4px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 980px) {
.testimonial-card {
grid-template-columns: 50px 1fr;
gap: 25px;
}
.testimonial-author {
grid-column: 2;
}
.testimonial-intro h2,
.follow-heading h2 {
font-size: clamp(70px, 14vw, 120px);
}
.follow-main {
grid-template-columns: 1fr;
gap: 60px;
}
.subscribe-box {
max-width: 700px;
}
}
@media (max-width: 700px) {
.testimonial-section,
.follow-section {
padding: 100px 0 110px;
}
.testimonial-top-label,
.follow-small {
display: none;
}
.testimonial-intro {
padding: 50px 0 55px;
}
.testimonial-intro h2,
.follow-heading h2 {
font-size: clamp(58px, 17vw, 92px);
}
.testimonial-card {
grid-template-columns: 35px 1fr;
gap: 18px;
padding: 35px 0;
}
.testimonial-quote blockquote {
font-size: clamp(25px, 7vw, 38px);
}
.testimonial-author {
grid-column: 2;
margin-top: 8px;
}
.follow-main {
padding-top: 50px;
gap: 50px;
}
.follow-content > p {
font-size: 13px;
margin-bottom: 30px;
}
.subscribe-box {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
}
@media (max-width: 430px) {
.testimonial-card {
grid-template-columns: 1fr;
}
.testimonial-author {
grid-column: 1;
}
.subscribe-form {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
border-bottom: 0;
}
.subscribe-form input {
border-bottom: 1px solid rgba(255,255,255,0.45);
}
.subscribe-form button {
justify-content: space-between;
padding: 13px 0;
border-bottom: 1px solid rgba(255,255,255,0.45);
}
}
/* =========================================================
CLIENT TESTIMONIALS
========================================================= */
.client-testimonials {
position: relative;
padding: 145px 0 155px;
background: #050505;
overflow: hidden;
}
.client-testimonials::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--border);
}
.client-testimonials-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30px;
border-bottom: 1px solid var(--border);
}
.client-testimonials-label {
color: rgba(255,255,255,0.36);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.client-testimonials-title {
padding: 65px 0 70px;
}
.client-testimonials-title > span {
color: rgba(255,255,255,0.38);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 2px;
}
.client-testimonials-title h2 {
margin: 20px 0 0;
color: #f5f5f3;
font-family: var(--display);
font-size: clamp(70px, 9vw, 145px);
line-height: 0.78;
letter-spacing: -0.08em;
font-weight: 500;
}
.client-testimonials-title h2 em {
display: block;
color: transparent;
font-style: normal;
-webkit-text-stroke: 1px rgba(255,255,255,0.68);
}
.client-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.client-testimonial-card {
min-height: 510px;
padding: 30px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition:
background 0.4s ease,
transform 0.4s ease;
}
.client-testimonial-card:hover {
background: #0c0c0c;
transform: translateY(-5px);
}
.client-testimonial-card.featured {
background: #0b0b0b;
}
.client-testimonial-top {
display: flex;
justify-content: space-between;
color: rgba(255,255,255,0.35);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
}
.client-testimonial-quote {
margin-top: 55px;
color: rgba(255,255,255,0.22);
font-family: Georgia, serif;
font-size: 72px;
line-height: 0.5;
}
.client-testimonial-card blockquote {
margin: 22px 0 45px;
color: rgba(255,255,255,0.88);
font-family: var(--display);
font-size: clamp(22px, 2vw, 31px);
line-height: 1.15;
letter-spacing: -0.035em;
font-weight: 400;
}
.client-testimonial-author {
margin-top: auto;
display: flex;
align-items: center;
gap: 14px;
padding-top: 25px;
border-top: 1px solid var(--border);
}
.client-testimonial-avatar {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,0.28);
color: #fff;
font-family: var(--mono);
font-size: 11px;
}
.client-testimonial-author div:last-child {
display: flex;
flex-direction: column;
gap: 6px;
}
.client-testimonial-author strong {
color: #f5f5f3;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 1.5px;
font-weight: 400;
}
.client-testimonial-author span {
color: rgba(255,255,255,0.35);
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1px;
}
@media (max-width: 980px) {
.client-testimonials-grid {
grid-template-columns: 1fr;
}
.client-testimonial-card {
min-height: 390px;
}
.client-testimonials-title h2 {
font-size: clamp(65px, 13vw, 115px);
}
}
@media (max-width: 700px) {
.client-testimonials {
padding: 100px 0 110px;
}
.client-testimonials-label {
display: none;
}
.client-testimonials-title {
padding: 50px 0 55px;
}
.client-testimonials-title h2 {
font-size: clamp(55px, 16vw, 88px);
}
.client-testimonial-card {
min-height: 360px;
padding: 25px;
}
.client-testimonial-quote {
margin-top: 40px;
}
.client-testimonial-card blockquote {
font-size: 24px;
}
}
/* =========================================
WHY CHOOSE US
========================================= */
.why-section {
padding: 150px 0 165px;
background: #050505;
border-top: 1px solid rgba(255,255,255,.10);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.why-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 60px;
margin-bottom: 105px;
}
.why-intro {
max-width: 390px;
margin: 0;
color: rgba(255,255,255,.58);
font-size: 14px;
line-height: 1.8;
}
.why-layout {
display: grid;
grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
gap: 90px;
align-items: start;
}
.why-title > span {
display: block;
margin-bottom: 28px;
color: rgba(255,255,255,.42);
font-size: 9px;
font-weight: 600;
letter-spacing: 2.5px;
}
.why-title h2 {
margin: 0;
font-size: clamp(58px, 7vw, 112px);
line-height: .88;
letter-spacing: -.065em;
font-weight: 500;
}
.why-title h2 em {
display: block;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.72);
font-style: normal;
}
.why-list {
border-top: 1px solid rgba(255,255,255,.18);
}
.why-item {
display: grid;
grid-template-columns: 55px minmax(0, 1fr) 28px;
gap: 24px;
align-items: start;
padding: 31px 0;
border-bottom: 1px solid rgba(255,255,255,.14);
transition: padding .45s ease, background .45s ease, border-color .45s ease;
}
.why-item:hover {
padding-left: 16px;
padding-right: 12px;
background: rgba(255,255,255,.025);
border-color: rgba(255,255,255,.28);
}
.why-number {
padding-top: 4px;
color: rgba(255,255,255,.38);
font-size: 10px;
letter-spacing: 1.5px;
}
.why-item h3 {
margin: 0 0 10px;
font-size: 18px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -.01em;
}
.why-item p {
max-width: 520px;
margin: 0;
color: rgba(255,255,255,.52);
font-size: 13px;
line-height: 1.75;
}
.why-arrow {
padding-top: 1px;
color: rgba(255,255,255,.55);
font-size: 19px;
transition: transform .45s ease, color .45s ease;
}
.why-item:hover .why-arrow {
color: #fff;
transform: translate(4px,-4px);
}
@media (max-width: 900px) {
.why-header {
margin-bottom: 70px;
}
.why-layout {
grid-template-columns: 1fr;
gap: 65px;
}
}
@media (max-width: 700px) {
.why-section {
padding: 100px 0 110px;
}
.why-header {
display: block;
margin-bottom: 60px;
}
.why-intro {
margin-top: 28px;
max-width: 330px;
}
.why-title h2 {
font-size: clamp(55px, 17vw, 82px);
}
.why-item {
grid-template-columns: 35px minmax(0,1fr) 22px;
gap: 12px;
padding: 25px 0;
}
.why-item:hover {
padding-left: 7px;
padding-right: 5px;
}
.why-item h3 {
font-size: 15px;
}
.why-item p {
font-size: 12px;
line-height: 1.65;
}
}
/* =========================================
CLIENT PROJECT VIDEO THUMBNAILS
========================================= */
.project-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
display: block;
transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
filter: saturate(.88) contrast(1.05);
}
.project-thumb::before {
z-index: 2;
background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 55%, rgba(0,0,0,.28));
pointer-events: none;
}
.project-thumb > span {
position: relative;
z-index: 3;
}
.case-study-card:hover .project-thumb img {
transform: scale(1.045);
filter: saturate(1) contrast(1.08);
}
.project-thumb {
position: relative;
isolation: isolate;
cursor: pointer;
}
.project-thumb::before {
opacity: 1;
}
.builders-thumb::before {
background:
radial-gradient(circle at 22% 25%, rgba(255,255,255,.22), transparent 28%),
linear-gradient(135deg, #2b2b2b 0%, #111 48%, #050505 100%);
}
.yt-thumb::before {
background:
radial-gradient(circle at 72% 28%, rgba(255,255,255,.18), transparent 26%),
linear-gradient(145deg, #242424 0%, #0d0d0d 55%, #050505 100%);
}
.silfira-thumb::before {
background:
radial-gradient(circle at 35% 68%, rgba(255,255,255,.20), transparent 30%),
linear-gradient(120deg, #303030 0%, #111 52%, #050505 100%);
}
.tc-thumb::before {
background:
radial-gradient(circle at 75% 70%, rgba(255,255,255,.20), transparent 30%),
linear-gradient(135deg, #202020 0%, #080808 58%, #050505 100%);
}
.project-play {
position: absolute;
right: 24px;
bottom: 22px;
z-index: 3;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,.35);
background: rgba(0,0,0,.38);
color: #fff;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 1.8px;
backdrop-filter: blur(8px);
transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.case-study-card:hover .project-play {
transform: translate(3px,-3px);
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.65);
}
@media (max-width: 700px) {
.project-play {
right: 16px;
bottom: 16px;
padding: 9px 11px;
font-size: 7px;
}
}
/* =========================================
FRAMEssOR ABOUT PAGE
========================================= */
.about-page-hero{
min-height:78vh;
padding:170px 60px 90px;
position:relative;
display:flex;
align-items:flex-end;
overflow:hidden;
background:#050505;
border-bottom:1px solid rgba(255,255,255,.12);
}
.about-page-hero .hero-grid{
position:absolute;
inset:0;
pointer-events:none;
opacity:.35;
}
.about-page-inner{position:relative;z-index:2;width:100%}
.about-page-kicker,.about-page-label,.belief-label{
display:block;
font-family:"DM Mono",monospace;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(255,255,255,.55);
margin-bottom:28px;
}
.about-page-title{
margin:0;
max-width:1200px;
font-size:clamp(70px,10vw,170px);
line-height:.82;
letter-spacing:-.07em;
text-transform:uppercase;
}
.about-page-title em{
font-style:normal;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.7);
}
.about-page-hero-bottom{
margin-top:55px;
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
}
.about-page-hero-bottom p{
max-width:520px;
margin:0;
color:rgba(255,255,255,.68);
font-size:16px;
line-height:1.75;
}
.about-page-index{
font-family:"DM Mono",monospace;
font-size:10px;
letter-spacing:2px;
color:rgba(255,255,255,.45);
}
.about-story-section,
.about-philosophy-section,
.about-approach-section,
.about-beliefs-section,
.about-team-section,
.about-cta-section{
padding:140px 0;
border-bottom:1px solid rgba(0,0,0,.12);
}
.about-story-section{background:#f4f4f0}
.about-philosophy-section{background:#050505;color:#fff}
.about-approach-section{background:#f4f4f0}
.about-beliefs-section{background:#050505;color:#fff}
.about-team-section{background:#f4f4f0}
.about-two-col{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:90px;
}
.about-section-heading{
margin:0;
font-size:clamp(48px,6vw,92px);
line-height:.9;
letter-spacing:-.055em;
text-transform:uppercase;
}
.about-section-heading em{
font-style:normal;
color:transparent;
-webkit-text-stroke:1px currentColor;
}
.about-copy p{
margin:0 0 25px;
font-size:17px;
line-height:1.8;
max-width:720px;
color:rgba(0,0,0,.66);
}
.about-philosophy-section .about-copy p,
.about-beliefs-section .about-copy p{
color:rgba(255,255,255,.65);
}
.about-large-copy{
font-size:clamp(28px,3vw,48px)!important;
line-height:1.15!important;
letter-spacing:-.025em;
color:#080808!important;
}
.about-philosophy-section .about-large-copy,
.about-beliefs-section .about-large-copy{color:#fff!important}
.about-image-panel{
margin-top:90px;
height:600px;
overflow:hidden;
position:relative;
background:#111;
}
.about-image-panel img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:grayscale(100%);
}
.about-image-panel:after{
content:"FRAMEssOR / CREATIVE DIGITAL STUDIO";
position:absolute;
left:25px;
bottom:22px;
font-family:"DM Mono",monospace;
font-size:9px;
letter-spacing:2px;
color:#fff;
}
.about-approach-grid{
margin-top:80px;
border-top:1px solid rgba(0,0,0,.18);
}
.about-approach-item{
display:grid;
grid-template-columns:80px 1fr 1.2fr 30px;
gap:25px;
align-items:start;
padding:34px 0;
border-bottom:1px solid rgba(0,0,0,.18);
transition:padding-left .4s ease,background .4s ease;
}
.about-approach-item:hover{
padding-left:14px;
background:rgba(0,0,0,.025);
}
.about-approach-number,
.about-approach-arrow{
font-family:"DM Mono",monospace;
font-size:10px;
}
.about-approach-item h3{
margin:0;
font-size:clamp(25px,3vw,42px);
letter-spacing:-.04em;
text-transform:uppercase;
}
.about-approach-item p{
margin:0;
max-width:500px;
color:rgba(0,0,0,.58);
line-height:1.7;
}
.about-services-grid{
margin-top:75px;
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid rgba(0,0,0,.18);
border-left:1px solid rgba(0,0,0,.18);
}
.about-service-box{
min-height:210px;
padding:30px;
border-right:1px solid rgba(0,0,0,.18);
border-bottom:1px solid rgba(0,0,0,.18);
transition:background .35s ease,color .35s ease;
}
.about-service-box:hover{background:#050505;color:#fff}
.about-service-box span{
font-family:"DM Mono",monospace;
font-size:9px;
letter-spacing:2px;
opacity:.5;
}
.about-service-box h3{
margin:55px 0 0;
font-size:25px;
letter-spacing:-.03em;
text-transform:uppercase;
}
.about-beliefs-list{
margin-top:80px;
border-top:1px solid rgba(255,255,255,.16);
}
.about-belief{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:28px 0;
border-bottom:1px solid rgba(255,255,255,.16);
}
.about-belief strong{
font-size:clamp(30px,4vw,62px);
line-height:1;
letter-spacing:-.05em;
text-transform:uppercase;
}
.about-belief span{
font-family:"DM Mono",monospace;
font-size:9px;
letter-spacing:2px;
color:rgba(255,255,255,.45);
}
.about-stats{
padding:90px 0;
background:#111;
color:#fff;
}
.about-stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.about-stat{
padding:25px 0;
border-top:1px solid rgba(255,255,255,.2);
}
.about-stat-number{
font-size:clamp(54px,6vw,90px);
line-height:.9;
letter-spacing:-.06em;
}
.about-stat-label{
display:block;
margin-top:18px;
font-family:"DM Mono",monospace;
font-size:9px;
letter-spacing:1.7px;
color:rgba(255,255,255,.5);
}
.about-cta-section{
background:#050505;
color:#fff;
text-align:center;
border-bottom:0;
}
.about-cta-section .section-meta{justify-content:center}
.about-cta-title{
margin:60px auto;
max-width:1100px;
font-size:clamp(55px,8vw,125px);
line-height:.85;
letter-spacing:-.065em;
text-transform:uppercase;
}
.about-cta-title span{
display:block;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.7);
}
@media(max-width:900px){
.about-page-hero{padding:145px 30px 65px;min-height:72vh}
.about-two-col{grid-template-columns:1fr;gap:55px}
.about-services-grid{grid-template-columns:repeat(2,1fr)}
.about-approach-item{grid-template-columns:55px 1fr 25px}
.about-approach-item p{grid-column:2/4;margin-top:10px}
.about-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.about-page-hero{padding:130px 20px 50px}
.about-page-title{font-size:clamp(58px,17vw,100px)}
.about-page-hero-bottom{display:block;margin-top:35px}
.about-page-index{margin-top:25px}
.about-story-section,
.about-philosophy-section,
.about-approach-section,
.about-beliefs-section,
.about-team-section,
.about-cta-section{padding:90px 0}
.about-image-panel{height:380px;margin-top:55px}
.about-services-grid{grid-template-columns:1fr}
.about-service-box{min-height:170px}
.about-stats{padding:60px 0}
.about-stats-grid{grid-template-columns:1fr 1fr;gap:10px}
.about-belief{display:block}
.about-belief span{display:block;margin-top:12px}
}
/* =========================================================
FRAMEssOR SERVICES PAGE
PREMIUM SERVICES STYLES
========================================================= */
/* =========================================================
SERVICES HERO
========================================================= */
.services-page-hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: center;
overflow: hidden;
background: #080808;
color: #f5f5f0;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.services-hero-grid {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.12;
background-image:
linear-gradient(
rgba(255,255,255,0.15) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,0.15) 1px,
transparent 1px
);
background-size: 90px 90px;
}
.services-hero-noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.035;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
}
.services-page-hero .container {
position: relative;
z-index: 2;
width: min(1400px, 92%);
margin: auto;
}
.services-hero-top {
position: absolute;
top: 45px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 4%;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.services-hero-content {
padding-top: 100px;
}
.services-page-hero .section-index {
margin-bottom: 40px;
font-size: 10px;
letter-spacing: 3px;
color: rgba(255,255,255,0.5);
}
.services-page-hero h1 {
max-width: 1250px;
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(58px, 9vw, 145px);
line-height: 0.9;
font-weight: 700;
letter-spacing: -0.075em;
text-transform: uppercase;
}
.services-page-hero h1 span {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.8);
}
.services-hero-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 60px;
margin-top: 70px;
padding-bottom: 40px;
}
.services-hero-bottom p {
max-width: 470px;
margin: 0;
font-size: 16px;
line-height: 1.8;
color: rgba(255,255,255,0.62);
}
/* =========================================================
PREMIUM BUTTON
========================================================= */
.premium-button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-width: 220px;
padding: 18px 22px;
color: #090909;
background: #f5f5f0;
border: 1px solid #f5f5f0;
text-decoration: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
transition:
background 0.35s ease,
color 0.35s ease,
transform 0.35s ease;
}
.premium-button:hover {
background: transparent;
color: #f5f5f0;
transform: translateY(-4px);
}
.premium-button-large {
min-width: 280px;
padding: 21px 24px;
}
/* =========================================================
SERVICES INTRO
========================================================= */
.services-intro {
padding: 150px 0;
background: #f4f4ef;
color: #0a0a0a;
}
.services-intro .container {
width: min(1400px, 92%);
margin: auto;
}
.services-intro-grid {
display: grid;
grid-template-columns: 25% 75%;
gap: 50px;
}
.services-intro .section-index {
padding-top: 15px;
font-size: 10px;
letter-spacing: 3px;
color: rgba(0,0,0,0.45);
}
.services-intro-content {
max-width: 950px;
}
.services-intro-content h2 {
margin: 0 0 45px;
font-family: "Manrope", sans-serif;
font-size: clamp(42px, 6vw, 90px);
line-height: 0.95;
letter-spacing: -0.065em;
text-transform: uppercase;
}
.services-intro-content h2 span {
color: transparent;
-webkit-text-stroke: 1px #111;
}
.services-intro-content p {
max-width: 720px;
margin: 0 0 22px;
font-size: 17px;
line-height: 1.8;
color: #555;
}
/* =========================================================
SERVICES LIST
========================================================= */
.services-list-section {
padding: 150px 0;
background: #0a0a0a;
color: #f5f5f0;
}
.services-list-section .container {
width: min(1400px, 92%);
margin: auto;
}
.services-section-heading {
display: grid;
grid-template-columns: 25% 75%;
gap: 50px;
margin-bottom: 90px;
}
.services-section-heading .section-index {
padding-top: 15px;
font-size: 10px;
letter-spacing: 3px;
color: rgba(255,255,255,0.45);
}
.services-section-heading h2 {
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(48px, 7vw, 105px);
line-height: 0.9;
letter-spacing: -0.07em;
text-transform: uppercase;
}
.services-section-heading h2 span {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.8);
}
/* =========================================================
SERVICE CARD
========================================================= */
.services-list {
border-top: 1px solid rgba(255,255,255,0.2);
}
.service-detail-card {
display: grid;
grid-template-columns: 110px 1fr;
gap: 45px;
padding: 55px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
transition:
padding 0.4s ease,
background 0.4s ease;
}
.service-detail-card:hover {
padding-left: 20px;
padding-right: 20px;
background: rgba(255,255,255,0.025);
}
.service-number {
font-size: 11px;
letter-spacing: 2px;
color: rgba(255,255,255,0.4);
}
.service-main {
width: 100%;
}
.service-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.service-title-row h3 {
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(32px, 5vw, 70px);
line-height: 1;
letter-spacing: -0.055em;
font-weight: 600;
}
.service-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%;
font-size: 20px;
transition:
transform 0.4s ease,
background 0.4s ease,
color 0.4s ease;
}
.service-detail-card:hover .service-arrow {
transform: rotate(45deg);
background: #f5f5f0;
color: #090909;
}
.service-main > p {
max-width: 650px;
margin: 28px 0 35px;
font-size: 16px;
line-height: 1.8;
color: rgba(255,255,255,0.58);
}
.service-deliverables {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.service-deliverables span {
padding: 9px 13px;
border: 1px solid rgba(255,255,255,0.16);
font-size: 8px;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.55);
}
/* =========================================================
APPROACH
========================================================= */
.services-approach {
padding: 150px 0;
background: #f4f4ef;
color: #090909;
}
.services-approach .container {
width: min(1400px, 92%);
margin: auto;
}
.services-approach-heading {
display: grid;
grid-template-columns: 25% 75%;
gap: 50px;
margin-bottom: 100px;
}
.services-approach-heading .section-index {
padding-top: 15px;
font-size: 10px;
letter-spacing: 3px;
color: rgba(0,0,0,0.45);
}
.services-approach-heading h2 {
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(48px, 7vw, 105px);
line-height: 0.9;
letter-spacing: -0.07em;
}
.services-approach-heading h2 span {
color: transparent;
-webkit-text-stroke: 1px #111;
}
.approach-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid rgba(0,0,0,0.2);
border-left: 1px solid rgba(0,0,0,0.2);
}
.approach-item {
min-height: 300px;
padding: 28px;
border-right: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
transition:
background 0.3s ease,
color 0.3s ease;
}
.approach-item:hover {
background: #0a0a0a;
color: #f5f5f0;
}
.approach-item > span {
display: block;
margin-bottom: 90px;
font-size: 10px;
letter-spacing: 2px;
opacity: 0.5;
}
.approach-item h3 {
margin: 0 0 18px;
font-family: "Manrope", sans-serif;
font-size: 22px;
letter-spacing: -0.03em;
}
.approach-item p {
margin: 0;
font-size: 13px;
line-height: 1.7;
opacity: 0.6;
}
/* =========================================================
WHY FRAMEssOR
========================================================= */
.services-why {
padding: 150px 0;
background: #0a0a0a;
color: #f5f5f0;
}
.services-why .container {
width: min(1400px, 92%);
margin: auto;
}
.services-why-grid {
display: grid;
grid-template-columns: 25% 75%;
gap: 50px;
}
.services-why .section-index {
padding-top: 15px;
font-size: 10px;
letter-spacing: 3px;
color: rgba(255,255,255,0.45);
}
.services-why-content h2 {
margin: 0 0 35px;
font-family: "Manrope", sans-serif;
font-size: clamp(48px, 7vw, 105px);
line-height: 0.9;
letter-spacing: -0.07em;
text-transform: uppercase;
}
.services-why-content h2 span {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.8);
}
.services-why-content > p {
max-width: 600px;
margin: 0 0 70px;
font-size: 17px;
line-height: 1.8;
color: rgba(255,255,255,0.58);
}
.why-points {
border-top: 1px solid rgba(255,255,255,0.2);
}
.why-point {
display: flex;
align-items: center;
gap: 30px;
padding: 27px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.why-point span {
width: 35px;
font-size: 10px;
letter-spacing: 2px;
opacity: 0.45;
}
.why-point strong {
font-family: "Manrope", sans-serif;
font-size: clamp(18px, 2.5vw, 30px);
font-weight: 500;
letter-spacing: -0.03em;
}
/* =========================================================
FINAL CTA
========================================================= */
.services-final-cta {
position: relative;
padding: 160px 0;
overflow: hidden;
background: #f4f4ef;
color: #090909;
}
.services-final-cta .container {
position: relative;
z-index: 2;
width: min(1400px, 92%);
margin: auto;
}
.cta-noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.025;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");
}
.cta-top {
display: flex;
justify-content: space-between;
padding-bottom: 30px;
border-bottom: 1px solid rgba(0,0,0,0.2);
font-size: 10px;
letter-spacing: 2.5px;
color: rgba(0,0,0,0.5);
}
.cta-content {
padding-top: 80px;
}
.cta-content h2 {
max-width: 1100px;
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(60px, 10vw, 155px);
line-height: 0.85;
letter-spacing: -0.08em;
text-transform: uppercase;
}
.cta-content h2 span {
color: transparent;
-webkit-text-stroke: 1px #111;
}
.cta-content p {
max-width: 550px;
margin: 55px 0 40px;
font-size: 16px;
line-height: 1.8;
color: #555;
}
.services-final-cta .premium-button {
background: #090909;
color: #f5f5f0;
border-color: #090909;
}
.services-final-cta .premium-button:hover {
background: transparent;
color: #090909;
}
/* =========================================================
SERVICES RESPONSIVE
========================================================= */
@media (max-width: 1000px) {
.services-intro-grid,
.services-section-heading,
.services-approach-heading,
.services-why-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.approach-grid {
grid-template-columns: repeat(2, 1fr);
}
.approach-item {
min-height: 260px;
}
}
@media (max-width: 700px) {
.services-page-hero {
min-height: 850px;
}
.services-hero-top {
top: 30px;
padding: 0;
font-size: 8px;
}
.services-hero-top span:last-child {
display: none;
}
.services-hero-content {
padding-top: 100px;
}
.services-page-hero h1 {
font-size: clamp(52px, 16vw, 90px);
}
.services-hero-bottom {
display: block;
margin-top: 55px;
}
.services-hero-bottom p {
font-size: 14px;
margin-bottom: 35px;
}
.services-intro,
.services-list-section,
.services-approach,
.services-why,
.services-final-cta {
padding: 100px 0;
}
.services-intro-content h2,
.services-section-heading h2,
.services-approach-heading h2,
.services-why-content h2 {
font-size: clamp(45px, 13vw, 70px);
}
.service-detail-card {
grid-template-columns: 1fr;
gap: 20px;
padding: 40px 0;
}
.service-detail-card:hover {
padding-left: 0;
padding-right: 0;
}
.service-number {
font-size: 9px;
}
.service-title-row h3 {
font-size: clamp(30px, 9vw, 52px);
}
.service-arrow {
width: 42px;
height: 42px;
font-size: 16px;
}
.service-main > p {
font-size: 14px;
}
.service-deliverables {
gap: 7px;
}
.service-deliverables span {
font-size: 7px;
padding: 8px 10px;
}
.approach-grid {
grid-template-columns: 1fr;
}
.approach-item {
min-height: auto;
padding: 25px;
}
.approach-item > span {
margin-bottom: 55px;
}
.cta-top span:last-child {
display: none;
}
.cta-content {
padding-top: 55px;
}
.cta-content h2 {
font-size: clamp(52px, 15vw, 85px);
}
.cta-content p {
margin: 40px 0 30px;
font-size: 14px;
}
.premium-button {
width: 100%;
min-width: 0;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.service-detail-card,
.service-arrow,
.premium-button {
transition: none;
}
}
/* =========================================================
FRAMESSOR HEADER LOGO FINAL FIX
========================================================= */
.site-header .nav-container {
min-height: 100%;
}
.site-header .brand-logo {
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: auto;
height: auto;
min-width: 0;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.site-header .brand-image {
display: block;
width: 148px;
height: auto;
max-width: 148px;
max-height: 54px;
margin: 0;
padding: 0;
object-fit: contain;
object-position: left center;
flex-shrink: 0;
}
.site-header.scrolled .brand-image {
width: 142px;
max-width: 142px;
max-height: 50px;
}
@media (max-width: 980px) {
.site-header .brand-image {
width: 132px;
max-width: 132px;
max-height: 48px;
}
}
@media (max-width: 700px) {
.site-header .brand-image {
width: 116px;
max-width: 116px;
max-height: 44px;
}
}
@media (max-width: 430px) {
.site-header .brand-image {
width: 108px;
max-width: 108px;
max-height: 40px;
}
}
/* =========================================
WHY US FINAL RESPONSIVE FIX
========================================= */
/* Prevent horizontal overflow */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
.why-page {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
/* Make every main section full width */
.why-page section {
width: 100%;
max-width: 100%;
}
/* =========================================
DESKTOP FIX
========================================= */
.why-hero,
.why-intro,
.why-reasons,
.why-difference,
.why-stats,
.why-process,
.why-statement,
.why-cta,
.why-footer {
width: 100%;
}
.why-container,
.why-hero-grid,
.why-footer-top,
.why-footer-bottom {
width: 100%;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
/* Stop large typography from escaping containers */
.why-hero-title,
.why-intro-title,
.why-reasons-title,
.why-difference-title,
.why-process-title,
.why-statement-title,
.why-cta-title {
max-width: 100%;
overflow-wrap: normal;
word-break: normal;
}
/* =========================================
LARGE LAPTOP
========================================= */
@media (max-width: 1300px) {
.why-hero {
padding-left: 6vw;
padding-right: 6vw;
}
.why-intro,
.why-reasons,
.why-difference,
.why-process,
.why-statement,
.why-cta {
padding-left: 6vw;
padding-right: 6vw;
}
.why-hero-grid {
gap: 50px;
}
.why-intro-grid {
grid-template-columns: 0.35fr 1.65fr;
gap: 50px;
}
.why-intro-title {
font-size: clamp(42px, 5vw, 72px);
}
.why-reason {
grid-template-columns: 70px 1fr 1fr;
gap: 35px;
}
.why-difference-grid {
gap: 60px;
}
.why-process-card {
padding: 35px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.why-hero {
min-height: auto;
padding-top: 150px;
padding-bottom: 90px;
}
.why-hero-grid {
grid-template-columns: 1fr;
gap: 55px;
}
.why-hero-title {
font-size: clamp(65px, 13vw, 115px);
}
.why-hero-right {
padding-bottom: 0;
}
.why-intro {
padding-top: 100px;
padding-bottom: 100px;
}
.why-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.why-intro-title {
font-size: clamp(42px, 8vw, 72px);
}
.why-intro-copy {
margin-left: 0;
margin-right: 0;
max-width: 700px;
}
.why-reasons {
padding-top: 100px;
padding-bottom: 100px;
}
.why-reasons-heading {
display: block;
}
.why-reasons-description {
margin-top: 30px;
}
.why-reason {
grid-template-columns: 60px 1fr;
gap: 25px;
}
.why-reason-text {
grid-column: 2;
max-width: 650px;
}
.why-difference {
padding-top: 100px;
padding-bottom: 100px;
}
.why-difference-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.why-process {
padding-top: 100px;
padding-bottom: 100px;
}
.why-process-header {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 60px;
}
.why-process-grid {
grid-template-columns: 1fr 1fr;
}
.why-stats-grid {
grid-template-columns: 1fr 1fr;
}
.why-footer-top {
grid-template-columns: 1fr 1fr;
}
.why-footer-logo {
grid-column: 1 / -1;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
/* Global */
body {
overflow-x: hidden !important;
}
.why-page {
overflow-x: hidden !important;
}
/* Hero */
.why-hero {
min-height: auto;
padding: 130px 22px 80px;
}
.why-hero-grid {
display: block;
}
.why-hero-label {
margin-bottom: 30px;
font-size: 10px;
}
.why-hero-title {
font-size: clamp(58px, 18vw, 92px);
line-height: 0.84;
letter-spacing: -0.07em;
max-width: 100%;
}
.why-hero-right {
margin-top: 55px;
}
.why-hero-text {
font-size: 15px;
line-height: 1.75;
max-width: 100%;
}
.why-scroll {
font-size: 10px;
}
.hero-watermark {
font-size: 35vw;
right: -5vw;
bottom: 0;
}
/* Intro */
.why-intro {
padding: 80px 22px;
}
.why-intro-grid {
display: block;
}
.why-section-number {
margin-bottom: 35px;
font-size: 10px;
}
.why-intro-title {
font-size: clamp(38px, 11vw, 58px);
line-height: 0.98;
letter-spacing: -0.055em;
}
.why-intro-copy {
margin-top: 35px;
font-size: 15px;
line-height: 1.8;
}
/* Reasons */
.why-reasons {
padding: 80px 22px;
}
.why-reasons-title {
font-size: clamp(40px, 11vw, 58px);
}
.why-reasons-description {
font-size: 14px;
line-height: 1.8;
}
.why-reason {
display: block;
padding: 35px 0;
}
.why-reason:hover {
padding-left: 0;
padding-right: 0;
}
.why-reason-number {
margin-bottom: 18px;
}
.why-reason-title {
font-size: 28px;
margin-bottom: 20px;
}
.why-reason-text {
font-size: 14px;
line-height: 1.8;
}
/* Difference */
.why-difference {
padding: 80px 22px;
}
.why-difference-grid {
display: block;
}
.why-difference-title {
font-size: clamp(40px, 11vw, 58px);
margin-bottom: 55px;
}
.difference-item {
display: block;
padding: 30px 0;
}
.difference-item h3 {
font-size: 23px;
margin-bottom: 15px;
}
.difference-item p {
font-size: 14px;
line-height: 1.8;
}
/* Stats */
.why-stats {
padding: 55px 22px;
}
.why-stats-grid {
grid-template-columns: 1fr 1fr;
}
.why-stat {
padding: 25px 15px;
}
.why-stat-number {
font-size: 40px;
}
.why-stat-label {
font-size: 9px;
line-height: 1.5;
}
/* Process */
.why-process {
padding: 80px 22px;
}
.why-process-header {
display: block;
margin-bottom: 55px;
}
.why-process-label {
margin-bottom: 30px;
}
.why-process-title {
font-size: clamp(40px, 11vw, 58px);
}
.why-process-grid {
grid-template-columns: 1fr;
}
.why-process-card {
min-height: 260px;
padding: 30px;
}
.why-process-card h3 {
font-size: 27px;
}
/* Statement */
.why-statement {
min-height: auto;
padding: 90px 22px;
}
.why-statement-title {
font-size: clamp(45px, 12vw, 65px);
line-height: 0.9;
}
/* CTA */
.why-cta {
padding: 85px 22px;
}
.why-cta-title {
font-size: clamp(45px, 12vw, 65px);
line-height: 0.9;
}
.why-cta-button {
width: 100%;
max-width: 300px;
}
/* Footer */
.why-footer {
padding: 70px 22px 30px;
}
.why-footer-top {
display: block;
}
.why-footer-logo img {
width: 125px;
}
.why-footer-tagline {
font-size: 13px;
margin-top: 25px;
}
.why-footer-column {
margin-top: 45px;
}
.why-footer-bottom {
display: block;
line-height: 1.8;
}
.why-footer-bottom span {
display: block;
}
}
/* =========================================
VERY SMALL MOBILE
========================================= */
@media (max-width: 380px) {
.why-hero,
.why-intro,
.why-reasons,
.why-difference,
.why-process,
.why-statement,
.why-cta {
padding-left: 18px;
padding-right: 18px;
}
.why-hero-title {
font-size: 54px;
}
.why-intro-title,
.why-reasons-title,
.why-difference-title,
.why-process-title {
font-size: 37px;
}
.why-statement-title,
.why-cta-title {
font-size: 42px;
}
}
/* =========================================
SERVICES HERO TEXT VISIBILITY FIX
========================================= */
.services-page-hero {
position: relative;
overflow: hidden;
}
.services-page-hero .container {
position: relative;
z-index: 10;
}
.services-hero-content {
position: relative;
z-index: 10;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.services-page-hero .section-index {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.services-page-hero h1 {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
display: block !important;
color: #f5f5f0 !important;
}
.services-page-hero h1 span {
opacity: 1 !important;
visibility: visible !important;
color: transparent !important;
-webkit-text-stroke: 1px rgba(255,255,255,0.8);
}
.services-hero-bottom {
position: relative;
z-index: 10;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.services-hero-bottom p {
opacity: 1 !important;
visibility: visible !important;
}
.services-hero-top {
z-index: 10;
}
/* Disable hidden animation state only for Services hero */
.services-page-hero [data-aos],
.services-page-hero .reveal,
.services-page-hero .fade-up {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* MOBILE */
@media (max-width: 700px) {
.services-page-hero {
min-height: 850px;
}
.services-hero-content {
padding-top: 100px;
}
.services-page-hero h1 {
font-size: clamp(52px, 16vw, 90px);
line-height: 0.9;
}
}
/* =========================================
SERVICES HERO FINAL COLOR FIX
========================================= */
.services-page-hero {
position: relative !important;
min-height: 92vh !important;
background: #080808 !important;
color: #f5f5f0 !important;
overflow: hidden !important;
}
.services-page-hero .container {
position: relative !important;
z-index: 20 !important;
}
/* Top labels */
.services-hero-top {
color: rgba(255,255,255,0.55) !important;
z-index: 30 !important;
}
/* Main content */
.services-hero-content {
position: relative !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Small section number */
.services-page-hero .section-index {
color: rgba(255,255,255,0.55) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Main heading */
.services-page-hero h1 {
color: #f5f5f0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Outline words */
.services-page-hero h1 span {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 1px rgba(255,255,255,0.85) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Bottom paragraph */
.services-hero-bottom {
position: relative !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
}
.services-hero-bottom p {
color: rgba(255,255,255,0.62) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Grid */
.services-hero-grid {
opacity: 0.12 !important;
z-index: 1 !important;
}
/* Noise */
.services-hero-noise {
opacity: 0.035 !important;
z-index: 2 !important;
}
/* Hero button */
.services-page-hero .premium-button {
position: relative !important;
z-index: 30 !important;
background: #f5f5f0 !important;
color: #090909 !important;
border-color: #f5f5f0 !important;
}
.services-page-hero .premium-button:hover {
background: transparent !important;
color: #f5f5f0 !important;
}
/* Stop old animation from hiding hero */
.services-page-hero *,
.services-page-hero [data-aos],
.services-page-hero .reveal,
.services-page-hero .fade-up {
opacity: 1 !important;
visibility: visible !important;
}
/* Keep background on mobile too */
@media (max-width: 700px) {
.services-page-hero {
min-height: 850px !important;
background: #080808 !important;
}
.services-page-hero h1 {
color: #f5f5f0 !important;
}
}