@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;700&display=swap");
:root {
--noir: #111111;
--ivory: #f7f4ef;
--stone: #b8afa3;
--warm: #6f6a63;
--mist: #dcd7cf;
--noir-rgb: 17, 17, 17;
--ivory-rgb: 247, 244, 239;
--stone-rgb: 184, 175, 163;
--warm-rgb: 111, 106, 99;
--mist-rgb: 220, 215, 207;
--bg: var(--ivory);
--surface: var(--ivory);
--surface-soft: var(--mist);
--surface-muted: var(--stone);
--surface-warm: #f1ece4;
--surface-peach: #f9f4f0;
--text: var(--noir);
--muted: var(--warm);
--line: var(--stone);
--dark: var(--warm);
--dark-soft: var(--warm);
--light: var(--ivory);
--max-width: 1180px;
--radius-s: 8px;
--radius-m: 16px;
--radius-pill: 999px;
--shadow-soft: 0 10px 30px rgba(var(--noir-rgb), 0.08);
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 2.5rem;
--space-6: 3rem;
--space-7: 4rem;
--space-8: 5rem;
--space-9: 6.25rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Inter", "Segoe UI", sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.7;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
p {
margin: 0 0 var(--space-3);
color: var(--muted);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 var(--space-3);
line-height: 1.16;
letter-spacing: -0.018em;
font-weight: 400;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.06;
}
.page-inner h1 {
font-size: clamp(2.4rem, 5.4vw, 3.75rem);
line-height: 1.2;
}
h2 {
font-size: clamp(2rem, 4.8vw, 2.625rem);
line-height: 1.1;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.2;
}
h4 {
font-size: clamp(1.25rem, 2.3vw, 1.625rem);
line-height: 1.24;
}
h5 {
font-size: clamp(1.125rem, 1.9vw, 1.375rem);
line-height: 1.3;
}
h6 {
font-size: clamp(1rem, 1.6vw, 1.125rem);
line-height: 1.34;
}
ul,
ol {
margin: 0;
padding: 0;
}
.container {
width: min(calc(100% - 3rem), var(--max-width));
margin-inline: auto;
}
.narrow {
max-width: 780px;
}
.text-center {
text-align: center;
}
.text-center h2 {
font-style: normal;
font-weight: 400;
}
h1 :is(.font-serif, .serif),
h2 :is(.font-serif, .serif),
h3 :is(.font-serif, .serif),
h4 :is(.font-serif, .serif),
h5 :is(.font-serif, .serif),
h6 :is(.font-serif, .serif),
.text-center h2 :is(.font-serif, .serif) {
font-size: 1.3em;
line-height: 1;
}
.font-serif,
.serif {
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-style: italic;
font-weight: 400;
}
.font-serif.font-bold,
.serif.font-bold {
font-style: normal;
font-weight: 700;
}
.font-italic {
font-style: italic;
font-weight: 400;
}
.eyebrow {
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 14px;
color: var(--stone);
}
.small-copy {
font-size: 0.88rem;
color: rgba(var(--ivory-rgb), 0.92);
}
.skip-link {
position: absolute;
left: -999px;
top: var(--space-2);
z-index: 999;
background: var(--text);
color: var(--ivory);
padding: 0.6rem 1rem;
border-radius: var(--radius-s);
}
.skip-link:focus-visible {
left: var(--space-2);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
br.desktop {
display: inline;
}
.site-header {
position: sticky;
top: 0;
z-index: 70;
border-bottom: 0;
backdrop-filter: saturate(130%) blur(10px);
background: rgba(var(--ivory-rgb), 0.94);
transition: background-color 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease;
}
.site-header-overlay {
position: fixed;
inset: 0 0 auto;
border-bottom: 0;
background: transparent;
backdrop-filter: none;
box-shadow: 0 0 0 rgba(var(--noir-rgb), 0);
will-change: background-color, backdrop-filter, box-shadow;
transition:
background-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header-overlay:not(.is-scrolled) .logo,
.site-header-overlay:not(.is-scrolled) .site-nav a {
color: var(--light);
}
.site-header-overlay:not(.is-scrolled) .btn-outline {
border-color: rgba(var(--ivory-rgb), 0.8);
color: var(--light);
background: transparent;
}
.site-header-overlay:not(.is-scrolled) .btn-outline:hover {
background: rgba(var(--ivory-rgb), 0.2);
color: var(--light);
}
.site-header-overlay:not(.is-scrolled) .nav-toggle > span:not(.sr-only) {
background: var(--ivory);
}
.site-header-overlay.is-scrolled {
background: rgba(var(--ivory-rgb), 0.94);
backdrop-filter: saturate(130%) blur(10px);
box-shadow: 0 0 0 rgba(var(--noir-rgb), 0);
}
.nav-shell {
min-height: 82px;
display: flex;
align-items: center;
gap: var(--space-4);
position: relative;
}
.logo {
display: inline-flex;
align-items: center;
}
.logo-img {
display: block;
width: auto;
height: 28px;
}
.logo-img-light {
display: none;
}
.site-header-overlay:not(.is-scrolled) .logo-img-dark {
display: none;
}
.site-header-overlay:not(.is-scrolled) .logo-img-light {
display: block;
}
.site-nav {
display: flex;
align-items: center;
gap: clamp(1rem, 2vw, 2rem);
margin-left: var(--space-3);
}
.site-nav a {
font-size: 0.93rem;
color: var(--warm);
font-weight: 500;
text-decoration: none;
}
.site-nav .site-nav-cta {
display: none;
}
.site-nav a[aria-current="page"] {
color: var(--noir);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.35em;
}
.site-header-overlay:not(.is-scrolled) .site-nav a[aria-current="page"] {
color: var(--light);
}
.btn-header-cta {
margin-left: auto;
}
.site-footer {
background: var(--warm);
color: var(--ivory);
}
.footer-shell {
min-height: 76px;
border-top: 1px solid rgba(var(--ivory-rgb), 0.1);
display: flex;
gap: var(--space-4);
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
}
.footer-shell p {
margin: 0;
color: var(--ivory);
}
.footer-shell nav {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.footer-shell a {
color: var(--ivory);
}
.nav-toggle {
display: none;
background: transparent;
border: 0;
width: 44px;
height: 44px;
padding: 0;
position: relative;
}
.nav-toggle > span:not(.sr-only) {
position: absolute;
left: 50%;
top: 50%;
width: 22px;
height: 2px;
margin: 0;
background: var(--noir);
transform-origin: center;
transition: transform 220ms ease, opacity 220ms ease;
}
.nav-toggle > span:nth-child(1) {
transform: translate(-50%, calc(-50% - 6px));
}
.nav-toggle > span:nth-child(2) {
transform: translate(-50%, -50%);
}
.nav-toggle > span:nth-child(3) {
transform: translate(-50%, calc(-50% + 6px));
}
.nav-toggle.is-active > span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
.nav-toggle.is-active > span:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-active > span:nth-child(3) {
transform: translate(-50%, -50%) rotate(-45deg);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
min-width: 170px;
border-radius: var(--radius-pill);
padding: 0.9rem 1.6rem;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.btn:focus-visible,
.site-nav a:focus-visible,
.audience-card a:focus-visible,
.logo:focus-visible,
.nav-toggle:focus-visible {
outline: 2px solid var(--noir);
outline-offset: 2px;
}
.btn-outline {
border-color: var(--text);
color: var(--text);
background: transparent;
}
.btn-outline:hover {
background: var(--text);
color: var(--light);
}
.btn-outline-light {
border-color: rgba(var(--ivory-rgb), 0.75);
color: var(--light);
background: transparent;
}
.btn-outline-light:hover {
background: rgba(var(--ivory-rgb), 0.2);
}
.btn-ghost {
color: var(--light);
border-color: rgba(var(--ivory-rgb), 0.8);
background: transparent;
}
.btn-ghost:hover {
background: rgba(var(--ivory-rgb), 0.14);
}
.btn-light {
color: var(--text);
background: var(--light);
}
.btn-light:hover {
background: var(--mist);
}
.btn-stagger {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-stagger::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(var(--ivory-rgb), 0.18) 0%,
rgba(var(--ivory-rgb), 0.04) 100%
);
opacity: 0;
transition: opacity 220ms ease;
pointer-events: none;
}
.btn-stagger:is(:hover, :focus-visible)::after {
opacity: 0.55;
}
.btn-stagger-text {
position: relative;
display: grid;
place-items: center;
height: 1.05em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}
.btn-stagger-text::before,
.btn-stagger-text::after {
content: attr(data-text);
grid-area: 1 / 1;
display: block;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-stagger-text::after {
transform: translateY(118%);
}
.btn-stagger:is(:hover, :focus-visible) .btn-stagger-text::before {
transform: translateY(-118%);
}
.btn-stagger:is(:hover, :focus-visible) .btn-stagger-text::after {
transform: translateY(0);
}
.btn-small {
min-width: 168px;
min-height: 44px;
font-size: 0.875rem;
line-height: 1;
padding: 0.8rem 1.45rem;
}
.link-flip {
position: relative;
display: inline-flex;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1;
overflow: visible;
padding-bottom: 0.16em;
border-bottom: 1px solid #706a62;
}
.link-flip::before {
content: "";
position: absolute;
inset: -10px -12px;
}
.link-flip-text {
position: relative;
z-index: 1;
display: grid;
place-items: center;
height: 1.05em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
transform: translateZ(0);
}
.link-flip-text::before,
.link-flip-text::after {
content: attr(data-text);
grid-area: 1 / 1;
display: block;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.link-flip-text::after {
transform: translateY(118%);
}
.link-flip:is(:hover, :focus-visible) .link-flip-text::before {
transform: translateY(-118%);
}
.link-flip:is(:hover, :focus-visible) .link-flip-text::after {
transform: translateY(0);
}
.visual-grid {
display: grid;
gap: 1rem;
}
.visual-grid-hero {
margin-top: var(--space-6);
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: end;
}
.visual-grid-about {
margin-top: var(--space-6);
width: 100%;
max-width: 1060px;
margin-inline: auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: stretch;
align-items: end;
gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.media-card {
position: relative;
border-radius: var(--radius-m);
overflow: hidden;
box-shadow: none;
background: var(--mist);
}
.media-card picture {
display: block;
width: 100%;
height: 100%;
}
.media-card img,
.media-card video,
.media-card picture > img {
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
}
.media-01 {
height: 385px;
}
.media-02 {
height: 330px;
}
.media-03 {
height: 370px;
}
.media-04 {
height: 405px;
}
.about-tile {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 5 / 9;
border-radius: clamp(10px, 1.8vw, 20px);
}
.about-tile img {
min-height: 0;
object-fit: contain;
object-position: center;
}
.visual-grid-about .about-tile picture > img {
min-height: 0;
}
.about-tile-02 {
transform: translateY(74px);
}
.about-tile-03 {
transform: translateY(18px);
}
.about-tile-04 {
transform: translateY(-18px);
}
.check-list {
list-style: none;
display: grid;
gap: 16px;
}
.check-list li {
position: relative;
padding-left: 1.5rem;
color: var(--warm);
}
.check-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.25rem;
width: 1rem;
height: 1rem;
background: url("../assets/check.svg") center / contain no-repeat;
}
.audience-grid {
display: grid;
gap: clamp(2.8rem, 6vw, 4.8rem);
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 0;
align-items: stretch;
}
.audience-card {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.media-card.small {
margin-bottom: var(--space-3);
width: min(100%, 250px);
max-width: 250px;
max-height: 330px;
aspect-ratio: 25 / 33;
margin-inline: auto;
}
.media-card.small img,
.media-card.small video,
.media-card.small picture > img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
display: block;
}
.media-card.small .media-overlay-icon {
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 320px;
max-width: none;
height: auto;
min-height: 0;
object-fit: contain;
z-index: 2;
pointer-events: none;
}
.audience-card-clients .media-card.small {
overflow: visible;
}
.audience-card-clients .media-card.small > picture {
display: block;
border-radius: var(--radius-m);
overflow: hidden;
}
.audience-card-clients .media-card.small > img:not(.media-overlay-icon),
.audience-card-clients .media-card.small > picture > img {
border-radius: inherit;
}
.audience-card .media-card.small {
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.audience-card .audience-video {
opacity: 0.82;
filter: saturate(0.92) contrast(0.98);
transform: scale(1.01);
transition: opacity 260ms ease, filter 260ms ease,
transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.audience-card.is-video-active .media-card.small {
transform: translateY(-4px);
box-shadow: none;
}
.audience-card.is-video-active .audience-video {
opacity: 1;
filter: saturate(1) contrast(1);
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
.btn-stagger::after {
transition: none;
}
.btn-stagger-text::before,
.btn-stagger-text::after {
transition: none;
transform: none;
}
.btn-stagger-text::after {
display: none;
}
.audience-card .media-card.small,
.audience-card .audience-video {
transition: none;
transform: none;
}
.link-flip-text::before,
.link-flip-text::after {
transition: none;
transform: none;
}
.link-flip-text::after {
display: none;
}
}
.audience-card h3 {
font-size: 24px;
margin-bottom: calc(var(--space-3) / 2);
}
.audience-card p {
font-size: 18px;
flex: 1 1 auto;
line-height: 1.7;
}
.audience-card a {
display: inline-flex;
margin-top: auto;
align-self: center;
}
.process-list {
margin-top: var(--space-5);
margin-bottom: 3rem;
list-style: none;
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
position: relative;
}
.process-list::before {
content: "";
position: absolute;
left: 5%;
right: 5%;
top: 32px;
height: 1px;
background: var(--line);
z-index: 0;
pointer-events: none;
}
.process-list li {
position: relative;
z-index: 1;
text-align: center;
padding-inline: var(--space-2);
display: grid;
justify-items: center;
align-content: start;
gap: 24px;
}
.process-list li > * {
margin: 0;
}
.process-list h3 {
font-size: 24px;
}
.step-number {
width: 64px;
height: 64px;
display: inline-grid;
place-items: center;
border: 1px solid var(--stone);
border-radius: 50%;
background: var(--mist);
margin-bottom: 0;
font-size: 18px;
font-weight: 400;
letter-spacing: 0;
}
.quote-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 3vw, 3.25rem);
}
.quote-grid:has(> blockquote:nth-child(2)) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quote-grid:has(> blockquote:nth-child(3)) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quote-grid blockquote {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
display: grid;
justify-items: center;
align-content: start;
gap: 0;
}
.quote-grid blockquote::before {
content: "“";
color: rgba(var(--warm-rgb), 0.55);
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-size: 2.25rem;
line-height: 1;
}
.quote-grid blockquote p {
margin: 0;
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-style: italic;
font-size: 20px;
font-weight: 400;
color: var(--muted);
line-height: 1.45;
max-width: 850px;
}
.quote-grid blockquote .blockquote-footer {
margin: 0.75rem 0 0;
color: rgba(var(--warm-rgb), 0.58);
font-size: 14px;
line-height: 1.35;
}
.faq-shell {
max-width: 860px;
margin-inline: auto;
}
.faq-list {
margin-top: var(--space-5);
}
.faq-item {
padding: 10px 0;
border-bottom: 1px solid var(--mist);
}
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
color: var(--text);
font-size: 18px;
font-weight: 500;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
font-size: 1.15rem;
color: var(--warm);
line-height: 1;
}
.faq-item[open] summary::after {
content: "−";
}
.faq-item summary p,
.faq-item p {
margin: 0;
padding: 0 2rem 1rem 0;
font-size: 16px;
font-weight: 400;
}
.hero {
position: relative;
}
.hero-minimal {
padding-block: var(--space-8) var(--space-7);
}
.hero-copy {
display: grid;
place-items: center;
text-align: center;
}
.hero-copy h1 {
font-size: 3.0769rem;
}
.hero-copy h1 span {
display: block;
}
.legal-page .hero-copy .legal-hero-title span {
display: inline;
}
.hero-copy p {
max-width: 680px;
margin: 0 auto var(--space-4);
}
.legal-page .legal-content h3 {
font-size: clamp(1.25rem, 2.3vw, 1.625rem);
line-height: 1.24;
margin-bottom: 0.75rem;
}
.legal-page .legal-content h3 + p {
margin-bottom: clamp(1.35rem, 2.6vw, 2rem);
}
.legal-page .legal-content h3:last-of-type + p {
margin-bottom: 0;
}
.hero-channel {
min-height: 650px;
padding-block: calc(var(--space-8) - 0.5rem) var(--space-7);
}
.page-inner .hero-channel {
padding-block: var(--space-9);
}
.hero-channel-grid {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
grid-template-columns: 0.95fr 1.05fr;
align-items: center;
}
.hero-channel-copy h1 span {
display: block;
}
.page-inner .hero-channel-copy h1 {
font-size: 3.0769rem;
}
.hero-channel-copy p {
max-width: 560px;
margin-bottom: var(--space-4);
}
.hero-channel-visual {
position: relative;
min-height: 430px;
display: grid;
place-items: center;
}
.hero-channel-orb {
position: absolute;
width: min(82%, 430px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--surface-warm);
}
.hero-channel-card {
position: relative;
width: min(72%, 300px);
max-width: 300px;
aspect-ratio: 4 / 7;
border-radius: var(--radius-m);
z-index: 2;
}
.hero-channel-card-reel {
overflow: hidden;
}
.hero-channel-card-live {
overflow: hidden;
}
.hero-channel-card-creator-overlay {
overflow: hidden;
}
.hero-channel-card-reel::before,
.hero-channel-card-reel::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: 3;
}
.hero-channel-card-reel::before {
top: 0.35rem;
width: min(96%, 293px);
aspect-ratio: 293 / 37;
background-image: url("../assets/reel-top.svg");
}
.hero-channel-card-reel::after {
bottom: 0.35rem;
width: min(92%, 276px);
aspect-ratio: 276 / 214;
background-image: url("../assets/reel-btm.svg");
}
.hero-channel-card-live::before {
content: "";
position: absolute;
top: 20px;
left: 50%;
width: min(92%, 254px);
aspect-ratio: 254 / 26;
transform: translateX(-50%);
background: url("../assets/live-top.svg") center / contain no-repeat;
pointer-events: none;
z-index: 3;
}
.hero-channel-card-creator-overlay::before,
.hero-channel-card-creator-overlay::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: 3;
}
.hero-channel-card-creator-overlay::before {
top: 10px;
width: min(96%, 277px);
aspect-ratio: 277 / 26;
background-image: url("../assets/top-overlay.svg");
}
.hero-channel-card-creator-overlay::after {
bottom: 13px;
width: min(92%, 278px);
aspect-ratio: 278 / 154;
background-image: url("../assets/btm-overlay.svg");
}
.hero-channel-card :is(img, video) {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.floating-tag {
position: absolute;
z-index: 3;
max-height: 40px;
background: var(--warm);
color: var(--ivory);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.34rem 0.55rem;
border-radius: var(--radius-pill);
}
.floating-tag.floating-tag-image {
background: transparent;
padding: 0;
border-radius: 0;
height: auto;
transform-origin: center;
}
.floating-tag.floating-tag-image.tag-top-left {
width: clamp(118px, 14vw, 165px);
transform: rotate(-1deg);
}
.floating-tag.floating-tag-image.tag-top-right {
width: clamp(145px, 17vw, 205px);
transform: rotate(2deg);
}
.floating-tag.floating-tag-image.tag-bottom-left {
width: clamp(105px, 12vw, 145px);
transform: rotate(-1.5deg);
}
.floating-tag.floating-tag-image.tag-bottom-right {
width: clamp(130px, 15vw, 170px);
}
.tag-top-left {
top: 13%;
left: 10%;
}
.tag-top-right {
top: 21%;
right: 4%;
}
.tag-bottom-left {
bottom: 16%;
left: 6%;
}
.tag-bottom-right {
bottom: 10%;
right: -4%;
}
.floating-accent-icon {
position: absolute;
z-index: 3;
width: clamp(46px, 5vw, 54px);
height: auto;
}
.hero-channel-visual-clients .floating-accent-icon,
.hero-channel-visual-clients .tag-bottom-right {
top: 50%;
left: 50%;
}
.hero-channel-visual-clients .icon-mic {
transform: translate(-50%, -50%) translate(clamp(-205px, -21vw, -145px), clamp(-95px, -10vw, -72px));
}
.hero-channel-visual-clients .icon-up-graph {
transform: translate(-50%, -50%) translate(clamp(-134px, -9vw, -50px), clamp(130px, 14vw, 170px));
}
.hero-channel-visual-clients .icon-star {
transform: translate(-50%, -50%) translate(clamp(195px, 20vw, 200px), clamp(0px, 3.5vw, 50px));
}
.hero-channel-visual-clients .tag-bottom-right {
right: auto;
bottom: auto;
transform: translate(-50%, -50%) translate(clamp(132px, 14vw, 182px), clamp(186px, 20vw, 200px)) rotate(-1deg);
}
.hero-channel-visual-brands :is(.tag-top-left, .tag-top-right, .tag-bottom-left),
.hero-channel-visual-creators :is(.tag-top-left, .tag-top-right, .tag-bottom-left) {
top: 50%;
left: 50%;
right: auto;
bottom: auto;
}
.hero-channel-visual-brands .floating-tag.floating-tag-image.tag-top-left {
transform: translate(-50%, -50%) translate(clamp(-185px, -20vw, -140px), clamp(-152px, -16vw, -118px)) rotate(-1deg);
}
.hero-channel-visual-brands .floating-tag.floating-tag-image.tag-top-right {
transform: translate(-50%, -50%) translate(clamp(150px, 19vw, 178px), clamp(-120px, -13vw, -86px)) rotate(2deg);
}
.hero-channel-visual-brands .floating-tag.floating-tag-image.tag-bottom-left {
transform: translate(-50%, -50%) translate(clamp(-192px, -20vw, -150px), clamp(136px, 15vw, 176px)) rotate(-1.5deg);
}
.hero-channel-visual-creators .icon-monetize,
.hero-channel-visual-creators .icon-star-creator {
top: 50%;
left: 50%;
}
.hero-channel-visual-creators .icon-monetize {
transform: translate(-50%, -50%) translate(clamp(-205px, -21vw, -145px), clamp(-95px, -10vw, -72px));
}
.hero-channel-visual-creators .icon-star-creator {
transform: translate(-50%, -50%) translate(clamp(195px, 20vw, 200px), clamp(0px, 3.5vw, 50px));
}
.intro-split {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
grid-template-columns: 1.1fr 1fr;
align-items: start;
}
.intro-split p {
max-width: 54ch;
}
.dual-list-grid {
margin-top: var(--space-5);
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dual-list-grid h3 {
font-size: 1.1rem;
margin-bottom: 0.8rem;
}
.dual-list-grid .check-list li {
font-size: 0.95rem;
}
.difference-grid {
margin-top: var(--space-5);
display: grid;
gap: clamp(1rem, 2vw, 2rem);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.difference-item {
text-align: center;
padding: var(--space-2);
}
.difference-icon {
display: block;
width: fit-content;
margin: 0 auto 0.85rem;
}
.difference-icon img {
width: 32px;
height: 32px;
display: block;
}
.difference-item h3 {
font-size: 1.1rem;
margin-bottom: 0.45rem;
}
.difference-item p {
margin-bottom: 0;
font-size: 0.92rem;
}
.section {
padding-block: var(--space-9);
}
.section-note {
background: var(--surface);
}
#about {
padding-block: var(--space-9);
}
#about p {
font-size: 1.125rem;
}
.section-note .narrow p:last-of-type {
font-size: 1.125rem;
margin-bottom: 0;
}
.page-about .section-note .narrow p:last-of-type {
font-size: inherit;
margin-bottom: var(--space-3);
}
.section-muted {
background: var(--surface-muted);
}
.section-mist {
background: var(--mist);
}
.section-light {
background: var(--ivory);
}
.section-peach {
background: var(--surface-peach);
}
.section-what-we-do {
background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
}
#audience {
background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
}
.section-ethos {
background: var(--surface);
}
.section-ethos .eyebrow {
margin-bottom: 20px;
}
.section-ethos .font-serif {
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
line-height: 1.35;
}
.section-ethos p:last-of-type {
margin-bottom: 0;
}
.section-dark {
color: var(--light);
background: var(--warm);
}
.section-dark h2,
.section-dark p {
color: var(--light);
}
#contact .container {
display: grid;
justify-items: center;
gap: 2rem;
}
#contact h2 {
max-width: 900px;
margin: 0;
}
#contact .small-copy {
margin: 0;
color: #ddd7ce;
}
.belief-grid {
display: grid;
gap: clamp(1.5rem, 2vw, 2.5rem);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.belief-grid article {
padding: var(--space-2);
text-align: center;
}
.belief-grid h3 {
margin-bottom: 0.55rem;
}
.section-beliefs {
background: var(--mist);
}
.section-beliefs .eyebrow {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 3.25rem);
color: rgba(var(--warm-rgb), 0.85);
}
.section-beliefs .belief-grid {
gap: clamp(1.5rem, 3vw, 3.25rem);
}
.section-beliefs .belief-grid article {
padding: 0;
}
.section-beliefs .belief-grid h3 {
margin-bottom: 0.6rem;
font-size: 24px;
color: var(--text);
}
.section-beliefs .belief-grid p {
margin-inline: auto;
font-size: 18px;
line-height: 1.5;
color: var(--warm);
}
.split-section {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
grid-template-columns: 1.1fr 1fr;
align-items: start;
}
.split-section h2 ~ p {
font-size: 1.125rem;
}
.split-section .split-heading-break,
.intro-split .split-heading-break {
display: block;
}
.split-section .check-list {
margin-top: clamp(1.7rem, 3.6vw, 3rem);
}
.split-section .check-list li {
padding-left: 2rem;
}
.split-section .check-list li::before {
width: 24px;
height: 24px;
top: 0;
border-radius: 50%;
background: var(--surface-soft);
}
.split-section .check-list li::after {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 12px;
height: 12px;
transform: translate(-50%, -50%);
background: url("../assets/check.svg") center / contain no-repeat;
}
.hero-image {
height: 90vh;
min-height: 800px;
display: grid;
align-items: end;
background:
radial-gradient(122% 95% at 84% 18%, rgba(var(--stone-rgb), 0.28), transparent 62%),
radial-gradient(110% 120% at 16% 76%, rgba(var(--warm-rgb), 0.35), transparent 64%),
linear-gradient(155deg, rgba(var(--noir-rgb), 0.95), rgba(var(--warm-rgb), 0.9));
}
.hero-video,
.hero-image-overlay {
position: absolute;
inset: 0;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.hero-image-overlay {
background:
linear-gradient(180deg, rgba(var(--noir-rgb), 0.28), rgba(var(--noir-rgb), 0.56)),
radial-gradient(115% 120% at 14% 72%, rgba(var(--warm-rgb), 0.18), transparent);
}
.hero-image-content {
position: relative;
z-index: 2;
color: var(--light);
padding-bottom: var(--space-9);
}
.hero-image-content h1,
.hero-image-content p {
color: var(--light);
}
.hero-image-content h1 {
font-size: 3.0769rem;
max-width: 760px;
}
.hero-image-content p {
max-width: 450px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: var(--space-4);
}
.service-stack {
margin-top: var(--space-6);
display: grid;
gap: clamp(3rem, 8vw, 5.5rem);
}
.service-row {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
}
.service-row.reverse {
grid-template-columns: 1.1fr 0.9fr;
}
.service-row.reverse .service-media {
order: 2;
}
.service-row.reverse .service-copy {
order: 1;
}
.service-copy {
width: 100%;
max-width: 600px;
}
.service-media {
border-radius: var(--radius-m);
aspect-ratio: 12 / 8;
}
.section-what-we-do .service-media,
.section-note .service-stack .service-media {
aspect-ratio: auto;
min-height: 0;
}
.section-what-we-do .service-media.media-card,
.section-note .service-stack .service-media.media-card {
background: transparent;
box-shadow: none;
display: grid;
place-items: center;
}
.section-what-we-do .service-media img,
.section-note .service-stack .service-media img {
width: auto;
height: auto;
max-width: 100%;
min-height: 0;
object-fit: contain;
margin-inline: auto;
}
.service-copy .check-list {
margin-top: var(--space-3);
}
.service-row .service-copy .eyebrow {
font-size: 14px;
}
.service-copy h3 {
font-size: 28px;
line-height: 1.5;
margin-bottom: 1rem;
}
.service-row .service-copy > p:not(.eyebrow) {
font-size: 16px;
line-height: 1.55;
}
.service-row .service-copy > p.lead {
font-size: 18px;
max-width: 45ch;
}
.service-row .service-copy .check-list li {
font-size: 16px;
line-height: 1.45;
}
.service-copy-partnerships-ref .eyebrow {
font-size: 14px;
letter-spacing: 0.12em;
margin-bottom: 0;
color: var(--stone);
}
.service-copy-partnerships-ref h3 {
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
}
.service-copy-partnerships-ref > p {
font-size: 18px;
line-height: 1.55;
margin-bottom: 2rem;
}
.service-copy-partnerships-ref > p strong {
font-weight: 700;
}
.service-copy-partnerships-ref .check-list {
margin-top: 0;
gap: 16px;
}
.service-copy-partnerships-ref .check-list li {
font-size: 16px;
line-height: 1.45;
padding-left: 2rem;
}
.service-copy-partnerships-ref .check-list li::before {
width: 1.2rem;
height: 1.2rem;
top: 0.2rem;
}
.section-quote-band {
background: var(--surface-soft);
}
.section-testimonials {
background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
}
.testimonials-shell {
display: grid;
gap: 20px;
}
.testimonials-shell .eyebrow {
margin: 0;
font-size: 14px;
letter-spacing: 0.13em;
color: rgba(var(--warm-rgb), 0.55);
}
@media (max-width: 960px) {
.visual-grid-hero {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 640px;
}
.belief-grid,
.audience-grid,
.quote-grid,
.process-list {
grid-template-columns: 1fr;
}
.quote-grid:has(> blockquote:nth-child(2)),
.quote-grid:has(> blockquote:nth-child(3)) {
grid-template-columns: 1fr;
}
.audience-card {
width: min(100%, 400px);
margin-inline: auto;
}
.process-list::before {
display: none;
}
.split-section,
.intro-split,
.dual-list-grid,
.hero-channel-grid,
.difference-grid,
.service-row,
.service-row.reverse {
grid-template-columns: 1fr;
}
.hero-channel-copy {
text-align: center;
}
.page-inner .hero-channel-copy {
width: 100%;
padding-inline: 0.25rem;
}
.page-inner .hero-channel-copy h1 {
font-size: clamp(2rem, 9.2vw, 2.8rem);
line-height: 1.08;
max-width: 10.5ch;
margin-inline: auto;
}
.hero-copy h1,
.hero-image-content h1 {
font-size: clamp(2.1rem, 7.8vw, 2.9rem);
line-height: 1.08;
}
.page-inner .hero-channel-copy h1 span {
white-space: normal;
text-wrap: balance;
overflow-wrap: anywhere;
}
.hero-channel-copy p {
margin-inline: auto;
}
.page-inner .hero-channel-copy p {
max-width: 30ch;
overflow-wrap: anywhere;
}
.service-row.reverse .service-media,
.service-row.reverse .service-copy {
order: initial;
}
.split-section .check-list {
margin-top: 0;
}
.split-section .split-heading-break,
.intro-split .split-heading-break {
display: inline;
}
}
@media (max-width: 780px) {
.hero {
overflow: hidden;
}
.page-about .hero-minimal {
padding-block: var(--space-6) var(--space-5);
}
:root {
--space-7: 3rem;
--space-8: 4rem;
--space-9: 4.5rem;
}
.container {
width: min(calc(100% - 2rem), var(--max-width));
}
.visual-grid-about {
margin-top: var(--space-3);
max-width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.visual-grid-about .about-tile {
border-radius: clamp(8px, 1.6vw, 14px);
}
.visual-grid-about :is(.about-tile-02, .about-tile-03, .about-tile-04) {
transform: none;
}
.hero-copy h1,
.hero-image-content h1 {
font-size: clamp(1.8rem, 9.2vw, 2.45rem);
}
.page-inner .hero-channel-copy h1 {
max-width: none;
}
br.desktop {
display: none;
}
.site-header .btn-header-cta,
.site-header-overlay .btn-header-cta {
display: none;
}
.nav-shell {
justify-content: flex-start;
gap: var(--space-1);
}
.logo-img {
height: 24px;
}
.nav-toggle {
display: inline-grid;
place-items: center;
order: 3;
margin-left: auto;
z-index: 82;
}
.site-nav {
position: absolute;
top: 100%;
left: calc((100vw - 100%) / -2);
right: calc((100vw - 100%) / -2);
display: grid;
gap: 0;
margin-left: 0;
background: var(--ivory);
border: 0;
border-radius: 0;
box-shadow: none;
transform-origin: top;
transform: scaleY(0.92);
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: transform 280ms ease, max-height 280ms ease, opacity 220ms ease;
z-index: 81;
}
.site-nav > a:not(.site-nav-cta) {
padding: 0.875rem 1.1rem;
border-top: 1px solid var(--mist);
}
.site-nav > a:not(.site-nav-cta):first-child {
border-top: 0;
}
.site-nav .site-nav-cta {
display: inline-flex;
width: calc(100% - 2.2rem);
min-width: 0;
margin: 1rem 1.1rem 1rem;
min-height: 44px;
padding: 0.75rem 1.25rem;
justify-content: center;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.08em;
position: relative;
}
.site-nav .site-nav-cta::before {
content: "";
position: absolute;
left: -1.1rem;
right: -1.1rem;
top: -1rem;
height: 1px;
background: var(--mist);
}
.site-header-overlay:not(.is-scrolled) .site-nav {
background: rgba(var(--noir-rgb), 0.96);
}
.site-header-overlay:not(.is-scrolled) .site-nav a {
color: rgba(var(--ivory-rgb), 0.92);
border-top-color: rgba(var(--ivory-rgb), 0.18);
}
.site-header-overlay:not(.is-scrolled) .site-nav .site-nav-cta {
color: var(--ivory);
border-color: rgba(var(--ivory-rgb), 0.72);
}
.site-header-overlay:not(.is-scrolled) .site-nav .site-nav-cta:hover {
color: var(--ivory);
background: rgba(var(--ivory-rgb), 0.14);
}
.site-header-overlay:not(.is-scrolled) .site-nav .site-nav-cta::before {
background: rgba(var(--ivory-rgb), 0.18);
}
.site-nav.is-open {
transform: scaleY(1);
max-height: 360px;
opacity: 1;
pointer-events: auto;
}
.visual-grid-hero {
margin-top: var(--space-5);
}
.hero-channel {
min-height: 0;
padding-block: calc(var(--space-8) - 1rem) var(--space-7);
}
.hero-channel-visual {
min-height: 360px;
}
.hero-channel-card {
width: min(78%, 250px);
max-width: 250px;
}
.hero-channel-card :is(img, video) {
min-height: 0;
}
.section-what-we-do .service-media.media-card,
.section-note .service-stack .service-media.media-card {
place-items: center;
}
.section-what-we-do .service-media img,
.section-note .service-stack .service-media img {
margin-inline: auto;
}
.floating-tag {
font-size: 0.6rem;
padding: 0.28rem 0.45rem;
}
.hero-channel-visual-clients .floating-accent-icon {
display: block;
width: 44px;
}
.hero-channel-visual-clients .icon-mic {
transform: translate(-50%, -50%) translate(clamp(-148px, -38vw, -110px), clamp(-78px, -18vw, -52px));
}
.hero-channel-visual-clients .icon-up-graph {
transform: translate(-50%, -50%) translate(clamp(-82px, -21vw, -58px), clamp(116px, 30vw, 142px));
}
.hero-channel-visual-clients .icon-star {
transform: translate(-50%, -50%) translate(clamp(132px, 34vw, 156px), clamp(18px, 5vw, 34px));
}
.hero-channel-visual-clients .tag-bottom-right {
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%) translate(clamp(74px, 21vw, 100px), clamp(132px, 35vw, 160px)) rotate(-1deg);
}
.hero-channel-visual-brands .tag-top-left {
transform: translate(-50%, -50%) translate(clamp(-130px, -34vw, -100px), clamp(-106px, -27vw, -80px)) rotate(-1deg);
}
.hero-channel-visual-brands .tag-top-right {
transform: translate(-50%, -50%) translate(clamp(126px, 33vw, 152px), clamp(-84px, -22vw, -60px)) rotate(2deg);
}
.hero-channel-visual-brands .tag-bottom-left {
transform: translate(-50%, -50%) translate(clamp(-136px, -35vw, -106px), clamp(104px, 27vw, 128px)) rotate(-1.5deg);
}
.hero-channel-visual-creators .floating-accent-icon {
width: 44px;
}
.hero-channel-visual-creators .icon-monetize {
transform: translate(-50%, -50%) translate(clamp(-148px, -38vw, -110px), clamp(-78px, -18vw, -52px));
}
.hero-channel-visual-creators .icon-star-creator {
transform: translate(-50%, -50%) translate(clamp(132px, 34vw, 156px), clamp(18px, 5vw, 34px));
}
.footer-shell {
flex-direction: column;
justify-content: center;
padding-block: 1rem;
text-align: center;
}
}
@media (max-width: 520px) {
.hero-channel {
padding-block: calc(var(--space-7) - 0.5rem) var(--space-6);
}
.page-inner .hero-channel-copy h1 {
font-size: clamp(1.9rem, 8.8vw, 2.5rem);
max-width: none;
}
.page-inner .hero-channel-copy p {
max-width: 28ch;
}
.hero-channel-visual {
min-height: 320px;
}
.hero-channel-card {
width: min(74vw, 220px);
max-width: 220px;
}
.hero-channel-visual-clients .floating-accent-icon,
.hero-channel-visual-creators .floating-accent-icon {
width: 40px;
}
.hero-channel-visual-clients .icon-mic,
.hero-channel-visual-creators .icon-monetize {
transform: translate(-50%, -50%) translate(clamp(-124px, -34vw, -90px), clamp(-66px, -18vw, -44px));
}
.hero-channel-visual-clients .icon-up-graph {
transform: translate(-50%, -50%) translate(clamp(-68px, -18vw, -48px), clamp(96px, 26vw, 120px));
}
.hero-channel-visual-clients .icon-star,
.hero-channel-visual-creators .icon-star-creator {
transform: translate(-50%, -50%) translate(clamp(96px, 26vw, 116px), clamp(14px, 5vw, 28px));
}
.hero-channel-visual-clients .tag-bottom-right {
width: clamp(112px, 34vw, 132px);
transform: translate(-50%, -50%) translate(clamp(52px, 15vw, 72px), clamp(114px, 30vw, 138px)) rotate(-1deg);
}
.hero-channel-visual-brands .floating-tag.floating-tag-image.tag-top-left {
width: clamp(106px, 30vw, 130px);
transform: translate(-50%, -50%) translate(clamp(-98px, -27vw, -76px), clamp(-86px, -23vw, -64px)) rotate(-1deg);
}
.hero-channel-visual-brands .floating-tag.floating-tag-image.tag-top-right {
width: clamp(112px, 32vw, 136px);
transform: translate(-50%, -50%) translate(clamp(52px, 16vw, 72px), clamp(-68px, -19vw, -48px)) rotate(2deg);
}
.hero-channel-visual-brands .floating-tag.floating-tag-image.tag-bottom-left {
width: clamp(94px, 26vw, 116px);
transform: translate(-50%, -50%) translate(clamp(-100px, -28vw, -78px), clamp(86px, 24vw, 108px)) rotate(-1.5deg);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-video {
display: none;
}
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}