)
============================================================ */
body.day {
--void: #ece6d6;
--ink: #d4cdb8;
--teal: #c2bba4;
--teal-mid: #a09a85;
--teal-glow: #b89e6e;
--char: #2a261d;
--mist: #3a352a;
--fog: #50473a;
--silver: #4a4434;
--silver-dim: rgba(38, 32, 22, 0.62);
--silver-fad: rgba(38, 32, 22, 0.20);
--silver-edge: rgba(38, 32, 22, 0.08);
--bone: #1a1612;
--platinum: #28231b;
--copper: #6e4a26;
--copper-warm: #8a5b30;
--teal-cool: #4a6d72;
}
body.day::selection { background: var(--copper); color: var(--bone); }
/* ============================================================
NEW — THEME TOGGLE BUTTON
============================================================ */
.theme-toggle {
position: fixed;
top: 28px;
right: 36px;
z-index: 200;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 12px;
background: rgba(15, 18, 22, 0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--silver-fad);
border-radius: 100px;
color: var(--bone);
cursor: none;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease-out);
pointer-events: auto;
}
.theme-toggle:hover {
border-color: var(--bone);
background: rgba(15, 18, 22, 0.85);
transform: translateY(-1px);
}
body.day .theme-toggle {
background: rgba(248, 244, 232, 0.7);
border-color: rgba(38, 32, 22, 0.25);
}
body.day .theme-toggle:hover {
background: rgba(248, 244, 232, 0.95);
border-color: var(--bone);
}
.theme-icon { width: 18px; height: 18px; display: grid; place-items: center; }
.theme-icon svg { width: 16px; height: 16px; }
.theme-icon-night { display: grid; }
.theme-icon-day { display: none; }
body.day .theme-icon-night { display: none; }
body.day .theme-icon-day { display: grid; }
.theme-label { color: var(--bone); }
@media (max-width: 900px) {
.theme-toggle { top: 18px; right: 18px; padding: 8px 14px 8px 10px; }
}
@media (max-width: 600px) {
.theme-toggle { padding: 7px 10px; gap: 6px; }
.theme-label { display: none; }
}
/* ============================================================
NEW — NAV LOGO IMAGE
============================================================ */
.nav-logo-img {
height: 64px;
width: auto;
display: block;
filter: brightness(1);
transition: filter 0.4s, height 0.4s var(--ease-out);
}
body.day .nav-logo-img { filter: invert(1) brightness(0.15); }
@media (max-width: 900px) { .nav-logo-img { height: 52px; } }
@media (max-width: 600px) { .nav-logo-img { height: 42px; } }
/* ============================================================
NEW — VERTICAL LOGO (replaces SVG emblems in Realty/Living/Catalyst)
============================================================ */
.world-logo {
margin-bottom: 36px;
height: 56px;
width: auto;
display: block;
opacity: 0.9;
transition: filter 0.4s;
}
body.day .world-logo { filter: invert(1) brightness(0.15); }
@media (max-width: 700px) { .world-logo { height: 44px; } }
/* ============================================================
NEW — STATS BAR (after the three verticals)
============================================================ */
.s-stats {
height: 70vh;
align-items: center;
}
.stats-block { width: 100%; }
.stats-tag {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--copper-warm);
margin-bottom: 30px;
display: inline-flex; align-items: center; gap: 12px;
justify-content: center;
}
.stats-tag::before, .stats-tag::after {
content: ''; width: 28px; height: 1px; background: var(--copper-warm);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--silver-edge);
border-bottom: 1px solid var(--silver-edge);
text-align: center;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
padding: 56px 24px;
border-right: 1px solid var(--silver-edge);
position: relative;
transition: background 0.5s;
}
.stat:last-child { border-right: none; }
@media (max-width: 900px) {
.stat:nth-child(2n) { border-right: none; }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--silver-edge); }
}
.stat:hover { background: rgba(212, 176, 138, 0.04); }
.stat-num {
font-family: var(--display);
font-weight: 300;
font-size: clamp(54px, 7vw, 96px);
line-height: 1;
letter-spacing: -0.04em;
color: var(--bone);
display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.stat-num .plus {
font-family: var(--serif);
font-style: italic;
font-size: 0.4em;
color: var(--copper-warm);
font-weight: 300;
}
.stat-label {
margin-top: 18px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--silver-dim);
}
/* ============================================================
NEW — HORIZONTAL PROJECTS SHOWCASE
============================================================ */
.s-served {
height: auto;
min-height: 130vh;
padding: 18vh 0 12vh;
display: block;
}
.served-head {
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: end;
gap: 60px;
margin-bottom: 80px;
}
@media (max-width: 900px) { .served-head { grid-template-columns: 1fr; } }
.served-head .tag {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--copper-warm);
margin-bottom: 24px;
display: flex; align-items: center; gap: 12px;
}
.served-head .tag::before { content: ''; width: 24px; height: 1px; background: var(--copper-warm); }
.served-head h2 {
font-family: var(--display);
font-weight: 300;
font-size: clamp(48px, 6.4vw, 108px);
line-height: 0.94;
letter-spacing: -0.025em;
color: var(--bone);
}
.served-head h2 em {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
color: var(--silver);
}
.served-head p {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
line-height: 1.5;
color: var(--silver-dim);
max-width: 380px;
justify-self: end;
}
@media (max-width: 900px) { .served-head p { justify-self: start; } }
.h-scroll-wrap {
position: relative;
margin: 0 -48px;
padding: 0 48px;
}
@media (max-width: 768px) { .h-scroll-wrap { margin: 0 -24px; padding: 0 24px; } }
.h-scroll {
display: flex;
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: var(--silver-fad) transparent;
}
.h-scroll::-webkit-scrollbar { height: 6px; }
.h-scroll::-webkit-scrollbar-track { background: transparent; }
.h-scroll::-webkit-scrollbar-thumb { background: var(--silver-fad); border-radius: 3px; }
.h-scroll::-webkit-scrollbar-thumb:hover { background: var(--copper-warm); }
.proj-card {
flex: 0 0 auto;
width: clamp(300px, 40vw, 520px);
scroll-snap-align: start;
position: relative;
display: block;
text-decoration: none;
color: inherit;
cursor: none;
transition: transform 0.6s var(--ease-out);
}
.proj-card:hover { transform: translateY(-6px); }
.proj-card-img {
width: 100%;
aspect-ratio: 4 / 5;
background: var(--char);
border: 1px solid var(--silver-edge);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.proj-card-img::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(7,8,10,0.85) 100%);
pointer-events: none;
z-index: 1;
}
.proj-card-img-empty {
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--silver-dim);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.proj-card-img-empty::before {
content: '';
position: absolute;
inset: 28px;
border: 1px dashed var(--silver-fad);
}
.proj-card-meta {
position: absolute;
left: 24px; right: 24px; bottom: 22px;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: end;
}
.proj-card-text .year {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
color: var(--copper-warm);
text-transform: uppercase;
margin-bottom: 8px;
display: block;
}
.proj-card-text .title {
font-family: var(--display);
font-weight: 300;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--bone);
text-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.proj-card-text .title em {
font-family: var(--serif);
font-style: italic;
color: var(--copper-warm);
}
.proj-card-text .loc {
margin-top: 6px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--silver-dim);
}
.proj-card-arrow {
width: 38px; height: 38px;
border: 1px solid var(--silver-fad);
border-radius: 50%;
display: grid; place-items: center;
background: rgba(7, 8, 10, 0.6);
backdrop-filter: blur(6px);
flex-shrink: 0;
transition: all 0.4s var(--ease-out);
}
.proj-card:hover .proj-card-arrow {
background: var(--copper-warm);
border-color: var(--copper-warm);
}
.proj-card-arrow svg {
width: 12px; height: 12px;
stroke: var(--bone);
transition: transform 0.4s var(--ease-out), stroke 0.4s;
}
.proj-card:hover .proj-card-arrow svg {
stroke: var(--void);
transform: rotate(-45deg);
}
.h-scroll-hint {
display: flex; align-items: center; gap: 12px;
margin-top: 30px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--silver-dim);
}
.h-scroll-hint .arrow {
width: 28px; height: 1px;
background: var(--silver-dim);
position: relative;
}
.h-scroll-hint .arrow::after {
content: '';
position: absolute;
right: 0; top: -3px;
border-top: 1px solid var(--silver-dim);
border-right: 1px solid var(--silver-dim);
width: 6px; height: 6px;
transform: rotate(45deg);
transform-origin: right;
}
/* ============================================================
NEW — TEAM SECTION (chapter 8)
============================================================ */
.s-team {
height: 130vh;
align-items: center;
}
.team-head { text-align: center; margin-bottom: 80px; }
.team-head .tag {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--copper-warm);
margin-bottom: 24px;
}
.team-head .tag::before, .team-head .tag::after {
content: ''; width: 28px; height: 1px; background: var(--copper-warm);
}
.team-head h2 {
font-family: var(--display);
font-weight: 300;
font-size: clamp(40px, 6vw, 96px);
line-height: 0.96;
letter-spacing: -0.02em;
color: var(--bone);
}
.team-head h2 em {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
color: var(--copper-warm);
}
.team-head p {
margin-top: 22px;
font-family: var(--serif);
font-style: italic;
font-size: 20px;
color: var(--silver-dim);
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
position: relative;
background: linear-gradient(180deg, rgba(20,22,26,0.6), rgba(8,10,12,0.4));
border: 1px solid var(--silver-edge);
padding: 24px 22px 28px;
cursor: none;
transition: border-color 0.5s, transform 0.6s var(--ease-out);
}
.team-card:hover {
border-color: var(--copper-warm);
transform: translateY(-4px);
}
.team-photo {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--char);
margin-bottom: 22px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
}
.team-photo::after {
content: 'photo';
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--silver-dim);
border: 1px dashed var(--silver-fad);
margin: 16px;
}
.team-card[data-filled="true"] .team-photo::after { display: none; }
.team-num {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--copper-warm);
margin-bottom: 8px;
}
.team-name {
font-family: var(--display);
font-weight: 300;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--bone);
line-height: 1.1;
margin-bottom: 6px;
}
.team-name em {
font-family: var(--serif);
font-style: italic;
color: var(--copper-warm);
}
.team-bio {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--silver-dim);
margin-top: 10px;
max-width: 32ch;
letter-spacing: 0.005em;
}
/* ============================================================
MOBILE MENU
============================================================ */
.mobile-menu-trigger {
display: none;
position: fixed;
top: 18px;
right: 18px;
z-index: 90;
width: 44px;
height: 44px;
background: rgba(7, 10, 12, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(232, 230, 224, 0.18);
border-radius: 4px;
padding: 0;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.mobile-menu-trigger span {
display: block;
width: 18px;
height: 1px;
background: var(--bone);
transition: all 0.3s var(--ease-out);
}
body.day .mobile-menu-trigger {
background: rgba(236, 230, 214, 0.85);
border-color: rgba(40, 42, 48, 0.3);
}
body.day .mobile-menu-trigger span { background: var(--char); }
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(5, 8, 7, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease-out), visibility 0.4s;
overflow-y: auto;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
body.day .mobile-menu { background: rgba(236, 230, 214, 0.97); }
.mobile-menu-close {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(232, 230, 224, 0.18);
border-radius: 4px;
cursor: pointer;
color: var(--bone);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-close svg { width: 20px; height: 20px; }
body.day .mobile-menu-close { color: var(--char); border-color: rgba(40, 42, 48, 0.3); }
.mobile-menu-inner {
padding: 80px 28px 40px;
max-width: 460px;
margin: 0 auto;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mobile-menu-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--copper-warm);
margin-bottom: 30px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.mobile-menu.open .mobile-menu-label { opacity: 1; transform: translateY(0); }
.mobile-menu-nav {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.mobile-menu-nav a {
display: block;
padding: 18px 0;
font-family: var(--display);
font-weight: 300;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--bone);
text-decoration: none;
border-bottom: 1px solid rgba(232, 230, 224, 0.08);
transition: color 0.3s, padding-left 0.3s var(--ease-out);
opacity: 0;
transform: translateY(12px);
}
.mobile-menu-nav a em {
font-family: var(--serif);
font-style: italic;
color: var(--copper-warm);
}
.mobile-menu.open .mobile-menu-nav a {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.open .mobile-menu-nav a:nth-child(1) { transition: opacity 0.5s 0.30s, transform 0.5s 0.30s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(2) { transition: opacity 0.5s 0.36s, transform 0.5s 0.36s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(3) { transition: opacity 0.5s 0.42s, transform 0.5s 0.42s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(4) { transition: opacity 0.5s 0.48s, transform 0.5s 0.48s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(5) { transition: opacity 0.5s 0.54s, transform 0.5s 0.54s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(6) { transition: opacity 0.5s 0.60s, transform 0.5s 0.60s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(7) { transition: opacity 0.5s 0.66s, transform 0.5s 0.66s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(8) { transition: opacity 0.5s 0.72s, transform 0.5s 0.72s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(9) { transition: opacity 0.5s 0.78s, transform 0.5s 0.78s; }
.mobile-menu.open .mobile-menu-nav a:nth-child(10) { transition: opacity 0.5s 0.84s, transform 0.5s 0.84s; }
.mobile-menu-cta {
margin-top: 24px;
padding: 24px 0 !important;
font-size: 18px !important;
color: var(--copper-warm) !important;
border-top: 1px solid rgba(212, 176, 138, 0.4) !important;
border-bottom: 1px solid rgba(212, 176, 138, 0.4) !important;
}
.mobile-menu-foot {
margin-top: 40px;
padding-top: 30px;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid rgba(232, 230, 224, 0.08);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--silver-dim);
opacity: 0;
transition: opacity 0.5s 0.9s;
}
.mobile-menu.open .mobile-menu-foot { opacity: 1; }
.mobile-menu-foot a {
color: var(--silver-dim);
text-decoration: none;
transition: color 0.3s;
}
.mobile-menu-foot a:hover { color: var(--bone); }
body.day .mobile-menu-nav a { color: var(--char); border-bottom-color: rgba(40, 42, 48, 0.15); }
body.day .mobile-menu-foot a { color: var(--char-soft); }
body.day .mobile-menu-foot { border-top-color: rgba(40, 42, 48, 0.15); }
/* Show hamburger only on mobile/tablet */
@media (max-width: 900px) {
.mobile-menu-trigger { display: flex; }
/* Hide theme toggle text on mobile — keep just the icon */
.theme-toggle .theme-label { display: none; }
.theme-toggle { right: 76px !important; }
}
/* ============================================================
PROJECT RAIL — mobile dots + counter
============================================================ */
.proj-rail-dots {
display: none;
margin-top: 24px;
align-items: center;
justify-content: center;
gap: 8px;
}
.proj-rail-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--silver-fad);
transition: all 0.4s var(--ease-out);
}
.proj-rail-dot.active {
background: var(--copper-warm);
width: 24px;
border-radius: 3px;
}
@media (max-width: 900px) {
.proj-rail-dots { display: flex; }
.h-scroll-hint { display: none; }
}
/* ============================================================
MOBILE-FIRST RESHAPE — small screens get a stacked page
layout instead of the long scroll-flight corridor.
The 3D canvas still renders behind, but the heavy
parallax-coupling and 1300vh body height are dropped.
============================================================ */
@media (max-width: 768px) {
/* Body: keep scroll-driven flight, but with a shorter total height that
fits a phone session (vs the long desktop 1300vh corridor). */
body { min-height: 800vh; cursor: auto; font-size: 14px; }
/* Loader scaled for mobile */
.loader-text { font-size: clamp(48px, 14vw, 80px) !important; }
.loader-meta { font-size: 9px !important; }
/* Scenes can still be pinned (height: 100vh) on mobile — gives proper flight rhythm */
/* Cursor: hardware cursor on mobile, hide custom one */
.cursor { display: none; }
/* Grain effect dimmer on mobile (battery) */
.grain { opacity: 0.04; }
/* === Top nav: single-row, logo left, toggle right === */
.nav {
padding: 14px 18px;
align-items: center;
gap: 10px;
}
.nav-coords, .nav-mark-text { display: none; }
/* Hide the right rail (chapter index) on mobile entirely */
.rail { display: none; }
/* Hide top progress bar — we don't have a single long scroll anymore */
.progress { display: none; }
/* Bottom UI bar: keep sound toggle, simplify */
.bottom {
padding: 14px 18px;
flex-direction: row;
justify-content: flex-end;
}
.sound-toggle { font-size: 9px; padding: 6px 10px; }
/* === Scene flow: stacked sections instead of pinned 100vh === */
.scene {
height: auto !important;
min-height: auto;
padding: 60px 0;
align-items: stretch;
}
.scene-inner { padding: 0 20px; }
/* Hero / Open scene */
.s-idea { padding: 120px 0 80px; min-height: 80vh; }
.s-idea-text {
font-size: clamp(34px, 9vw, 52px) !important;
line-height: 1.05;
word-break: keep-all;
}
/* Stack each word on its own line on very small screens for impact */
@media (max-width: 420px) {
.s-idea-text { font-size: clamp(32px, 10vw, 44px) !important; }
}
.s-idea-meta { font-size: 9px; margin-top: 30px; }
/* Vision / Blueprint scene: stack columns */
.s-blueprint .s-blueprint-grid {
grid-template-columns: 1fr !important;
gap: 30px;
}
.s-blueprint h2 {
font-size: clamp(34px, 8vw, 52px) !important;
line-height: 1.05;
}
/* === Vertical sections (Reality / Living / Catalyst) === */
.world {
height: auto;
min-height: auto;
padding: 80px 0;
}
.world-frame {
grid-template-columns: 1fr !important;
gap: 30px;
}
.world-side-1 .world-content,
.world-side-2 .world-content { grid-column: 1 !important; }
.world-content::before {
/* Simpler vignette on mobile */
inset: -30px -20px;
background: radial-gradient(ellipse 90% 70% at 50% 50%,
rgba(7,8,10,0.65) 0%,
rgba(7,8,10,0.35) 60%,
transparent 90%);
}
.world-num {
font-size: 60px;
top: -20px; right: -8px;
}
.world-tag {
font-size: 9px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.world-title {
font-size: clamp(34px, 8vw, 52px) !important;
}
.world-title .brand-prefix { font-size: 0.36em; }
.world-title .it { font-size: 0.55em; margin-top: 10px; }
.world-desc { font-size: 15px; line-height: 1.6; margin-top: 24px; }
/* Bigger CTA on mobile so it's easy to tap */
.world-cta { padding: 18px 28px !important; font-size: 11px !important; }
/* Horizon mega text — more breath on mobile */
.horizon-mega { font-size: clamp(56px, 16vw, 96px) !important; }
.world-list { margin-top: 24px; max-width: 100%; }
.world-list li { font-size: 12px; padding: 10px 0; }
.slot-indicator { font-size: 8px; margin-top: 18px; }
/* === Stats === */
.s-stats { padding: 60px 0; min-height: auto; }
.stats-block .stats-tag { font-size: 9px; }
.stats-block h2 { font-size: clamp(28px, 7vw, 44px) !important; }
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
.stat { padding: 32px 12px; }
.stat-num { font-size: clamp(40px, 10vw, 60px) !important; }
.stat-label { font-size: 9px; margin-top: 10px; letter-spacing: 0.24em; }
/* === Process === */
.s-process { padding: 60px 0; }
.process-head { margin-bottom: 50px; }
.process-head h2 { font-size: clamp(34px, 8vw, 52px) !important; }
.process-head .process-sub { font-size: 16px; }
.process-steps { grid-template-columns: 1fr !important; gap: 36px; }
.process-line { display: none; }
.process-step h3 { font-size: 22px; }
.process-step p { font-size: 13px; max-width: 100%; }
/* === Our Work / Served === */
.s-served { padding: 60px 0; min-height: auto; }
.served-head {
grid-template-columns: 1fr !important;
gap: 24px;
margin-bottom: 40px;
}
.served-head h2 { font-size: clamp(36px, 9vw, 56px) !important; }
.served-head p { justify-self: start !important; font-size: 14px; }
/* Horizontal scroll — narrower cards, snap-aligned */
.h-scroll-wrap { margin: 0 -20px; padding: 0 20px; }
.h-scroll { gap: 16px; padding-bottom: 16px; }
.proj-card {
width: 78vw;
max-width: 320px;
}
.proj-card-img { aspect-ratio: 4/5; }
.proj-card-text .title { font-size: 22px; }
.proj-card-text .year { font-size: 9px; }
.proj-card-text .loc { font-size: 8px; }
.proj-card-arrow { width: 32px; height: 32px; }
.h-scroll-hint { font-size: 8px; margin-top: 20px; }
/* Brands marquee — slightly tighter on mobile */
.brands-block { margin-top: 60px; padding-top: 50px; }
.brands-head { margin-bottom: 40px; }
.brands-head h3 { font-size: clamp(20px, 5vw, 32px) !important; }
.brands-track { gap: 32px; }
.brand { font-size: 17px; padding: 0 18px; height: 60px; }
/* === Team === */
.s-team { padding: 60px 0; min-height: auto; }
.team-head { margin-bottom: 50px; }
.team-head h2 { font-size: clamp(30px, 7.5vw, 48px) !important; }
.team-head p { font-size: 16px; }
.team-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
.team-card { padding: 16px 14px 20px; }
.team-name { font-size: 18px; }
.team-bio { font-size: 11px; margin-top: 6px; }
.team-num { font-size: 9px; }
.team-role { font-size: 9px; letter-spacing: 0.18em; }
/* === Contact / Horizon === */
.s-horizon { padding: 80px 0 60px; min-height: auto; }
.horizon-mega .word { font-size: clamp(40px, 10vw, 64px) !important; }
.horizon-meta {
grid-template-columns: 1fr !important;
gap: 24px;
text-align: left;
}
.horizon-meta-item span { font-size: 9px; }
.horizon-meta-item strong, .horizon-meta-item a { font-size: 16px; }
.horizon-cta { font-size: 11px; padding: 18px 28px; }
/* === 3D canvas: keep but lighter on mobile === */
/* The canvas is fixed-position and renders behind everything.
The IIFE inside the JS adapts pixel-ratio for mobile devices. */
}
/* === Even smaller (< 480px) === */
@media (max-width: 480px) {
.nav { padding: 12px 14px; }
.nav-logo-img { height: 36px; }
.scene-inner { padding: 0 16px; }
.team-grid { grid-template-columns: 1fr !important; }
.stats-grid .stat { padding: 26px 10px; }
}
/* === Touch device — smooth scroll snapping for project cards === */
@media (hover: none) and (pointer: coarse) {
.h-scroll { scroll-snap-type: x mandatory; }
.proj-card { scroll-snap-align: start; }
/* Disable the cursor expand on touch */
.cursor { display: none !important; }
/* Bigger tap targets */
.theme-toggle { min-height: 40px; }
.sound-toggle { min-height: 40px; }
a, button { min-height: 36px; }
.proj-row, .proj-card { min-height: 60px; }
}
/* ============================================================================
COMPREHENSIVE DAY-MODE TUNING
The base palette flips automatically via body.day variables, but several
visual treatments use hardcoded near-black for shadows, vignettes,
gradients, and stroke effects. Those would create dark blobs on the cream
background. This block re-tunes each one with warm tones that read
correctly in day mode.
============================================================================ */
html.day { background: #ece6d6; }
body.day {
background: #ece6d6;
}
/* Grain — invert (dark grain dots on cream instead of light dots on black) */
body.day .grain {
filter: invert(1) hue-rotate(180deg);
opacity: 0.10;
}
/* Cursor backdrop blur lifted */
body.day .cursor {
background: rgba(232, 226, 210, 0.25);
}
body.day .cursor.expand {
background: rgba(232, 226, 210, 0.85);
border-color: var(--copper-warm);
}
/* Hero text stroke — visible on cream */
body.day .s-idea-text .stroke,
body.day .horizon-mega .stroke {
-webkit-text-stroke-color: var(--silver);
color: transparent;
}
/* World title shadows — replace deep black halos with warm cream halos */
body.day .world-title {
text-shadow:
0 0 24px rgba(232, 226, 210, 0.92),
0 0 60px rgba(232, 226, 210, 0.65);
}
body.day .world-title .brand-prefix {
text-shadow: 0 0 14px rgba(232, 226, 210, 0.9);
}
body.day .world-title .it {
text-shadow:
0 0 18px rgba(232, 226, 210, 0.92),
0 0 40px rgba(232, 226, 210, 0.55);
}
body.day .world-desc {
text-shadow:
0 0 14px rgba(232, 226, 210, 0.95),
0 0 36px rgba(232, 226, 210, 0.7);
}
/* World content vignette — soft warm glow instead of dark blob */
body.day .world-content::before {
background: radial-gradient(ellipse 75% 65% at 35% 50%,
rgba(232, 226, 210, 0.65) 0%,
rgba(232, 226, 210, 0.35) 50%,
transparent 80%);
}
/* Project card image gradient + arrow chip — cream tones */
body.day .proj-card-img::before {
background: linear-gradient(180deg, transparent 50%, rgba(232, 226, 210, 0.85) 100%);
}
body.day .proj-card-text .title {
text-shadow: 0 4px 16px rgba(232, 226, 210, 0.7);
}
body.day .proj-card-arrow {
background: rgba(232, 226, 210, 0.75);
}
/* Slot indicator badge — cream backing */
body.day .slot-indicator {
background: rgba(232, 226, 210, 0.5);
}
/* Loader — warm cream backdrop */
body.day .loader {
background: #ece6d6;
}
/* Selection */
body.day::selection { background: var(--copper); color: #ece6d6; }
/* Brand marquee track — slightly darker borders on cream */
body.day .brand {
border-left-color: rgba(38, 32, 22, 0.15);
}
body.day .brand img {
filter: grayscale(1) brightness(0.4) contrast(1.2);
}
body.day .brand:hover img {
filter: grayscale(0) brightness(1) contrast(1);
}
/* Mobile vignette tweak */
@media (max-width: 768px) {
body.day .world-content::before {
background: radial-gradient(ellipse 90% 70% at 50% 50%,
rgba(232, 226, 210, 0.75) 0%,
rgba(232, 226, 210, 0.40) 60%,
transparent 90%);
}
}
/* Process step dots — cream interior */
body.day .process-dot {
background: #ece6d6;
}
/* Stat hover wash */
body.day .stat:hover {
background: rgba(110, 74, 38, 0.05);
}
/* Team card backing */
body.day .team-card {
background: linear-gradient(180deg, rgba(255, 248, 232, 0.75), rgba(232, 226, 210, 0.5));
border-color: rgba(38, 32, 22, 0.12);
}
body.day .team-card:hover {
border-color: var(--copper);
}
body.day .team-photo { background: #d4cdb8; }
/* Bottom UI sound toggle — cream feel */
body.day .sound-toggle {
border-color: rgba(38, 32, 22, 0.2);
}
body.day .sound-toggle:hover {
background: rgba(232, 226, 210, 0.7);
}
/* Day-mode horizon CTA */
body.day .horizon-cta {
border-color: var(--bone);
color: var(--bone);
}
body.day .horizon-cta:hover {
background: var(--bone);
color: #ece6d6;
}
/* Day-mode chapter rail — darker hairlines */
body.day .rail-item .bar { background: rgba(38, 32, 22, 0.3); }
body.day .rail-item.active .bar { background: var(--bone); }
body.day .progress { background: rgba(38, 32, 22, 0.08); }
body.day .progress-bar { background: var(--copper); }
ACCESS
Constructing universe
000
Night
Open /01
Vision /02
Reality /03
Living /04
Catalyst /05
Numbers /06
Process /07
Work /08
Team /09
Contact /10
Silent
/01 — Design · Build · Elevate
/02 — Vision & Mission
Beyond Boundaries. Limits.
— Our Vision To engineer the future of design, development and brand — where every space we build and every story we tell refuses to be forgotten.
— Our Mission To fuse uncompromising craft with relentless precision — turning every brief into a benchmark and every project into a declaration.
/03 — The Design Tank
01
Access
Reality
designs that inspire.
Where every project begins — and where competitors are left behind. AI-driven walkthroughs, cinematic presentations, brochures and digital pitches that close the room before the room is built.
Explore Reality
/04 — The Execution Wing
02
Access
Living
where design meets everyday life.
We don't decorate rooms — we engineer the spaces people live their best chapters inside. End-to-end execution from raw shell to handover, residential and commercial.
Explore Living
/05 — The Brand Amplifier
03
Access
Catalyst
amplifying brands. creating legacies.
Great brands aren't just seen — they're felt, repeated and remembered. Strategy, identity, cinematic story and always-on digital that turn attention into loyalty.
Explore Catalyst
/06 — In Numbers
Built across verticals. industries.
0
Verticals · One Ecosystem
/07 — Our Process
Simplicity. Clarity. Perfection.
A streamlined, high-impact approach.
01
Phase One
Listen & Understand
Align deeply with your vision. Every brief begins with attention — to ambition, nuance, and the silent details others miss.
02
Phase Two
Strategise & Conceptualise
Brainstorm, sketch, refine. We translate vision into strategy — and strategy into a concept that can be built, launched, and lived in.
03
Phase Three
Execute & Elevate
Bring ideas to life with precision. Every pixel, every material, every story — engineered for impact and the test of time.
/08 — Our Work
Our work speaks
Five projects. Three verticals. One promise — that what we put our name on becomes the standard the next one chases. Scroll horizontally, or click in for the full story.
Drag · scroll horizontally
Trusted Brands
Trusted by brands who believe indesign that makes a difference.
/09 — People Behind
The makers behind
A small team. A relentless craft.
