@font-face {
font-family: "ITC Avant Garde";
src: url("assets/fonts/ITCAvantGardeStdBk.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ITC Avant Garde";
src: url("assets/fonts/ITCAvantGardeStdMd.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ITC Avant Garde";
src: url("assets/fonts/ITCAvantGardeStdDemi.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ITC Avant Garde";
src: url("assets/fonts/ITCAvantGardeStdBold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--ink: #2b2b2b;
--paper: #f4f4f5;
--white: #f7f7f7;
--ember: #e24a2a;
--ember-deep: #c73c20;
--mute: #5c5c5c;
--line: #e4e4e6;
--hair: rgb(255 255 255 / 0.16);
--radius: 28px;
--pill: 999px;
--page: 1100px;
--page-x: max(50px, calc((100vw - var(--page)) / 2));
--page-work: 1600px;
--page-work-x: max(50px, calc((100vw - var(--page-work)) / 2));
--nav-h: 108px;
--nav-surface: #fff;
--gutter: var(--page-x);
--section-y: 150px;
--manifest-gap: 150px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--measure: 38rem;
--focus: #e24a2a;
--title-track: 0;
--z-skip: 80;
--z-spot: 50;
--z-nav: 40;
--z-top: 30;
--font: "ITC Avant Garde", ui-sans-serif, system-ui, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html.is-nav-open,
html.is-nav-open body {
overflow: hidden;
}
html {
overflow-x: clip;
scroll-behavior: auto;
scrollbar-color: var(--ember) var(--ink);
}
body {
margin: 0;
min-width: 0;
background: var(--ink);
color: var(--ink);
font-family: var(--font);
font-size: 20px;
font-weight: 400;
line-height: 1.6;
overflow-x: clip;
padding-top: var(--nav-h);
}
h1,
h2,
h3 {
font-weight: 600;
letter-spacing: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
}
button,
input,
textarea {
font: inherit;
}
::selection {
background: color-mix(in srgb, var(--ember) 32%, var(--paper));
color: var(--ink);
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.skip {
position: absolute;
left: 0.75rem;
top: -4rem;
z-index: var(--z-skip);
background: var(--ember);
color: #fff;
padding: 0.5rem 0.9rem;
border-radius: var(--pill);
}
.skip:focus {
top: 0.75rem;
}
.kicker {
margin: 0 0 1.05rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.62);
}
.kicker--on-dark {
color: rgb(255 255 255 / 0.62);
}
.rule-label {
margin: 0 0 1.05rem;
color: var(--ember);
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rule-label::before {
content: "";
width: 1.75rem;
height: 1px;
background: currentColor;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 44px;
padding: 0.7rem 1.35rem;
border: 0;
border-radius: var(--pill);
text-decoration: none;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn .ico {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
transform-origin: center;
transition: transform 0.35s var(--ease);
}
.btn:hover .ico,
.btn:focus-visible .ico {
transform: scale(1.14) rotate(-28deg);
}
.btn:active .ico {
transform: scale(1.06) rotate(-18deg);
}
@media (prefers-reduced-motion: reduce) {
.btn .ico {
transition: none;
}
.btn:hover .ico,
.btn:focus-visible .ico,
.btn:active .ico {
transform: none;
}
}
.btn:active {
transform: scale(0.98);
}
.btn--ember {
background: var(--ember);
color: #fff;
}
.btn--ember:hover {
background: var(--ember-deep);
}
.btn--ghost {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.85);
}
.btn--ghost:hover {
background: rgb(255 255 255 / 0.08);
}
.btn--ink {
background: var(--ink);
color: #fff;
}
.btn--ink:hover {
background: #1a1a1a;
}
.btn--cat {
background: var(--cat, var(--ember));
color: #fff;
}
.btn--cat:hover {
filter: brightness(0.92);
}
.btn--lg {
min-height: 0;
padding: 25px 50px 20px;
font-size: 20px;
font-weight: 500;
}
.btn--go {
--btn-orb: 2.85rem;
--btn-gap: 0.22rem;
--btn-cut: calc(var(--btn-orb) / 2 + var(--btn-gap));
--btn-inset: calc(var(--btn-orb) * 0.32);
display: inline-flex;
align-items: center;
gap: 0;
padding: 0;
min-height: 0;
background: transparent;
box-shadow: none;
color: inherit;
}
.btn--go:hover {
background: transparent;
}
.btn--go .btn__label {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: var(--btn-orb);
min-height: var(--btn-orb);
padding: 0 calc(var(--btn-orb) * 0.82 + 0.9rem) 0 1.45rem;
border-radius: 999px;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
-webkit-mask-image: radial-gradient(
circle at calc(100% - var(--btn-inset)) 50%,
transparent var(--btn-cut),
#fff calc(var(--btn-cut) + 0.6px)
);
mask-image: radial-gradient(
circle at calc(100% - var(--btn-inset)) 50%,
transparent var(--btn-cut),
#fff calc(var(--btn-cut) + 0.6px)
);
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
.btn--go .btn__text {
position: relative;
z-index: 1;
}
.btn--go .btn__orb {
position: relative;
z-index: 1;
display: grid;
place-items: center;
flex: 0 0 auto;
width: var(--btn-orb);
height: var(--btn-orb);
margin-left: calc(-0.5 * var(--btn-orb) - var(--btn-inset));
border-radius: 50%;
}
.btn--go .btn__orb .ico {
width: 1.1rem;
height: 1.1rem;
}
.btn--go.btn--lg {
--btn-orb: 3.55rem;
--btn-gap: 0.26rem;
font-size: 20px;
font-weight: 700;
}
.btn--go.btn--lg .btn__label {
padding: 0 calc(var(--btn-orb) * 0.82 + 1.15rem) 0 2rem;
}
.btn--go.btn--lg .btn__orb .ico {
width: 1.3rem;
height: 1.3rem;
}
.btn--go.btn--ember .btn__label {
background: var(--ember);
color: #fff;
}
.btn--go.btn--ember .btn__orb {
background: var(--ember);
color: #fff;
}
.btn--go.btn--ember:hover .btn__label,
.btn--go.btn--ember:hover .btn__orb {
background: var(--ember-deep);
}
.btn--go.btn--ghost .btn__label {
background: var(--ink);
color: var(--ink);
box-shadow: none;
}
.btn--go.btn--ghost .btn__label::before {
content: "";
position: absolute;
inset: 1.5px;
z-index: 0;
border-radius: 999px;
background: #fff;
pointer-events: none;
--_b: 1.5px;
--_cut: calc(var(--btn-cut) + var(--_b));
--_in: calc(var(--btn-inset) - var(--_b));
-webkit-mask-image: radial-gradient(
circle at calc(100% - var(--_in)) 50%,
transparent var(--_cut),
#fff calc(var(--_cut) + 0.55px)
);
mask-image: radial-gradient(
circle at calc(100% - var(--_in)) 50%,
transparent var(--_cut),
#fff calc(var(--_cut) + 0.55px)
);
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
.btn--go.btn--ghost .btn__orb {
background: var(--ink);
color: #fff;
}
.btn--go.btn--ghost:hover .btn__label::before {
background: #f3f3f3;
}
.btn--go.btn--ghost:hover .btn__orb {
background: #1a1a1a;
}
.btn--go.btn--ink .btn__label {
background: var(--ink);
color: #fff;
}
.btn--go.btn--ink .btn__orb {
background: var(--ink);
color: #fff;
}
.btn--go.btn--ink:hover .btn__label,
.btn--go.btn--ink:hover .btn__orb {
background: #1a1a1a;
}
.btn--go.btn--cat .btn__label {
background: var(--cat, var(--ember));
color: #fff;
}
.btn--go.btn--cat .btn__orb {
background: var(--cat, var(--ember));
color: #fff;
}
.btn--go.btn--cat:hover .btn__label,
.btn--go.btn--cat:hover .btn__orb {
filter: brightness(0.92);
}
.btn--go.btn--outline .btn__label {
background: #fff;
color: #fff;
box-shadow: none;
}
.btn--go.btn--outline .btn__label::before {
content: "";
position: absolute;
inset: 1.5px;
z-index: 0;
border-radius: 999px;
background: var(--ink);
pointer-events: none;
--_b: 1.5px;
--_cut: calc(var(--btn-cut) + var(--_b));
--_in: calc(var(--btn-inset) - var(--_b));
-webkit-mask-image: radial-gradient(
circle at calc(100% - var(--_in)) 50%,
transparent var(--_cut),
#fff calc(var(--_cut) + 0.55px)
);
mask-image: radial-gradient(
circle at calc(100% - var(--_in)) 50%,
transparent var(--_cut),
#fff calc(var(--_cut) + 0.55px)
);
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
.btn--go.btn--outline .btn__orb {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.85);
}
.btn--go.btn--outline:hover .btn__label::before {
background: #1a1a1a;
}
.btn--go.btn--outline:hover .btn__orb {
background: rgb(255 255 255 / 0.08);
}
.logo-sgm {
display: inline-flex;
align-items: center;
line-height: 0;
position: relative;
}
.logo-sgm__img {
display: block;
width: auto;
height: 2.15rem;
object-fit: contain;
object-position: left center;
}
.logo-sgm__img--dark {
display: none;
}
.logo-sgm--on-ink .logo-sgm__img--light,
.nav.is-on-ink .logo-sgm__img--light {
display: none;
}
.logo-sgm--on-ink .logo-sgm__img--dark,
.nav.is-on-ink .logo-sgm__img--dark {
display: block;
}
.logo-sgm--mark .logo-sgm__img {
height: 2.35rem;
aspect-ratio: 1;
}
.logo-sgm--wordmark .logo-sgm__img {
height: 2rem;
}
.page-transition {
--liquid-ink: var(--ink);
--liquid-accent: var(--ember);
position: fixed;
inset: 0;
z-index: 2147483000;
overflow: hidden;
contain: strict;
isolation: isolate;
pointer-events: none;
visibility: hidden;
touch-action: none;
user-select: none;
color: var(--paper);
}
.page-transition[data-phase="covering"],
.page-transition[data-phase="covered"],
.page-transition[data-phase="revealing"],
html.is-iris-pending .page-transition {
visibility: visible;
pointer-events: auto;
}
html.is-iris-pending .page-transition [data-iris-cut="edge"] {
transform: rotate(-16deg) scale(0);
}
html.is-iris-pending .page-transition [data-iris-cut="ink"] {
transform: rotate(-16deg) scale(0);
}
.page-transition__surface {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.page-transition__accent {
fill: var(--liquid-accent);
}
.page-transition__ink {
fill: var(--liquid-ink);
}
@media (max-width: 779px), (pointer: coarse), (prefers-reduced-motion: reduce) {
.page-transition,
html.is-iris-pending .page-transition {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
.nav {
position: fixed;
top: 0.7rem;
left: 0;
right: 0;
z-index: var(--z-nav);
width: 100%;
min-height: 0;
padding: 0;
background: transparent;
pointer-events: none;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
}
.nav.is-away {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.nav {
transition: opacity 0.2s ease, visibility 0.2s ease;
}
}
.nav__cont {
--nav-x: clamp(1.1rem, 2.8vw, 2.75rem);
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0;
width: 100%;
min-height: 5.35rem;
padding-left: 0;
padding-right: var(--nav-x);
margin-inline: 0;
pointer-events: none;
}
.nav__cont::before {
content: "";
position: absolute;
top: -0.7rem;
left: -50vw;
width: 150vw;
height: 0.7rem;
background: var(--nav-surface);
pointer-events: none;
}
.nav__logo {
position: relative;
z-index: 2;
display: flex;
flex: 0 0 auto;
flex-direction: column;
pointer-events: auto;
}
.nav__logo > .nav__baffo {
position: absolute;
top: 100%;
left: 0;
display: block;
width: 34px;
height: auto;
transform: scale(1.01);
pointer-events: none;
}
.nav__logo > .nav__baffo:last-of-type {
top: 0;
left: 100%;
}
.nav__baffo path {
fill: var(--nav-surface);
}
.nav__brand {
display: flex;
align-items: center;
min-height: 5.35rem;
padding: 0.95rem 1.85rem 0.95rem 1.35rem;
border-radius: 0 0 34px 0;
background: var(--nav-surface);
color: var(--ink);
text-decoration: none;
}
.nav__brand .logo-sgm--full .logo-sgm__img {
height: 2.95rem;
max-width: min(11.5rem, 42vw);
}
.nav__menu {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
height: 5.35rem;
margin-left: -2.9rem;
padding-left: 2.9rem;
gap: 0.85rem;
pointer-events: none;
}
.nav__pill {
position: relative;
display: flex;
align-items: center;
flex: 0 1 auto;
width: auto;
min-width: 0;
min-height: 3.95rem;
margin: 0 0 0 0.7rem;
padding: 0.35rem 1.65rem;
border-radius: 999px;
background: transparent;
border: 1px solid rgb(255 255 255 / 0.55);
box-shadow: 0 0 15px rgb(0 0 0 / 0.08);
pointer-events: auto;
}
.nav__pill::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: rgb(255 255 255 / 0.94);
border: 1px solid rgb(255 255 255 / 0.55);
backdrop-filter: saturate(1.5) blur(40px);
-webkit-backdrop-filter: saturate(1.5) blur(40px);
pointer-events: none;
}
.nav__pill:has(.nav__drop.is-open)::before,
.nav__pill:has(.nav__drop:hover)::before,
.nav__pill:has(.nav__drop:focus-within)::before {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #fff;
}
.nav__cta {
flex: 0 0 auto;
margin-left: auto;
--btn-orb: 3.05rem;
--btn-gap: 0.22rem;
font-size: 0.98rem;
font-weight: 600;
pointer-events: auto;
}
.nav__cta.btn--go .btn__label {
padding: 0 calc(var(--btn-orb) * 0.78 + 0.7rem) 0 1.25rem;
}
.nav__cta.btn--go .btn__orb {
background: var(--ink);
color: #fff;
transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.nav__cta.btn--go:hover .btn__label {
background: var(--ember-deep);
}
.nav__cta.btn--go:hover .btn__orb {
background: #1a1a1a;
}
.nav__cta.btn--go .btn__orb .ico {
width: 1.05rem;
height: 1.05rem;
}
.nav.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.nav__links {
position: relative;
z-index: 1;
left: auto;
top: auto;
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 1 auto;
transform: none;
gap: 1.7rem;
margin: 0;
padding: 0;
white-space: nowrap;
min-width: 0;
}
.nav__links > a,
.nav__drop-head > a {
color: rgb(43 43 43 / 0.78);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
padding: 0.4rem 0.7rem;
border-radius: 999px;
transition:
color 0.25s var(--ease),
background-color 0.25s var(--ease);
}
.nav__links > a:hover,
.nav__drop-head > a:hover {
color: var(--ink);
}
.nav__links > a[aria-current="page"],
.nav__drop-head > a[aria-current="page"] {
color: var(--ink);
font-weight: 600;
background: rgb(43 43 43 / 0.09);
}
.nav__drop {
position: relative;
display: flex;
align-items: center;
flex: 0 0 auto;
}
.nav__drop::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 1rem;
pointer-events: none;
}
.nav__drop.is-open::after,
.nav__drop:hover::after,
.nav__drop:focus-within::after {
pointer-events: auto;
}
.nav__drop-head {
display: inline-flex;
align-items: center;
gap: 0.05rem;
}
.nav__drop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: rgb(43 43 43 / 0.72);
cursor: pointer;
transition:
color 0.25s var(--ease),
background-color 0.25s var(--ease),
transform 0.25s var(--ease);
}
.nav__drop-btn:hover,
.nav__drop-btn:focus-visible {
color: var(--ink);
background: rgb(43 43 43 / 0.08);
}
.nav__drop.is-open .nav__drop-btn,
.nav__drop:hover .nav__drop-btn {
color: var(--ink);
}
.nav__caret {
display: block;
width: 0.72rem;
height: 0.72rem;
transition: transform 0.25s var(--ease);
}
.nav__drop.is-open .nav__caret {
transform: rotate(180deg);
}
.nav__panel {
position: absolute;
top: calc(100% + 0.55rem);
left: 0;
z-index: 6;
display: flex;
flex-direction: column;
min-width: 30rem;
max-width: min(38rem, 86vw);
max-height: min(70vh, 32rem);
overflow: visible;
padding: 0;
border-radius: 1.15rem;
background: transparent;
border: 1px solid rgb(255 255 255 / 0.65);
box-shadow: 0 18px 40px rgb(0 0 0 / 0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s var(--ease),
visibility 0.2s;
}
.nav__panel-glass {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: rgb(255 255 255 / 0.94);
backdrop-filter: saturate(1.5) blur(40px);
-webkit-backdrop-filter: saturate(1.5) blur(40px);
pointer-events: none;
}
.nav__panel-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.85rem;
max-height: min(70vh, 32rem);
overflow-x: hidden;
overflow-y: auto;
padding: 0.85rem 0.85rem 0.95rem;
}
.nav__drop.is-open .nav__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav__drop.is-open .nav__panel[hidden] {
display: flex !important;
}
@media (min-width: 1200px) {
.nav__drop:hover .nav__panel,
.nav__drop:focus-within .nav__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav__drop:hover .nav__panel[hidden],
.nav__drop:focus-within .nav__panel[hidden] {
display: flex !important;
}
}
.nav__panel-cols {
--nav-panel-rows: 5;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(var(--nav-panel-rows), auto);
grid-auto-flow: column;
gap: 0.2rem 1rem;
align-items: stretch;
}
.nav__panel-cols a {
display: flex;
align-items: center;
min-height: 2.85rem;
height: 100%;
white-space: normal;
line-height: 1.25;
padding: 0.5rem 0.7rem;
border-radius: 0.75rem;
color: rgb(43 43 43 / 0.82);
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0;
text-decoration: none;
background: transparent;
}
.nav__panel-cols a:hover,
.nav__panel-cols a:focus-visible {
color: var(--ink);
background: rgb(43 43 43 / 0.07);
}
.nav__panel-cols a[aria-current="page"] {
color: var(--ink);
font-weight: 600;
background: rgb(43 43 43 / 0.09);
}
.nav__panel-foot {
display: flex;
justify-content: center;
padding-top: 0.15rem;
}
.nav__panel-cta {
--btn-orb: 2.45rem;
--btn-gap: 0.2rem;
font-size: 0.92rem;
font-weight: 600;
}
.nav__panel-cta.btn--go .btn__label {
padding: 0 calc(var(--btn-orb) * 0.78 + 0.65rem) 0 1.1rem;
}
.nav__panel-cta.btn--go .btn__orb .ico {
width: 1rem;
height: 1rem;
}
@media (prefers-reduced-motion: reduce) {
.nav__panel,
.nav__caret,
.nav__drop-btn,
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
transition: none;
}
}
.nav__toggle {
display: none;
width: 44px;
height: 44px;
border: 0;
background: transparent;
position: relative;
flex: 0 0 auto;
margin-left: auto;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
position: absolute;
width: 18px;
height: 2px;
background: var(--ink);
content: "";
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.25s var(--ease),
opacity 0.25s var(--ease);
}
.nav__toggle span {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav__toggle span::before,
.nav__toggle span::after {
left: 0;
transform-origin: 50% 50%;
}
.nav__toggle span::before {
top: -6px;
}
.nav__toggle span::after {
top: 6px;
}
.nav.is-open .nav__toggle span {
background: transparent;
}
.nav.is-open .nav__toggle span::before {
top: 0;
transform: rotate(45deg);
}
.nav.is-open .nav__toggle span::after {
top: 0;
transform: rotate(-45deg);
}
.hero {
min-height: calc(100dvh - var(--nav-h));
background: var(--ink);
color: #fff;
padding: 4.5rem var(--page-x) 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
}
.hero__trail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.hero > :not(.hero__trail) {
position: relative;
z-index: 2;
}
.hero h1 {
margin: 0;
max-width: var(--page);
width: 100%;
font-size: 64px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.22;
}
.hero__title {
position: relative;
isolation: isolate;
width: min(100%, var(--page));
margin: 0 auto;
padding: 0.35em 0.55em 0.55em;
overflow: visible;
}
.hero__title h1 {
position: relative;
z-index: 2;
max-width: none;
}
.hero__ink {
position: absolute;
pointer-events: none;
z-index: 1;
}
.hero__ink svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.hero__ink--star {
z-index: 3;
width: clamp(2.1rem, 5.5vw, 3.6rem);
}
.hero__ink--star-a {
top: -0.15em;
right: 6%;
}
.hero__ink--star-a svg {
transform: rotate(12deg);
}
.hero__ink--star-b {
bottom: -0.35em;
left: 18%;
width: clamp(1.5rem, 3.8vw, 2.4rem);
}
.hero__ink--star-b svg {
transform: rotate(-18deg);
}
.hero__ink--squiggle {
right: -3%;
top: 8%;
width: clamp(4rem, 14vw, 8rem);
z-index: 3;
}
.hero__ink--squiggle svg {
height: auto;
aspect-ratio: 365 / 365;
transform: rotate(6deg);
}
.hero__ink--curve {
left: -4%;
top: -8%;
width: clamp(4.5rem, 16vw, 9.5rem);
height: auto;
z-index: 0;
}
.hero__ink--curve svg {
height: auto;
aspect-ratio: 255 / 410;
transform: rotate(-8deg);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.hero__actions .btn--lg:not(.btn--go) {
padding: 20px 28px 18px;
min-width: 15.75rem;
}
.hero__actions .btn--go.btn--lg {
min-width: 0;
}
.section-lead {
position: relative;
isolation: isolate;
}
.section-lead--center {
text-align: center;
}
.section-lead__title {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: top;
}
.section-lead--center .section-lead__title {
margin-inline: auto;
}
.section-ink {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.72;
}
.section-lead__title > :not(.section-ink),
.section-lead--years > :not(.section-ink) {
position: relative;
z-index: 1;
}
.section-ink__mark {
position: absolute;
display: block;
pointer-events: none;
}
.section-ink__mark svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.section-ink__mark--star {
width: clamp(1.15rem, 2.4vw, 1.85rem);
}
.section-ink__mark--curve {
width: clamp(2.2rem, 5vw, 3.6rem);
opacity: 0.85;
}
.section-ink__mark--squiggle {
width: clamp(2.4rem, 5.5vw, 3.8rem);
opacity: 0.85;
}
.section-ink__mark--scribble {
width: min(68%, 14rem);
height: 0.7rem;
left: 50%;
bottom: -0.15em;
transform: translateX(-50%);
}
.section-ink__mark--scribble svg {
height: 100%;
}
.section-ink--services .section-ink__mark--star {
top: -0.2em;
right: -0.55em;
}
.section-ink--services .section-ink__mark--star svg {
transform: rotate(14deg);
}
.services .section-lead {
margin-bottom: 0;
}
.services .section-lead .rule-label {
margin-bottom: 2rem;
}
.services .section-lead h2 {
position: relative;
z-index: 1;
margin: 0 0 90px;
}
.services.is-falling .section-ink {
opacity: 0;
transition: opacity 0.2s ease;
}
.section-ink--who {
inset: auto;
top: 0;
right: 0;
width: 0;
height: 0;
overflow: visible;
}
.section-ink--who .section-ink__mark--star {
top: -0.15em;
left: 0.15em;
}
.who .section-lead__title {
display: block;
}
.who .section-lead h2 {
margin: 35px 0 40px;
}
.section-ink--reviews {
inset: auto;
left: 50%;
top: 0;
width: 0;
height: 0;
overflow: visible;
}
.section-ink--reviews .section-ink__mark--squiggle {
top: -1.1rem;
left: 2.2rem;
}
.section-ink--reviews .section-ink__mark--squiggle svg {
transform: rotate(8deg);
}
.section-ink--reviews .section-ink__mark--star {
top: -0.85rem;
left: -2.6rem;
width: 1.25rem;
}
.section-ink--reviews .section-ink__mark--star svg {
transform: rotate(-16deg);
}
.reviews .section-lead {
margin-bottom: 1.25rem;
}
.section-ink--faq .section-ink__mark--curve {
left: -1.6rem;
top: -0.55em;
z-index: 0;
}
.section-ink--faq .section-ink__mark--curve svg {
transform: rotate(-12deg);
}
.section-ink--faq .section-ink__mark--star {
right: -0.4em;
top: -0.15em;
}
.section-ink--faq .section-ink__mark--star svg {
transform: rotate(10deg);
}
.faq .section-lead__title {
display: block;
margin-bottom: 1.5rem;
}
.faq .section-lead h2 {
margin: 0;
}
.section-lead--years {
position: relative;
}
.section-ink--years .section-ink__mark--star {
top: 0.15em;
right: -0.35em;
width: clamp(1.4rem, 3vw, 2.1rem);
}
.section-ink--years .section-ink__mark--star svg {
transform: rotate(-12deg);
}
.section-ink--years .section-ink__mark--scribble {
left: 0;
bottom: -0.35rem;
width: min(100%, 11rem);
transform: none;
}
.home-blog .section-lead h2 {
margin: 0;
}
.section-ink--blog .section-ink__mark--star {
top: 0.05em;
right: -0.45em;
width: clamp(1.2rem, 2.4vw, 1.75rem);
}
.section-ink--blog .section-ink__mark--star svg {
transform: rotate(8deg);
}
@media (max-width: 720px) {
.section-ink__mark--curve,
.section-ink__mark--squiggle {
display: none;
}
.section-ink--services .section-ink__mark--star {
right: 0;
}
.section-ink--faq .section-ink__mark--star {
right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.section-ink__mark {
opacity: 1;
}
}
.plates-wrap {
position: relative;
align-self: stretch;
flex: 0 0 auto;
width: 100vw;
max-width: none;
min-width: 100vw;
margin-top: auto;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
padding: 1.5rem 0 0.5rem;
cursor: grab;
touch-action: pan-x pan-y;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.plates-wrap::before,
.plates-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: min(7vw, 4.5rem);
z-index: 30;
pointer-events: none;
}
.plates-wrap::before {
left: 0;
background: linear-gradient(90deg, #fff, transparent);
}
.plates-wrap::after {
right: 0;
background: linear-gradient(270deg, #fff, transparent);
}
body:not(.theme-light) .plates-wrap::before {
background: linear-gradient(90deg, var(--ink), transparent);
}
body:not(.theme-light) .plates-wrap::after {
background: linear-gradient(270deg, var(--ink), transparent);
}
.plates-wrap.is-held {
cursor: grabbing;
}
.plates-stage {
position: relative;
z-index: 2;
width: 100%;
height: clamp(18rem, 38vw, 26rem);
margin: 0 auto;
}
.plates-track {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.plate {
position: absolute;
left: 50%;
top: auto;
bottom: 22%;
width: min(31rem, 72vw);
height: auto;
aspect-ratio: 31 / 18.25;
margin: 0;
overflow: visible;
transform-origin: 50% 100%;
will-change: transform, opacity;
cursor: grab;
-webkit-user-drag: none;
}
.plate.is-focus {
cursor: grab;
}
.plate.is-focus .plate__media {
box-shadow: 0 28px 48px rgb(0 0 0 / 0.2);
}
.plate__media {
position: relative;
width: 100%;
height: 100%;
border-radius: var(--radius);
overflow: hidden;
background: var(--ink);
transform-origin: 50% 100%;
}
.plate__media img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.plate__media::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 50%;
background: linear-gradient(
to top,
var(--ink) 0%,
rgb(43 43 43 / 0.9) 6%,
rgb(43 43 43 / 0.68) 18%,
rgb(43 43 43 / 0.42) 36%,
rgb(43 43 43 / 0.22) 55%,
rgb(43 43 43 / 0.08) 75%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
.plate span {
position: absolute;
left: 0;
right: 0;
bottom: 2.4rem;
z-index: 2;
width: max-content;
margin-inline: auto;
padding: 0.62rem 1.45rem;
border-radius: var(--pill);
border: 1.5px solid var(--cat, #fff);
color: #fff;
font-size: 1.12rem;
font-weight: 600;
background: #2b2b2b;
white-space: nowrap;
}
.manifest {
background: var(--ink);
color: #fff;
padding: var(--manifest-gap) var(--page-x) 180px;
text-align: center;
}
.manifest__copy {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 0.34em;
row-gap: 0.04em;
margin: 0 auto;
max-width: 64rem;
font-size: clamp(1.45rem, 2.6vw, 2.35rem);
font-weight: 600;
letter-spacing: 0;
line-height: 1.22;
}
.manifest__word {
opacity: 0.68;
}
.manifest em {
display: contents;
font-style: italic;
}
.manifest em .manifest__word {
font-style: italic;
font-weight: 500;
padding-bottom: 0.12em;
}
.clients {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.15rem;
width: auto;
margin: var(--manifest-gap) calc(-1 * var(--page-x)) 0;
padding: 0 2rem;
overflow: visible;
text-align: center;
color: #fff;
}
.clients__label {
margin: 0;
color: rgb(255 255 255 / 0.78);
font-size: 20px;
font-weight: 400;
letter-spacing: 0.01em;
white-space: nowrap;
text-align: center;
}
.clients ul {
list-style: none;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 1.35rem 1.75rem;
margin: 0;
padding: 0;
}
.clients li {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.clients__logo {
display: grid;
place-items: center;
width: 4.75rem;
height: 4.75rem;
padding: 0.55rem;
border-radius: 1.05rem;
border: 1.5px solid rgb(255 255 255 / 0.28);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(226 74 42 / 0.12);
overflow: hidden;
}
.clients img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.page-work {
padding-top: 4.5rem;
}
.page-work h1 {
margin: 0 0 0.7rem;
font-size: clamp(2.4rem, 4.5vw, 4rem);
letter-spacing: var(--title-track);
}
.page-work__lead {
margin: 0;
max-width: 46ch;
color: var(--mute);
}
.projects {
background: #fff;
padding: var(--section-y) var(--page-work-x);
}
.projects .rule-label {
margin-bottom: 2rem;
}
.projects__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 35px;
}
.projects__head .btn:not(.btn--go) {
min-height: 0;
padding: 25px 40px 20px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.04em;
}
.projects__head .btn--go {
font-size: 1.05rem;
font-weight: 600;
}
.projects h2,
.services h2,
.faq h2,
.years h2,
.seats h2,
.home-blog h2,
.quote h2 {
margin: 0;
font-size: 48px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.43;
}
.projects__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 35px;
row-gap: 90px;
}
.showcase,
.works-showcase-section {
--showcase-paper: #fbfbfa;
--showcase-ink: #1f1f1f;
position: relative;
width: 100%;
background: var(--showcase-paper);
color: var(--showcase-ink);
overflow: visible;
}
.showcase-pin-wrapper {
position: relative;
width: 100vw;
max-width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px 60px;
box-sizing: border-box;
background: var(--showcase-paper);
color: var(--showcase-ink);
}
.showcase-pin-wrapper.is-spot,
.showcase-pin-wrapper.is-spot * {
cursor: none;
}
.reel-viewport {
position: absolute;
inset: 0;
z-index: 1;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: 40px 60px 1rem;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.reel-world {
display: flex;
align-items: center;
gap: 1.5rem;
width: max-content;
height: 100%;
}
.reel-work {
position: relative;
flex: 0 0 auto;
margin: 0;
width: min(72vw, 42rem);
aspect-ratio: 16 / 9;
scroll-snap-align: center;
}
.reel-work__link {
display: block;
position: relative;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
box-shadow:
0 25px 50px -12px rgb(0 0 0 / 0.15),
0 12px 24px -10px rgb(0 0 0 / 0.1);
}
.reel-work__frame {
display: block;
position: relative;
width: 100%;
height: 100%;
border-radius: 18px;
overflow: hidden;
background: #e8e8e6;
}
.reel-work img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.reel-work__caption {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding-top: 1.1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.reel-work__caption-title {
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}
.reel-work__caption-meta {
gap: 0.55rem 0.85rem;
}
.reel-gap-sketch {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--reel-card-w, 320px) * 0.28);
pointer-events: none;
will-change: transform, opacity;
}
.reel-gap-sketch svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.reel-gap-sketch path {
transition: stroke-dashoffset 0.05s linear;
}
.showcase:not(.is-reel) .reel-gap-sketch {
display: none;
}
.showcase.is-reel .reel-viewport {
overflow: hidden;
perspective: var(--reel-perspective, 1400px);
perspective-origin: 50% 50%;
touch-action: pan-y;
padding: 0;
}
.showcase.is-reel .reel-world {
display: block;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.showcase.is-reel .reel-work {
position: absolute;
top: 50%;
left: 50%;
flex: none;
width: var(--reel-card-w, 46vw);
scroll-snap-align: none;
will-change: transform, opacity;
backface-visibility: hidden;
transform: translate(-50%, -50%);
}
.showcase.is-reel .reel-work__link {
box-shadow:
0 30px 70px -20px rgb(0 0 0 / 0.3),
0 14px 30px -14px rgb(0 0 0 / 0.18);
}
[data-showcase-bend] {
position: absolute;
inset: 0;
z-index: 600;
pointer-events: none;
}
.works-ui-overlay {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.works-ui-overlay a,
.works-ui-overlay button {
pointer-events: auto;
}
.ui-top,
.showcase__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
}
.section-tag,
.showcase .rule-label {
display: block;
margin-bottom: 1rem;
color: #595959;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.showcase h2 {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
}
.all-link,
.showcase__explore {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
color: var(--showcase-ink);
text-decoration: none;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
border-bottom: 1.5px solid transparent;
transition: color 0.25s ease, border-color 0.25s ease;
}
.showcase__explore .ico,
.all-link .ico {
width: 1.05rem;
height: 1.05rem;
transition: transform 0.3s ease;
}
.showcase__explore:hover,
.all-link:hover {
color: var(--ember);
border-bottom-color: var(--ember);
}
.showcase__explore:hover .ico,
.all-link:hover .ico {
transform: translate(2px, -2px);
}
.ui-bottom,
.showcase__foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem 2rem;
}
.ui-bottom__main,
.showcase__foot-main {
width: min(36rem, 100%);
}
.pagination-box,
.showcase__pager {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.35rem;
max-width: 12rem;
}
.num-active,
.num-total,
.showcase__count {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
.num-active,
.showcase__count [data-showcase-current] {
color: var(--ember);
font-weight: 700;
}
.num-total {
color: #595959;
}
.progress-track,
.showcase__progress {
position: relative;
height: 2px;
width: 100%;
background: rgb(31 31 31 / 0.12);
border-radius: 999px;
overflow: hidden;
}
.progress-fill,
.showcase__progress-bar {
display: block;
height: 100%;
width: 100%;
background: var(--ember);
border-radius: inherit;
transform: scaleX(0.166);
transform-origin: left center;
}
.meta-box,
.showcase__meta {
min-width: 0;
}
.showcase__meta-line {
overflow: hidden;
}
.showcase__meta-line + .showcase__meta-line {
margin-top: 0.75rem;
}
.showcase__title {
display: inline-flex;
align-items: baseline;
gap: 0.55rem;
margin: 0;
color: inherit;
text-decoration: none;
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: 0;
}
.showcase__title-ico {
display: inline-flex;
color: var(--ember);
transition: transform 0.3s ease;
}
.showcase__title-ico .ico {
width: 1.15em;
height: 1.15em;
}
.showcase__title:hover .showcase__title-ico {
transform: translate(3px, -3px);
}
.tags,
.showcase__meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
}
.badge-ember,
.showcase__cat {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 999px;
border: 1.5px solid var(--ember-deep);
color: var(--ember-deep);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.year,
.showcase__meta-row .year,
.showcase__meta-row time {
font-size: 0.92rem;
font-weight: 500;
color: #575757;
font-variant-numeric: tabular-nums;
}
.showcase__desc {
margin: 0;
max-width: 34rem;
font-size: 1.02rem;
line-height: 1.45;
color: rgb(31 31 31 / 0.72);
}
.scroll-hint,
.showcase__hint {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
margin: 0 0 0.35rem;
text-align: right;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.02em;
color: #595959;
flex-shrink: 0;
}
.showcase__hint-arrow {
color: var(--ember);
animation: showcase-hint-bob 1.8s ease-in-out infinite;
}
.showcase__cursor {
position: fixed;
top: 0;
left: 0;
z-index: 80;
width: 0;
height: 0;
pointer-events: none;
opacity: 0;
will-change: transform, opacity;
transition: opacity 0.22s ease;
}
.showcase__cursor-dot {
display: grid;
place-items: center;
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
background: var(--ember);
color: #fff;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.02em;
transform: translate(-50%, -50%) scale(0.55);
box-shadow: 0 16px 32px rgb(226 74 42 / 0.28);
transition: transform 0.22s ease;
}
.showcase__cursor.is-on {
opacity: 1;
}
.showcase__cursor.is-on .showcase__cursor-dot {
transform: translate(-50%, -50%) scale(1);
}
@keyframes showcase-hint-bob {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.showcase__hint-arrow {
animation: none;
}
.showcase-pin-wrapper {
height: auto;
min-height: 100vh;
min-height: 100dvh;
}
}
body.theme-light .showcase {
background: var(--showcase-paper);
color: var(--showcase-ink);
}
.reviews {
background: var(--ink);
color: #fff;
padding: calc(var(--section-y) + 1.25rem) var(--gutter);
}
.services {
position: relative;
z-index: 1;
overflow: hidden;
background: var(--paper);
color: var(--ink);
padding: var(--section-y) var(--page-work-x);
text-align: center;
}
.services.is-falling {
overflow: visible;
z-index: 1;
}
.services__drain {
position: relative;
}
.services__fall {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 2;
pointer-events: none;
}
.services.is-falling .services__fall {
pointer-events: auto;
cursor: grab;
}
.services.is-falling .services__fall.is-grabbing {
cursor: grabbing;
}
.services__chip {
position: absolute;
margin: 0;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
transform-origin: 50% 50%;
will-change: transform;
cursor: grab;
box-sizing: border-box;
}
.services__chip--pill {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: min(220px, 68vw);
padding: 0.55rem 1rem;
border-radius: 999px;
background: #262626;
border: 1px solid rgb(255 255 255 / 0.15);
color: #f7f7f7;
font-family: "Satoshi", var(--font);
font-size: clamp(0.78rem, 1.2vw, 0.98rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
}
.services__chip--ember {
background: var(--ember);
border-color: rgb(255 255 255 / 0.22);
color: #fff;
}
.services__chip--label {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.services__chip--headline {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-size: 48px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
white-space: nowrap;
text-align: center;
}
.services__chip--num {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ember);
font-size: 22px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.services.is-falling .rule-label,
.services.is-falling h2,
.services.is-falling .acc__n,
.services.is-falling .acc__t,
.services.is-falling .acc__plus {
pointer-events: none;
}
.services.is-falling .services__chip {
pointer-events: auto;
}
.services.is-falling .services__fall.is-grabbing .services__chip {
cursor: grabbing;
}
.services .rule-label {
justify-content: center;
margin-bottom: 2rem;
color: var(--ember);
}
.services h2 {
margin: 0 0 90px;
}
.acc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
column-gap: 80px;
text-align: left;
width: 100%;
max-width: none;
margin: 0;
}
.acc-col {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
}
.acc {
border-bottom: 0;
min-width: 0;
}
.acc + .acc {
border-top: 0;
}
.services .acc {
flex: 1 1 auto;
display: flex;
flex-direction: column;
border-top: 1px solid var(--line);
transition: border-color 0.22s ease;
}
.services .acc-col .acc:last-child {
border-bottom: 1px solid var(--line);
}
.services.is-falling .acc,
.services.is-falling .acc:nth-child(n),
.services.is-falling .acc-col .acc:last-child,
.services.is-falling .acc-col > .acc:nth-last-child(1 of .acc),
.services.is-falling .acc-col:last-child .acc:last-child {
border-top-color: transparent;
border-bottom-color: transparent;
}
.acc__btn {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
padding: 1.4rem 0;
background: transparent;
border: 0;
color: inherit;
text-align: left;
cursor: pointer;
}
.services .acc__btn {
position: relative;
flex: 1 0 auto;
display: flex;
align-items: center;
padding: 42px 80px 38px 100px;
}
.acc__btn--light {
grid-template-columns: 1fr auto;
color: var(--ink);
border-bottom: 0;
}
.acc__n {
font-size: 0.8rem;
color: rgb(255 255 255 / 0.45);
}
.services .acc__n {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 400;
color: var(--cat, var(--ember));
}
.acc__t {
font-size: 1.28rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.services .acc__t {
font-size: 32px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
overflow-wrap: break-word;
}
.acc__plus {
width: 1rem;
height: 1rem;
position: relative;
}
.services .acc__plus {
position: absolute;
right: 12px;
top: 50%;
width: 28px;
height: 28px;
color: var(--ink);
transform: translateY(-55%);
}
.services .acc__plus::before,
.services .acc__plus::after {
opacity: 1;
}
.acc__plus::before,
.acc__plus::after {
content: "";
position: absolute;
background: currentColor;
opacity: 0.55;
}
.acc__plus::before {
left: 0;
top: 50%;
width: 100%;
height: 1.5px;
transform: translateY(-50%);
}
.acc__plus::after {
top: 0;
left: 50%;
width: 1.5px;
height: 100%;
transform: translateX(-50%);
transform-origin: center;
transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.acc.is-open .acc__plus::after {
transform: translateX(-50%) scaleY(0);
opacity: 0;
}
.acc__panel {
padding: 0 0 1.1rem 2.4rem;
color: rgb(255 255 255 / 0.72);
}
.services .acc__panel {
overflow: hidden;
padding: 0 12px 0 100px;
color: var(--mute);
}
.services .acc.is-open .acc__panel {
padding-top: 15px;
}
.services .acc__panel p {
margin: 0;
max-width: 46ch;
color: var(--mute);
}
.services .acc__panel .btn:not(.btn--go) {
margin-top: 1.6rem;
margin-bottom: 3.1rem;
min-height: 0;
padding: 25px 40px 20px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.02em;
}
.services .acc__panel .btn--go {
margin-top: 1.6rem;
margin-bottom: 3.1rem;
font-size: 1.05rem;
font-weight: 600;
max-width: 100%;
}
.acc__panel p {
margin: 0;
max-width: 52ch;
}
.services__all {
margin: 2.5rem auto 0;
font-size: 1.05rem;
font-weight: 600;
}
.who,
.who--funnel-lid {
position: relative;
z-index: 10;
background: #fefefe;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
padding: 0;
box-shadow: none;
}
.who__visual {
display: flex;
justify-content: center;
align-items: center;
align-self: start;
grid-column: 1;
min-height: 0;
padding: 72px clamp(1rem, 2.2vw, 28px);
box-sizing: border-box;
position: sticky;
top: calc(var(--nav-h) + 12px);
height: calc(100vh - var(--nav-h));
max-height: calc(100vh - var(--nav-h));
z-index: 2;
}
.who__frames-slot {
position: relative;
width: 100%;
}
.who__frames-sizer {
width: 100%;
aspect-ratio: 16 / 9;
max-height: calc(100vh - var(--nav-h) - 36px);
pointer-events: none;
visibility: hidden;
}
.who__frames {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
background: #fefefe;
transform-origin: center center;
will-change: transform;
}
.who__frames.is-hero-lift {
z-index: 30;
}
.who.is-frames-parked {
z-index: 1;
}
.who.is-frames-parked .who__visual.is-parked {
position: absolute;
bottom: auto;
max-height: none;
top: auto;
height: auto;
}
.who.is-hero-frames .who__copy {
pointer-events: none;
}
.who__frames-canvas,
.who__frames-poster {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 20px;
}
.who__frames-canvas {
z-index: 1;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.who__frames-canvas.is-ready {
opacity: 1;
}
.who__frames-poster {
z-index: 2;
object-fit: cover;
object-position: center;
transition: opacity 0.35s ease;
}
.who__frames.is-ready .who__frames-poster {
opacity: 0;
pointer-events: none;
}
.who__frames.is-fallback .who__frames-poster {
opacity: 1;
pointer-events: auto;
}
.who__frames.is-fallback .who__frames-canvas {
opacity: 0;
}
.who__frames-progress {
position: absolute;
left: 12%;
right: 12%;
bottom: 1.1rem;
z-index: 3;
height: 2px;
border-radius: 999px;
background: rgb(0 0 0 / 0.12);
overflow: hidden;
pointer-events: none;
}
.who__frames-progress span {
display: block;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
background: var(--ember);
transition: transform 0.15s linear;
}
.who__visual img {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
border-radius: 20px;
}
.who__copy {
grid-column: 2;
width: 83.333%;
justify-self: end;
align-self: start;
padding: 100px max(40px, 4.2vw) 100px 0;
}
.who .rule-label {
margin-bottom: 0;
}
.who h2 {
margin: 35px 0 18px;
font-size: 40px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.25;
}
.who__lede {
margin: 0 0 40px;
max-width: 46ch;
color: var(--mute);
font-size: 1.05rem;
font-weight: 400;
line-height: 1.5;
}
.who .acc {
border-top: 1px solid var(--line);
border-bottom: 0;
}
.who .acc:last-child {
border-bottom: 1px solid var(--line);
}
.who .acc__btn {
padding: 35px 0;
gap: 1.25rem;
}
.who .acc__t {
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
}
.who .acc__plus {
width: 22px;
height: 22px;
color: var(--ink);
}
.who .acc__plus::before,
.who .acc__plus::after {
opacity: 1;
}
.who .acc__panel {
overflow: hidden;
color: var(--mute);
padding: 0 10px 0 0;
}
.who .acc__panel p {
padding: 4px 0 50px;
max-width: 46ch;
}
.who .acc__panel a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.who__cta {
display: inline-flex;
width: 100%;
max-width: 100%;
margin-top: 2.5rem;
}
.who__cta.btn--go .btn__label {
flex: 1 1 auto;
width: 100%;
justify-content: center;
}
.reviews {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 5fr 7fr;
align-items: center;
gap: 1.75rem;
min-height: 34rem;
isolation: isolate;
}
.reviews .rule-label {
color: var(--ember);
margin-bottom: 1.5rem;
}
.reviews__mark {
position: relative;
z-index: 1;
pointer-events: none;
user-select: none;
}
.reviews__mark img {
width: min(100%, 720px);
height: auto;
margin-left: -4%;
}
.reviews__stage {
position: relative;
z-index: 1;
min-width: 0;
padding-right: 2rem;
}
.reviews__viewport {
display: grid;
}
.reviews__slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.reviews__slide.is-on {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.reviews blockquote {
margin: 0;
}
.reviews blockquote p {
margin: 0;
max-width: 34ch;
font-size: clamp(1.25rem, 1.6vw + 0.85rem, 1.75rem);
font-weight: 500;
letter-spacing: 0;
line-height: 1.45;
}
.reviews__who {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 30px;
}
.reviews__logo {
flex: 0 0 auto;
width: 80px;
height: 80px;
border-radius: 20px;
border: 1.5px solid rgb(255 255 255 / 0.28);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(226 74 42 / 0.12);
display: grid;
place-items: center;
overflow: hidden;
padding: 0.55rem;
}
.reviews__logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.reviews__name {
margin: 0;
font-size: 20px;
font-weight: 400;
}
.reviews__dots {
display: flex;
gap: 0.55rem;
margin-top: 1.75rem;
}
.reviews__dots button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 0.28);
cursor: pointer;
}
.reviews__dots button.is-on {
background: #fff;
}
.reviews__cta {
margin-top: 1.75rem;
font-size: 0.95rem;
font-weight: 500;
}
.faq {
background: var(--white);
display: grid;
grid-template-columns: 5fr 7fr;
gap: 3.75rem;
padding: var(--section-y) var(--gutter);
align-items: start;
}
.faq__intro {
position: sticky;
top: calc(var(--nav-h) + 1rem);
}
.faq h2 {
max-width: 15ch;
margin: 0 0 1.75rem;
font-size: clamp(2.65rem, 4.2vw, 3.55rem);
line-height: 1.15;
letter-spacing: -0.02em;
}
.faq .acc {
border-top: 1px solid var(--line);
}
.faq .acc:last-child {
border-bottom: 1px solid var(--line);
}
.faq .acc__btn {
padding: 35px 0;
gap: 1.25rem;
}
.faq .acc__t {
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
}
.faq .acc__plus {
width: 22px;
height: 22px;
color: var(--ember);
}
.faq .acc__plus::before,
.faq .acc__plus::after {
opacity: 1;
}
.faq .acc__panel {
overflow: hidden;
color: var(--mute);
padding: 0;
}
.faq .acc__panel p {
padding: 4px 0 28px;
max-width: 52ch;
}
.years {
background: var(--white);
padding: var(--section-y) var(--gutter);
display: grid;
grid-template-columns: minmax(12rem, 0.35fr) 1fr;
gap: 0.4rem 3rem;
align-items: center;
border-top: 1px solid var(--line);
}
.years__stat {
min-width: 0;
}
.years__n {
margin: 0;
display: flex;
align-items: center;
color: var(--ember);
font-size: 150px;
font-weight: 500;
letter-spacing: 0;
line-height: 150px;
}
.years__num {
display: inline-block;
min-width: 1.35em;
font-variant-numeric: tabular-nums;
transform-origin: left center;
}
.years__n span:not(.years__num) {
font-size: 120px;
line-height: 1;
}
.years__l {
margin: 0;
color: var(--ember);
font-size: 24px;
font-weight: 600;
}
.years__side {
display: grid;
gap: 1.35rem;
justify-items: start;
min-width: 0;
}
.years__copy {
margin: 0;
max-width: 48ch;
color: var(--ink);
font-size: 22px;
line-height: 1.5;
}
.years__cta {
font-size: 0.95rem;
font-weight: 500;
}
.seats {
background: #fff;
padding: 0 var(--gutter) var(--section-y);
}
.seats__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
margin-bottom: 1.5rem;
}
.seats h2 {
margin: 0 0 1.5rem;
}
.seats__head h2 {
margin: 0;
}
.seats__cta {
font-size: 0.95rem;
font-weight: 500;
}
.seats__stage {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 1.25rem;
}
.map__grow {
display: flex;
align-items: stretch;
justify-content: center;
min-width: 0;
min-height: 22rem;
}
.map__frame {
border-radius: var(--radius);
overflow: hidden;
width: 100%;
min-height: 22rem;
background: #ececee;
transform-origin: center center;
will-change: transform;
}
.map {
height: 22rem;
}
.map.is-static {
min-height: 22rem;
}
.map__sheet {
position: relative;
height: 22rem;
background: #ececee;
}
.map__mark {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
border: 0;
background: transparent;
color: var(--ink);
cursor: pointer;
}
.map__mark .pin {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--ember);
margin: 0 auto 0.3rem;
}
.seats__list {
display: grid;
gap: 0.85rem;
}
.seat {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1.2rem 1.3rem;
border-radius: 18px;
background: var(--paper);
}
.seat.is-lit {
background: var(--ink);
color: #fff;
}
.seat h3 {
margin: 0 0 0.3rem;
}
.seat p,
.seat > a:not(.btn) {
margin: 0;
}
.seat > a:not(.btn) {
color: var(--ember);
font-weight: 600;
text-decoration: none;
}
.seat .seat__maps {
margin-top: 0.85rem;
font-size: 0.92rem;
font-weight: 600;
--btn-orb: 2.55rem;
--btn-gap: 0.2rem;
}
.seat .seat__maps .btn__label {
padding: 0 calc(var(--btn-orb) * 0.82 + 0.75rem) 0 1.15rem;
}
.seat .seat__maps .btn__orb .ico {
width: 1rem;
height: 1rem;
}
.maplibregl-ctrl-attrib-button {
min-width: 24px;
min-height: 24px;
}
.close {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: stretch;
height: 700px;
overflow: hidden;
overflow: clip;
contain: paint;
background: var(--ink);
color: #fff;
padding: 0 0 0 var(--gutter);
}
.close__copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 120px 2.5rem 120px 0;
}
@media (min-width: 1800px) {
.close__copy {
padding-left: 8%;
}
}
.close h2 {
margin: 0 0 1.4rem;
max-width: none;
color: #fff;
font-size: clamp(2.35rem, 4.2vw, 3rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.03em;
text-wrap: balance;
}
.close__reel {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
height: 100%;
min-height: 0;
padding: 0 max(20px, calc(var(--gutter) * 0.9)) 0 0;
pointer-events: none;
overflow: hidden;
overflow: clip;
contain: paint;
}
.close__col {
overflow: hidden;
overflow: clip;
contain: paint;
height: 100%;
min-height: 0;
}
.close__track {
display: flex;
flex-direction: column;
gap: 20px;
will-change: transform;
}
.close__track img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 692 / 629;
object-fit: cover;
border-radius: 20px;
}
.close__track--up {
animation: sgm-reel-up 42s linear infinite;
}
.close__track--down {
animation: sgm-reel-down 48s linear infinite;
}
@keyframes sgm-reel-up {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -50%, 0); }
}
@keyframes sgm-reel-down {
from { transform: translate3d(0, -50%, 0); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes sgm-reel-x {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.close__track--up,
.close__track--down {
animation: none;
}
.reviews__slide {
transition: none;
}
}
.foot {
position: relative;
z-index: 2;
overflow: hidden;
background: var(--ink);
color: rgb(255 255 255 / 0.72);
padding: var(--section-y) var(--gutter) 0;
}
.foot__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.35fr 0.85fr 0.85fr 1.15fr;
gap: 2rem 1.75rem;
align-items: start;
}
.foot__brand {
margin: 0 0 0.85rem;
color: #fff;
}
.foot__brand .logo-sgm--full .logo-sgm__img {
height: 2.7rem;
}
.foot__lede {
margin: 0 0 1.15rem;
max-width: 28ch;
color: rgb(255 255 255 / 0.88);
font-size: 1rem;
font-weight: 500;
line-height: 1.45;
}
.foot__title {
margin: 0 0 0.85rem;
color: #fff;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.foot__meta {
margin: 0;
display: grid;
gap: 0.75rem;
}
.foot__meta > div {
display: grid;
gap: 0.15rem;
}
.foot__meta dt {
margin: 0;
color: rgb(255 255 255 / 0.72);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.foot__meta dd {
margin: 0;
color: rgb(255 255 255 / 0.9);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.35;
}
.foot__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.foot__list a {
color: rgb(255 255 255 / 0.78);
font-size: 0.98rem;
font-weight: 500;
text-decoration: none;
}
.foot__list a:hover {
color: #fff;
}
.foot__seat {
margin: 0 0 1.1rem;
}
.foot__place {
margin: 0 0 0.2rem;
color: #fff;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.25;
}
.foot__detail {
margin: 0 0 0.2rem;
color: rgb(255 255 255 / 0.68);
font-size: 0.92rem;
line-height: 1.4;
}
.foot__detail a {
color: rgb(255 255 255 / 0.86);
font-weight: 500;
text-decoration: none;
}
.foot__detail a:hover {
color: #fff;
}
.foot__bar {
position: relative;
z-index: 1;
margin-top: 2.75rem;
padding: 1.1rem 0 1.35rem;
border-top: 1px solid rgb(255 255 255 / 0.12);
}
.foot__copy {
margin: 0;
color: rgb(255 255 255 / 0.55);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.foot h3 {
margin: 0 0 0.5rem;
color: #fff;
font-size: 0.95rem;
}
.foot p {
margin: 0 0 0.35rem;
}
.foot a {
text-decoration: none;
}
.foot a:hover {
color: #fff;
}
.foot__mark {
position: relative;
z-index: 0;
display: block;
margin: 1.5rem 0 0;
padding: 0;
width: 100%;
text-align: center;
font-family: var(--font);
font-size: clamp(5.5rem, 22vw, 17rem);
font-weight: 600;
line-height: 0.82;
letter-spacing: -0.03em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.08);
pointer-events: none;
user-select: none;
transform: translateY(18%);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 22%,
#000 58%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 22%,
#000 58%,
transparent 100%
);
}
.totop {
position: fixed;
right: 1.1rem;
bottom: 1.1rem;
z-index: var(--z-top);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
}
.totop span {
position: absolute;
left: 50%;
top: 54%;
width: 8px;
height: 8px;
border-left: 2px solid var(--ink);
border-top: 2px solid var(--ink);
transform: translate(-50%, -50%) rotate(45deg);
}
.spot {
position: fixed;
top: 0;
left: 0;
z-index: var(--z-spot);
width: 5.75rem;
height: 5.75rem;
display: grid;
place-items: center;
border-radius: 50%;
pointer-events: none;
opacity: 0;
visibility: hidden;
color: #fff;
will-change: transform, opacity;
transition: opacity 0.18s ease, visibility 0.18s ease, background-color 0.18s ease;
}
.spot > * {
grid-area: 1 / 1;
}
.spot.is-on {
opacity: 1;
visibility: visible;
}
.spot.is-drag {
background: var(--ink);
box-shadow:
0 12px 32px rgb(0 0 0 / 0.35),
0 0 0 1.5px rgb(255 255 255 / 0.55);
}
.spot.is-see {
background: var(--ember);
box-shadow: 0 12px 32px rgb(226 74 42 / 0.32);
}
.spot__drag {
display: none;
align-items: center;
gap: 0.2rem;
color: #e8edf6;
}
.spot.is-drag .spot__drag {
display: flex;
}
.spot__drag svg {
display: block;
}
.spot__see {
display: none;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
.spot.is-see .spot__see {
display: block;
}
@media (hover: hover) and (pointer: fine) {
.plates-wrap.is-spot,
.plates-wrap.is-spot *,
[data-spot="see"].is-spot,
[data-spot="see"].is-spot .work {
cursor: none;
}
}
@media (max-width: 900px) {
.spot {
display: none !important;
}
.plates-wrap,
.plates-wrap.is-spot,
.plates-wrap.is-spot * {
cursor: auto;
}
}

@media (max-width: 1440px) {
:root {
--section-y: 110px;
--manifest-gap: 110px;
--nav-h: 118px;
}

.nav__links {
gap: 1.45rem;
}

.nav__brand .logo-sgm--full .logo-sgm__img {
height: 2.7rem;
}

.projects h2,
.years h2,
.seats h2,
.close h2 {
font-size: 42px;
}
}

@media (max-width: 1650px) {
.projects img,
.work img {
height: 480px;
}
}

@media (max-width: 1500px) {
.projects img,
.work img {
height: 430px;
}
}

@media (max-width: 1359px) {
.projects img,
.work img {
height: 380px;
}

.projects__grid {
row-gap: 70px;
}
}

@media (max-width: 1300px) {
.projects img,
.work img {
height: 340px;
}
}

@media (max-width: 1280px) {
:root {
--section-y: 96px;
--manifest-gap: 96px;
--nav-h: 100px;
}

.nav__links {
gap: 1.05rem;
}

.nav__links > a,
.nav__drop-head > a {
font-size: 14px;
}

.projects h2,
.years h2,
.seats h2,
.close h2 {
font-size: 38px;
}

.years__n {
font-size: 120px;
line-height: 120px;
}

.years__n span:not(.years__num) {
font-size: 100px;
}
}

@media (max-width: 1199px) {
.nav__cont {
--nav-x: clamp(0.9rem, 3vw, 1.5rem);
justify-content: flex-start;
min-height: 4.25rem;
}

.nav__logo {
filter: none;
}

.nav__brand {
min-height: 4.25rem;
padding: 0.75rem 1.25rem 0.75rem 1rem;
}

.nav__brand .logo-sgm--full .logo-sgm__img {
height: 2.35rem;
max-width: min(9.5rem, 46vw);
}

.nav__logo > .nav__baffo:last-of-type {
display: none;
}

.nav__logo > .nav__baffo {
width: 26px;
}

.nav__menu {
flex: 0 0 auto;
height: 4.25rem;
margin-left: auto;
padding-left: 0;
}

.nav__pill {
flex: 0 0 auto;
width: 3.75rem;
height: 3.75rem;
min-width: 3.75rem;
min-height: 3.75rem;
margin-left: 0;
padding: 0;
justify-content: center;
z-index: 5;
}

.nav__logo {
z-index: 5;
}

.nav__cta {
display: none;
}

.nav__toggle {
display: grid;
place-items: center;
width: 3.75rem;
height: 3.75rem;
margin: 0;
border-radius: 50%;
z-index: 5;
}

.nav:not(.is-away) {
opacity: 1;
visibility: visible;
}

.nav__pill {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

.nav__pill::before {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #fff;
}

.nav__pill:has(.nav__drop.is-open)::before,
.nav__pill:has(.nav__drop:hover)::before,
.nav__pill:has(.nav__drop:focus-within)::before {
background: #fff;
}

.nav__links {
display: flex;
position: fixed;
inset: 0;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100dvh;
min-height: 100dvh;
max-width: none;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: normal;
gap: 0.15rem;
margin: 0;
padding: calc(var(--nav-h) + 0.5rem) 1.5rem 2rem;
border-radius: 0;
background: #fff;
border: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
z-index: 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(0, 12px, 0);
transition:
opacity 0.45s var(--ease),
transform 0.45s var(--ease),
visibility 0s linear 0.45s;
}

.nav__links > a,
.nav__links > .nav__drop {
opacity: 0;
transform: translate3d(0, 14px, 0);
transition:
opacity 0.4s var(--ease),
transform 0.45s var(--ease);
}

.nav.is-open {
top: 0;
bottom: 0;
height: 100dvh;
min-height: 100dvh;
background: transparent;
}

.nav.is-open .nav__cont,
.nav.is-open .nav__menu,
.nav.is-open .nav__pill {
position: static;
}

.nav.is-open .nav__links {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100dvh;
min-height: 100dvh;
max-width: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition:
opacity 0.45s var(--ease),
transform 0.45s var(--ease),
visibility 0s linear 0s;
}

.nav.is-open .nav__links > a,
.nav.is-open .nav__links > .nav__drop {
opacity: 1;
transform: none;
}

.nav.is-open .nav__links > *:nth-child(1) { transition-delay: 0.06s; }
.nav.is-open .nav__links > *:nth-child(2) { transition-delay: 0.1s; }
.nav.is-open .nav__links > *:nth-child(3) { transition-delay: 0.14s; }
.nav.is-open .nav__links > *:nth-child(4) { transition-delay: 0.18s; }
.nav.is-open .nav__links > *:nth-child(5) { transition-delay: 0.22s; }
.nav.is-open .nav__links > *:nth-child(6) { transition-delay: 0.26s; }

.nav__links > a,
.nav__drop-head > a {
font-size: clamp(1.45rem, 6.4vw, 2rem);
font-weight: 600;
text-align: center;
padding: 0.65rem 1rem;
}

.nav__drop {
width: min(100%, 28rem);
flex-direction: column;
align-items: stretch;
}

.nav__drop-head {
justify-content: center;
gap: 0.15rem;
}

.nav__drop-btn {
width: 2.4rem;
height: 2.4rem;
color: var(--ink);
}

.nav__caret {
width: 0.95rem;
height: 0.95rem;
}

.nav__panel {
position: static;
left: auto;
top: auto;
width: 100%;
max-width: none;
max-height: none;
min-width: 0;
margin-top: 0.35rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
display: none;
}

.nav__panel-glass {
display: none;
}

.nav__panel-body {
max-height: none;
overflow: visible;
padding: 0.55rem 0.35rem 0.75rem;
gap: 1rem;
}

.nav__drop.is-open .nav__panel {
display: flex;
}

.nav__drop:not(.is-open) .nav__panel,
.nav__drop:not(.is-open) .nav__panel[hidden],
.nav__drop:hover:not(.is-open) .nav__panel,
.nav__drop:hover:not(.is-open) .nav__panel[hidden],
.nav__drop:focus-within:not(.is-open) .nav__panel,
.nav__drop:focus-within:not(.is-open) .nav__panel[hidden] {
display: none !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.nav__panel-cols {
gap: 0.15rem 0.75rem;
}

.nav__panel-cols a {
text-align: left;
font-size: clamp(0.95rem, 3.6vw, 1.1rem);
font-weight: 500;
padding: 0.5rem 0.55rem;
min-height: 2.65rem;
}

.nav__panel-foot {
padding-top: 0.25rem;
}

.nav__panel-cta {
font-size: 1rem;
}
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
.nav__links,
.nav.is-open .nav__links,
.nav__links > a,
.nav__links > .nav__drop {
transition: none;
transform: none;
}
}

@media (max-width: 1200px) {
.projects {
padding-top: 100px;
padding-bottom: 100px;
}

.projects img,
.work img {
height: 300px;
}
}

@media (max-width: 1100px) {
.projects img,
.work img {
height: 260px;
}
}

@media (max-width: 1023px) {
.years,
.seats__stage,
.close,
.projects__grid {
grid-template-columns: 1fr;
}

.foot__grid {
grid-template-columns: 1fr 1fr;
gap: 2rem 1.5rem;
}

.foot__col--brand {
grid-column: 1 / -1;
}

.foot__mark {
margin-top: 2.5rem;
font-size: clamp(4.5rem, 28vw, 9rem);
}

.projects img,
.work img {
height: 500px;
}

.projects__grid {
row-gap: 70px;
}

.years__side {
gap: 1.1rem;
}

.years__copy {
font-size: 20px;
}

.seats__head {
flex-direction: column;
align-items: flex-start;
}

.map__grow {
min-height: 18rem;
}

.map__frame,
.map,
.map.is-static,
.map__sheet {
min-height: 18rem;
}

.map {
height: 18rem;
}

.close {
height: auto;
padding: 4rem 0 0;
text-align: center;
}

.close__copy {
padding: 0 var(--gutter) 2rem;
align-items: center;
}

.close__copy h2 {
margin-left: auto;
margin-right: auto;
}

.close__reel {
display: flex;
justify-content: flex-start;
width: 100%;
min-height: 0;
height: auto;
padding: 0 0 2.25rem;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.close__col {
min-height: 0;
height: auto;
flex: 0 0 auto;
}

.close__col:first-child {
display: none;
}

.close__track {
flex-direction: row;
width: max-content;
gap: 16px;
}

.close__track--up,
.close__track--down {
animation-name: sgm-reel-x;
animation-duration: 36s;
}

.close__track img {
width: min(58vw, 14.5rem);
height: auto;
aspect-ratio: 5 / 4;
flex: 0 0 auto;
}

.projects__head {
flex-direction: column;
align-items: flex-start;
}

.years__n {
font-size: 90px;
line-height: 90px;
}

.years__n span:not(.years__num) {
font-size: 72px;
}
}

@media (max-width: 767px) {
:root {
--nav-h: 88px;
}

.foot__grid {
grid-template-columns: 1fr;
}

.years__n {
font-size: 72px;
line-height: 72px;
}

.years__n span:not(.years__num) {
font-size: 56px;
}

.years__l {
font-size: 20px;
}

.years__copy {
font-size: 18px;
}

.years__cta,
.seats__cta {
width: 100%;
max-width: 22rem;
}

.years__cta.btn--go .btn__label,
.seats__cta.btn--go .btn__label {
width: 100%;
justify-content: center;
}

.map__grow {
min-height: 16rem;
}

.map__frame,
.map,
.map.is-static,
.map__sheet {
min-height: 16rem;
}

.map {
height: 16rem;
}

.work h3 {
max-width: none;
}

.nav__toggle {
display: grid;
place-items: center;
}
}

@media (max-width: 690px) {
.projects {
padding-top: 60px;
padding-bottom: 60px;
}

.projects__grid {
row-gap: 50px;
}

.projects__head .btn:not(.btn--go) {
font-size: 18px;
padding: 20px;
}

.work__cap {
margin-top: 30px;
}

.work__tags {
margin-top: 10px;
}

.work__tags li {
font-size: 12px;
padding: 10px 12px 6px;
}
}

@media (max-width: 400px) {
.projects img,
.work img {
height: 180px;
}
}

@media (max-width: 350px) {
.projects img,
.work img {
height: 170px;
}
}

@media (prefers-reduced-motion: reduce) {
.nav {
transition: none;
}
}

@media (max-width: 1440px) {
.hero {
padding-top: 3.25rem;
}

.hero h1 {
font-size: 56px;
}

.plate {
width: min(27rem, 78vw);
}
.services h2,
.faq h2,
.home-blog h2,
.quote h2 {
font-size: 42px;
}

.services__chip--headline {
font-size: 42px;
}

.who h2 {
font-size: 36px;
}

.who__copy {
padding: 80px max(36px, 3.5vw) 80px 0;
}

.who__visual {
padding: 72px clamp(0.85rem, 1.8vw, 22px);
}

.acc-grid {
column-gap: 56px;
}

.services .acc__t {
font-size: 28px;
}

.services .acc__btn {
padding: 36px 68px 32px 84px;
}

.services .acc__panel {
padding-left: 84px;
}

.reviews blockquote p {
font-size: clamp(1.2rem, 1.4vw + 0.8rem, 1.55rem);
}
}

@media (max-width: 1399px) {
.hero h1 {
font-size: 55px;
}
}

@media (max-width: 1359px) {
.clients {
margin-left: 0;
margin-right: 0;
padding: 0;
}
}

@media (max-width: 1280px) {
.hero h1 {
font-size: 52px;
}

.plate {
width: min(24.5rem, 82vw);
}

.plate span {
font-size: 1rem;
padding: 0.5rem 1.2rem;
}
.services h2,
.faq h2,
.home-blog h2,
.quote h2 {
font-size: 38px;
}

.services__chip--headline {
font-size: 38px;
}

.who h2 {
font-size: 32px;
margin: 28px 0 32px;
}

.who__copy {
padding: 72px max(32px, 3vw) 72px 0;
}

.who__visual {
padding: 64px clamp(0.75rem, 1.6vw, 18px);
}

.who .acc__btn {
padding: 28px 0;
}

.who .acc__t {
font-size: 18px;
}

.acc-grid {
column-gap: 40px;
}

.services .acc__t {
font-size: 24px;
}

.services .acc__btn {
padding: 30px 56px 26px 72px;
}

.services .acc__n {
font-size: 18px;
}

.services .acc__plus {
width: 22px;
height: 22px;
}

.services .acc__panel {
padding-left: 72px;
}

.faq {
gap: 2.5rem;
}

.faq h2 {
font-size: clamp(2.35rem, 4vw, 3.1rem);
}

.reviews blockquote p {
font-size: clamp(1.15rem, 2.2vw + 0.7rem, 1.4rem);
}
}

@media (max-width: 1200px) {
.services {
padding-top: 100px;
padding-bottom: 100px;
}
}

@media (max-width: 1100px) {
.hero h1 {
font-size: 50px;
}
}

@media (max-width: 1023px) {
.clients ul {
justify-content: center;
flex-wrap: wrap;
}

.acc-grid,
.who,
.faq,
.quote {
grid-template-columns: 1fr;
}

.who__visual {
position: relative;
top: auto;
grid-column: 1;
height: auto;
max-height: none;
min-height: 0;
padding: var(--section-y) var(--gutter) 0;
z-index: 1;
}

.who {
z-index: 1;
}

.who.is-hero-frames .who__copy {
pointer-events: auto;
}

.who__frames {
width: auto;
height: auto;
max-height: none;
}

.who__frames-sizer {
width: 100%;
max-height: 28rem;
aspect-ratio: 16 / 9;
}

.who__visual img,
.who__frames-poster {
width: 100%;
height: 100%;
aspect-ratio: auto;
max-height: none;
}

.who__copy {
grid-column: 1;
width: 100%;
justify-self: stretch;
padding: 1.25rem var(--gutter) var(--section-y);
}

.who h2 {
font-size: 34px;
}

.acc-grid {
grid-template-columns: 1fr;
column-gap: 0;
align-items: start;
}


.services .acc-col {
min-height: 0;
}

.services .acc {
flex: 0 0 auto;
}

.services .acc--spacer {
display: none;
}

.services .acc-col .acc:last-child {
border-bottom: 0;
}

.services .acc-col:last-child .acc:last-child {
border-bottom: 1px solid var(--line);
}

.services.is-falling .acc-col:last-child .acc:last-child {
border-bottom-color: transparent;
}

.services .acc__btn {
flex: 0 0 auto;
padding: 0.85rem 2.5rem 0.85rem 2.75rem;
}

.services .acc__t {
font-size: 26px;
}

.services .acc__n {
font-size: 20px;
}

.services .acc__panel {
padding-left: 72px;
}

.plate {
width: min(24.5rem, 82vw);
}

.reviews {
grid-template-columns: 1fr;
min-height: 0;
padding-top: 5rem;
padding-bottom: 5rem;
}

.reviews__mark {
display: none;
}

.reviews__stage {
padding-right: 0;
}

.reviews__cta {
width: 100%;
max-width: 22rem;
}

.reviews__cta.btn--go .btn__label {
width: 100%;
justify-content: center;
}

.faq__intro {
position: static;
}

.faq h2 {
max-width: none;
font-size: clamp(2.1rem, 7vw, 2.75rem);
}

.hero h1 {
font-size: 45px;
}

.showcase__head,
.ui-top {
flex-direction: column;
align-items: flex-start;
}

.showcase-pin-wrapper {
padding: 28px 20px;
}

.showcase__foot,
.ui-bottom {
flex-direction: column;
align-items: flex-start;
}

.showcase__foot-main,
.ui-bottom__main {
width: 100%;
}

.showcase__hint,
.scroll-hint {
align-items: flex-start;
text-align: left;
}

.showcase__cursor {
display: none;
}

.reel-viewport {
padding: 28px 20px 1rem;
}

.showcase.is-reel .reel-viewport {
padding: 0;
}

.reel-work {
width: 86vw;
}
}

@media (max-width: 767px) {
.hero {
padding-top: 2rem;
min-height: calc(100dvh - var(--nav-h));
}

.hero h1 {
font-size: 30px;
letter-spacing: 0;
line-height: 1.22;
}

.hero .kicker {
margin-bottom: 0.7rem;
letter-spacing: 0.12em;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}

.hero__actions {
width: 100%;
margin-top: 1.25rem;
}

.who__cta {
width: 100%;
}

.reviews blockquote p {
max-width: none;
font-size: 1.125rem;
line-height: 1.5;
}

.reviews__logo {
width: 56px;
height: 56px;
border-radius: 14px;
padding: 0.4rem;
}

.reviews__name {
font-size: 17px;
}

.faq .acc__t {
font-size: 17px;
}

.faq .acc__btn {
padding: 26px 0;
}

.who__visual {
position: relative;
top: auto;
min-height: 0;
padding: 1.25rem var(--gutter) 0.75rem;
}

.who__frames {
max-height: none;
}

.who__frames-sizer {
max-height: none;
aspect-ratio: 16 / 9;
}

.who__visual img,
.who__frames-poster {
max-height: none;
}

.who h2 {
font-size: 30px;
margin: 22px 0 28px;
}

.who .acc__btn {
padding: 25px 0;
}

.who .acc__t {
font-size: 18px;
}

.who .acc__panel p {
padding-bottom: 32px;
}

.hero__actions .btn,
.who__cta {
width: 100%;
}

.hero__actions .btn--go {
width: 100%;
max-width: 22rem;
}

.hero__actions .btn--go .btn__label {
width: 100%;
justify-content: center;
}

.hero__actions .btn--lg:not(.btn--go) {
min-width: 0;
padding: 18px 26px 16px;
font-size: 1.02rem;
}

.hero__actions .btn--go.btn--lg {
--btn-orb: 3.2rem;
font-size: 1.02rem;
}

.hero__actions .btn--go.btn--lg .btn__label {
padding: 0 calc(var(--btn-orb) * 0.78 + 0.95rem) 0 1.5rem;
}

.plates-wrap {
padding: 1rem 0 0.35rem;
cursor: auto;

touch-action: pan-x pan-y;
}

.plates-stage {
height: clamp(16rem, 62vw, 20rem);
}

.plate {
width: min(20.5rem, 78vw);
bottom: 16%;
}

.services .acc__btn {
flex: 0 0 auto;
padding: 0.75rem 2.35rem 0.75rem 2.6rem;
}

.services .acc__n {
left: 0.35rem;
}

.services .acc__plus {
right: 0.35rem;
}

.services .acc__panel {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}

.services .acc__panel p {
max-width: none;
width: 100%;
padding-inline: 2.6rem;
box-sizing: border-box;
}

.services .acc__panel .btn--go {
align-self: center;
width: max-content;
max-width: calc(100% - 1.5rem);
margin-top: 1.15rem;
margin-bottom: 1.75rem;
--btn-orb: 2.55rem;
font-size: 0.92rem;
}

.services .acc__panel .btn--go .btn__label {
min-width: 0;
padding: 0 calc(var(--btn-orb) * 0.7 + 0.65rem) 0 1.1rem;
}

.manifest__copy {
max-width: none;
}

.clients {
gap: 1.35rem;
}

.clients ul {
gap: 1rem 1.25rem;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}

.clients__logo {
width: 4rem;
height: 4rem;
border-radius: 0.9rem;
padding: 0.45rem;
}
}

@media (max-width: 690px) {
.services {
padding-top: 60px;
padding-bottom: 60px;
}

.services .acc__btn {
flex: 0 0 auto;
padding: 0.7rem 2.35rem;
}

.services .acc__t {
font-size: 20px;
}

.services .acc__n {
font-size: 18px;
left: 0;
}

.services .acc__plus {
right: 0;
width: 18px;
height: 18px;
}

.services .acc__panel {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}

.services .acc__panel p {
max-width: none;
width: 100%;
padding-inline: 2.6rem;
box-sizing: border-box;
}

.services .acc__panel .btn:not(.btn--go) {
font-size: 18px;
padding: 20px 28px 16px;
margin-bottom: 2.2rem;
}

.services .acc__panel .btn--go {
align-self: center;
width: max-content;
max-width: calc(100% - 1.5rem);
margin-top: 1.15rem;
margin-bottom: 1.75rem;
--btn-orb: 2.55rem;
font-size: 0.92rem;
}

.services .acc__panel .btn--go .btn__label {
min-width: 0;
padding: 0 calc(var(--btn-orb) * 0.7 + 0.65rem) 0 1.1rem;
}
}

@media (prefers-reduced-motion: reduce) {
.plates-wrap {
overflow-x: hidden;
touch-action: pan-x pan-y;
}

.plates-stage {
height: auto;
transform: none;
}

.plates-track {
position: relative;
display: flex;
align-items: flex-end;
gap: 1rem;
width: max-content;
max-width: none;
margin: 0 auto;
padding: 0 var(--page-x) 0.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
touch-action: pan-x;
transform: none;
scrollbar-width: none;
}

.plate {
position: relative;
left: auto;
top: auto;
flex: 0 0 auto;
width: min(20.5rem, 78vw);
scroll-snap-align: center;
opacity: 1 !important;
transform: none !important;
}

.manifest__word {
opacity: 1;
}

.manifest em .manifest__word {
opacity: 1;
}
}
body.theme-light {
--nav-h: 104px;
--nav-surface: #fff;
--hair: rgb(43 43 43 / 0.12);
background: var(--nav-surface);
color: var(--ink);
scrollbar-color: var(--ember) var(--nav-surface);
}
body.theme-light .hero {
background: #fff;
color: var(--ink);
}
body.theme-light .hero .kicker {
color: #575757;
}
body.theme-light .hero .btn--ghost {
color: var(--ink);
box-shadow: none;
}
body.theme-light .hero .btn--ghost:hover {
background: transparent;
}
body.theme-light .hero .btn--go.btn--ghost .btn__label {
background: var(--ink);
color: var(--ink);
box-shadow: none;
}
body.theme-light .hero .btn--go.btn--ghost:hover .btn__label::before {
background: #f3f3f3;
}
body.theme-light .plate__media::after {
background: linear-gradient(
to top,
#fff 0%,
rgb(255 255 255 / 0.92) 8%,
rgb(255 255 255 / 0.7) 22%,
rgb(255 255 255 / 0.4) 42%,
rgb(255 255 255 / 0.18) 62%,
transparent 100%
);
}
body.theme-light .manifest {
background: #fff;
color: var(--ink);
}
body.theme-light .clients {
color: var(--ink);
}
body.theme-light .clients__label {
color: rgb(43 43 43 / 0.7);
}
body.theme-light .clients__logo {
border-color: rgb(43 43 43 / 0.12);
}
body.theme-light .projects {
background: #fff;
}
body.theme-light .who,
body.theme-light .who--funnel-lid {
background: #fefefe;
color: var(--ink);
}
body.theme-light .faq,
body.theme-light .years,
body.theme-light .seats,
body.theme-light .quote {
background: #fff;
color: var(--ink);
}
body.theme-light .reviews,
body.theme-light .close,
body.theme-light .foot {
background: var(--ink);
color: #fff;
}
body.theme-light .foot__mark {
color: rgb(255 255 255 / 0.09);
}
body.theme-light .nav {
transition: color 0.35s var(--ease);
}
body.theme-light .nav__cont::before,
body.theme-light .nav__brand,
body.theme-light .nav__baffo path,
body.theme-light .nav__pill,
body.theme-light .nav__links > a,
body.theme-light .nav__drop-head > a,
body.theme-light .nav__drop-btn {
transition:
background-color 0.35s var(--ease),
color 0.35s var(--ease),
fill 0.35s var(--ease),
box-shadow 0.35s var(--ease),
border-color 0.35s var(--ease);
}
body.theme-light .nav__toggle span,
body.theme-light .nav__toggle span::before,
body.theme-light .nav__toggle span::after {
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.25s var(--ease),
opacity 0.25s var(--ease),
color 0.35s var(--ease),
fill 0.35s var(--ease),
box-shadow 0.35s var(--ease),
border-color 0.35s var(--ease);
}
body.theme-light .nav.is-on-ink {
--nav-surface: #2b2b2b;
}
body.theme-light .nav.is-on-ink .nav__pill {
background: transparent;
border-color: rgb(255 255 255 / 0.14);
box-shadow: 0 0 18px rgb(0 0 0 / 0.28);
}
body.theme-light .nav.is-on-ink .nav__pill::before {
background: rgb(43 43 43 / 0.94);
border-color: rgb(255 255 255 / 0.12);
backdrop-filter: saturate(1.35) blur(40px);
-webkit-backdrop-filter: saturate(1.35) blur(40px);
}
body.theme-light .nav.is-on-ink .nav__pill:has(.nav__drop.is-open)::before,
body.theme-light .nav.is-on-ink .nav__pill:has(.nav__drop:hover)::before,
body.theme-light .nav.is-on-ink .nav__pill:has(.nav__drop:focus-within)::before {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #2b2b2b;
}
body.theme-light .nav.is-on-ink .nav__panel {
border-color: rgb(255 255 255 / 0.14);
color: #fff;
}
body.theme-light .nav.is-on-ink .nav__panel-glass {
background: rgb(43 43 43 / 0.94);
backdrop-filter: saturate(1.35) blur(40px);
-webkit-backdrop-filter: saturate(1.35) blur(40px);
}
body.theme-light .nav.is-on-ink .nav__panel-cols a {
color: rgb(255 255 255 / 0.86);
}
body.theme-light .nav.is-on-ink .nav__panel-cols a:hover,
body.theme-light .nav.is-on-ink .nav__panel-cols a:focus-visible {
color: #fff;
background: rgb(255 255 255 / 0.12);
}
body.theme-light .nav.is-on-ink .nav__panel-cols a[aria-current="page"] {
color: #fff;
background: rgb(255 255 255 / 0.16);
}
body.theme-light .nav.is-on-ink .nav__links > a,
body.theme-light .nav.is-on-ink .nav__drop-head > a {
color: rgb(255 255 255 / 0.78);
}
body.theme-light .nav.is-on-ink .nav__links > a:hover,
body.theme-light .nav.is-on-ink .nav__drop-head > a:hover {
color: #fff;
}
body.theme-light .nav.is-on-ink .nav__links > a[aria-current="page"],
body.theme-light .nav.is-on-ink .nav__drop-head > a[aria-current="page"] {
color: #fff;
font-weight: 600;
background: rgb(255 255 255 / 0.16);
}
body.theme-light .nav.is-on-ink .nav__drop-btn {
color: rgb(255 255 255 / 0.78);
}
body.theme-light .nav.is-on-ink .nav__drop-btn:hover,
body.theme-light .nav.is-on-ink .nav__drop-btn:focus-visible {
color: #fff;
background: rgb(255 255 255 / 0.14);
}
body.theme-light .nav.is-on-ink .nav__toggle span,
body.theme-light .nav.is-on-ink .nav__toggle span::before,
body.theme-light .nav.is-on-ink .nav__toggle span::after {
background: #fff;
}
body.theme-light .nav.is-on-ink .nav__cta.btn--go .btn__orb {
background: #fff;
color: var(--ink);
}
body.theme-light .nav.is-on-ink .nav__cta.btn--go:hover .btn__orb {
background: #f3f3f3;
color: var(--ink);
}
body.theme-light .nav.is-on-ink.is-open .nav__links {
background: #fff;
border-color: transparent;
color: var(--ink);
}
body.theme-light .nav.is-open.is-on-ink .nav__links > a,
body.theme-light .nav.is-open.is-on-ink .nav__drop-head > a {
color: rgb(43 43 43 / 0.78);
}
body.theme-light .nav.is-open.is-on-ink .nav__links > a:hover,
body.theme-light .nav.is-open.is-on-ink .nav__drop-head > a:hover,
body.theme-light .nav.is-open.is-on-ink .nav__links > a[aria-current="page"],
body.theme-light .nav.is-open.is-on-ink .nav__drop-head > a[aria-current="page"] {
color: var(--ink);
}
body.theme-light .nav.is-open.is-on-ink .nav__drop-btn {
color: var(--ink);
}
body.theme-light .nav.is-open.is-on-ink .nav__toggle span::before,
body.theme-light .nav.is-open.is-on-ink .nav__toggle span::after {
background: var(--ink);
}
@media (max-width: 1199px) {
body.theme-light .nav.is-open.is-on-ink {
--nav-surface: #fff;
}
body.theme-light .nav.is-open.is-on-ink .logo-sgm__img--light {
display: block;
}
body.theme-light .nav.is-open.is-on-ink .logo-sgm__img--dark {
display: none;
}
}
@media (max-width: 900px) {
body.theme-light {
--nav-h: 90px;
}
body.theme-light .nav__brand .logo-sgm--full .logo-sgm__img {
height: 2.1rem;
}
}
@media (min-width: 1200px) {
.nav__links {
gap: 1.28rem;
}
}
.blog-board {
background: #fff;
padding: 0 var(--gutter) var(--section-y);
}
.blog-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.75rem;
}
button.chip {
font: inherit;
color: inherit;
background: transparent;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 2.4rem 1.5rem;
}
.blog-card {
display: grid;
grid-column: span var(--span, 6);
gap: 0.85rem;
min-width: 0;
color: inherit;
text-decoration: none;
}
.blog-card.is-off {
display: none;
}
.blog-card__media {
overflow: hidden;
border-radius: var(--radius);
background: var(--paper);
}
.blog-card img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform 0.65s var(--ease);
}
.blog-card--mid img {
aspect-ratio: 16 / 9;
}
.blog-card--wide img {
aspect-ratio: 21 / 9;
}
.blog-card:hover img,
.blog-card:focus-visible img {
transform: scale(1.045);
}
.blog-card__cap {
display: grid;
gap: 0.35rem;
min-width: 0;
}
.blog-card__cat {
color: var(--cat, var(--ember));
font-size: 0.92rem;
font-weight: 600;
}
.blog-card__title {
font-size: clamp(1.25rem, 2vw, 1.7rem);
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
}
.blog-card__deck {
max-width: 42ch;
color: var(--mute);
font-size: 0.98rem;
line-height: 1.45;
}
.blog-card__date {
color: var(--mute);
font-size: 0.88rem;
}
.blog-read {
background: #fff;
}
.blog-read__back {
margin: 0;
padding: 1rem var(--gutter) 0;
font-size: 0.95rem;
}
.blog-read__back a {
color: var(--mute);
text-decoration: underline;
text-underline-offset: 0.22em;
font-weight: 500;
}
.blog-read__back a:hover,
.blog-read__back a:focus-visible {
color: var(--ink);
}
.blog-read__media {
margin: 0 var(--gutter) 2rem;
overflow: hidden;
border-radius: var(--radius);
}
.blog-read__media img {
width: 100%;
height: auto;
aspect-ratio: 16 / 8;
object-fit: cover;
}
.blog-read__body {
width: 100%;
max-width: none;
margin: 0;
padding: 0 var(--gutter) var(--section-y);
box-sizing: border-box;
}
.blog-read__date {
margin: 0;
padding: 0 var(--gutter) 1rem;
color: var(--mute);
font-size: 0.95rem;
}
.blog-read__body p {
margin: 0 0 1.15rem;
max-width: none;
font-size: clamp(1.05rem, 1.35vw, 1.22rem);
line-height: 1.65;
color: var(--ink);
}
.blog-read__body h2 {
margin: 1.85rem 0 0.85rem;
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 600;
line-height: 1.25;
}
.blog-read__list {
margin: 0 0 1.25rem;
padding-left: 1.2rem;
max-width: 52ch;
font-size: clamp(1.05rem, 1.35vw, 1.22rem);
line-height: 1.65;
}
.blog-read__list li + li {
margin-top: 0.35rem;
}
.blog-read__note {
color: var(--mute);
font-size: 0.95rem;
}
@media (max-width: 1023px) {
.blog-grid {
grid-template-columns: 1fr;
gap: 2rem 0;
}
.blog-card {
grid-column: 1 / -1;
}
.blog-card--wide img,
.blog-card--mid img {
aspect-ratio: 16 / 10;
}
}
.home-blog {
background: #fff;
padding: var(--section-y) var(--gutter);
border-top: 1px solid var(--line);
}
.home-blog__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.25rem 2rem;
margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.home-blog__head .section-lead {
margin: 0;
min-width: 0;
}
.home-blog__head .rule-label {
margin-bottom: 1.35rem;
}
.home-blog__all {
flex-shrink: 0;
font-size: 1rem;
font-weight: 500;
}
.home-blog__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2rem, 3.5vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
.home-blog__card {
grid-column: auto;
gap: 1.15rem;
}
.home-blog__card .blog-card__media {
border-radius: calc(var(--radius) + 2px);
}
.home-blog__card img {
aspect-ratio: 16 / 11;
}
.home-blog__card .blog-card__cap {
gap: 0.5rem;
}
.home-blog__card .blog-card__cat {
font-size: 1rem;
}
.home-blog__card .blog-card__title {
font-size: clamp(1.35rem, 2.1vw, 1.75rem);
line-height: 1.22;
}
.home-blog__card .blog-card__deck {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 40ch;
font-size: 1.05rem;
line-height: 1.5;
}
@media (max-width: 1100px) {
.home-blog__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.25rem 1.75rem;
}
}
.home-blog__controls {
display: none;
}
@media (max-width: 767px) {
.home-blog__head {
align-items: flex-start;
margin-bottom: 2.25rem;
}
.home-blog__grid {
display: flex;
gap: 1.35rem;
overflow-x: auto;
padding-bottom: 0.35rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
}
.home-blog__grid::-webkit-scrollbar {
display: none;
}
.home-blog__card {
flex: 0 0 min(86vw, 22.5rem);
scroll-snap-align: start;
}
.home-blog__card .blog-card__title {
font-size: 1.4rem;
}
.home-blog__controls {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 1.15rem;
}
.home-blog__arrow {
display: grid;
place-items: center;
width: 2.85rem;
height: 2.85rem;
border: 0;
border-radius: 50%;
background: var(--ink);
color: #fff;
cursor: pointer;
}
.home-blog__arrow:hover,
.home-blog__arrow:focus-visible {
background: var(--ember);
}
.home-blog__arrow svg {
display: block;
}
}