/* her fonts: TV 2 Sans Display (text), Reina Neue Display (pink display words), RF Dewi Condensed (small links) */
@font-face { font-family: "TV 2 Sans"; src: url(fonts/tv2sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TV 2 Sans"; src: url(fonts/tv2sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "TV 2 Sans"; src: url(fonts/tv2sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "TV 2 Sans"; src: url(fonts/tv2sans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Reina Neue Display"; src: url(fonts/reina-display-black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "RF Dewi Condensed"; src: url(fonts/dewi-cond-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "RF Dewi Condensed"; src: url(fonts/dewi-cond-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --pink: #ff0a6c;
  --pink-2: #ee3d9c;
  --ink: #1d1d1d;
  --dark: #1e1e1e;
  --darker: #161616;
  --paper: #ffffff;
  --muted: #8b8b8b;
  --blue-a: #5b62ea;
  --blue-b: #26337f;
  --orange: #ff8a52;
  --grid-light: rgba(0, 0, 0, .045);
  --grid-dark: rgba(255, 255, 255, .035);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sans: "TV 2 Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --logo: "Outfit", var(--sans);
  --num: "Unbounded", var(--sans);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* faint layout grid from the drafts */
.grid-bg {
  background-image:
    linear-gradient(var(--grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size: 88px 88px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 88px 88px;
}

/* reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
.mask-line { display: block; overflow: hidden; padding-bottom: .08em; }
.mask-line > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.in .mask-line > span, .mask-line.in > span { transform: none; }

/* nav */
.nav {
  position: sticky; top: 14px; z-index: 50;
  width: min(760px, 100% - 32px);
  margin: 22px auto 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
  display: flex; align-items: center; gap: 18px;
  padding: 12px 18px;
}
.nav .menu-btn { display: grid; gap: 4px; padding: 4px; }
.nav .menu-btn span { width: 17px; height: 2px; background: var(--ink); display: block; border-radius: 2px; }
.nav .brand { font-family: var(--logo); font-weight: 700; font-size: 21px; letter-spacing: -.01em; line-height: 1; position: relative; }
.nav .brand .i { position: relative; }
.nav .brand .i::after { content: ""; position: absolute; left: 50%; top: .235em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--pink); }
.nav .links { display: flex; gap: 26px; margin-left: auto; margin-right: 18px; }
.nav .links span, .nav .cta { font-family: "RF Dewi Condensed", var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: default; user-select: none; }
.nav .cta { background: var(--pink); color: #fff; font-weight: 600; padding: 6px 15px; border-radius: 999px; }
.nav .lang { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.nav .lang svg { width: 20px; height: 20px; }
.nav .lang:hover, .nav .lang:focus-visible { background: #f2f2f2; outline: none; }
.nav .lang[aria-pressed="true"] { color: var(--pink); }
.nav .lang .tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -6px); background: var(--pink); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 10px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); }
.nav .lang:hover .tip, .nav .lang:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }

/* hero */
.hero { position: relative; padding: 110px 0 40px; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 { font-weight: 400; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -.015em; margin: 0; position: relative; z-index: 1; }
.hero h1 b { font-weight: 700; }
.serif-pink { font-family: var(--serif); font-style: italic; color: var(--pink); font-weight: 400; }
.disp-pink { font-family: "Reina Neue Display", var(--serif); font-weight: 900; color: var(--pink); letter-spacing: 0; }
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.frame { display: inline-block; background: #fff; border-left: 6px solid var(--pink); border-top: 6px solid var(--pink); padding: 4px 22px 12px 18px; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .12)); }
.duo { filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .12)); display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; border-left: 6px solid var(--pink); font-weight: 400; line-height: 1.05; letter-spacing: -.015em; }
.duo-a, .duo-b { position: relative; display: block; background: #fff; }
.duo-a { z-index: 2; border-top: 6px solid var(--pink); padding: 4px 22px 4px 16px; margin-bottom: -6px; }
.duo-b { z-index: 1; border-top: 6px solid var(--pink); padding: 2px 22px 10px 16px; }
.pink-b { color: var(--pink); font-weight: 700; }
.hero .sparkle-outline { display: inline-block; width: .62em; height: .62em; vertical-align: .02em; margin: 0 .12em; animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(18deg) scale(.88); } }
.hero .lede { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; margin: 22px 0 6px; color: #2a2a2a; }
.hero .est { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; margin: 0; }
.hero .est svg { width: 16px; height: 16px; }
.hero-stage { position: relative; margin-top: 70px; padding: 120px 0 90px; }
.hero-word {
  position: absolute; left: 29%; top: -120px;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(130px, 25.7vw, 370px); line-height: .9; letter-spacing: -.02em;
  color: #fff;
  filter: url(#deboss);
  white-space: nowrap; pointer-events: none;
  will-change: transform;
}
.hero .shape-black { position: absolute; left: -2%; top: 40px; width: 20%; height: 150px; background: var(--dark); border-top-right-radius: 80px; }
.hero .shape-pink { position: absolute; right: -6%; bottom: 0; width: 34%; height: 170px; background: var(--pink); border-bottom-left-radius: 80px; }
.cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: min(820px, 100%); margin: 0 auto; }
.card { background: #fff; border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); transition: opacity .8s var(--ease) var(--d, 0ms), transform .45s var(--ease), box-shadow .45s var(--ease); }
.card { display: flex; flex-direction: column; }
.card .body { flex: 1; }
.card .art { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #fff; }
.card .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .art .placeholder { position: absolute; inset: 0; display: none; place-items: center; }
.card .art.empty .placeholder { display: grid; }
.card .art.empty img { display: none; }
.card .body { padding: 18px 22px 26px; }
.card h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #333; }
.card .bar { height: 5px; background: var(--ink); position: relative; overflow: hidden; }
.card .bar::after { content: ""; position: absolute; inset: 0; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.card.active .bar::after { transform: scaleX(1); }

/* handcrafted */
.handcrafted { position: relative; padding: 60px 0 120px; }
.handcrafted .wrap { position: relative; z-index: 1; }
.av-ghost { position: absolute; left: -70px; top: -110px; width: min(470px, 42vw); aspect-ratio: 1; pointer-events: none; filter: url(#deboss); }
.av-ghost i { position: absolute; inset: 0; background: #fff; -webkit-mask: url(art/av-mark.png) center / contain no-repeat; mask: url(art/av-mark.png) center / contain no-repeat; }
.handcrafted h2 b { font-weight: 700; }
.ppl { position: relative; display: inline-block; margin: 0 .14em 0 .16em; }
.ppl svg { position: absolute; left: -11%; top: -4%; width: 122%; height: 118%; overflow: visible; }
.ppl path { fill: none; stroke: var(--pink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .55s; }
.in .ppl path { stroke-dashoffset: 0; }
.handcrafted .inner { width: min(560px, 100%); margin-left: 12%; }
.handcrafted h2 { font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; margin: 0 0 26px; }
.handcrafted p { margin: 0 0 0 20%; font-size: 17px; font-weight: 500; line-height: 1.6; }
.handcrafted p b { font-weight: 600; }
.more-link { display: inline-flex; gap: 14px; align-items: center; margin: 24px 0 0 20%; font-family: "RF Dewi Condensed", var(--sans); font-weight: 500; font-size: 15px; color: #555; text-decoration: none; transition: color .25s; }
.more-link svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.more-link:hover { color: var(--pink); }
.more-link:hover svg { transform: translateX(4px); }

/* it's fun to collaborate (from her later revision) */
.collab { position: relative; padding: 30px 0 130px; overflow: hidden; }
.collab-stage { position: relative; max-width: 1126px; margin: 0 auto; height: 500px; }
.c-photo { position: absolute; left: 29.1%; top: 0; width: 59.8%; margin: 0; aspect-ratio: 508 / 285; box-shadow: 0 18px 40px rgba(0, 0, 0, 0); transition: box-shadow .8s ease 1s; }
.c-photo img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; clip-path: inset(0 0 0 100%); transition: clip-path 1.2s cubic-bezier(.65, 0, .25, 1) .15s; }
.collab.in .c-photo { box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.collab.in .c-photo img { clip-path: inset(0 0 0 0); }
.c-card { position: absolute; right: 3.5%; top: -76px; width: 16.7%; height: 170px; background: #fff; border-top-right-radius: 62px; box-shadow: 0 10px 24px rgba(0, 0, 0, .09); }
.c-card2 { position: absolute; left: -16%; bottom: -150px; width: 24%; height: 150px; background: #fff; border-top-right-radius: 70px; box-shadow: 0 10px 26px rgba(0, 0, 0, .07); }
.c-copy { position: absolute; z-index: 2; left: 2.5%; top: 30px; width: 44%; }
.c-copy .duo { margin: 0 0 40px; font-size: clamp(38px, 4.6vw, 64px); }
.c-copy p { margin: 0 0 30px 4px; max-width: 272px; font-size: 20px; font-weight: 500; line-height: 1.5; color: #222; }
.c-link { display: inline-flex; align-items: center; gap: 16px; margin-left: 4px; font-family: "RF Dewi Condensed", var(--sans); font-weight: 500; font-size: 15px; color: #555; text-decoration: none; transition: color .25s; }
.c-link svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.c-link:hover { color: var(--pink); }
.c-link:hover svg { transform: translateX(4px); }

/* intro (motion piece from the clips) */
.intro {
  position: relative; overflow: hidden;
  min-height: min(78vh, 720px);
  display: grid; place-items: center;
  padding: 80px 16px;
  --q: clamp(110px, 14vw, 210px);
  --cy: calc(var(--q) + 90px);
}
.intro .i-dark { position: absolute; right: 0; top: 0; width: 24%; height: 36%; background: var(--dark); border-bottom-left-radius: 140px; transform: scaleX(0); transform-origin: right; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1); }
.intro .i-outline { position: absolute; right: 24%; top: 0; width: 120px; height: 150px; border: 20px solid #efefef; border-left: 0; border-top: 0; border-bottom-right-radius: 120px; opacity: 0; transition: opacity .8s ease .6s; }
.intro .i-pink { position: absolute; left: calc(var(--q) * -1); bottom: calc(var(--cy) - var(--q)); width: calc(var(--q) * 2); height: calc(var(--q) * 2); background: var(--pink); border-radius: 50%; transform: scale(0); transform-origin: center; transition: transform 1s cubic-bezier(.2, .9, .25, 1) .2s; }
.intro .i-arcs { position: absolute; left: 0; bottom: calc(var(--cy) - var(--q) * 100 / 70); width: calc(var(--q) * 100 / 70); height: calc(var(--q) * 200 / 70); overflow: visible; }
.intro .i-arcs path { fill: none; stroke: var(--pink); stroke-width: .55; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.intro .i-arcs path:nth-child(1) { transition-delay: .45s; }
.intro .i-arcs path:nth-child(2) { transition-delay: .55s; }
.intro .i-arcs path:nth-child(3) { transition-delay: .65s; }
.intro .i-arcs path:nth-child(4) { transition-delay: .75s; }
.intro.in .i-dark, .intro.in .i-pink { transform: none; }
.intro.in .i-outline { opacity: 1; }
.intro.in .i-arcs path { stroke-dashoffset: 0; }
.intro-text { position: relative; font-size: clamp(30px, 5.4vw, 74px); line-height: 1.22; letter-spacing: -.015em; color: #222; }
.intro-text .il { white-space: nowrap; }
.arrow-dot { display: inline-grid; place-items: center; width: .82em; height: .82em; border-radius: 50%; vertical-align: -.08em; background: linear-gradient(135deg, var(--pink-2), var(--pink)); box-shadow: 0 4px 10px rgba(255, 10, 108, .3); }
.arrow-dot svg { width: 58%; height: 58%; }
.pill { position: relative; display: inline-flex; align-items: center; border: .055em solid #222; border-radius: 999px; padding: 0 .38em; height: 1.08em; vertical-align: -.17em; }
.pill-track { position: relative; display: block; height: 1.08em; overflow: hidden; transition: width .5s var(--ease); }
.pw { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 600; line-height: 1.02em; text-shadow: 0 .05em .06em rgba(0, 0, 0, .28); }
.tag { position: absolute; right: -.1em; top: -.42em; font-size: .38em; font-weight: 500; line-height: 1; color: #fff; padding: .16em .55em .22em; border-radius: 999px; background: linear-gradient(100deg, var(--blue-a), var(--blue-b)); box-shadow: 0 .12em .3em rgba(38, 51, 127, .3); transform-origin: 70% 60%; }
.who { position: relative; display: inline-block; height: 1.2em; vertical-align: top; transition: width .5s var(--ease); }
.ww { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 600; }
.ww.old { color: #b9b9b9; }
.scrib { position: absolute; left: -.08em; top: 1.05em; height: .5em; overflow: visible; pointer-events: none; }
.scrib path { fill: none; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.spark { display: inline-block; width: .74em; height: .74em; margin-left: .18em; vertical-align: -.06em; filter: drop-shadow(0 .04em .08em rgba(255, 10, 108, .3)); }

/* stepped wipe into the dark band */
.dark-band { position: relative; background: var(--dark); color: #fff; overflow: hidden; border-bottom-left-radius: 140px; }
.wipe { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; grid-template-rows: repeat(5, 1fr); }
.wipe i { display: block; background: var(--paper); position: relative; transform: translateX(0); }
.wipe i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 9vw; background: linear-gradient(90deg, var(--pink-2), var(--pink)); }
.wipe.go i { transform: translateX(calc(-100% - 9vw)); transition: transform 1s cubic-bezier(.65, 0, .25, 1); }
.wipe.go i:nth-child(1) { transition-delay: 0ms; }
.wipe.go i:nth-child(2) { transition-delay: 70ms; }
.wipe.go i:nth-child(3) { transition-delay: 140ms; }
.wipe.go i:nth-child(4) { transition-delay: 210ms; }
.wipe.go i:nth-child(5) { transition-delay: 280ms; }


.count { font-family: var(--num); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.count small { font-family: var(--sans); font-size: 10px; color: #9a9a9a; font-weight: 500; margin-left: 3px; }

/* 01 personality */
.personality { position: relative; padding: 110px 0 120px; }
.personality .glyph { position: absolute; right: 2%; top: -6%; width: min(560px, 60%); opacity: .9; pointer-events: none; }
.personality .glyph path { fill: none; stroke: rgba(255, 10, 108, .14); stroke-width: 30; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1) .35s; }
.personality.in .glyph path { stroke-dashoffset: 0; }
.personality h2 { font-weight: 500; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.3; margin: 26px 0 24px; }
.personality h2 .serif-pink { font-size: 1.14em; line-height: 1; }
.underbar { width: 92px; height: 3px; background: var(--pink); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .5s; }
.in .underbar { transform: scaleX(1); }
.side-copy { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; max-width: 560px; margin: 26px 0 0 30%; font-size: 14px; line-height: 1.6; }
.side-copy .arr { color: var(--pink); margin-top: -14px; }
.side-copy .dim { color: #8a8a8a; }

/* 02 services */
.services { position: relative; padding: 40px 0 110px; }
.services .ghost { position: absolute; left: 22%; top: -30px; font-weight: 600; font-size: clamp(90px, 13vw, 190px); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .07); letter-spacing: -.02em; pointer-events: none; }
.services .layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 34px; align-items: center; position: relative; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile.r-bl { border-bottom-left-radius: 60px; }
.tile.r-tr { border-top-right-radius: 60px; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #2a2a2a; }
.tile .slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .7s ease, transform 2.6s var(--ease); }
.tile .slide.on { opacity: 1; transform: scale(1); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .55)); }
.tile .ico { position: absolute; left: 12%; top: 10%; width: 18%; z-index: 2; }
.tile .label { position: absolute; left: 10%; bottom: 9%; z-index: 2; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.2; font-weight: 500; }
.tile.empty { background: transparent; }
.tile.empty::after { display: none; }
.tile.empty .count { position: absolute; left: 8%; bottom: 6%; }
.services .copy { display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-size: 15px; line-height: 1.55; }
.services .copy .arr { color: var(--pink); margin-top: -12px; }
.services .copy b { font-weight: 600; display: block; }
.services .copy .dim { color: #9a9a9a; }

/* art placeholders for tiles (the real thumbnails weren't preserved) */
.a1 { background: radial-gradient(circle at 65% 40%, #1d1d1d 0 16%, transparent 16.5%), linear-gradient(135deg, var(--pink-2), var(--pink)); }
.a2 { background: radial-gradient(circle at 35% 65%, var(--pink) 0 12%, transparent 12.5%), linear-gradient(135deg, var(--blue-a), var(--blue-b)); }
.a3 { background: linear-gradient(120deg, var(--orange), var(--pink) 80%); }
.a4 { background: radial-gradient(circle at 58% 52%, transparent 0 20%, var(--pink) 20.5% 24%, transparent 24.5%), linear-gradient(135deg, #2c2c2c, #131313); }
.a5 { background: linear-gradient(90deg, var(--blue-b) 0 45%, transparent 45%), linear-gradient(135deg, var(--blue-a), var(--blue-b)); }
.a6 { background: radial-gradient(circle at 0 100%, var(--pink) 0 34%, transparent 34.5%), linear-gradient(145deg, #f2f2f2, #d9d9d9); }
.a7 { background: radial-gradient(circle at 62% 50%, #1b1b1b 0 18%, transparent 18.5%), linear-gradient(90deg, var(--blue-a) 0 40%, var(--blue-b) 40%); }
.a8 { background: radial-gradient(circle at 100% 0, #1d1d1d 0 40%, transparent 40.5%), linear-gradient(135deg, var(--pink-2), var(--pink)); }
.a9 { background: radial-gradient(circle at 45% 55%, transparent 0 22%, #fff 22.5% 25%, transparent 25.5%), linear-gradient(120deg, var(--orange), var(--pink)); }

/* projects */
.projects { padding: 90px 0 110px; }
.stage { position: relative; width: min(1000px, 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.stage > * { position: absolute; }
.p-intro { left: 11.4%; top: 3.6%; width: 15%; font-size: max(12px, 1.35cqw); line-height: 1.55; font-weight: 500; }
.p-intro p { margin: 0 0 1.4em; }
.p-intro .count, .process .count { margin-bottom: 1em; }
.footer .count { margin-bottom: 30px; }
.footer .count small { color: #6f6f6f; }
.p-title { left: 10.4%; top: 21%; width: 15%; height: 27.5%; display: flex; justify-content: flex-start; }
.p-title h2 { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-weight: 400; font-size: 6.9cqw; line-height: .98; }
.p-title h2 span { display: block; }
.p-title h2 span { font-family: var(--sans); font-weight: 400; font-size: .86em; }
.p-title h2 em { font-family: "Reina Neue Display", var(--serif); font-weight: 900; font-style: normal; color: var(--pink); }
.tilep {
  border-radius: 0; overflow: hidden; color: #fff; text-decoration: none;
  padding: 1.75cqw 1.6cqw;
  transition: opacity .8s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), background-position .8s var(--ease);
  background-size: 140% 140%; background-position: 0% 0%;
}
.tilep:hover { background-position: 100% 100%; }
.stage a.tilep.in:hover, a.tilep:hover { transform: translateY(-.5cqw); box-shadow: 0 1.6cqw 3cqw rgba(0, 0, 0, .18); }
.tilep b { display: block; font-size: max(12px, 1.5cqw); font-weight: 600; }
.tilep span { display: block; font-size: max(10px, .95cqw); opacity: .9; margin-top: .3cqw; }
.g-pink { background-image: linear-gradient(135deg, var(--pink-2), var(--pink) 60%, #ff2d7e); }
.g-blue { background-image: linear-gradient(135deg, var(--blue-a), var(--blue-b) 80%); }
.g-dark { background-image: linear-gradient(135deg, #2c2c2c, #131313 80%); }
.g-orange { background-image: linear-gradient(120deg, var(--orange), var(--pink) 75%); }
.r-bl { border-bottom-left-radius: 5.5cqw; }
.r-tr { border-top-right-radius: 5.5cqw; }
.r-tl { border-top-left-radius: 5.5cqw; }
.deco-black { left: 75.15%; top: 1.2%; width: 24.85%; height: 12.5%; background: var(--dark); border-bottom-left-radius: 5.5cqw; z-index: 2; }
.deco-pink { left: 3.46%; top: 84.23%; width: 15.05%; height: 12.54%; background: var(--pink); border-top-right-radius: 5.5cqw; z-index: 2; }
.see-more { display: grid; place-items: center; align-content: center; gap: 1.6cqw; text-align: center; }
.see-more svg { width: 8.5cqw; height: 8.5cqw; transition: transform .5s var(--ease); }
.see-more:hover svg { transform: translateX(.6cqw); }
.see-more b { font-size: max(14px, 2cqw); font-weight: 500; }
.stage [data-reveal] { transform: translateY(18px) scale(.97); }
.stage [data-reveal].in { transform: none; }

/* creative process (white card, from her revision) */
.process { position: relative; padding: 90px 0 130px; }
.process .panel { position: relative; background: #fff; color: var(--ink); box-shadow: 0 16px 44px rgba(0, 0, 0, .1); margin: 0 8.3% 0 16px; padding: 70px 9% 84px 16%; }
.process .black-q { position: absolute; left: 81%; top: 42px; width: 208px; height: 210px; background: var(--dark); border-top-right-radius: 150px; }
.process .pink-q { position: absolute; left: 5.3%; bottom: 50px; width: 155px; height: 155px; background: var(--pink); border-bottom-left-radius: 130px; }
.process h2 { font-weight: 500; font-size: clamp(26px, 2.8vw, 38px); margin: 0 0 46px; letter-spacing: -.01em; }
.process h2 .hl { position: relative; }
.process h2 .hl svg { position: absolute; left: -1%; bottom: -.32em; width: 102%; height: .3em; overflow: visible; }
.process h2 .hl path { fill: none; stroke: var(--pink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.process h2 .hl svg { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) .5s; }
.process.in h2 .hl svg { clip-path: inset(0 -4px 0 -4px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.step .ico { width: 62px; height: 62px; color: var(--ink); margin-bottom: 14px; transition: transform .45s var(--ease), color .3s; }
.step:hover .ico { transform: rotate(-8deg) scale(1.08); color: var(--pink); }
.step h3 { margin: 0 0 10px; font-size: 21px; font-weight: 600; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: #333; }
.step p b { font-weight: 600; color: var(--ink); }

/* see what others have to say */
.voices { position: relative; padding: 70px 0 120px; overflow: hidden; }
.q-ghost { position: absolute; right: 1.1%; top: 18px; width: min(544px, 40vw); pointer-events: none; filter: url(#deboss); }
.q-ghost svg { display: block; width: 100%; height: auto; fill: #fff; }
.v-ghostcard { position: absolute; left: 0; bottom: 30px; width: min(408px, 29vw); height: 330px; background: #fff; border-bottom-right-radius: 80px; box-shadow: 0 10px 30px rgba(0, 0, 0, .07); pointer-events: none; }
.v-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 40px; margin: 0 0 70px; padding: 0 2%; }
.v-head h2 { font-size: clamp(32px, 3.8vw, 50px); }
.v-side { max-width: 430px; }
.v-side p { margin: 0 0 20px; font-size: 18px; font-weight: 500; line-height: 1.55; }
.v-side b { font-weight: 600; }
.v-all { display: inline-flex; align-items: center; gap: 16px; font-family: "RF Dewi Condensed", var(--sans); font-weight: 500; font-size: 15px; color: #555; cursor: default; user-select: none; }
.v-all svg { width: 17px; height: 17px; }
.v-carousel { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center; gap: 46px; }
.v-carousel .v-arrow { margin-top: 108px; }
.v-track { flex: 0 1 1037px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 43px; }
.v-item { margin: 0; display: flex; flex-direction: column; transition: opacity .3s ease, transform .45s var(--ease); }
.v-track.out .v-item { opacity: 0; transform: translateX(var(--dx, -28px)); transition: opacity .25s ease, transform .3s ease; }
.v-quote { position: relative; margin: 0; flex: 1; background: #fff; border-radius: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, .13); padding: 50px 30px 30px; min-height: 266px; font-size: 18px; line-height: 1.62; color: #2b2b2b; }
.v-quote::after { content: ""; position: absolute; right: 26px; top: 34px; width: 86px; height: 60px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 385 270'%3E%3Cpath fill='%23ebebeb' d='M0 0H165V165L110 270H30L85 165H0ZM220 0H385V165L330 270H250L305 165H220Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.v-quote p { position: relative; z-index: 1; margin: 0; }
.v-who { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.v-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 19px; }
.v-who b { display: block; font-size: 17px; font-weight: 700; }
.v-who small { display: block; font-size: 12px; color: #777; }
.v-arrow { flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; }
.v-arrow:hover, .v-arrow:focus-visible { transform: scale(1.08); box-shadow: 0 6px 16px rgba(255, 10, 108, .35); outline: none; }
.v-arrow svg { width: 20px; height: 20px; }

/* ready to co-create */
.cta-end { position: relative; padding: 150px 0 220px; overflow: hidden; text-align: center; }
.cta-end .wrap { position: relative; z-index: 1; }
.cta-end h2 { margin: 0 0 30px; font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; letter-spacing: -.01em; }
.hl2 { position: relative; display: inline-block; }
.cta-end .mask-line:last-child { padding-bottom: .45em; margin-bottom: -.37em; }
.hl2 svg { position: absolute; left: -1%; bottom: -.3em; width: 102%; height: .3em; overflow: visible; }
.hl2 path { fill: none; stroke: var(--pink); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hl2 svg { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease) .5s; }
.cta-end.in .hl2 svg { clip-path: inset(0 -4px 0 -4px); }
.ce-btn { display: inline-block; background: var(--pink); color: #fff; font-family: "RF Dewi Condensed", var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .06em; padding: 8px 27px; border-radius: 999px; cursor: default; user-select: none; }
.ce-black { position: absolute; left: 12.5%; top: 81px; width: 216px; height: 188px; background: var(--dark); border-top-left-radius: 125px; }
.ce-card { position: absolute; left: 66.5%; top: 27px; width: 196px; height: 126px; background: #fff; border-top-right-radius: 62px; box-shadow: 0 10px 24px rgba(0, 0, 0, .09); }
.ce-pink { position: absolute; left: 75.5%; top: 242px; width: 251px; height: 216px; background: var(--pink); border-bottom-right-radius: 135px; }

.footer { position: relative; background: #1f1f1f; color: #fff; padding: 90px 0 90px; overflow: hidden; }
.footer .ghost { position: absolute; left: 31%; bottom: -.3em; line-height: 1; font-weight: 500; font-size: clamp(150px, 21vw, 300px); color: #1f1f1f; filter: url(#deboss-dark); pointer-events: none; white-space: nowrap; }
/* footer */
.footer .cols { position: relative; display: grid; grid-template-columns: 1.3fr .6fr 1fr .9fr; gap: 40px; }
.footer .explore span { display: block; margin: 0 0 8px; font-size: 15.5px; color: #e6e6e6; cursor: default; user-select: none; }
.logo-big { font-family: var(--logo); font-weight: 700; font-size: 64px; letter-spacing: -.01em; line-height: 1; position: relative; display: inline-block; }
.logo-big .i { position: relative; }
.logo-big .i::after { content: ""; position: absolute; left: 50%; top: .235em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--pink); }
.footer .tagline { font-size: 20px; margin: 30px 0 34px; }
.socials { display: flex; gap: 18px; }
.socials .soc { position: relative; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.socials .soc:hover, .socials .soc:focus-visible { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(255, 10, 108, .35); outline: none; }
.socials .tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); background: var(--pink); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 10px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); }
.socials .soc:hover .tip, .socials .soc:focus-visible .tip, .socials .soc.copied .tip { opacity: 1; transform: translate(-50%, 0); }
.socials svg { width: 22px; height: 22px; }
.footer h4 { font-weight: 500; font-size: 26px; margin: 0 0 18px; }
.footer .col p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; color: #e6e6e6; }
.footer .col .dim { color: #6f6f6f; }

@media (max-width: 1240px) and (min-width: 861px) {
  .c-copy p { font-size: 16px; max-width: 195px; }
  .c-copy .duo { font-size: clamp(32px, 4.2vw, 52px); }
  .ce-black { left: 4%; width: 150px; height: 130px; border-top-left-radius: 90px; }
  .ce-pink { left: auto; right: 3%; width: 180px; height: 155px; border-bottom-right-radius: 100px; }
  .ce-card { left: auto; right: 16%; width: 140px; height: 90px; }
}

@media (max-width: 860px) {
  .collab { padding: 10px 0 90px; }
  .collab-stage { height: auto; display: flex; flex-direction: column-reverse; gap: 26px; }
  .c-photo { position: relative; left: 0; width: 100%; }
  .c-copy { position: relative; left: 0; top: 0; width: auto; }
  .c-card { display: none; }
  .nav .links { display: none; }
  .nav .cta { margin-left: auto; }
  .hero { padding-top: 70px; }
  .hero-stage { padding: 80px 0 60px; margin-top: 40px; }
  .cards { grid-template-columns: 1fr; width: min(380px, 100%); }
  .hero .shape-black { width: 40%; }
  .hero .shape-pink { width: 60%; height: 120px; }
  .handcrafted .inner { margin-left: 0; }
  .handcrafted p, .more-link { margin-left: 0; }
  .intro-text { font-size: clamp(24px, 8vw, 44px); }
  .intro { --q: 80px; --cy: 130px; }
  .intro .i-dark { width: 38%; height: 20%; border-bottom-left-radius: 70px; }
  .intro .i-outline { display: none; }
  .dark-band { border-bottom-left-radius: 70px; }
  .side-copy { margin-left: 0; }
  .services .layout { grid-template-columns: 1fr; }
  .stage { aspect-ratio: auto; container-type: normal; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stage > * { position: static; }
  .p-intro, .p-title { grid-column: 1 / -1; width: auto; height: auto; font-size: 14px; }
  .p-title h2 { writing-mode: horizontal-tb; transform: none; font-size: 46px; display: flex; gap: .25em; }
  .stage > .tilep { width: auto !important; height: auto !important; min-height: 150px; padding: 16px; }
  .personality .glyph { width: 90%; top: 18%; right: -30%; opacity: .45; }
  .tilep.wide { grid-column: 1 / -1; }
  .tilep b { font-size: 15px; }
  .tilep span { font-size: 11px; }
  .r-bl { border-bottom-left-radius: 40px; }
  .r-tr { border-top-right-radius: 40px; }
  .r-tl { border-top-left-radius: 40px; }
  .see-more svg { width: 54px; height: 54px; }
  .deco-black, .deco-pink { display: none; }
  .process .panel { margin: 0; padding: 60px 24px 80px; }
  .process .black-q { left: auto; right: 0; width: 80px; height: 80px; top: 50px; border-top-right-radius: 70px; }
  .process .pink-q { width: 80px; height: 80px; left: -10px; bottom: 40px; border-bottom-left-radius: 70px; }
  .av-ghost { width: 260px; left: -60px; top: -60px; }
  .v-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
  .v-track { grid-template-columns: 1fr; }
  .v-track .v-item:not(:first-child) { display: none; }
  .v-carousel { gap: 10px; }
  .v-arrow { width: 38px; height: 38px; }
  .q-ghost { width: 260px; right: -30px; }
  .v-ghostcard { display: none; }
  .v-carousel { align-items: center; gap: 10px; }
  .v-carousel .v-arrow { margin-top: 0; }
  .v-track { flex: 1; }
  .cta-end { padding: 120px 0 150px; }
  .ce-black { left: -20px; top: 30px; width: 90px; height: 80px; border-top-left-radius: 60px; }
  .ce-card { left: auto; right: 6%; top: 20px; width: 90px; height: 60px; }
  .ce-pink { left: auto; top: auto; right: -20px; bottom: 40px; width: 110px; height: 90px; border-bottom-right-radius: 70px; }
  .c-card2 { display: none; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .footer .cols { grid-template-columns: 1fr; }
  .footer .explore { display: none; }
  .logo-big { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .c-photo, .c-photo img { clip-path: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-reveal], .mask-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .personality .glyph path, .ppl path { stroke-dashoffset: 0; transition: none; }
  .process h2 .hl svg, .hl2 svg { clip-path: none; transition: none; }
  .wipe { display: none; }
  .hero .sparkle-outline { animation: none; }
  .intro .i-dark, .intro .i-pink { transform: none; transition: none; }
  .intro .i-outline { opacity: 1; transition: none; }
  .intro .i-arcs path { stroke-dashoffset: 0; transition: none; }
  .underbar { transform: none; transition: none; }
}