html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
:root {
--bg: #061009;
--ink: #f2efe4;
--soft:
rgba(242,239,228,.72);
--muted:
rgba(242,239,228,.46);
--accent:
#b9df72;
--line:
rgba(242,239,228,.14);
--panel:
rgba(4,10,6,.56);
--x:
clamp(
24px,
5vw,
84px
);
--ease:
cubic-bezier(.22,1,.36,1);
}
/* =========================================================
RESET
========================================================= */
*,
*::before,
*::after {
box-sizing:
border-box;
}
html {
scroll-behavior:
smooth;
}
html,
body {
margin: 0;
min-width:
320px;
color:
var(--ink);
background:
var(--bg);
font-family:
Arial,
Helvetica,
sans-serif;
}
body {
overflow-x:
hidden;
}
a {
color:
inherit;
text-decoration:
none;
}
button {
font:
inherit;
}
/* =========================================================
FIXED FOREST VIDEO
========================================================= */
.video-world {
position:
fixed;
inset: 0;
z-index: 0;
overflow:
hidden;
background:
#061009;
}
.forest-video {
position:
absolute;
inset: 0;
width:
100%;
height:
100%;
display:
block;
object-fit:
cover;
object-position:
center center;
filter:
brightness(.42)
contrast(1.12)
saturate(.90);
}
.video-grade,
.video-vignette {
position:
absolute;
inset: 0;
pointer-events:
none;
}
.video-grade {
z-index: 2;
background:
linear-gradient(
180deg,
rgba(0,0,0,.33),
rgba(0,0,0,.08) 35%,
rgba(0,0,0,.40)
),
linear-gradient(
90deg,
rgba(1,5,3,.47),
rgba(1,5,3,.12) 45%,
rgba(1,5,3,.31)
);
}
.video-vignette {
z-index: 3;
background:
radial-gradient(
circle at 50% 42%,
transparent 28%,
rgba(0,0,0,.16) 67%,
rgba(0,0,0,.60) 100%
);
}
/* =========================================================
NAVBAR
========================================================= */
.topbar {
position:
fixed;
top: 0;
right: 0;
left: 0;
z-index: 100;
display:
flex;
align-items:
center;
justify-content:
space-between;
padding:
14px
var(--x);
}
.brand-logo-link {
display:
flex;
align-items:
center;
}
.brand-logo {
display:
block;
width:
auto;
height:
120px;
object-fit:
contain;
}
.main-nav {
display:
flex;
align-items:
center;
gap:
clamp(
18px,
2.2vw,
36px
);
}
.main-nav > a {
position:
relative;
padding:
8px 0;
color:
rgba(242,239,228,.74);
font-size:
10px;
font-weight:
800;
letter-spacing:
.14em;
text-transform:
uppercase;
transition:
color .3s ease;
}
.main-nav > a:hover,
.main-nav > a.active {
color:
var(--accent);
}
.main-nav .nav-cta {
padding:
12px 16px;
border:
1px solid
rgba(242,239,228,.22);
color:
var(--ink);
background:
rgba(3,9,5,.20);
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
}
.main-nav .nav-cta:hover {
color:
#071009;
background:
var(--accent);
}
/* =========================================================
PAGE
========================================================= */
.about-page {
position:
relative;
z-index: 10;
}
/* =========================================================
SHARED BUTTON
========================================================= */
.outline-link {
display:
inline-flex;
align-items:
center;
justify-content:
center;
min-height:
46px;
padding:
0 17px;
border:
1px solid
rgba(242,239,228,.20);
color:
var(--ink);
background:
rgba(3,9,5,.22);
font-size:
8px;
font-weight:
900;
letter-spacing:
.12em;
transition:
color .3s ease,
background .3s ease,
transform .35s var(--ease);
}
.outline-link:hover {
color:
#071009;
background:
var(--accent);
transform:
translateY(-3px);
}
/* =========================================================
REVEAL
========================================================= */
.reveal {
opacity: 1;
transform:
translateY(0);
}
.js-ready .reveal {
opacity: 0;
transform:
translateY(24px);
transition:
opacity .75s ease,
transform 1s var(--ease);
}
.js-ready .reveal.is-visible {
opacity: 1;
transform:
translateY(0);
}
/* =========================================================
HERO
========================================================= */
.about-hero {
padding:
142px
var(--x)
85px;
}
.hero-inner {
position:
relative;
width:
min(
1280px,
100%
);
margin:
0 auto;
}
/* =========================================================
TOP HERO LINE
========================================================= */
.section-line {
display:
flex;
align-items:
center;
gap:
16px;
margin-bottom:
24px;
color:
var(--muted);
font-size:
8px;
font-weight:
900;
letter-spacing:
.17em;
text-transform:
uppercase;
}
.section-line i {
flex: 1;
height:
1px;
background:
var(--line);
}
/* =========================================================
HERO GRID
========================================================= */
.hero-grid {
display:
grid;
grid-template-columns:
minmax(
0,
1.18fr
)
minmax(
300px,
.62fr
);
gap:
clamp(
52px,
6.5vw,
100px
);
align-items:
start;
}
/* =========================================================
HERO TITLE
========================================================= */
.hero-copy h1 {
margin:
0;
font-size:
clamp(
64px,
7vw,
108px
);
font-weight:
900;
line-height:
.82;
letter-spacing:
-.068em;
text-transform:
uppercase;
}
.hero-copy h1 span {
color:
var(--accent);
}
/* =========================================================
HERO WORK WITH US CTA
========================================================= */
.hero-cta-wrap {
margin-top:
34px;
display:
flex;
align-items:
center;
}
.hero-work-cta {
width:
205px;
min-height:
54px;
padding:
0
20px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
border:
1px solid
rgba(185,223,114,.45);
color:
#071009;
background:
var(--accent);
font-size:
9px;
font-weight:
900;
letter-spacing:
.13em;
text-transform:
uppercase;
cursor:
pointer;
transition:
transform .35s var(--ease),
background .3s ease,
border-color .3s ease;
}
.hero-work-cta:hover {
transform:
translateY(-4px);
background:
#caef83;
border-color:
#caef83;
}
.hero-work-cta span:last-child {
font-size:
14px;
transition:
transform .35s var(--ease);
}
.hero-work-cta:hover span:last-child {
transform:
translate(
3px,
-3px
);
}
/* =========================================================
HERO RIGHT COPY
========================================================= */
.hero-side-copy {
align-self:
start;
max-width:
410px;
padding-top:
clamp(
84px,
7vw,
116px
);
}
.hero-side-copy > p {
max-width:
430px;
margin: 0;
color:
var(--soft);
font-size:
clamp(
13px,
1vw,
16px
);
font-weight:
600;
line-height:
1.62;
}
/* =========================================================
ABOUT STORY
========================================================= */
.about-story {
padding:
115px
var(--x);
background:
rgba(2,6,3,.70);
backdrop-filter:
blur(13px);
-webkit-backdrop-filter:
blur(13px);
border-top:
1px solid
rgba(242,239,228,.09);
border-bottom:
1px solid
rgba(242,239,228,.09);
}
.story-grid {
width:
min(
1380px,
100%
);
margin:
0 auto;
display:
grid;
grid-template-columns:
.72fr
1.28fr;
gap:
clamp(
60px,
8vw,
130px
);
}
.story-title {
padding-right:
30px;
border-right:
1px solid
var(--line);
}
.story-title h2 {
margin:
0
0
45px;
font-size:
clamp(
48px,
5.5vw,
88px
);
font-weight:
900;
line-height:
.83;
letter-spacing:
-.065em;
text-transform:
uppercase;
}
.story-title h2 span {
color:
var(--accent);
}
.story-content {
max-width:
760px;
}
.story-content > p {
max-width:
670px;
color:
var(--soft);
font-size:
14px;
font-weight:
600;
line-height:
1.7;
}
.story-content .story-lead {
margin-top:
0;
color:
var(--ink);
font-size:
clamp(
17px,
1.5vw,
23px
);
font-weight:
700;
line-height:
1.5;
}
/* =========================================================
VALUES
========================================================= */
.value-grid {
margin-top:
60px;
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
gap:
32px;
}
.value-grid article {
padding-top:
25px;
border-top:
1px solid
var(--line);
}
.value-grid article > span {
color:
var(--accent);
font-size:
9px;
font-weight:
900;
letter-spacing:
.14em;
}
.value-grid h3 {
margin:
18px
0
12px;
font-size:
clamp(
17px,
1.5vw,
24px
);
font-weight:
900;
letter-spacing:
-.03em;
}
.value-grid p {
margin:
0;
color:
var(--muted);
font-size:
12px;
line-height:
1.6;
}
/* =========================================================
PHILOSOPHY / VIDEO BAND
========================================================= */
.film-band {
min-height:
560px;
display:
grid;
grid-template-columns:
1.55fr
.85fr;
background:
rgba(1,4,2,.70);
}
.film-visual {
position:
relative;
min-height:
560px;
overflow:
hidden;
}
.film-visual video {
position:
absolute;
inset: 0;
width:
100%;
height:
100%;
object-fit:
cover;
filter:
brightness(.60)
contrast(1.10)
saturate(.82);
}
.film-visual__overlay {
position:
absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.10),
rgba(0,0,0,.34)
);
}
.film-visual > span {
position:
absolute;
left:
35px;
bottom:
30px;
color:
rgba(242,239,228,.75);
font-size:
8px;
font-weight:
900;
letter-spacing:
.16em;
}
.film-copy {
position:
relative;
padding:
clamp(
45px,
5vw,
80px
);
display:
flex;
flex-direction:
column;
justify-content:
center;
border-left:
1px solid
var(--line);
background:
rgba(4,9,6,.78);
}
.film-copy > p {
margin:
0
0
22px;
color:
var(--muted);
font-size:
8px;
font-weight:
900;
letter-spacing:
.17em;
}
.film-copy h2 {
margin: 0;
font-size:
clamp(
40px,
4vw,
68px
);
font-weight:
900;
line-height:
.86;
letter-spacing:
-.06em;
text-transform:
uppercase;
}
.film-copy h2 span {
color:
var(--accent);
}
.film-copy a {
margin-top:
40px;
color:
var(--soft);
font-size:
8px;
font-weight:
900;
letter-spacing:
.14em;
transition:
color .3s ease;
}
.film-copy a:hover {
color:
var(--accent);
}
/* =========================================================
WHY KORU
========================================================= */
.why-section {
padding:
115px
var(--x);
background:
rgba(2,6,3,.48);
backdrop-filter:
blur(10px);
}
.why-grid {
width:
min(
1380px,
100%
);
margin:
0 auto;
display:
grid;
grid-template-columns:
.9fr
1.1fr;
gap:
clamp(
70px,
10vw,
160px
);
align-items:
end;
}
.why-title h2 {
margin:
0;
font-size:
clamp(
52px,
6.2vw,
100px
);
font-weight:
900;
line-height:
.80;
letter-spacing:
-.07em;
text-transform:
uppercase;
}
.why-title h2 span {
color:
var(--accent);
}
.why-content {
max-width:
570px;
}
.why-lead {
margin:
0
0
35px;
color:
var(--soft);
font-size:
clamp(
16px,
1.45vw,
22px
);
font-weight:
600;
line-height:
1.6;
}
/* =========================================================
WHY CARDS
========================================================= */
.why-cards {
width:
min(
1380px,
100%
);
margin:
85px
auto
0;
display:
grid;
grid-template-columns:
repeat(
3,
1fr
);
border-top:
1px solid
var(--line);
}
.why-cards article {
min-height:
280px;
padding:
30px;
border-right:
1px solid
var(--line);
background:
rgba(3,9,5,.20);
transition:
background .3s ease,
transform .45s var(--ease);
}
.why-cards article:last-child {
border-right:
0;
}
.why-cards article:hover {
background:
rgba(8,17,11,.58);
transform:
translateY(-6px);
}
.why-cards span {
color:
var(--accent);
font-size:
8px;
font-weight:
900;
letter-spacing:
.15em;
}
.why-cards strong {
display:
block;
margin:
90px
0
16px;
font-size:
clamp(
23px,
2.3vw,
36px
);
font-weight:
900;
letter-spacing:
-.04em;
}
.why-cards p {
max-width:
330px;
margin:
0;
color:
var(--soft);
font-size:
12px;
line-height:
1.6;
}
/* =========================================================
DIFFERENCE
========================================================= */
.difference-section {
padding:
115px
var(--x);
background:
rgba(3,8,5,.73);
backdrop-filter:
blur(12px);
border-top:
1px solid
rgba(242,239,228,.08);
border-bottom:
1px solid
rgba(242,239,228,.08);
}
.difference-grid {
width:
min(
1380px,
100%
);
margin:
0 auto;
display:
grid;
grid-template-columns:
.8fr
1.2fr;
gap:
clamp(
70px,
11vw,
180px
);
}
.difference-grid h2 {
margin:
0;
font-size:
clamp(
58px,
7vw,
112px
);
font-weight:
900;
line-height:
.78;
letter-spacing:
-.075em;
text-transform:
uppercase;
}
.difference-grid h2 span {
color:
var(--accent);
}
.difference-copy {
align-self:
end;
max-width:
670px;
}
.difference-copy p {
margin:
0
0
25px;
color:
var(--soft);
font-size:
clamp(
14px,
1.2vw,
18px
);
font-weight:
600;
line-height:
1.7;
}
.difference-copy p:first-child {
color:
var(--ink);
font-size:
clamp(
18px,
1.55vw,
24px
);
font-weight:
700;
}
/* =========================================================
BRAND QUOTE
========================================================= */
.brand-quote {
min-height:
82vh;
padding:
120px
var(--x);
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
text-align:
center;
}
.brand-quote > p:first-child {
margin:
0
0
30px;
color:
var(--muted);
font-size:
8px;
font-weight:
900;
letter-spacing:
.18em;
}
.brand-quote h2 {
margin:
0;
font-size:
clamp(
58px,
8.6vw,
145px
);
font-weight:
900;
line-height:
.78;
letter-spacing:
-.075em;
text-transform:
uppercase;
}
.brand-quote h2 span {
color:
var(--accent);
}
.quote-bottom {
margin:
35px
0
0;
color:
var(--soft);
font-size:
14px;
font-weight:
600;
}
/* =========================================================
FINAL CTA
========================================================= */
.final-cta {
min-height:
78vh;
padding:
120px
var(--x);
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
text-align:
center;
background:
radial-gradient(
circle at 50% 50%,
rgba(185,223,114,.13),
transparent 38%
),
rgba(2,6,3,.48);
backdrop-filter:
blur(10px);
border-top:
1px solid
rgba(242,239,228,.09);
}
.final-cta p {
margin:
0;
color:
var(--muted);
font-size:
8px;
font-weight:
900;
letter-spacing:
.18em;
}
.final-cta h2 {
margin:
30px
0
48px;
font-size:
clamp(
60px,
8vw,
135px
);
font-weight:
900;
line-height:
.79;
letter-spacing:
-.075em;
text-transform:
uppercase;
}
.final-cta h2 span {
color:
var(--accent);
}
.final-actions {
display:
flex;
gap:
12px;
}
.final-primary,
.final-secondary {
display:
inline-flex;
align-items:
center;
justify-content:
center;
padding:
15px
20px;
font-size:
9px;
font-weight:
900;
letter-spacing:
.12em;
transition:
transform .35s var(--ease);
}
.final-primary {
color:
#071009;
background:
var(--accent);
}
.final-secondary {
border:
1px solid
rgba(242,239,228,.22);
color:
var(--ink);
background:
rgba(3,9,5,.30);
}
.final-primary:hover,
.final-secondary:hover {
transform:
translateY(-4px);
}
/* =========================================================
AUTOPLAY FALLBACK
========================================================= */
.play-button {
position:
fixed;
right:
22px;
bottom:
22px;
z-index:
500;
padding:
12px
15px;
border:
1px solid
rgba(242,239,228,.35);
color:
var(--ink);
background:
rgba(3,9,5,.86);
font-size:
8px;
font-weight:
900;
letter-spacing:
.12em;
cursor:
pointer;
}
/* =========================================================
SHORT LAPTOP SCREENS
========================================================= */
@media
(
min-width: 1001px
)
and
(
max-height: 850px
) {
.about-hero {
padding-top:
125px;
padding-bottom:
65px;
}
.hero-copy h1 {
font-size:
clamp(
58px,
6.4vw,
98px
);
}
.hero-side-copy {
padding-top:
70px;
}
}
/* =========================================================
TABLET
========================================================= */
@media
(
max-width: 1000px
) {
.main-nav > a:not(.nav-cta) {
display:
none;
}
.hero-grid,
.story-grid,
.why-grid,
.difference-grid {
grid-template-columns:
1fr;
}
.hero-side-copy {
max-width:
580px;
padding-top:
0;
}
.story-title {
padding-right:
0;
padding-bottom:
45px;
border-right:
0;
border-bottom:
1px solid
var(--line);
}
.film-band {
grid-template-columns:
1.25fr
.75fr;
}
.value-grid,
.why-cards {
grid-template-columns:
1fr
1fr;
}
.why-cards article:nth-child(2) {
border-right:
0;
}
}
/* =========================================================
MOBILE
========================================================= */
@media
(
max-width: 760px
) {
:root {
--x:
20px;
}
.topbar {
padding:
12px
20px;
}
.brand-logo {
height:
46px;
}
.main-nav .nav-cta {
padding:
10px
12px;
font-size:
8px;
}
.about-hero {
padding:
96px
20px
70px;
}
.section-line > span:last-child {
display:
none;
}
.hero-copy h1 {
font-size:
15vw;
line-height:
.84;
}
.hero-work-cta {
width:
190px;
}
.about-story,
.why-section,
.difference-section {
padding:
80px
20px;
}
.story-title h2,
.why-title h2,
.difference-grid h2 {
font-size:
14vw;
}
.value-grid,
.why-cards {
grid-template-columns:
1fr;
}
.value-grid {
gap:
24px;
}
.film-band {
grid-template-columns:
1fr;
}
.film-visual,
.film-band {
min-height:
auto;
}
.film-visual {
height:
55vw;
min-height:
280px;
}
.film-copy {
min-height:
430px;
border-left:
0;
border-top:
1px solid
var(--line);
}
.why-cards article {
min-height:
230px;
border-right:
0;
border-bottom:
1px solid
var(--line);
}
.why-cards strong {
margin-top:
55px;
}
.brand-quote {
min-height:
70vh;
padding:
90px
20px;
}
.brand-quote h2 {
font-size:
14vw;
}
.final-cta {
min-height:
70vh;
padding:
90px
20px;
}
.final-cta h2 {
font-size:
15vw;
}
.final-actions {
width:
100%;
flex-direction:
column;
}
.final-primary,
.final-secondary {
justify-content:
center;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media
(
prefers-reduced-motion:
reduce
) {
html {
scroll-behavior:
auto;
}
*,
*::before,
*::after {
transition:
none !important;
animation:
none !important;
}
}
/* =========================================================
BIGGER STRATEGY / CREATIVE / GROWTH TITLES
========================================================= */
.why-cards span {
display: block;
color: var(--accent);
font-size:
clamp(
30px,
3vw,
46px
);
font-weight: 900;
line-height: .9;
letter-spacing: -.045em;
text-transform: uppercase;
}
/* secondary heading */
.why-cards strong {
display: block;
margin:
70px
0
16px;
font-size:
clamp(
22px,
2vw,
32px
);
font-weight: 800;
line-height: 1;
letter-spacing: -.035em;
}
/* =========================================================
CONSISTENT BODY TEXT
========================================================= */
main p:not(.case-category),
section p:not(.case-category) {
font-size: 16px !important;
line-height: 1.65 !important;
}
@media (max-width: 760px) {
main p:not(.case-category),
section p:not(.case-category) {
font-size: 15px !important;
line-height: 1.6 !important;
}
}
/* =========================================================
BIGGER ABOUT PAGE BUTTON
========================================================= */
.outline-link {
min-height: 58px !important;
padding:
0 26px !important;
font-size:
11px !important;
font-weight:
900 !important;
letter-spacing:
.11em !important;
border:
1px solid
rgba(242,239,228,.28) !important;
}
/* MOBILE */
@media (max-width: 760px) {
.outline-link {
min-height:
54px !important;
padding:
0 22px !important;
font-size:
10px !important;
}
}
/* =========================================================
BIGGER EXPLORE WHAT WE DO LINK
========================================================= */
.film-copy a {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 42px !important;
padding:
14px
20px;
border:
1px solid
rgba(242,239,228,.24);
color:
var(--ink) !important;
font-size:
11px !important;
font-weight:
900;
letter-spacing:
.12em;
transition:
color .3s ease,
background .3s ease,
border-color .3s ease,
transform .3s ease;
}
.film-copy a:hover {
color:
#071009 !important;
background:
var(--accent);
border-color:
var(--accent);
transform:
translateY(-3px);
}
/* MOBILE */
@media (max-width: 760px) {
.film-copy a {
font-size:
10px !important;
padding:
13px
18px;
}
}