/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*,
:before,
:after,
::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial
}
}
}
@layer theme {
:root,
:host {
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--spacing: .25rem;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono)
}
}
@layer base {
*,
:after,
:before,
::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0
}
html,
:host {
-webkit-text-size-adjust: 100%;
tab-size: 4;
line-height: 1.5;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent
}
hr {
height: 0;
color: inherit;
border-top-width: 1px
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp,
pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}
:-moz-focusring {
outline: auto
}
progress {
vertical-align: baseline
}
summary {
display: list-item
}
ol,
ul,
menu {
list-style: none
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
vertical-align: middle;
display: block
}
img,
video {
max-width: 100%;
height: auto
}
button,
input,
select,
optgroup,
textarea {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0
}
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px
}
::file-selector-button {
margin-inline-end: 4px
}
::placeholder {
opacity: 1
}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder {
color: currentColor
}
@supports (color:color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent)
}
}
}
textarea {
resize: vertical
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit
}
::-webkit-datetime-edit {
display: inline-flex
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0
}
::-webkit-datetime-edit {
padding-block: 0
}
::-webkit-datetime-edit-year-field {
padding-block: 0
}
::-webkit-datetime-edit-month-field {
padding-block: 0
}
::-webkit-datetime-edit-day-field {
padding-block: 0
}
::-webkit-datetime-edit-hour-field {
padding-block: 0
}
::-webkit-datetime-edit-minute-field {
padding-block: 0
}
::-webkit-datetime-edit-second-field {
padding-block: 0
}
::-webkit-datetime-edit-millisecond-field {
padding-block: 0
}
::-webkit-datetime-edit-meridiem-field {
padding-block: 0
}
::-webkit-calendar-picker-indicator {
line-height: 1
}
:-moz-ui-invalid {
box-shadow: none
}
button,
input:where([type=button], [type=reset], [type=submit]) {
appearance: button
}
::file-selector-button {
appearance: button
}
::-webkit-inner-spin-button {
height: auto
}
::-webkit-outer-spin-button {
height: auto
}
[hidden]:where(:not([hidden=until-found])) {
display: none !important
}
}
@layer components;
@layer utilities {
.visible {
visibility: visible
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.start {
inset-inline-start: var(--spacing)
}
.grid {
display: grid
}
.inline {
display: inline
}
.table {
display: table
}
.grow {
flex-grow: 1
}
.transform {
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
}
.resize {
resize: both
}
.uppercase {
text-transform: uppercase
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}
.filter {
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration))
}
}
:root {
--ink: #13110d;
--ink-deep: #0f0e0b;
--ivory: #f6f2e8;
--paper: #fffefa;
--white: #f8f6f0;
--muted: #aaa49a;
--line: #f3efe429;
--line-dark: #13110d24;
--gold: #987f4f;
--gold-deep: #846f47;
--serif: "Times New Roman", Times, serif;
--sans: var(--font-geist-sans), Arial, Helvetica, sans-serif;
--mono: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
background: var(--ink)
}
body {
background: var(--ink);
color: var(--white);
font-family: var(--sans);
margin: 0;
overflow-x: hidden
}
body:before {
z-index: 200;
pointer-events: none;
opacity: .025;
content: "";
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
position: fixed;
inset: 0
}
::selection {
color: var(--ink);
background: var(--gold)
}
a {
color: inherit;
text-decoration: none
}
button,
a {
-webkit-tap-highlight-color: transparent
}
button {
color: inherit;
font: inherit
}
img {
max-width: 100%;
display: block
}
h1,
h2,
h3,
p,
figure {
margin: 0
}
main {
isolation: isolate
}
.section-dark {
background: var(--ink);
color: var(--white);
position: relative
}
.section-light {
background: var(--ivory);
color: var(--ink);
position: relative
}
.content-grid,
.site-header {
width: min(982px, 100vw - 48px);
margin-inline: auto
}
.eyebrow {
color: var(--gold);
font-family: var(--mono);
letter-spacing: .19em;
text-transform: uppercase;
font-size: 10px;
font-weight: 500;
line-height: 1.3
}
.arrow-button {
width: max-content;
min-height: 36px;
color: var(--ink);
background: var(--white);
font-family: var(--serif);
white-space: nowrap;
border: 1px solid #ffffff40;
border-radius: 999px;
align-items: center;
gap: 7px;
padding: 4px 14px 4px 4px;
font-size: 14px;
transition: color .26s, background .26s, border-color .26s, transform .26s cubic-bezier(.22, 1, .36, 1);
display: inline-flex
}
.arrow-button__icon {
width: 27px;
height: 27px;
color: var(--white);
background: var(--ink);
font-family: var(--sans);
border-radius: 50%;
place-items: center;
font-size: 16px;
line-height: 1;
transition: transform .26s cubic-bezier(.22, 1, .36, 1), color .26s, background .26s;
display: grid
}
.arrow-button:hover,
.arrow-button:focus-visible {
color: var(--white);
background: var(--gold-deep);
border-color: var(--gold-deep);
outline: none;
transform: translateY(-2px)
}
.arrow-button:hover .arrow-button__icon,
.arrow-button:focus-visible .arrow-button__icon {
transform: translate(3px)rotate(-20deg)
}
.arrow-button--inverse {
color: var(--white);
background: 0 0;
border-color: #ffffff3d
}
.arrow-button--inverse .arrow-button__icon {
color: var(--ink);
background: var(--white)
}
.site-header {
z-index: 80;
color: var(--white);
font-family: var(--serif);
grid-template-columns: 1.05fr 1fr .95fr .75fr auto;
align-items: start;
gap: 28px;
padding-top: 12px;
font-size: 14px;
display: grid;
position: relative
}
.wordmark {
width: 102px;
padding-top: 3px
}
.wordmark span {
color: inherit;
font-family: var(--serif);
letter-spacing: -.055em;
font-size: 30px;
font-weight: 400;
line-height: .9;
display: block
}
.header-meta {
flex-direction: column;
line-height: 1.25;
display: flex
}
.header-meta span {
color: #7f7a71
}
.header-meta strong {
font-weight: 400
}
.header-nav {
flex-direction: column;
line-height: 1.38;
display: flex
}
.header-nav a {
width: max-content;
transition: color .2s, transform .2s
}
.header-nav a:hover,
.header-nav a:focus-visible {
color: var(--gold);
outline: none;
transform: translate(3px)
}
.site-header>.arrow-button {
margin-top: -2px
}
.site-header--light {
color: var(--ink)
}
.site-header--light .arrow-button--inverse,
.site-header--light .arrow-button {
color: var(--ink);
background: 0 0;
border-color: #13110d38
}
.site-header--light .arrow-button__icon {
color: var(--ivory);
background: var(--ink)
}
.hero {
background: radial-gradient(circle at 50% 38%, #1b1812 0, var(--ink) 40%, #0e0d0a 100%);
min-height: max(680px, 100svh);
position: relative;
overflow: hidden
}
.hero-carousel {
z-index: 1;
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
width: 100%;
height: 360px;
animation: .7s .15s both heroFade;
position: absolute;
top: 80px;
left: 0;
overflow: hidden
}
.hero-carousel:active {
cursor: grabbing
}
.hero-carousel__stage {
perspective: 900px;
width: 100%;
height: 250px;
transform-style: preserve-3d;
position: absolute;
top: 70px;
left: 0
}
.hero-carousel__card {
transform-origin: 50%;
will-change: transform, filter, opacity;
background: #211f1a;
border-radius: 7px;
width: 270px;
height: 174px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
box-shadow: 0 20px 55px #0000004d
}
.hero-carousel__card img {
object-fit: cover;
pointer-events: none;
width: 100%;
height: 100%
}
.hero-carousel__vignette {
pointer-events: none;
background: linear-gradient(90deg, #0f0e0bb3, #0000 13% 87%, #0f0e0bb3), linear-gradient(#0f0e0b1a, #0000 25%, #0f0e0b8c);
position: absolute;
inset: 0
}
.hero__portrait {
z-index: 3;
object-fit: cover;
object-position: 50% 42%;
filter: grayscale(.45)sepia(.2)brightness(.72)contrast(1.08);
width: clamp(390px, 34.5vw, 495px);
max-width: none;
height: clamp(520px, 53vw, 675px);
transform: translate3d(-50%, var(--parallax, 0px), 0);
pointer-events: none;
will-change: transform;
animation: .8s cubic-bezier(.22, 1, .36, 1) .45s both portraitEnter;
position: absolute;
top: 62px;
left: 50%;
-webkit-mask-image: radial-gradient(48% 53% at 50% 42%, #000 52%, #0000 100%);
mask-image: radial-gradient(48% 53% at 50% 42%, #000 52%, #0000 100%)
}
.hero__content {
z-index: 5;
pointer-events: none;
grid-template-columns: 245px 330px 1fr;
display: grid;
position: absolute;
bottom: 72px;
left: 50%;
transform: translate(-50%)
}
.hero__headline {
pointer-events: auto;
grid-column: 2
}
.hero__headline h1 {
font-family: var(--serif);
letter-spacing: -.04em;
margin: 14px 0 20px;
font-size: clamp(48px, 4.15vw, 59px);
font-weight: 400;
line-height: .94
}
.hero__headline h1 span {
animation: .85s cubic-bezier(.22, 1, .36, 1) both lineReveal;
display: block;
overflow: hidden
}
.hero__headline h1 span:first-child {
animation-delay: .65s
}
.hero__headline h1 span:last-child {
animation-delay: .76s
}
.hero__headline>.eyebrow,
.hero__headline>.arrow-button {
animation: .65s .87s both heroCopy
}
.hero__quote {
color: #beb8ae;
width: 235px;
font-family: var(--serif);
pointer-events: auto;
grid-column: 3;
align-self: end;
margin-bottom: -6px;
margin-left: -2px;
font-size: 15px;
line-height: 1.03;
animation: .65s .99s both heroCopy
}
.artist-signature {
width: max-content;
color: var(--ivory);
letter-spacing: -.05em;
margin-top: 12px;
font-family: Brush Script MT, Segoe Script, cursive;
font-size: 35px;
font-weight: 400;
line-height: .8;
display: block;
transform: rotate(-7deg)
}
@keyframes heroFade {
0% {
opacity: 0;
filter: brightness(.35)
}
to {
opacity: 1;
filter: brightness()
}
}
@keyframes portraitEnter {
0% {
opacity: 0;
transform: translate3d(-50%, calc(var(--parallax, 0px) + 18px), 0)
}
to {
opacity: 1;
transform: translate3d(-50%, var(--parallax, 0px), 0)
}
}
@keyframes lineReveal {
0% {
clip-path: inset(0 100% 0 0);
transform: translateY(14px)
}
to {
clip-path: inset(0);
transform: translateY(0)
}
}
@keyframes heroCopy {
0% {
opacity: 0;
transform: translateY(10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.js-ready [data-reveal] {
opacity: 0;
filter: brightness(.45);
transition: opacity .8s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s), transform .9s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s), filter .9s ease var(--delay, 0s);
transform: translateY(32px)
}
.js-ready [data-reveal].is-visible {
opacity: 1;
filter: brightness();
transform: translateY(0)
}
[data-parallax] {
will-change: transform
}
.featured {
padding: 120px 0 150px
}
.featured__intro {
grid-template-columns: 44% 56%;
align-items: center;
min-height: 430px;
display: grid
}
.featured__intro>h2 {
font-family: var(--serif);
letter-spacing: -.04em;
align-self: start;
margin-top: 70px;
font-size: 42px;
font-weight: 400;
line-height: .93
}
.featured__statement {
color: var(--gold-deep);
font-family: var(--serif);
letter-spacing: -.055em;
flex-direction: column;
font-size: clamp(98px, 9.3vw, 132px);
line-height: .72;
display: flex;
position: relative
}
.featured__statement span:last-of-type {
align-self: flex-end;
margin-top: 36px
}
.featured__statement p {
color: #aaa49b;
width: 180px;
font-family: var(--sans);
letter-spacing: 0;
font-size: 12px;
line-height: 1.4;
position: absolute;
top: 9px;
right: 0
}
.projects {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 80px 14px;
display: grid
}
.project-card:nth-child(2n) {
margin-top: 68px
}
.project-card__image {
background: #211e18;
display: block;
position: relative;
overflow: hidden
}
.project-card--wide .project-card__image {
aspect-ratio: 1.48
}
.project-card--tall .project-card__image {
aspect-ratio: .9
}
.project-card__image img {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .5s
}
.project-card__index,
.project-card__view {
z-index: 2;
color: var(--ink);
background: var(--white);
font-family: var(--mono);
letter-spacing: .1em;
opacity: 0;
padding: 7px 10px;
font-size: 9px;
transition: opacity .3s, transform .5s cubic-bezier(.22, 1, .36, 1);
position: absolute;
top: 15px
}
.project-card__index {
left: 15px;
transform: translateY(-8px)
}
.project-card__view {
right: 15px;
transform: translateY(8px)
}
.project-card__image:hover img {
filter: saturate(.78)contrast(1.03);
transform: scale(1.045)
}
.project-card__image:hover .project-card__index,
.project-card__image:hover .project-card__view,
.project-card__image:focus-visible .project-card__index,
.project-card__image:focus-visible .project-card__view {
opacity: 1;
transform: translateY(0)
}
.project-card>.eyebrow {
color: #6e695f;
margin-top: 15px
}
.project-card h3 {
font-family: var(--serif);
letter-spacing: -.035em;
margin-top: 9px;
font-size: 27px;
font-weight: 400;
line-height: 1.05
}
.all-works {
border-top: 1px solid var(--line);
color: #716d66;
font-family: var(--serif);
letter-spacing: -.055em;
grid-template-columns: 1fr auto;
align-items: center;
margin-top: 150px;
padding: 32px 0 18px;
font-size: clamp(74px, 8.5vw, 112px);
line-height: 1;
transition: color .35s;
display: grid;
position: relative
}
.all-works:hover {
color: var(--white)
}
.all-works img {
object-fit: cover;
opacity: .7;
width: 225px;
height: 136px;
transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .3s;
position: absolute;
right: 70px;
transform: rotate(2deg)
}
.all-works:hover img {
opacity: 1;
transform: rotate(-3deg)translateY(-8px)
}
.impact {
min-height: 950px;
overflow: hidden
}
.impact__grid {
opacity: .24;
background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
background-size: 34px 34px;
position: absolute;
inset: 17% 20%;
-webkit-mask-image: radial-gradient(circle, #000 20%, #0000 72%);
mask-image: radial-gradient(circle, #000 20%, #0000 72%)
}
.impact__card {
z-index: 3;
width: 325px;
height: 476px;
color: var(--white);
background: var(--ink);
transform-origin: 50%;
padding: 30px 27px 24px;
display: grid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)scaleX(3.4)
}
.js-ready .impact__card[data-reveal] {
filter: none
}
.js-ready .impact__card.is-visible {
animation: 1.1s cubic-bezier(.22, 1, .36, 1) forwards impactContract
}
@keyframes impactContract {
0% {
opacity: 1;
transform: translate(-50%, -50%)scaleX(3.4)
}
to {
opacity: 1;
transform: translate(-50%, -50%)scaleX(1)
}
}
.impact__card h2 {
font-family: var(--serif);
letter-spacing: -.04em;
align-self: start;
margin-top: 16px;
font-size: 42px;
font-weight: 400;
line-height: .92
}
.impact__card .artist-signature {
color: var(--gold);
align-self: end;
margin: 0;
font-size: 38px
}
.impact__card>p {
text-align: right;
place-self: end;
width: 150px;
margin-top: -47px;
font-size: 12px;
line-height: 1.35
}
.impact__stat {
z-index: 2;
color: var(--gold);
text-align: center;
flex-direction: column;
align-items: center;
display: flex;
position: absolute
}
.impact__stat strong {
font-family: var(--serif);
letter-spacing: -.045em;
font-size: 65px;
font-weight: 400;
line-height: .9
}
.impact__stat span {
font-family: var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
margin-top: 14px;
font-size: 9px;
line-height: 1.45
}
.impact__stat--one {
top: 20%;
left: calc(50% - 320px)
}
.impact__stat--two {
opacity: .34;
top: 53%;
left: calc(50% - 360px)
}
.impact__stat--three {
opacity: .2;
bottom: 18%;
right: calc(50% - 365px)
}
.services {
padding: 0 0 130px
}
.services>.site-header {
margin-bottom: 65px
}
.services__heading {
grid-template-columns: 1fr 1fr;
align-items: end;
margin-bottom: 60px;
display: grid
}
.services__heading h2,
.process__heading h2,
.pricing__heading h2,
.testimonials__heading h2,
.faq__heading h2 {
font-family: var(--serif);
letter-spacing: -.05em;
margin-top: 12px;
font-size: clamp(47px, 5vw, 66px);
font-weight: 400;
line-height: .94
}
.services__heading>p {
color: #817b72;
justify-self: end;
width: 310px;
font-size: 12px;
line-height: 1.45
}
.services__body {
grid-template-columns: 324px 1fr;
gap: 40px;
display: grid
}
.services__visual {
background: #ddd4c7;
border: 1px solid #13110d29;
height: 435px;
position: relative;
box-shadow: 0 10px 30px #13110d14
}
.services__visual img {
object-fit: cover;
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .45s, transform .7s cubic-bezier(.22, 1, .36, 1);
position: absolute;
inset: 0;
transform: scale(1.04)
}
.services__visual img.is-active {
opacity: 1;
transform: scale(1)
}
.service-item {
border-bottom: 1px solid var(--line-dark)
}
.service-item>button {
width: 100%;
font-family: var(--serif);
text-align: left;
cursor: pointer;
background: 0 0;
border: 0;
justify-content: space-between;
align-items: center;
padding: 20px 2px;
font-size: 28px;
display: flex
}
.service-item>button span:last-child {
font-family: var(--sans);
font-size: 21px
}
.service-item__panel {
color: #b3ada3;
background: var(--ink);
grid-template-rows: 0fr;
transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1), padding .42s cubic-bezier(.22, 1, .36, 1);
display: grid
}
.service-item__panel>ul {
min-height: 0;
margin: 0;
overflow: hidden
}
.service-item.is-open .service-item__panel {
grid-template-rows: 1fr;
padding: 5px 22px 24px
}
.service-item.is-open>button {
color: var(--white);
background: var(--ink);
padding-inline: 20px
}
.service-item ul {
padding-left: 16px;
font-size: 13px;
line-height: 1.85
}
.process {
padding: 130px 0 120px
}
.process__heading {
margin-bottom: 100px
}
.process__heading h2 {
max-width: 700px
}
.process-step {
border-top: 1px solid var(--line);
grid-template-columns: 1fr 470px;
align-items: center;
gap: 55px;
min-height: 540px;
display: grid
}
.process-step--reverse .process-step__copy {
order: 2
}
.process-step__copy {
grid-template-columns: 130px 1fr;
align-items: start;
display: grid
}
.process-step__number {
color: #494942;
font-family: var(--serif);
letter-spacing: -.07em;
grid-row: span 2;
font-size: 106px;
line-height: .8
}
.process-step h3 {
font-family: var(--serif);
letter-spacing: -.04em;
font-size: 39px;
font-weight: 400;
line-height: .95
}
.process-step p {
color: #8f8b83;
max-width: 300px;
margin-top: 32px;
font-size: 12px;
line-height: 1.45
}
.process-step figure {
height: 272px;
transform: translateY(var(--parallax, 0px));
overflow: hidden
}
.process-step figure img {
object-fit: cover;
width: 100%;
height: 118%
}
.pricing {
padding: 110px 0 90px
}
.pricing__heading {
min-height: 460px
}
.pricing__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
width: min(813px, 100vw - 48px);
display: grid
}
.price-card {
outline-offset: -10px;
background: var(--paper);
border: 1px solid #13110d1f;
outline: 1px solid #13110d1c;
flex-direction: column;
min-height: 432px;
padding: 27px 30px 24px;
display: flex;
box-shadow: 0 7px 16px #13110d14
}
.price-card--dark {
color: var(--white);
background: var(--ink);
outline-color: #ffffff26
}
.price-card__top {
border-bottom: 1px solid #7f756742;
grid-template-columns: 120px 1fr;
align-items: start;
padding-bottom: 20px;
display: grid
}
.price-card h3 {
font-family: var(--serif);
letter-spacing: -.035em;
font-size: 28px;
font-weight: 400;
line-height: .9
}
.price-card__top p {
color: #7f786f;
font-size: 11px;
line-height: 1.35
}
.price-card--dark .price-card__top p {
color: #c2bdb5
}
.price-card ul {
flex: 1;
margin: 23px 0 20px;
padding: 0;
font-size: 12px;
line-height: 2;
list-style: none
}
.price-card li:before {
color: var(--gold);
content: "•";
margin-right: 8px
}
.price-card__footer {
border-top: 1px solid #7f756742;
justify-content: space-between;
align-items: end;
padding-top: 18px;
display: flex
}
.price-card__footer>div {
flex-direction: column;
display: flex
}
.price-card__footer>div>span {
color: var(--gold);
font-family: var(--mono);
letter-spacing: .18em;
font-size: 9px
}
.price-card__footer strong {
font-family: var(--serif);
letter-spacing: -.04em;
font-size: 43px;
font-weight: 400
}
.price-card__footer small {
color: #978f85;
font-family: var(--serif);
font-size: 12px;
font-weight: 400
}
.price-card:not(.price-card--dark) .arrow-button--inverse {
color: var(--ink);
border-color: #13110d3d
}
.price-card:not(.price-card--dark) .arrow-button--inverse .arrow-button__icon {
color: var(--white);
background: var(--ink)
}
.testimonials {
padding: 120px 0 135px;
overflow: hidden
}
.testimonials__heading {
justify-content: space-between;
align-items: end;
margin-bottom: 80px;
display: flex
}
.testimonials__count {
color: var(--gold);
text-align: center;
flex-direction: column;
align-items: center;
display: flex
}
.testimonials__count strong {
font-family: var(--serif);
font-size: 68px;
font-weight: 400;
line-height: 1
}
.testimonials__count span {
font-family: var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
margin-top: 9px;
font-size: 9px;
line-height: 1.5
}
.testimonial-track {
gap: 14px;
width: min(1180px, 100vw - 24px);
margin-inline: auto;
padding-left: max(0px, 50vw - 491px);
display: flex
}
.testimonial-card {
color: #e2ded5;
background: #24231e;
flex-direction: column;
justify-content: space-between;
min-width: 315px;
min-height: 300px;
padding: 26px;
display: flex
}
.testimonial-card:nth-child(2) {
transform: translateY(34px)
}
.testimonial-card p {
font-family: var(--serif);
letter-spacing: -.025em;
font-size: 26px;
line-height: 1.02
}
.testimonial-card>div {
color: #8f8a82;
align-items: center;
gap: 12px;
font-size: 11px;
display: flex
}
.testimonial-card img {
object-fit: cover;
filter: grayscale();
border-radius: 50%;
width: 30px;
height: 30px
}
.archive {
background-image: radial-gradient(#97896f33 .6px, #0000 .6px);
background-size: 10px 10px;
padding: 120px 0 100px
}
.archive__heading {
grid-template-columns: 1fr 1fr;
min-height: 410px;
display: grid;
position: relative
}
.archive__heading>h2 {
font-family: var(--serif);
letter-spacing: -.045em;
font-size: 47px;
font-weight: 400;
line-height: .92
}
.archive__heading>div {
color: #b1a078;
font-family: var(--serif);
text-align: center;
align-content: center;
display: grid
}
.archive__heading>div span {
font-size: clamp(78px, 9vw, 118px);
line-height: .7
}
.archive__heading>div strong {
color: #b1a07833;
margin-left: 100px;
font-size: clamp(78px, 9vw, 118px);
font-weight: 400;
line-height: .8
}
.archive__heading>div p {
color: #827c72;
width: 220px;
font-family: var(--sans);
margin: 28px auto 0;
font-size: 11px;
line-height: 1.45
}
.archive__folder {
clip-path: polygon(0 0, 18% 0, 21% 28px, 100% 28px, 100% 100%, 0 100%);
background: #eae2d4;
padding: 62px;
position: relative
}
.archive__label {
font-family: var(--mono);
letter-spacing: .15em;
font-size: 9px;
position: absolute;
top: 12px;
left: 16px
}
.archive__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: 25px 18px;
display: grid
}
.archive-item:nth-child(3n+2) {
margin-top: 52px
}
.archive-item:nth-child(3n) {
margin-top: 8px
}
.archive-item>div {
aspect-ratio: 1.42;
border: 2px solid var(--paper);
background: #d9d0c2;
overflow: hidden
}
.archive-item--tall>div {
aspect-ratio: .75
}
.archive-item img {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .4s
}
.archive-item:hover img {
filter: contrast(1.05)saturate(.82);
transform: scale(1.055)rotate(.8deg)
}
.archive-item figcaption {
color: #777168;
justify-content: space-between;
margin-top: 5px;
font-size: 10px;
display: flex
}
.about {
min-height: 700px;
overflow: hidden
}
.about>img {
object-fit: cover;
filter: grayscale()brightness(.5)sepia(.15);
width: 100%;
height: 112%;
transform: translateY(var(--parallax, 0px));
position: absolute;
inset: -6% 0
}
.about__shade {
background: linear-gradient(#0f0e0b1a, #0f0e0bb8);
position: absolute;
inset: 0
}
.about__content {
z-index: 2;
grid-template-columns: 1fr 1fr auto;
align-items: end;
display: grid;
position: absolute;
bottom: 62px;
left: 50%;
transform: translate(-50%)
}
.about__content h2 {
font-family: var(--serif);
font-size: 42px;
font-weight: 400
}
.about__content p {
color: #918d85;
width: 260px;
font-size: 12px;
line-height: 1.4
}
.about__content a {
font-family: var(--serif);
border-bottom: 1px solid #fff6;
padding-bottom: 4px;
font-size: 14px
}
.faq {
padding: 120px 0 135px
}
.faq__layout {
grid-template-columns: 39% 61%;
gap: 54px;
display: grid
}
.faq__heading>div {
border-top: 1px solid var(--line);
color: #878279;
font-family: var(--serif);
justify-content: space-between;
align-items: center;
margin-top: 130px;
padding-top: 12px;
font-size: 14px;
display: flex
}
.faq-item {
border-bottom: 1px solid var(--line)
}
.faq-item>button {
width: 100%;
font-family: var(--serif);
text-align: left;
cursor: pointer;
background: 0 0;
border: 0;
justify-content: space-between;
padding: 24px 0;
font-size: 20px;
display: flex
}
.faq-item>div {
grid-template-rows: 0fr;
transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1), padding .38s;
display: grid
}
.faq-item>div>p {
color: #8f8b83;
min-height: 0;
font-size: 12px;
line-height: 1.5;
overflow: hidden
}
.faq-item.is-open>div {
grid-template-rows: 1fr;
padding: 0 55px 24px 0
}
.footer {
min-height: 760px;
padding: 45px 0 0;
overflow: hidden
}
.footer__inner {
min-height: 715px;
position: relative
}
.footer__availability {
font-family: var(--mono);
letter-spacing: .17em;
font-size: 9px;
position: absolute;
top: 0;
left: 0
}
.footer__availability span {
color: var(--gold);
margin-inline: 7px
}
.footer h2 {
z-index: 1;
color: var(--gold);
font-family: var(--serif);
letter-spacing: -.075em;
white-space: nowrap;
font-size: clamp(116px, 13vw, 184px);
font-weight: 400;
line-height: .92;
position: absolute;
top: 10px;
left: 0
}
.footer__contact {
z-index: 3;
font-family: var(--serif);
flex-direction: column;
display: flex;
position: absolute;
top: 210px;
left: 0
}
.footer__contact span {
color: #625f58;
font-family: var(--mono);
letter-spacing: .15em;
margin-top: 18px;
font-size: 9px
}
.footer__contact a {
margin-top: 6px;
font-size: 19px
}
.footer__portrait {
z-index: 2;
object-fit: cover;
object-position: center;
filter: grayscale(.7)sepia(.18)brightness(.62)contrast(1.12);
width: 440px;
height: 510px;
position: absolute;
bottom: -16px;
left: 215px;
-webkit-mask-image: radial-gradient(48% 52% at 50% 48%, #000 55%, #0000 100%);
mask-image: radial-gradient(48% 52% at 50% 48%, #000 55%, #0000 100%)
}
.footer__cta {
z-index: 4;
position: absolute;
top: 202px;
right: 0
}
.footer__social {
z-index: 4;
font-family: var(--serif);
flex-direction: column;
font-size: 14px;
line-height: 1.45;
display: flex;
position: absolute;
bottom: 42px;
left: 0
}
.footer__nav {
z-index: 4;
flex-direction: column;
width: 375px;
display: flex;
position: absolute;
bottom: 40px;
right: 0
}
.footer__nav>a {
border-top: 1px solid var(--line);
font-family: var(--serif);
padding: 10px 0;
font-size: 28px;
transition: padding .2s, color .2s
}
.footer__nav>a:hover {
color: var(--gold);
padding-left: 10px
}
.footer__nav>div {
border-top: 1px solid var(--line);
color: #625f58;
font-family: var(--mono);
letter-spacing: .13em;
justify-content: space-between;
padding-top: 12px;
font-size: 9px;
display: flex
}
.scroll-meter {
z-index: 190;
mix-blend-mode: difference;
border: 1px solid #7a756c;
border-radius: 999px;
width: 36px;
height: 8px;
padding: 2px;
position: fixed;
bottom: 6px;
left: 50%;
transform: translate(-50%)
}
.scroll-meter span {
border-radius: inherit;
transform-origin: 0;
background: #f0ede5;
width: 100%;
height: 100%;
display: block;
transform: scaleX(0)
}
.template-badge {
z-index: 185;
color: #111;
background: #fff;
border-radius: 14px;
flex-direction: column;
gap: 6px;
width: 132px;
padding: 7px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
display: flex;
position: fixed;
bottom: 12px;
right: 16px;
box-shadow: 0 8px 30px #0003
}
.template-badge a {
background: #fff;
border: 1px solid #ddd;
border-radius: 9px;
justify-content: space-between;
padding: 10px;
display: flex
}
.template-badge a:first-child {
color: #fff;
background: #e33d2c;
border-color: #e33d2c
}
.template-badge a:last-child {
margin: 1px -1px -45px 8px;
padding: 10px 8px;
display: block;
box-shadow: 0 4px 18px #00000026
}
@media (width<=980px) {
.site-header {
grid-template-columns: 1fr auto;
align-items: center
}
.site-header .header-meta,
.site-header .header-nav {
display: none
}
.site-header>.arrow-button {
justify-self: end
}
.hero__content {
grid-template-columns: 23% 43% 1fr
}
.featured__statement p {
width: 220px;
margin-top: 42px;
position: static
}
.process-step,
.process-step--reverse {
grid-template-columns: 1fr 44%;
gap: 30px
}
.process-step--reverse .process-step__copy {
order: 0
}
.process-step__copy {
grid-template-columns: 90px 1fr
}
.process-step__number {
font-size: 78px
}
.process-step h3 {
font-size: 34px
}
.archive__folder {
padding: 52px 28px 36px
}
}
@media (width<=760px) {
.content-grid,
.site-header {
width: calc(100vw - 32px)
}
.template-badge {
display: none
}
.wordmark,
.wordmark span {
width: 90px
}
.site-header>.arrow-button {
min-height: 32px;
font-size: 12px
}
.site-header>.arrow-button .arrow-button__icon {
width: 23px;
height: 23px
}
.hero {
min-height: 760px
}
.hero-carousel {
height: 280px;
top: 75px
}
.hero-carousel__stage {
top: 55px
}
.hero-carousel__card {
width: 200px;
height: 132px
}
.hero__portrait {
width: 365px;
top: 100px
}
.hero__content {
display: block;
bottom: 42px;
transform: translate(-50%)
}
.hero__headline {
width: 100%
}
.hero__headline h1 {
margin-top: 10px;
font-size: 50px
}
.hero__quote {
width: 205px;
margin: 22px 0 0 auto;
font-size: 13px
}
.featured {
padding: 90px 0
}
.featured__intro {
min-height: 470px;
display: block
}
.featured__intro>h2 {
margin-top: 0;
font-size: 35px
}
.featured__statement {
margin-top: 120px;
font-size: 86px
}
.featured__statement span:last-of-type {
margin-top: 28px
}
.featured__statement p {
margin: 45px 0 0 auto
}
.projects {
grid-template-columns: 1fr;
gap: 68px
}
.project-card:nth-child(2n) {
margin-top: 0
}
.project-card h3 {
font-size: 24px
}
.all-works {
margin-top: 90px;
font-size: 61px
}
.all-works img {
width: 140px;
height: 88px;
right: 40px
}
.impact {
min-height: 1080px;
padding: 90px 16px
}
.impact__grid {
inset: 8%
}
.impact__card {
width: calc(100vw - 64px);
max-width: 330px;
top: 47%
}
.js-ready .impact__card.is-visible {
animation-name: impactContractMobile
}
@keyframes impactContractMobile {
0% {
opacity: 0;
transform: translate(-50%, -45%)
}
to {
opacity: 1;
transform: translate(-50%, -50%)
}
}
.impact__stat--one {
top: 8%;
left: 16px
}
.impact__stat--two {
top: auto;
bottom: 7%;
left: 16px
}
.impact__stat--three {
bottom: 7%;
right: 16px
}
.impact__stat strong {
font-size: 48px
}
.services>.site-header {
margin-bottom: 70px
}
.services__heading,
.services__body,
.faq__layout {
grid-template-columns: 1fr
}
.services__heading {
gap: 32px
}
.services__heading h2,
.process__heading h2,
.pricing__heading h2,
.testimonials__heading h2,
.faq__heading h2 {
font-size: 46px
}
.services__heading>p {
justify-self: start;
width: 100%
}
.services__body {
gap: 20px
}
.services__visual {
height: 390px
}
.service-item>button {
font-size: 24px
}
.process {
padding-top: 100px
}
.process-step,
.process-step--reverse {
grid-template-columns: 1fr;
gap: 42px;
padding: 62px 0
}
.process-step__copy {
grid-template-columns: 78px 1fr
}
.process-step__number {
font-size: 65px
}
.process-step h3 {
font-size: 34px
}
.process-step figure {
width: 100%;
height: 230px
}
.pricing__heading {
min-height: 390px
}
.pricing__cards {
grid-template-columns: 1fr;
width: calc(100vw - 32px)
}
.price-card {
min-height: 470px
}
.testimonials__heading {
display: block
}
.testimonials__count {
text-align: left;
align-items: flex-start;
margin-top: 50px
}
.testimonial-track {
scroll-snap-type: x mandatory;
padding: 0 16px 30px;
overflow-x: auto
}
.testimonial-card {
scroll-snap-align: start;
min-width: 82vw
}
.archive__heading {
grid-template-columns: 1fr;
min-height: 540px
}
.archive__heading>div {
margin-top: 80px
}
.archive__grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.archive-item:nth-child(3n+2),
.archive-item:nth-child(3n) {
margin-top: 0
}
.archive-item:nth-child(2n) {
margin-top: 42px
}
.about {
min-height: 650px
}
.about__content {
flex-direction: column;
align-items: flex-start;
gap: 20px;
display: flex
}
.faq__layout {
gap: 70px
}
.faq__heading>div {
margin-top: 70px
}
.footer {
min-height: 870px
}
.footer__inner {
min-height: 825px
}
.footer h2 {
white-space: normal;
font-size: 25vw;
top: 38px
}
.footer__contact {
top: 230px
}
.footer__portrait {
width: 360px;
bottom: 140px;
left: 50%;
transform: translate(-50%)
}
.footer__cta {
top: 310px
}
.footer__social {
bottom: 34px
}
.footer__nav {
width: 48%;
bottom: 30px;
right: 0
}
.footer__nav>a {
font-size: 20px
}
.footer__nav>div {
display: none
}
}
@media (width<=430px) {
.hero__portrait {
width: 340px
}
.hero__headline h1 {
font-size: 45px
}
.featured__statement {
font-size: 72px
}
.impact__stat--three {
display: none
}
.price-card {
padding-inline: 22px
}
.price-card__top {
grid-template-columns: 105px 1fr
}
.price-card__footer {
flex-direction: column;
align-items: flex-start;
gap: 16px
}
.archive__folder {
padding-inline: 16px
}
.archive__grid {
gap: 16px 9px
}
.footer__contact a {
font-size: 16px
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
*,
:before,
:after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important
}
[data-parallax] {
transform: none !important
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false
}
@property --tw-rotate-y {
syntax: "*";
inherits: false
}
@property --tw-rotate-z {
syntax: "*";
inherits: false
}
@property --tw-skew-x {
syntax: "*";
inherits: false
}
@property --tw-skew-y {
syntax: "*";
inherits: false
}
@property --tw-blur {
syntax: "*";
inherits: false
}
@property --tw-brightness {
syntax: "*";
inherits: false
}
@property --tw-contrast {
syntax: "*";
inherits: false
}
@property --tw-grayscale {
syntax: "*";
inherits: false
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false
}
@property --tw-invert {
syntax: "*";
inherits: false
}
@property --tw-opacity {
syntax: "*";
inherits: false
}
@property --tw-saturate {
syntax: "*";
inherits: false
}
@property --tw-sepia {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%
}
@property --tw-drop-shadow-size {
syntax: "*";
inherits: false
}
:root {
--font-geist-sans: Arial, Helvetica, sans-serif;
--font-geist-mono: Menlo, Consolas, monospace
}

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0px}.top-0{top:0px}.z-50{z-index:50}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-12{margin-top:3rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-16{height:4rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.max-w-7xl{max-width:80rem}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1))}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/776a9685-3d5f-49b6-ab4c-40f84b7ed3ef_3840w\.webp\)\]{background-image:url("assets/121478e196acdd96_776a9685-3d5f-49b6-ab4c-40f84b.webp")}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-white\/5{--tw-gradient-from:rgb(255 255 255 / 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:center}.object-cover{object-fit:cover}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.pl-4{padding-left:1rem}.pr-4{padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[11\.25rem\]{font-size:11.25rem}.text-sm\/6{font-size:0.875rem;line-height:1.5rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-none{line-height:1}.tracking-tight{letter-spacing:-0.025em}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-white\/80{color:rgb(255 255 255 / 0.8)}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231 / var(--tw-text-opacity, 1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-white\/10{--tw-ring-color:rgb(255 255 255 / 0.1)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:inline-flex{display:inline-flex}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-\[13\.5rem\]{font-size:13.5rem}}@media (min-width: 768px){.md\:mt-16{margin-top:4rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:text-\[24rem\]{font-size:24rem}}@media (min-width: 1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-\[30rem\]{font-size:30rem}}@media (min-width: 1280px){.xl\:text-\[36rem\]{font-size:36rem}}