:root {

--bg: #050505;

--panel: #080808;

--white: #f3f3f1;

--red: #ef1726;

--text: #a0a0a0;

--muted: #666666;

--line: #242424;

--display: "Anton", Impact, sans-serif;

--body: "Inter", Arial, sans-serif;

--max: 1600px;

--pad: clamp(24px, 4vw, 60px);

--rail: clamp(36px, 4vw, 58px);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

background: var(--bg);

}

body {

width: 100%;

min-width: 320px;

background: var(--bg);

color: var(--white);

font-family: var(--body);

overflow-x: hidden;

-webkit-font-smoothing: antialiased;

}

img {

display: block;

width: 100%;

max-width: 100%;

}

a {

color: inherit;

text-decoration: none;

}

::selection {

background: var(--red);

color: #fff;

}

.who-page,

.th-footer {

width: min(100%, var(--max));

margin: 0 auto;

}

.editorial-section,

.who-final {

width: 100%;

border-bottom: 1px solid var(--line);

}

.section-number,

.final-number {

color: var(--red);

font-family: var(--body);

font-size: 9px;

font-weight: 900;

line-height: 1;

letter-spacing: .08em;

}

.eyebrow {

display: block;

color: var(--red);

font-family: var(--body);

font-size: 9px;

font-weight: 900;

line-height: 1;

letter-spacing: .16em;

text-transform: uppercase;

}

.section-heading h2,

.simple-heading h2,

.numbers-heading h2,

.final-copy h2 {

margin: 0;

color: var(--white);

font-family: var(--display);

font-weight: 400;

line-height: .79;

letter-spacing: -.035em;

text-transform: uppercase;

}

.section-heading h2 span,

.simple-heading h2 span,

.numbers-heading h2 span,

.final-copy h2 span,

.hero-copy h1 span,

.footer-mark span {

color: var(--red);

}

.section-copy p,

.simple-content > p,

.numbers-copy > p {

color: var(--text);

font-size: 12px;

font-weight: 500;

line-height: 1.8;

}

.section-copy p + p,

.simple-content > p + p,

.numbers-copy > p + p {

margin-top: 23px;

}

.copy-lead,

.simple-lead {

color: var(--white) !important;

font-size: 18px !important;

font-weight: 700 !important;

line-height: 1.45 !important;

}

.big-copy {

color: var(--white) !important;

font-size: clamp(18px, 1.5vw, 23px) !important;

font-weight: 800 !important;

line-height: 1.3 !important;

text-transform: uppercase;

}

.mega-statement {

margin-top: 45px;

color: var(--white);

font-family: var(--display);

font-size: clamp(45px, 4.2vw, 70px);

font-weight: 400;

line-height: .82;

letter-spacing: -.035em;

text-transform: uppercase;

}

.mega-statement span {

color: var(--red);

}

.mega-statement.compact {

font-size: clamp(38px, 3.5vw, 58px);

}

.th-header {

position: sticky;

top: 0;

z-index: 1000;

width: 100%;

height: 66px;

background: rgba(5, 5, 5, .97);

border-bottom: 1px solid var(--line);

backdrop-filter: blur(10px);

}

.th-nav {

width: min(100%, var(--max));

height: 100%;

margin: 0 auto;

padding: 0 var(--pad);

display: flex;

align-items: center;

justify-content: space-between;

}

.th-logo {

display: flex;

align-items: center;

flex-shrink: 0;

}

.th-logo img {

width: 94px;

height: auto;

}

.th-navigation {

display: flex;

align-items: center;

gap: clamp(18px, 2.5vw, 42px);

font-size: 8px;

font-weight: 900;

line-height: 1;

letter-spacing: .08em;

text-transform: uppercase;

}

.th-navigation a {

position: relative;

transition: color .2s ease;

}

.th-navigation a:not(.th-nav-contact)::after {

content: "";

position: absolute;

left: 0;

bottom: -8px;

width: 0;

height: 1px;

background: var(--red);

transition: width .25s ease;

}

.th-navigation a:not(.th-nav-contact):hover::after {

width: 100%;

}

.th-navigation a:hover {

color: var(--red);

}

.th-nav-contact {

padding: 12px 18px;

background: var(--red);

border: 1px solid var(--red);

color: #fff;

}

.th-nav-contact:hover {

background: transparent;

color: #fff !important;

}

.hero-section {

position: relative;

display: grid;

grid-template-columns:

var(--rail)

minmax(280px, .72fr)

minmax(500px, 1.35fr);

grid-template-rows:

minmax(570px, calc(100vh - 66px))

auto;

min-height: calc(100vh - 66px);

overflow: hidden;

}

.hero-section .section-number {

grid-column: 1;

grid-row: 1;

padding:

30px

0

0

var(--pad);

}

.hero-copy {

grid-column: 2;

grid-row: 1;

z-index: 3;

padding:

clamp(70px, 7vw, 110px)

clamp(32px, 3.3vw, 52px)

50px

0;

display: flex;

flex-direction: column;

}

.hero-copy .eyebrow {

margin-bottom: 30px;

}

.hero-copy h1 {

color: var(--white);

font-family: var(--display);

font-size: clamp(92px, 9.5vw, 156px);

font-weight: 400;

line-height: .78;

letter-spacing: -.04em;

text-transform: uppercase;

}

.hero-kicker {

margin-top: 34px;

color: var(--white);

font-size: clamp(20px, 1.7vw, 28px);

font-weight: 900;

line-height: 1.02;

letter-spacing: -.04em;

text-transform: uppercase;

}

.hero-kicker span {

color: var(--red);

}

.hero-meta {

margin-top: auto;

padding-top: 40px;

color: #d0d0d0;

font-size: 8px;

font-weight: 800;

line-height: 1.5;

letter-spacing: .08em;

text-transform: uppercase;

}

.hero-visual {

position: relative;

grid-column: 3;

grid-row: 1;

min-width: 0;

overflow: hidden;

border-left: 1px solid var(--line);

}

.hero-visual img {

width: 100%;

height: 100%;

min-height: 570px;

object-fit: cover;

filter:

saturate(.75)

contrast(1.08);

transition: transform .7s ease;

}

.hero-visual:hover img {

transform: scale(1.02);

}

.hero-image-overlay {

position: absolute;

inset: 0;

background:

linear-gradient(

90deg,

rgba(0, 0, 0, .43),

transparent 36%

),

linear-gradient(

0deg,

rgba(0, 0, 0, .52),

transparent 38%

);

pointer-events: none;

}

.vertical-caption {

position: absolute;

top: 50%;

right: 18px;

transform: translateY(-50%);

writing-mode: vertical-rl;

color: var(--white);

font-size: 8px;

font-weight: 900;

letter-spacing: .11em;

text-transform: uppercase;

}

.hero-stamp {

position: absolute;

left: 18px;

bottom: 16px;

display: flex;

align-items: center;

gap: 8px;

text-transform: uppercase;

}

.hero-stamp img {

width: 54px;

max-width: none;

height: auto;

flex-shrink: 0;

}

.hero-stamp span {

color: #d0d0d0;

font-size: 6px;

font-weight: 800;

line-height: 1;

letter-spacing: .09em;

white-space: nowrap;

}

.hero-description {

grid-column: 2 / 4;

grid-row: 2;

display: grid;

grid-template-columns:

repeat(4, minmax(0, 1fr));

border-top: 1px solid var(--line);

}

.hero-description-item {

min-height: 135px;

padding:

26px

clamp(18px, 2.2vw, 34px);

border-right: 1px solid var(--line);

}

.hero-description-item:last-child {

border-right: 0;

}

.hero-description-item p {

color: var(--text);

font-size: 11px;

font-weight: 500;

line-height: 1.65;

}

.hero-description-final strong {

color: var(--white);

font-size: 11px;

font-weight: 900;

line-height: 1.45;

}

.service-section {

display: grid;

grid-template-columns:

var(--rail)

minmax(300px, .82fr)

minmax(250px, .68fr)

minmax(340px, .95fr);

padding:

0

var(--pad);

}

.service-section > * {

padding-top: 68px;

padding-bottom: 72px;

}

.service-section .section-heading {

padding-right:

clamp(35px, 4vw, 65px);

border-right: 1px solid var(--line);

}

.service-section .section-heading .eyebrow {

margin-bottom: 22px;

}

.service-section .section-heading h2 {

font-size:

clamp(66px, 6vw, 102px);

}

.service-list {

padding-left:

clamp(28px, 3vw, 45px);

padding-right:

clamp(28px, 3vw, 45px);

border-right: 1px solid var(--line);

}

.service-item {

padding: 17px 0;

display: grid;

grid-template-columns:

34px

1fr;

align-items: start;

border-bottom:

1px solid var(--line);

}

.service-item:first-child {

padding-top: 0;

}

.service-item span {

color: var(--red);

font-size: 9px;

font-weight: 900;

}

.service-item strong {

color: var(--white);

font-size: 11px;

font-weight: 900;

line-height: 1.3;

text-transform: uppercase;

}

.service-section .section-copy {

padding-left:

clamp(28px, 3vw, 45px);

}

.service-section .copy-lead {

margin-bottom: 28px;

}

.location-section {

display: grid;

grid-template-columns:

var(--rail)

minmax(280px, .72fr)

minmax(370px, 1.12fr)

minmax(300px, .8fr);

min-height: 610px;

}

.location-section .section-number {

padding:

30px

0

0

var(--pad);

}

.location-section .section-heading {

padding:

68px

clamp(32px, 3.5vw, 55px)

70px

0;

}

.location-section .section-heading .eyebrow {

margin-bottom: 22px;

}

.location-section .section-heading h2 {

font-size:

clamp(62px, 5.7vw, 98px);

}

.location-image {

position: relative;

min-width: 0;

min-height: 610px;

overflow: hidden;

border-left: 1px solid var(--line);

border-right: 1px solid var(--line);

}

.location-image img {

width: 100%;

height: 100%;

object-fit: cover;

filter:

grayscale(1)

contrast(1.1);

transition:

transform .7s ease,

filter .45s ease;

}

.location-image:hover img {

transform: scale(1.02);

filter:

grayscale(.35)

contrast(1.08);

}

.location-image-overlay {

position: absolute;

inset: 0;

background:

linear-gradient(

0deg,

rgba(0, 0, 0, .42),

transparent 44%

);

pointer-events: none;

}

.location-image figcaption {

position: absolute;

left: 18px;

bottom: 18px;

padding:

8px

10px;

background:

rgba(5, 5, 5, .88);

border:

1px solid var(--line);

color: var(--white);

font-size: 8px;

font-weight: 900;

line-height: 1;

letter-spacing: .08em;

text-transform: uppercase;

}

.location-copy {

padding:

70px

var(--pad)

68px

clamp(30px, 3vw, 46px);

}

.simple-section {

display: grid;

grid-template-columns:

var(--rail)

minmax(300px, .8fr)

minmax(420px, 1.2fr);

padding:

0

var(--pad);

}

.simple-section .section-number {

padding-top: 70px;

}

.simple-heading {

padding:

68px

clamp(42px, 5vw, 80px)

74px

0;

border-right:

1px solid var(--line);

}

.simple-heading .eyebrow {

margin-bottom: 22px;

}

.simple-heading h2 {

font-size:

clamp(74px, 7vw, 120px);

}

.simple-content {

width: 100%;

max-width: 700px;

padding:

72px

0

74px

clamp(42px, 5vw, 82px);

}

.simple-content .simple-lead {

margin-bottom: 38px;

}

.simple-content .big-copy {

margin-bottom: 38px;

}

.simple-list {

width: 100%;

margin:

38px

0;

border-top:

1px solid var(--line);

}

.simple-list div {

min-height: 48px;

padding:

14px

0;

display: grid;

grid-template-columns:

42px

1fr;

align-items: center;

border-bottom:

1px solid var(--line);

}

.simple-list span {

color: var(--red);

font-size: 9px;

font-weight: 900;

}

.simple-list strong {

color: var(--white);

font-size: 11px;

font-weight: 900;

line-height: 1.2;

letter-spacing: .02em;

text-transform: uppercase;

}

.simple-final {

margin-top: 28px !important;

color: var(--white) !important;

font-weight: 800 !important;

}

.origin-simple .simple-content {

max-width: 740px;

}

.numbers-section {

display: grid;

grid-template-columns:

var(--rail)

minmax(300px, .8fr)

minmax(0, 1.8fr);

padding:

0

var(--pad);

background: #080808;

}

.numbers-section .section-number {

padding-top: 70px;

}

.numbers-heading {

padding:

68px

clamp(42px, 5vw, 80px)

74px

0;

border-right:

1px solid var(--line);

}

.numbers-heading .eyebrow {

margin-bottom: 22px;

}

.numbers-heading h2 {

font-size:

clamp(74px, 7vw, 120px);

}

.numbers-content {

min-width: 0;

}

.numbers-grid {

display: grid;

grid-template-columns:

repeat(4, minmax(0, 1fr));

border-bottom:

1px solid var(--line);

}

.numbers-grid article {

min-height: 200px;

padding:

32px

25px;

display: flex;

flex-direction: column;

justify-content: center;

border-right:

1px solid var(--line);

}

.numbers-grid article:last-child {

border-right: 0;

}

.numbers-grid strong {

color: var(--white);

font-family: var(--display);

font-size:

clamp(45px, 4.4vw, 74px);

font-weight: 400;

line-height: .85;

letter-spacing: -.03em;

}

.numbers-grid span {

margin-top: 12px;

color: var(--text);

font-size: 8px;

font-weight: 900;

line-height: 1.35;

letter-spacing: .1em;

text-transform: uppercase;

}

.numbers-copy {

max-width: 700px;

padding:

42px

0

70px

clamp(42px, 5vw, 82px);

}

.numbers-copy .big-copy {

margin-bottom: 30px;

}

.who-final {

display: grid;

grid-template-columns:

var(--rail)

minmax(0, 1.35fr)

minmax(280px, .65fr);

padding:

72px

var(--pad);

align-items: end;

}

.final-number {

align-self: start;

padding-top: 4px;

}

.final-copy .eyebrow {

margin-bottom: 24px;

}

.final-copy h2 {

font-size:

clamp(70px, 7.5vw, 126px);

}

.final-brand {

min-height: 100%;

padding-left:

clamp(28px, 3vw, 48px);

display: flex;

flex-direction: column;

justify-content: flex-end;

border-left:

1px solid var(--line);

}

.final-wordmark-logo {

display: block;

width: clamp(170px, 15vw, 230px);

max-width: 100%;

height: auto;

object-fit: contain;

object-position: left center;

margin: 0;

}

.final-tagline {

margin-top: 12px;

color: var(--white);

font-size: 11px;

font-weight: 900;

line-height: 1;

letter-spacing: .16em;

text-transform: uppercase;

}

.final-tagline span {

color: var(--red);

}

.final-brand a {

align-self: flex-start;

margin-top: 38px;

padding:

14px

20px;

border:

1px solid var(--red);

color: var(--white);

font-size: 9px;

font-weight: 900;

letter-spacing: .05em;

text-transform: uppercase;

transition:

background .2s ease,

color .2s ease;

}

.final-brand a:hover {

background: var(--red);

color: #fff;

}

.th-footer {

padding:

35px

var(--pad)

44px;

display: grid;

grid-template-columns:

1fr

1fr

1fr;

gap: 30px;

align-items: end;

}

.footer-logo {

justify-self: start;

display: flex;

align-items: center;

}

.footer-logo img {

width: 95px;

height: auto;

object-fit: contain;

}

.th-footer p,

.th-footer > span {

color: var(--muted);

font-size: 8px;

font-weight: 800;

letter-spacing: .11em;

text-transform: uppercase;

}

.th-footer p {

justify-self: center;

}

.th-footer > span {

justify-self: end;

}

@media (max-width: 1150px) {

.hero-section {

grid-template-columns:

50px

minmax(250px, .72fr)

minmax(420px, 1.28fr);

}

.service-section {

grid-template-columns:

50px

minmax(270px, .8fr)

minmax(220px, .68fr)

minmax(300px, .95fr);

}

.location-section {

grid-template-columns:

50px

minmax(250px, .72fr)

minmax(330px, 1.05fr)

minmax(280px, .82fr);

}

.simple-section,

.numbers-section {

grid-template-columns:

50px

minmax(270px, .8fr)

minmax(0, 1.2fr);

}

.numbers-grid {

grid-template-columns:

repeat(2, minmax(0, 1fr));

}

.numbers-grid article:nth-child(2) {

border-right: 0;

}

.numbers-grid article:nth-child(-n + 2) {

border-bottom:

1px solid var(--line);

}

}

@media (max-width: 820px) {

:root {

--pad: 22px;

}

.th-header {

height: 62px;

}

.th-navigation {

gap: 10px;

}

.th-navigation a:not(.th-nav-contact) {

display: none;

}

.th-nav-contact {

padding:

11px

13px;

}

.th-logo img {

width: 88px;

}

.section-number,

.final-number {

padding: 0 !important;

}

.section-heading h2,

.simple-heading h2,

.numbers-heading h2 {

font-size:

clamp(64px, 18vw, 102px);

}

.hero-section {

display: block;

min-height: 0;

padding:

25px

var(--pad)

0;

}

.hero-section .section-number {

margin-bottom: 25px;

}

.hero-copy {

padding:

0

0

42px;

}

.hero-copy h1 {

font-size:

clamp(82px, 22vw, 125px);

}

.hero-meta {

margin-top: 40px;

padding-top: 0;

}

.hero-visual {

height: 65vh;

min-height: 470px;

margin:

0

calc(var(--pad) * -1);

border-left: 0;

border-top:

1px solid var(--line);

border-bottom:

1px solid var(--line);

}

.hero-visual img {

min-height: 0;

}

.hero-description {

display: block;

margin:

0

calc(var(--pad) * -1);

border-top: 0;

}

.hero-description-item {

min-height: 0;

padding:

22px

var(--pad);

border-right: 0;

border-bottom:

1px solid var(--line);

}

.service-section {

display: block;

padding:

25px

var(--pad)

0;

}

.service-section .section-number {

margin-bottom: 25px;

}

.service-section > * {

padding-top: 0;

padding-bottom: 0;

}

.service-section .section-heading {

padding:

0

0

38px;

border-right: 0;

}

.service-list {

margin:

0

calc(var(--pad) * -1);

padding:

0

var(--pad);

border-top:

1px solid var(--line);

border-bottom:

1px solid var(--line);

border-right: 0;

}

.service-item {

padding:

16px

0;

}

.service-section .section-copy {

padding:

36px

0

58px;

}

.location-section {

display: block;

min-height: 0;

padding:

25px

var(--pad)

0;

}

.location-section .section-number {

margin-bottom: 25px;

}

.location-section .section-heading {

padding:

0

0

38px;

}

.location-image {

height: 560px;

min-height: 0;

margin:

0

calc(var(--pad) * -1);

border-left: 0;

border-right: 0;

border-top:

1px solid var(--line);

border-bottom:

1px solid var(--line);

}

.location-copy {

padding:

36px

0

58px;

}

.simple-section {

display: block;

min-height: 0;

padding:

25px

var(--pad)

60px;

}

.simple-section .section-number {

margin-bottom: 25px;

}

.simple-heading {

padding:

0

0

38px;

border-right: 0;

}

.simple-content {

max-width: none;

padding:

36px

0

0;

border-top:

1px solid var(--line);

}

.simple-content .simple-lead {

font-size: 17px !important;

}

.numbers-section {

display: block;

padding:

25px

var(--pad)

0;

}

.numbers-section .section-number {

margin-bottom: 25px;

}

.numbers-heading {

padding:

0

0

38px;

border-right: 0;

}

.numbers-content {

margin:

0

calc(var(--pad) * -1);

border-top:

1px solid var(--line);

}

.numbers-copy {

max-width: none;

margin:

0

var(--pad);

padding:

38px

0

60px;

}

.who-final {

display: block;

padding:

54px

var(--pad);

}

.who-final .final-number {

margin-bottom: 26px;

}

.final-copy h2 {

font-size:

clamp(62px, 17vw, 100px);

}

.final-brand {

min-height: 0;

margin-top: 46px;

padding:

32px

0

0;

border-left: 0;

border-top:

1px solid var(--line);

}

.th-footer {

grid-template-columns:

1fr;

padding:

42px

var(--pad);

}

.th-footer p,

.th-footer > span {

justify-self: start;

}

}

@media (max-width: 500px) {

.vertical-caption {

display: none;

}

.hero-visual {

height: 58vh;

min-height: 420px;

}

.location-image {

height: 460px;

}

.numbers-grid {

grid-template-columns:

1fr;

}

.numbers-grid article {

min-height: 145px;

border-right: 0;

border-bottom:

1px solid var(--line);

}

.numbers-grid article:nth-child(2) {

border-right: 0;

}

.numbers-grid article:nth-child(-n + 2) {

border-bottom:

1px solid var(--line);

}

.mega-statement,

.mega-statement.compact {

font-size:

clamp(38px, 12vw, 52px);

}

}

html.has-interactions {

scroll-behavior: smooth;

}

.th-scroll-progress {

position: fixed;

top: 0;

left: 0;

z-index: 1200;

width: 100%;

height: 2px;

pointer-events: none;

background: transparent;

}

.th-scroll-progress > span {

display: block;

width: 100%;

height: 100%;

background: var(--red);

transform: scaleX(0);

transform-origin: left center;

will-change: transform;

}

.th-header {

transition:

transform .36s cubic-bezier(.22, 1, .36, 1),

background .25s ease,

border-color .25s ease;

}

.th-header.is-hidden {

transform: translateY(-100%);

}

.has-interactions .th-reveal {

opacity: 0;

transform: translate3d(0, 26px, 0);

transition:

opacity .72s cubic-bezier(.22, 1, .36, 1),

transform .72s cubic-bezier(.22, 1, .36, 1);

transition-delay: var(--th-delay, 0ms);

will-change: opacity, transform;

}

.has-interactions .th-reveal.th-reveal--media {

transform: translate3d(0, 20px, 0) scale(1.015);

}

.has-interactions .th-reveal.is-visible {

opacity: 1;

transform: translate3d(0, 0, 0) scale(1);

}

.th-nav-contact {

position: relative;

overflow: hidden;

isolation: isolate;

min-height: 38px;

display: inline-flex;

align-items: center;

padding: 0 16px 0 18px;

background: #050505;

border: 1px solid rgba(255,255,255,.22);

color: var(--white);

font-family: var(--display);

font-size: 11px;

font-weight: 400;

letter-spacing: .07em;

}

.th-nav-contact::before {

content: "";

position: absolute;

inset: 0 auto 0 0;

z-index: -1;

width: 3px;

background: var(--red);

transition: width .36s cubic-bezier(.22, 1, .36, 1);

}

.th-nav-contact:hover {

color: #050505 !important;

border-color: var(--red);

}

.th-nav-contact:hover::before {

width: 100%;

}

.hero-visual,

.location-image {

--th-px: 0px;

--th-py: 0px;

--th-sy: 0px;

}

.hero-visual img,

.location-image img {

transform:

scale(1.035)

translate3d(

var(--th-px),

calc(var(--th-py) + var(--th-sy)),

0

);

will-change: transform;

transition:

transform .4s cubic-bezier(.22, 1, .36, 1),

filter .45s ease;

}

.hero-visual:hover img {

transform:

scale(1.055)

translate3d(

var(--th-px),

calc(var(--th-py) + var(--th-sy)),

0

);

}

.location-image:hover img {

transform:

scale(1.05)

translate3d(

var(--th-px),

calc(var(--th-py) + var(--th-sy)),

0

);

}

.hero-description-item {

position: relative;

transition:

background .28s ease,

transform .28s cubic-bezier(.22, 1, .36, 1);

}

.hero-description-item::before {

content: "";

position: absolute;

left: 0;

bottom: 0;

width: 0;

height: 2px;

background: var(--red);

transition: width .32s cubic-bezier(.22, 1, .36, 1);

}

.hero-description-item:hover {

background: #090909;

}

.hero-description-item:hover::before {

width: 100%;

}

.service-section--interactive {

position: relative;

overflow: hidden;

background:

linear-gradient(

90deg,

#050505 0%,

#050505 68%,

#070707 68%,

#070707 100%

);

}

.service-section--interactive::after {

content: "";

position: absolute;

top: 0;

right: var(--pad);

width: 1px;

height: 26px;

background: var(--red);

}

.service-heading-meta {

margin-top: 38px;

padding-top: 14px;

display: flex;

justify-content: space-between;

gap: 20px;

border-top: 1px solid var(--line);

color: var(--muted);

font-family: var(--body);

font-size: 7px;

font-weight: 800;

letter-spacing: .12em;

text-transform: uppercase;

}

.service-list {

min-width: 0;

}

.service-item {

position: relative;

width: 100%;

min-height: 70px;

padding: 0;

display: grid;

grid-template-columns: 38px minmax(0, 1fr) 20px;

align-items: center;

gap: 0;

border: 0;

border-bottom: 1px solid var(--line);

background: transparent;

color: inherit;

text-align: left;

appearance: none;

cursor: pointer;

overflow: hidden;

transition:

background .28s ease,

transform .28s cubic-bezier(.22, 1, .36, 1);

}

.service-item:first-child {

padding-top: 0;

}

.service-item::before {

content: "";

position: absolute;

left: 0;

bottom: -1px;

width: 100%;

height: 2px;

background: var(--red);

transform: scaleX(0);

transform-origin: left center;

transition: transform .34s cubic-bezier(.22, 1, .36, 1);

}

.service-item::after {

content: "";

position: absolute;

inset: 0;

z-index: -1;

background:

linear-gradient(

90deg,

rgba(239,23,38,.09),

rgba(239,23,38,0) 74%

);

opacity: 0;

transition: opacity .28s ease;

}

.service-item .service-index {

color: var(--red);

font-size: 9px;

font-weight: 900;

transition: transform .28s ease;

}

.service-item strong {

color: #8d8d8d;

font-family: var(--display);

font-size: clamp(17px, 1.35vw, 22px);

font-weight: 400;

line-height: 1.05;

letter-spacing: .015em;

text-transform: uppercase;

transition:

color .28s ease,

transform .28s cubic-bezier(.22, 1, .36, 1);

}

.service-arrow {

color: #555;

font-size: 14px;

line-height: 1;

transform: translate(-4px, 4px);

opacity: 0;

transition:

color .28s ease,

opacity .28s ease,

transform .28s cubic-bezier(.22, 1, .36, 1);

}

.service-item:hover,

.service-item.is-active {

background: rgba(255,255,255,.018);

}

.service-item:hover::before,

.service-item.is-active::before {

transform: scaleX(1);

}

.service-item.is-active::after {

opacity: 1;

}

.service-item:hover strong,

.service-item.is-active strong {

color: var(--white);

transform: translateX(5px);

}

.service-item:hover .service-index,

.service-item.is-active .service-index {

transform: translateX(2px);

}

.service-item:hover .service-arrow,

.service-item.is-active .service-arrow {

color: var(--red);

opacity: 1;

transform: translate(0, 0);

}

.service-item:focus-visible {

outline: 1px solid var(--red);

outline-offset: 5px;

}

.service-panel {

position: relative;

min-width: 0;

min-height: 505px;

overflow: hidden;

isolation: isolate;

}

.service-panel::before {

content: "";

position: absolute;

inset: 0;

z-index: -2;

background:

linear-gradient(

145deg,

rgba(239,23,38,0) 0%,

rgba(239,23,38,.035) 100%

);

}

.service-panel-meta {

position: relative;

z-index: 2;

margin-bottom: clamp(50px, 7vw, 92px);

padding-bottom: 14px;

display: flex;

justify-content: space-between;

gap: 20px;

border-bottom: 1px solid var(--line);

color: var(--muted);

font-size: 7px;

font-weight: 800;

line-height: 1;

letter-spacing: .12em;

text-transform: uppercase;

}

.service-panel-meta span:first-child {

color: var(--red);

}

.service-panel-word {

position: absolute;

right: -8px;

bottom: 2px;

z-index: -1;

max-width: 100%;

color: rgba(255,255,255,.028);

font-family: var(--display);

font-size: clamp(86px, 8.2vw, 142px);

font-weight: 400;

line-height: .75;

letter-spacing: -.045em;

text-transform: uppercase;

white-space: nowrap;

pointer-events: none;

user-select: none;

transition:

opacity .28s ease,

transform .38s cubic-bezier(.22, 1, .36, 1);

}

.service-panel-body {

position: relative;

z-index: 2;

max-width: 560px;

}

.service-panel-body[hidden] {

display: none !important;

}

.service-panel-body.is-entering {

animation: thServiceIn .48s cubic-bezier(.22, 1, .36, 1) both;

}

.service-panel-body .copy-lead {

max-width: 520px;

font-size: clamp(22px, 1.8vw, 30px) !important;

line-height: 1.28 !important;

letter-spacing: -.025em;

}

@keyframes thServiceIn {

from {

opacity: 0;

transform: translate3d(18px, 10px, 0);

}

to {

opacity: 1;

transform: translate3d(0, 0, 0);

}

}

.simple-list div {

position: relative;

overflow: hidden;

transition:

background .25s ease,

padding-left .28s cubic-bezier(.22, 1, .36, 1);

}

.simple-list div::before {

content: "";

position: absolute;

left: 0;

top: 50%;

width: 2px;

height: 0;

background: var(--red);

transform: translateY(-50%);

transition: height .28s cubic-bezier(.22, 1, .36, 1);

}

.simple-list div:hover {

padding-left: 10px;

background: rgba(255,255,255,.018);

}

.simple-list div:hover::before {

height: 55%;

}

.simple-list div strong {

transition:

color .22s ease,

transform .22s ease;

}

.simple-list div:hover strong {

color: #fff;

}

.numbers-grid article {

position: relative;

overflow: hidden;

transition:

background .3s ease,

transform .3s cubic-bezier(.22, 1, .36, 1);

}

.numbers-grid article::before {

content: "";

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 2px;

background: var(--red);

transform: scaleX(0);

transform-origin: left center;

transition: transform .34s cubic-bezier(.22, 1, .36, 1);

}

.numbers-grid article:hover {

background: #0b0b0b;

}

.numbers-grid article:hover::before {

transform: scaleX(1);

}

.numbers-grid article strong {

transition:

color .25s ease,

transform .3s cubic-bezier(.22, 1, .36, 1);

}

.numbers-grid article:hover strong {

color: var(--red);

transform: translateY(-4px);

}

.mega-statement {

position: relative;

}

.mega-statement::after {

content: "";

display: block;

width: 46px;

height: 3px;

margin-top: 22px;

background: var(--red);

transition: width .42s cubic-bezier(.22, 1, .36, 1);

}

.mega-statement:hover::after {

width: 100px;

}

.final-brand a {

position: relative;

overflow: hidden;

isolation: isolate;

}

.final-brand a::before {

content: "";

position: absolute;

inset: 0 auto 0 0;

z-index: -1;

width: 3px;

background: var(--red);

transition: width .36s cubic-bezier(.22, 1, .36, 1);

}

.final-brand a:hover {

background: transparent;

color: #050505;

}

.final-brand a:hover::before {

width: 100%;

}

.editorial-section .section-number {

opacity: .55;

transition:

opacity .25s ease,

transform .35s cubic-bezier(.22, 1, .36, 1);

}

.editorial-section.is-current .section-number {

opacity: 1;

transform: translateY(-2px);

}

@media (max-width: 820px) {

.service-section--interactive {

background: #050505;

}

.service-section--interactive::after {

right: var(--pad);

height: 20px;

}

.service-heading-meta {

margin-top: 26px;

}

.service-item {

min-height: 64px;

grid-template-columns: 34px minmax(0, 1fr) 20px;

}

.service-item strong {

font-size: 17px;

}

.service-panel {

min-height: 360px;

overflow: hidden;

}

.service-panel-meta {

margin-bottom: 38px;

}

.service-panel-word {

right: -10px;

bottom: 6px;

font-size: clamp(72px, 23vw, 116px);

}

.service-panel-body .copy-lead {

font-size: clamp(20px, 6vw, 26px) !important;

}

.th-header.is-hidden {

transform: none;

}

.hero-visual img,

.location-image img {

transform: scale(1.02);

}

}

@media (prefers-reduced-motion: reduce) {

.has-interactions .th-reveal,

.has-interactions .th-reveal.is-visible {

opacity: 1;

transform: none;

transition: none;

}

.th-header,

.service-item,

.service-item::before,

.service-item strong,

.service-arrow,

.simple-list div,

.numbers-grid article,

.numbers-grid article strong,

.mega-statement::after {

transition: none !important;

}

.service-panel-body.is-entering {

animation: none;

}

.hero-visual img,

.location-image img {

transform: none !important;

}

}

.hero-visual .hero-stamp {

position: absolute;

left: 20px;

bottom: 18px;

display: flex;

align-items: center;

gap: 8px;

z-index: 20;

}

.hero-visual .hero-stamp .hero-stamp-logo {

width: 48px !important;

height: auto !important;

min-height: 0 !important;

max-width: none !important;

object-fit: contain !important;

filter: none !important;

transform: none !important;

transition: none !important;

flex-shrink: 0;

}

.hero-visual .hero-stamp span {

color: #d0d0d0;

font-size: 6px;

font-weight: 800;

line-height: 1;

letter-spacing: .08em;

white-space: nowrap;

}

@media (min-width: 821px) {

.hero-section {

grid-template-rows:

500px

auto;

min-height: 0;

}

.hero-copy {

padding:

52px

clamp(32px, 3.3vw, 52px)

28px

0;

}

.hero-copy .eyebrow {

margin-bottom: 22px;

}

.hero-kicker {

margin-top: 25px;

}

.hero-meta {

padding-top: 20px;

}

.hero-visual > img {

height: 100%;

min-height: 0 !important;

object-fit: cover;

}

}

.hero-visual .hero-stamp .hero-stamp-logo {

width: 78px !important;

height: auto !important;

min-height: 0 !important;

max-width: none !important;

object-fit: contain !important;

filter: none !important;

transform: none !important;

}

.hero-visual .hero-stamp span {

font-size: 7px;

}

.hero-description-item p {

color: #bdbdbd;

font-family: var(--body);

font-size: 13px;

font-weight: 800;

line-height: 1.5;

letter-spacing: -0.01em;

}

.hero-description-final strong {

color: #ffffff;

font-family: var(--body);

font-size: 14px;

font-weight: 900;

line-height: 1.45;

letter-spacing: -0.015em;

}

#mindset .simple-list div > span {

display: none;

}

#mindset .simple-list div {

grid-template-columns: 1fr;

min-height: 40px;

padding: 10px 0;

}

#mindset .simple-heading {

padding-top: 45px;

padding-bottom: 45px;

}

#mindset .simple-content {

padding-top: 45px;

padding-bottom: 45px;

}

#mindset .simple-content .simple-lead {

margin-bottom: 24px;

}

#mindset .simple-list {

margin: 24px 0;

}

#mindset .simple-content > p + p {

margin-top: 16px;

}

#mindset .mega-statement {

margin-top: 28px;

}

.section-heading h2,

.simple-heading h2,

.numbers-heading h2,

.final-copy h2,

.hero-copy h1 {

line-height: .90;

}

#mindset .simple-list div > span,

#built-by-artists .simple-list div > span,

#community .simple-list div > span,

#origin .simple-list div > span {

display: none;

}

#mindset .simple-list div,

#built-by-artists .simple-list div,

#community .simple-list div,

#origin .simple-list div {

grid-template-columns: 1fr;

min-height: 38px;

padding: 9px 0;

}

@media (min-width: 821px) {

#where {

min-height: 500px;

}

#where .location-image {

min-height: 500px;

}

#where .section-heading {

padding-top: 44px;

padding-bottom: 44px;

}

#where .location-copy {

padding-top: 44px;

padding-bottom: 44px;

}

#mindset .section-number,

#built-by-artists .section-number,

#community .section-number,

#origin .section-number {

padding-top: 44px;

}

#mindset .simple-heading,

#built-by-artists .simple-heading,

#community .simple-heading,

#origin .simple-heading {

padding-top: 44px;

padding-bottom: 44px;

}

#mindset .simple-content,

#built-by-artists .simple-content,

#community .simple-content,

#origin .simple-content {

padding-top: 44px;

padding-bottom: 44px;

}

#mindset .simple-content .simple-lead,

#built-by-artists .simple-content .simple-lead,

#community .simple-content .simple-lead,

#origin .simple-content .simple-lead,

#mindset .simple-content .big-copy,

#built-by-artists .simple-content .big-copy,

#community .simple-content .big-copy,

#origin .simple-content .big-copy {

margin-bottom: 22px;

}

#mindset .simple-list,

#built-by-artists .simple-list,

#community .simple-list,

#origin .simple-list {

margin: 20px 0;

}

#mindset .simple-content > p + p,

#built-by-artists .simple-content > p + p,

#community .simple-content > p + p,

#origin .simple-content > p + p {

margin-top: 14px;

}

#mindset .mega-statement,

#built-by-artists .mega-statement,

#community .mega-statement,

#origin .mega-statement {

margin-top: 24px;

}

#founded .section-number {

padding-top: 44px;

}

#founded .numbers-heading {

padding-top: 44px;

padding-bottom: 44px;

}

#founded .numbers-grid article {

min-height: 145px;

padding: 22px 20px;

}

#founded .numbers-copy {

padding-top: 30px;

padding-bottom: 44px;

}

#founded .numbers-copy .big-copy {

margin-bottom: 20px;

}

#founded .numbers-copy > p + p {

margin-top: 14px;

}

#founded .mega-statement {

margin-top: 24px;

}

}

.mega-statement,

.mega-statement.compact {

line-height: .98;

}

@media (min-width: 821px) {

#mindset .section-number,

#built-by-artists .section-number,

#community .section-number,

#origin .section-number {

padding-top: 32px;

}

#mindset .simple-heading,

#built-by-artists .simple-heading,

#community .simple-heading,

#origin .simple-heading {

padding-top: 32px;

padding-bottom: 32px;

}

#mindset .simple-content,

#built-by-artists .simple-content,

#community .simple-content,

#origin .simple-content {

padding-top: 32px;

padding-bottom: 32px;

}

#mindset .simple-content .simple-lead,

#built-by-artists .simple-content .simple-lead,

#community .simple-content .simple-lead,

#origin .simple-content .simple-lead,

#mindset .simple-content .big-copy,

#built-by-artists .simple-content .big-copy,

#community .simple-content .big-copy,

#origin .simple-content .big-copy {

margin-bottom: 16px;

}

#mindset .simple-list,

#built-by-artists .simple-list,

#community .simple-list,

#origin .simple-list {

margin: 14px 0;

}

#mindset .simple-list div,

#built-by-artists .simple-list div,

#community .simple-list div,

#origin .simple-list div {

min-height: 36px;

padding-top: 8px;

padding-bottom: 8px;

}

#mindset .simple-content > p + p,

#built-by-artists .simple-content > p + p,

#community .simple-content > p + p,

#origin .simple-content > p + p {

margin-top: 10px;

}

#mindset .mega-statement,

#built-by-artists .mega-statement,

#community .mega-statement,

#origin .mega-statement {

margin-top: 18px;

}

#founded .section-number {

padding-top: 32px;

}

#founded .numbers-heading {

padding-top: 32px;

padding-bottom: 32px;

}

#founded .numbers-grid article {

min-height: 120px;

padding: 18px 18px;

}

#founded .numbers-copy {

padding-top: 24px;

padding-bottom: 32px;

}

#founded .numbers-copy .big-copy {

margin-bottom: 16px;

}

#founded .numbers-copy > p + p {

margin-top: 10px;

}

#founded .mega-statement {

margin-top: 18px;

}

}

html {

background: #050505;

}

body {

position: relative;

background: transparent !important;

}

#whoweare-liquid-ether {

position: fixed;

inset: 0;

width: 100vw;

height: 100vh;

z-index: 0;

overflow: hidden;

pointer-events: none;

}

#whoweare-liquid-ether .liquid-ether-container {

position: relative;

width: 100%;

height: 100%;

overflow: hidden;

}

#whoweare-liquid-ether canvas {

width: 100% !important;

height: 100% !important;

display: block;

pointer-events: none;

}

.th-header,

.who-page,

.th-footer {

position: relative;

z-index: 2;

}

.th-header {

z-index: 1000;

}

.editorial-section,

.who-final {

position: relative;

background: transparent !important;

}

.editorial-section::before,

.who-final::before {

content: "";

position: absolute;

inset: 0;

z-index: -1;

pointer-events: none;

background: rgba(5, 5, 5, 0.38);

}

.hero-section::before {

background: rgba(5, 5, 5, 0.16);

}

.editorial-section:nth-of-type(even)::before {

background: rgba(5, 5, 5, 0.46);

}

.service-section--interactive {

background:

linear-gradient(

90deg,

rgba(5, 5, 5, 0.12) 0%,

rgba(5, 5, 5, 0.12) 68%,

rgba(7, 7, 7, 0.20) 68%,

rgba(7, 7, 7, 0.20) 100%

) !important;

}

.numbers-section {

background: rgba(8, 8, 8, 0.30) !important;

}

.hero-visual,

.location-image {

position: relative;

z-index: 3;

}

.th-footer {

background: rgba(5, 5, 5, 0.55);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

}

@media (max-width: 820px) {

#whoweare-liquid-ether {

width: 100vw;

height: 100dvh;

}

.service-section--interactive {

background: rgba(5, 5, 5, 0.36) !important;

}

.editorial-section::before,

.who-final::before {

background: rgba(5, 5, 5, 0.42);

}

.hero-section::before {

background: rgba(5, 5, 5, 0.22);

}

}

/* =========================================================

   TRYHARD — REACT BITS EFFECTS

========================================================= */

/* =========================================================

   SCROLL FLOAT

========================================================= */

.rb-scroll-float {

  overflow: visible;

}

.rb-scroll-float-char {

  display: inline-block;

  opacity: 0;

  transform:

    translate3d(0, 120%, 0)

    scaleY(2.3)

    scaleX(.7);

  transform-origin: 50% 0%;

  will-change:

    transform,

    opacity;

}

/* =========================================================

   DECRYPTED TEXT

========================================================= */

.eyebrow {

  font-variant-numeric: tabular-nums;

}

/* =========================================================

   COUNT UP

========================================================= */

#founded .numbers-grid strong {

  font-variant-numeric: tabular-nums;

}

/* =========================================================

   STICKER PEEL

========================================================= */

.rb-sticker-peel {

  --rb-peel: 0px;

  --rb-peel-opacity: 0;

  --rb-shadow-opacity: 0;

  position: relative;

  perspective: 1000px;

  cursor: grab;

  user-select: none;

  -webkit-user-select: none;

  touch-action: none;

}

.rb-sticker-peel:active {

  cursor: grabbing;

}

.rb-sticker-peel .sticker-peel-face {

  position: relative;

  width: 100%;

  transform-origin: 100% 100%;

  transform-style: preserve-3d;

  will-change:

    transform,

    filter;

  transition:

    transform .48s cubic-bezier(.22, 1, .36, 1),

    filter .35s ease;

}

/* REVERSO / ESQUINA DESPEGADA */

.rb-sticker-peel .sticker-peel-face::after {

  content: "";

  position: absolute;

  right: 0;

  bottom: 0;

  width: var(--rb-peel);

  height: var(--rb-peel);

  opacity: var(--rb-peel-opacity);

  background:

    linear-gradient(

      135deg,

      rgba(245,245,242,.98) 0%,

      rgba(205,205,205,.95) 35%,

      rgba(239,23,38,.85) 48%,

      rgba(30,30,30,.95) 51%,

      rgba(5,5,5,.98) 100%

    );

  clip-path:

    polygon(

      100% 0,

      100% 100%,

      0 100%

    );

  box-shadow:

    -5px -5px 14px rgba(0,0,0,.25);

  pointer-events: none;

  transform:

    translateZ(2px);

  transition:

    width .22s ease,

    height .22s ease,

    opacity .2s ease;

}

/* SOMBRA */

.rb-sticker-peel .sticker-peel-shadow {

  opacity:

    var(--rb-shadow-opacity) !important;

  transform:

    translate3d(

      10px,

      13px,

      -5px

    )

    scale(.9);

  filter:

    blur(15px);

  transition:

    opacity .25s ease,

    transform .3s ease;

}

/* LOGO */

.rb-sticker-peel

.sticker-peel-face

.final-wordmark-logo {

  width: 100%;

  max-width: none;

  height: auto;

  margin: 0;

  pointer-events: none;

  user-select: none;

  -webkit-user-drag: none;

}

/* DURANTE EL PEEL */

.rb-sticker-peel.is-peeling

.sticker-peel-face {

  filter:

    drop-shadow(

      -8px

      12px

      11px

      rgba(0,0,0,.4)

    );

}

/* =========================================================

   MAGNET

========================================================= */

.rb-magnet {

  --rb-magnet-x: 0px;

  --rb-magnet-y: 0px;

  transform:

    translate3d(

      var(--rb-magnet-x),

      var(--rb-magnet-y),

      0

    );

  will-change: transform;

  transition:

    transform .45s

    cubic-bezier(.22, 1, .36, 1);

}

.rb-magnet.is-magnetized {

  transition:

    transform .12s ease-out;

}

/* =========================================================

   VARIABLE PROXIMITY

========================================================= */

.rb-variable-proximity {

  position: relative;

}

.rb-proximity-char {

  display: inline-block;

  transform-origin:

    50% 65%;

  will-change:

    transform,

    filter;

  transition:

    transform .09s linear,

    filter .09s linear;

}

/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 820px) {

  .rb-sticker-peel {

    width:

      clamp(150px, 48vw, 220px);

  }

}

/* =========================================================

   REDUCED MOTION

========================================================= */

@media (prefers-reduced-motion: reduce) {

  .rb-scroll-float-char {

    opacity: 1 !important;

    transform: none !important;

  }

  .rb-magnet,

  .rb-proximity-char,

  .rb-sticker-peel .sticker-peel-face {

    transform: none !important;

    transition: none !important;

  }

}

/* =========================================================

   WHO WE ARE — BLACK BACKGROUND + SPLASH CURSOR

   FINAL OVERRIDE

========================================================= */

/* =========================================================

   BACKGROUND GENERAL

========================================================= */

html,

body {

  background: #050505 !important;

}

/* TODA LA PÁGINA NEGRA */

.who-page,

.editorial-section,

.hero-section,

.simple-section,

.location-section,

.service-section,

.service-section--interactive,

.numbers-section,

.who-final {

  background: #050505 !important;

}

/* =========================================================

   ELIMINAR CAPAS DEL ANTIGUO LIQUID ETHER

========================================================= */

.editorial-section::before,

.editorial-section:nth-of-type(even)::before,

.hero-section::before,

.who-final::before {

  background: transparent !important;

}

/* =========================================================

   SERVICES

   SACAR GRADIENTE DEL FONDO GENERAL

========================================================= */

.service-section--interactive {

  background: #050505 !important;

}

/* Se mantiene el pequeño efecto interno del panel */

.service-panel::before {

  background:

    linear-gradient(

      145deg,

      rgba(239, 23, 38, 0) 0%,

      rgba(239, 23, 38, .035) 100%

    ) !important;

}

/* =========================================================

   NUMBERS

========================================================= */

.numbers-section {

  background: #050505 !important;

}

/* =========================================================

   FOOTER

========================================================= */

.th-footer {

  background: #050505 !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}

/* =========================================================

   SPLASH CURSOR

   MISMO EFECTO QUE HOME

========================================================= */

#splash-cursor {

  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 50;

  pointer-events: none;

  overflow: hidden;

}

#splash-fluid {

  width: 100vw;

  height: 100vh;

  display: block;

  pointer-events: none;

}

/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 820px) {

  body,

  .who-page,

  .editorial-section,

  .service-section--interactive,

  .numbers-section,

  .who-final {

    background: #050505 !important;

  }

}

/* =========================================================

   NAV — MENU CENTRADO + JOIN A LA DERECHA

========================================================= */

@media (min-width: 821px) {

  .th-nav {

    position: relative;

  }

  /* NAV OCUPA TODO EL ANCHO */

  .th-navigation {

    position: absolute;

    inset: 0;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: clamp(18px, 2.5vw, 42px);

    transform: none !important;

  }

  /* JOIN THE TEAM A LA DERECHA */

  .th-navigation .th-nav-contact {

    position: absolute;

    right: var(--pad);

    left: auto;

    top: 50%;

    transform: translateY(-50%) !important;

    white-space: nowrap;

  }

  /* LOGO POR ENCIMA DEL NAV */

  .th-logo {

    position: relative;

    z-index: 20;

  }

}

/* =========================================================

   06 — COMMUNITY / MAS COMPACTO

========================================================= */

@media (min-width: 821px) {

  /* Dar un poco más de lugar al título */

  #community {

    grid-template-columns:

      var(--rail)

      minmax(400px, .95fr)

      minmax(0, 1.05fr);

  }

  /* ONE / COMMUNITY siempre en 2 líneas */

  #community .simple-heading h2 {

    font-size: clamp(68px, 6vw, 98px) !important;

    line-height: .80 !important;

    white-space: nowrap;

  }

  /* Reducir altura general */

  #community .section-number {

    padding-top: 22px !important;

  }

  #community .simple-heading {

    padding-top: 22px !important;

    padding-bottom: 22px !important;

  }

  #community .simple-content {

    padding-top: 22px !important;

    padding-bottom: 22px !important;

  }

  /* Texto inicial */

  #community .simple-content .simple-lead {

    margin-bottom: 12px !important;

    line-height: 1.35 !important;

  }

  /* ARTISTS / PRODUCERS / DJS / CREATIVES */

  #community .simple-list {

    margin: 10px 0 12px !important;

  }

  #community .simple-list div {

    min-height: 30px !important;

    padding-top: 5px !important;

    padding-bottom: 5px !important;

  }

  /* Párrafos */

  #community .simple-content > p {

    line-height: 1.55;

  }

  #community .simple-content > p + p {

    margin-top: 8px !important;

  }

  /* Statement inferior */

  #community .mega-statement {

    margin-top: 14px !important;

    font-size:

      clamp(34px, 3vw, 50px) !important;

    line-height: .94 !important;

  }

  /* IF ONE GROWS... */

  #community .simple-final {

    margin-top: 12px !important;

  }

}

/* =========================================================
   BUILD 20260926-R1 — FINAL GUARANTEES
   These rules intentionally come last.
========================================================= */

html,
body,
.who-page,
.editorial-section,
.hero-section,
.simple-section,
.location-section,
.service-section,
.service-section--interactive,
.numbers-section,
.who-final,
.th-footer {
  background: #050505 !important;
}

#whoweare-liquid-ether {
  display: none !important;
}

@media (min-width: 821px) {
  /* Logo left / menu centered / JOIN right */
  .th-nav {
    position: relative;
  }

  .th-navigation {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.5vw, 42px);
    transform: none !important;
  }

  .th-navigation .th-nav-contact {
    position: absolute;
    right: var(--pad);
    left: auto;
    top: 50%;
    transform: translateY(-50%) !important;
    white-space: nowrap;
  }

  .th-logo {
    position: relative;
    z-index: 20;
  }

  /* Section 06: shorter and COMMUNITY never splits */
  #community {
    min-height: 0 !important;
    grid-template-columns:
      var(--rail)
      minmax(420px, .95fr)
      minmax(0, 1.05fr) !important;
  }

  #community .section-number {
    padding-top: 18px !important;
  }

  #community .simple-heading {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    overflow: visible !important;
  }

  #community .simple-heading h2 {
    max-width: none !important;
    font-size: clamp(58px, 5.25vw, 84px) !important;
    line-height: .82 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #community .simple-content {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  #community .simple-content .simple-lead {
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
  }

  #community .simple-list {
    margin: 8px 0 10px !important;
  }

  #community .simple-list div {
    min-height: 26px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #community .simple-content > p {
    line-height: 1.5 !important;
  }

  #community .simple-content > p + p {
    margin-top: 6px !important;
  }

  #community .mega-statement {
    margin-top: 10px !important;
    font-size: clamp(32px, 2.8vw, 46px) !important;
    line-height: .94 !important;
  }

  #community .simple-final {
    margin-top: 8px !important;
  }
}

/* The Community title is intentionally excluded from character-splitting JS. */
#community .rb-no-split {
  white-space: nowrap !important;
}
/* =========================================================
   WHO WE ARE — MOBILE HERO FIX
========================================================= */

/* Mantener funcionamiento desktop del kicker */
.hero-kicker .hero-kicker-word {
  display: block;
  color: var(--white);
}

.hero-kicker .hero-kicker-word--accent {
  color: var(--red);
}

.hero-meta > span {
  display: block;
}

/* Flecha siempre tipográfica, nunca emoji */
.th-nav-arrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}


/* =========================================================
   FIX REACTBITS — SOLO EL PUNTO ROJO
========================================================= */

.hero-copy h1 {
  color: var(--white) !important;
}

/* Letras creadas por ReactBits heredan el blanco del H1 */
.hero-copy h1 .rb-scroll-float-char {
  color: inherit !important;
}

/* El span original del punto sigue rojo */
.hero-copy h1 > span:not(.rb-scroll-float-char) {
  color: var(--red) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {

  /* HERO MÁS COMPACTO */
  .hero-section {
    padding:
      20px
      22px
      0 !important;
  }

  .hero-section .section-number {
    margin-bottom: 20px !important;
  }

  .hero-copy {
    padding:
      0
      0
      24px !important;
  }


  /* EYEBROW */
  .hero-copy .eyebrow {
    margin-bottom: 18px !important;
  }


  /* WHO WE ARE */
  .hero-copy h1 {
    color: var(--white) !important;

    font-size:
      clamp(76px, 20vw, 108px) !important;

    line-height: .79 !important;
  }

  .hero-copy h1 .rb-scroll-float-char {
    color: inherit !important;
  }


  /* MUSIC / PEOPLE / MOVEMENT */
  .hero-kicker {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 5px 8px;

    margin-top: 20px !important;

    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
  }

  .hero-kicker .hero-kicker-word {
    display: inline;
    color: var(--white) !important;
  }

  .hero-kicker .hero-kicker-word--accent {
    color: var(--red) !important;
  }


  /* BUENOS AIRES / EST. TRYHARD */
  .hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px !important;
    padding-top: 0 !important;

    font-size: 7px !important;
    line-height: 1.2 !important;
  }

  .hero-meta > span {
    display: inline;
  }

  .hero-meta > span + span::before {
    content: "/";
    margin-right: 8px;
    color: #666;
  }


  /* JOIN THE TEAM UN POCO MÁS LIMPIO */
  .th-nav-contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 12px !important;
    white-space: nowrap;
  }
}
/* =========================================================
   TRYHARD — MOBILE FINAL FIX
   TITULOS / 04 / 07 / 09
========================================================= */


/* =========================================================
   TITULOS REACTBITS
   Mantener letras blancas y solamente acentos rojos
========================================================= */

.section-heading h2,
.simple-heading h2,
.numbers-heading h2,
.final-copy h2 {
  color: var(--white) !important;
}

/* Letras generadas por ReactBits */
.section-heading h2 .rb-scroll-float-char,
.simple-heading h2 .rb-scroll-float-char,
.numbers-heading h2 .rb-scroll-float-char,
.final-copy h2 .rb-scroll-float-char {
  color: inherit !important;
}

/* Los span originales:
   punto, ?, MORE., etc. siguen rojos */
.section-heading h2 > span:not(.rb-scroll-float-char),
.simple-heading h2 > span:not(.rb-scroll-float-char),
.numbers-heading h2 > span:not(.rb-scroll-float-char),
.final-copy h2 > span:not(.rb-scroll-float-char) {
  color: var(--red) !important;
}


/* Flechas tipográficas, nunca emoji */
.th-nav-arrow,
.text-arrow {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-weight: 400;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {

  /* ---------------------------------------------------------
     04 — TRY HARD EN UNA SOLA LINEA
  --------------------------------------------------------- */

  #mindset .simple-heading h2 {
    font-size: clamp(54px, 15vw, 72px) !important;
    line-height: .82 !important;
    white-space: nowrap;
  }

  #mindset .simple-heading h2 br {
    display: none;
  }


  /* ---------------------------------------------------------
     07 — NUMEROS EN UNA SOLA FILA
  --------------------------------------------------------- */

  #founded .numbers-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }

  #founded .numbers-grid article {
    min-height: 110px !important;

    padding:
      16px
      6px !important;

    align-items: center;
    justify-content: center;

    text-align: center;

    border-right:
      1px solid var(--line) !important;

    border-bottom:
      0 !important;
  }

  #founded .numbers-grid article:last-child {
    border-right: 0 !important;
  }

  #founded .numbers-grid strong {
    font-size: clamp(28px, 8.5vw, 38px) !important;
    line-height: .85 !important;
    white-space: nowrap;
  }

  #founded .numbers-grid span {
    margin-top: 8px !important;

    font-size: 6px !important;
    line-height: 1.15 !important;
    letter-spacing: .05em !important;
  }


  /* ---------------------------------------------------------
     09 — EVITAR BUILT TOGETHE / R
          Y MO / RE
  --------------------------------------------------------- */

  .who-final {
    padding:
      42px
      var(--pad) !important;
  }

  .final-copy h2 {
    font-size: clamp(36px, 10.5vw, 48px) !important;
    line-height: .84 !important;
    letter-spacing: -.035em !important;

    white-space: nowrap;
  }

  .final-copy .eyebrow {
    margin-bottom: 16px !important;
  }

  .final-brand {
    margin-top: 32px !important;
  }
}


/* =========================================================
   SMALL MOBILE
   Anula la regla vieja que ponía los números verticales
========================================================= */

@media (max-width: 500px) {

  #founded .numbers-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }

  #founded .numbers-grid article {
    min-height: 105px !important;
    border-bottom: 0 !important;
  }
}
/* =========================================================
   09 — FINAL / MOBILE CLEANUP
========================================================= */

@media (max-width: 820px) {

  /* SECCION FINAL MÁS COMPACTA */
  .who-final {
    padding:
      38px
      var(--pad)
      34px !important;
  }

  .who-final .final-number {
    margin-bottom: 22px !important;
  }

  .final-copy .eyebrow {
    margin-bottom: 16px !important;
  }

  .final-copy h2 {
    font-size: clamp(38px, 10.5vw, 48px) !important;
    line-height: .82 !important;
  }


  /* =====================================================
     LOGO + BACK TO HOME EN UNA MISMA FILA
  ===================================================== */

  .final-brand {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: center;

    gap: 18px;

    min-height: 0 !important;

    margin-top: 28px !important;

    padding:
      28px
      0
      0 !important;

    border-left: 0 !important;

    border-top:
      1px solid var(--line) !important;
  }


  /* LOGO FINAL */
  .final-brand .rb-sticker-peel,
  .final-brand .sticker-peel-logo {
    width: clamp(145px, 39vw, 175px) !important;
    max-width: 100%;
  }

  .final-brand .final-wordmark-logo {
    width: 100% !important;
    max-width: 175px !important;
  }


  /* BOTON */
  .final-brand a {
    align-self: center !important;

    margin-top: 0 !important;

    padding:
      12px
      14px !important;

    white-space: nowrap;

    font-size: 8px !important;
  }


  /* =====================================================
     FOOTER MÁS COMPACTO
  ===================================================== */

  .th-footer {
    grid-template-columns:
      1fr
      auto !important;

    grid-template-rows:
      auto
      auto;

    gap:
      14px
      18px !important;

    padding:
      28px
      var(--pad)
      32px !important;

    align-items: center;
  }


  /* LOGO FOOTER */
  .footer-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-logo img {
    width: 105px !important;
  }


  /* COPYRIGHT */
  .th-footer > span {
    grid-column: 2;
    grid-row: 1;

    justify-self: end !important;

    font-size: 7px !important;
    white-space: nowrap;
  }


  /* MUSIC PEOPLE CULTURE */
  .th-footer p {
    grid-column:
      1 / -1;

    grid-row: 2;

    justify-self: start !important;

    margin: 0 !important;

    font-size: 7px !important;
  }
}
/* =========================================================
   MOBILE — FOOTER MINIMAL
========================================================= */

@media (max-width: 820px) {

  /* Ya tenemos el logo en la sección 09:
     eliminamos el logo duplicado del footer */
  .th-footer .footer-logo {
    display: none !important;
  }

  /* Sacamos MUSIC. PEOPLE. CULTURE. */
  .th-footer p {
    display: none !important;
  }

  /* Footer solamente con copyright */
  .th-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 0 !important;

    padding:
      22px
      var(--pad)
      26px !important;

    border-top:
      1px solid var(--line);

    gap: 0 !important;
  }

  .th-footer > span {
    display: block !important;

    margin: 0 !important;

    color: #666 !important;

    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;

    text-align: center;
    white-space: nowrap;
  }
}
/* EVITA QUE LAS PALABRAS DEL TITULO SE CORTEN */
.what-title .title-line {
  display: block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Tamaño adaptable para que WHAT DOES siempre entre */
.what-title {
  font-size: clamp(72px, 8vw, 128px);
}

/* Seguridad extra para letras generadas por animaciones */
.what-title .rb-scroll-char {
  display: inline-block;
  white-space: nowrap;
}
/* =========================================
   WHAT WE DO — FORCE COLORS
========================================= */

.what-title,
.what-title span,
.what-title .rb-scroll-char {
  color: #f5f5f2 !important;
}

/* SOLO EL SIGNO ? EN ROJO */
.what-title .title-question,
.what-title .title-question span,
.what-title .title-question .rb-scroll-char {
  color: #ef1726 !important;
}
#what-we-do .what-title,
#what-we-do .what-title * {
  color: #f5f5f2 !important;
}

#what-we-do .what-title .title-question,
#what-we-do .what-title .title-question * {
  color: #ef1726 !important;
}

/* =========================================================
   WHO WE ARE — LANGUAGE SWITCH
   Same visual language as the home page selector.
========================================================= */

.who-language-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.who-language-switch .language-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .45);
  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}

.who-language-switch .language-button:hover {
  color: #fff;
}

.who-language-switch .language-button.active {
  color: var(--red);
}

.who-language-switch .language-divider {
  color: rgba(255, 255, 255, .25);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 821px) {
  .who-language-switch {
    position: absolute;
    top: 50%;
    right: calc(var(--pad) + 148px);
    z-index: 30;
    transform: translateY(-50%);
  }
}

@media (max-width: 820px) {
  .who-language-switch {
    position: relative;
    flex: 0 0 auto;
  }
}

/* =========================================================
   WHO WE ARE — I18N LAYOUT LOCK
   Keep the header geometry stable when switching EN / ES.
   Brand language (TRYHARD / BORN FOR THE NIGHT) is never translated.
========================================================= */

@media (min-width: 821px) {
  .th-navigation > a[href="index.html"] {
    width: 46px;
    text-align: center;
    flex: 0 0 46px;
  }

  .th-navigation > a[href="index.html#artists"] {
    width: 62px;
    text-align: center;
    flex: 0 0 62px;
  }

  .th-navigation > a[href="index.html#releases"] {
    width: 68px;
    text-align: center;
    flex: 0 0 68px;
  }

  .th-navigation > a[href="index.html#services"] {
    width: 78px;
    text-align: center;
    flex: 0 0 78px;
  }

  .th-navigation .th-nav-contact {
    min-width: 132px;
    justify-content: center;
    text-align: center;
  }
}