@layer theme, base, strut-base, components, utilities;
@layer strut-base {
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--header-height);
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
p,
ul,
ol {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: var(--color-accent-strong);
text-decoration: underline;
text-underline-offset: var(--underline-offset);
transition: color var(--duration-link) var(--ease-link);
}
a:hover {
color: var(--color-text);
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
:focus-visible {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
button:not(:disabled) {
cursor: pointer;
}
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
[data-on-accent] a {
color: inherit;
}
[data-on-accent] :focus-visible {
outline-color: var(--color-on-accent);
}
[data-on-ink] a {
color: var(--color-on-ink);
}
[data-on-ink] a:hover {
color: var(--color-accent);
}
[data-on-ink] :focus-visible {
outline-color: var(--color-on-ink);
}
}
@layer components {
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--header-height);
padding-top: var(--bar-top);
pointer-events: none;
}
.site-bar {
position: relative;
width: min(100% - 2 * var(--gutter), var(--bar-width));
margin-inline: auto;
pointer-events: auto;
animation: site-header-in var(--duration-header-in) var(--ease-out);
}
@keyframes site-header-in {
from { transform: translateY(calc(-100% - var(--space-4))); }
to { transform: none; }
}
.site-bar__row {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
height: var(--bar-height);
padding-inline: var(--space-4) var(--space-3);
container-type: inline-size;
border-radius: var(--radius-md);
background: var(--color-black);
box-shadow: 0 0 0 1px var(--color-border-on-ink);
color: var(--color-on-ink);
}
.site-bar__row--logo {
grid-template-columns: auto;
}
.site-bar.is-open .site-bar__row {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.site-bar :focus-visible {
outline-color: var(--color-on-ink);
}
.site-bar__logo img {
display: block;
width: auto;
height: var(--logo-height);
transition: opacity var(--duration-link) var(--ease-link);
}
@media (hover: hover) {
.site-bar__logo:hover img,
.site-bar__toggle:hover .site-bar__burger {
opacity: var(--opacity-bar-hover);
}
.site-bar__toggle[aria-expanded="false"]:hover .site-bar__burger span:first-child {
transform: translateY(calc(-1 * var(--burger-spread)));
}
.site-bar__toggle[aria-expanded="false"]:hover .site-bar__burger span:last-child {
transform: translateY(var(--burger-spread));
}
}
.site-bar__display {
justify-self: center;
display: inline-flex;
align-items: center;
gap: 0.6ch;
max-width: 100%;
overflow: hidden;
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: var(--weight-display);
line-height: 1;
letter-spacing: var(--tracking-display);
white-space: pre;
color: var(--color-muted-on-ink);
text-decoration: none;
transition: color var(--duration-link) var(--ease-link);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.site-bar__display {
background: var(--gradient-display);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.site-bar__display.is-ticker {
background: none;
}
.site-bar__display.is-ticker .site-bar__display-text {
background: var(--gradient-display);
background-size: var(--ticker-distance) 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.site-bar__display.is-ticker.is-link:hover .site-bar__display-text {
background: none;
color: var(--color-on-ink);
}
}
.site-bar__display:not(.is-link) .site-bar__display-arrow {
display: none;
}
.site-bar__display.is-ticker {
justify-self: stretch;
width: 100%;
-webkit-mask-image: var(--mask-ticker);
mask-image: var(--mask-ticker);
}
.site-bar__display.is-ticker .site-bar__display-arrow {
display: none;
}
.site-bar__display.is-ticker .site-bar__display-text {
flex: none;
}
.site-bar__display.is-ticker.is-running .site-bar__display-text {
animation: display-ticker var(--ticker-duration) linear infinite;
}
.site-bar__display.is-ticker:hover .site-bar__display-text,
.site-bar__display.is-ticker:focus-visible .site-bar__display-text {
animation-play-state: paused;
}
@keyframes display-ticker {
to { transform: translateX(calc(-1 * var(--ticker-distance))); }
}
.site-bar__display.is-link:hover {
color: var(--color-on-ink);
text-decoration: none;
}
.site-bar__display-arrow {
display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
.site-bar__display.is-link .site-bar__display-arrow {
animation: display-nudge 2.4s steps(2, end) infinite;
}
}
@keyframes display-nudge {
0%, 70%, 100% { transform: none; }
80%, 90% { transform: translateX(0.5ch); }
}
.site-bar__toggle {
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
padding: 0;
border: 0;
background: none;
color: var(--color-on-ink);
cursor: pointer;
}
.site-bar__toggle[hidden] {
display: none;
}
.site-bar__burger {
display: grid;
gap: var(--space-1);
width: var(--space-6);
transition: opacity var(--duration-link) var(--ease-link);
}
.site-bar__burger span {
display: block;
height: var(--line-width);
background: currentColor;
transition: transform var(--duration-medium) var(--ease-out);
}
.site-bar__toggle[aria-expanded="true"] .site-bar__burger span:first-child {
transform: translateY(calc(var(--space-1) + var(--line-width)));
}
.site-bar__toggle[aria-expanded="true"] .site-bar__burger span:last-child {
transform: translateY(calc(-1 * (var(--space-1) + var(--line-width))));
}
.site-bar__menu-link {
font-family: var(--font-heading);
font-weight: var(--weight-medium);
color: var(--color-on-ink);
text-decoration: none;
}
.js .site-bar__menu-link {
display: none;
}
.site-bar__panel {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
overflow: hidden;
border-end-start-radius: var(--radius-md);
border-end-end-radius: var(--radius-md);
}
.site-bar.is-open .site-bar__panel {
display: block;
}
.site-bar__links {
display: grid;
gap: var(--space-5);
margin: 0;
padding: var(--space-5);
}
.site-bar__link {
display: flex;
align-items: center;
gap: var(--space-4);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
color: var(--color-on-ink);
text-decoration: none;
transition: color var(--duration-link) var(--ease-link);
}
.site-bar__link:hover,
.site-bar__link[aria-current] {
color: var(--color-accent);
text-decoration: none;
}
.site-bar__cover {
position: relative;
flex: none;
overflow: hidden;
width: var(--size-nav-cover);
height: var(--size-nav-cover);
border-radius: var(--radius-sm);
isolation: isolate;
transition: transform var(--duration-link) var(--ease-link);
}
.site-bar__covers img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-nav-fade) var(--ease-link);
}
.site-bar__covers img.is-shown {
opacity: 1;
}
.site-bar__cover--brand {
background: var(--gradient-brand);
}
.site-bar__link:hover .site-bar__cover,
.site-bar__link:focus-visible .site-bar__cover {
transform: scale(var(--scale-active));
}
.site-bar__views {
position: relative;
display: grid;
pointer-events: none;
}
.site-bar__views::before {
content: "";
position: absolute;
inset: 0;
border-end-start-radius: var(--radius-md);
border-end-end-radius: var(--radius-md);
background: var(--color-black);
box-shadow: inset 0 -1px 0 var(--color-border-on-ink);
transform: scaleY(var(--menu-fit, 1));
transform-origin: top;
transition: transform var(--duration-medium) var(--ease-out);
}
.site-bar__views > * {
position: relative;
grid-area: 1 / 1;
align-self: start;
min-width: 0;
pointer-events: auto;
}
.site-bar__sub {
display: grid;
gap: var(--space-5);
padding: var(--space-5);
}
.site-bar__sub[hidden] {
display: none;
}
.site-bar__sub .site-bar__links {
padding: 0;
}
.site-bar__views .is-away {
visibility: hidden;
pointer-events: none;
}
.site-bar__chevron {
flex: none;
width: var(--space-4);
height: var(--space-4);
margin-left: auto;
color: var(--color-muted-on-ink);
transition: color var(--duration-link) var(--ease-link), transform var(--duration-link) var(--ease-link);
}
.site-bar__link:hover .site-bar__chevron,
.site-bar__link:focus-visible .site-bar__chevron {
color: var(--color-on-ink);
transform: translateX(var(--space-1));
}
.site-bar__back {
display: inline-flex;
align-items: center;
gap: var(--space-1);
justify-self: start;
margin-left: calc(-1 * var(--space-1));
padding: 0;
border: 0;
background: none;
color: var(--color-muted-on-ink);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-regular);
cursor: pointer;
transition: color var(--duration-link) var(--ease-link);
}
.site-bar__back:hover,
.site-bar__back:focus-visible {
color: var(--color-on-ink);
}
.site-bar__back-icon {
width: var(--space-4);
height: var(--space-4);
transition: transform var(--duration-link) var(--ease-link);
}
.site-bar__back:hover .site-bar__back-icon,
.site-bar__back:focus-visible .site-bar__back-icon {
transform: translateX(calc(-1 * var(--space-1)));
}
.site-bar__backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: var(--color-backdrop);
backdrop-filter: blur(var(--blur-backdrop));
}
.site-bar__backdrop[hidden] {
display: none;
}
.discipline-photo--strategy {
object-position: 50% 26%;
}
.has-footer-reveal #main {
position: relative;
z-index: 10;
min-height: var(--footer-hold);
background: var(--color-bg);
border-end-start-radius: var(--radius-island);
border-end-end-radius: var(--radius-island);
}
.has-footer-reveal #main::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: var(--space-8);
background: var(--gradient-reveal-shade);
pointer-events: none;
}
.has-footer-reveal #site-footer {
position: sticky;
top: var(--footer-stick);
margin-top: calc(-1 * var(--footer-hold));
z-index: 0;
}
.has-footer-reveal body::after {
content: "";
display: block;
height: var(--footer-hold);
}
.site-footer {
position: relative;
isolation: isolate;
}
.site-footer__glow {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.lava {
--lava-colour: var(--color-lava-coral);
--lava-size: 70%;
position: absolute;
left: 50%;
bottom: 0;
width: var(--lava-size);
aspect-ratio: 1;
margin-left: calc(var(--lava-size) / -2);
margin-bottom: calc(var(--lava-size) / -1.7);
border-radius: 50%;
background: radial-gradient(closest-side, var(--lava-colour), transparent);
mix-blend-mode: screen;
will-change: transform;
}
.lava--blue {
--lava-colour: var(--color-lava-blue);
--lava-size: 95%;
}
.lava--pink {
--lava-colour: var(--color-lava-pink);
--lava-size: 55%;
}
.lava--purple {
--lava-colour: var(--color-lava-purple);
--lava-size: 60%;
}
.site-footer__grain {
position: absolute;
inset: 0;
background: url("/images/grain.gif") repeat;
opacity: var(--opacity-grain);
-webkit-mask-image: var(--mask-grain);
mask-image: var(--mask-grain);
}
@media (prefers-reduced-motion: reduce) {
.site-footer__grain { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.lava--coral { animation: lava-a var(--duration-lava) ease-in-out infinite alternate; }
.lava--blue { animation: lava-b calc(var(--duration-lava) * 1.3) ease-in-out infinite alternate; }
.lava--pink { animation: lava-c calc(var(--duration-lava) * 0.8) ease-in-out infinite alternate; }
.lava--purple { animation: lava-d calc(var(--duration-lava) * 1.1) ease-in-out infinite alternate; }
.site-footer.is-still .lava,
.hero-backdrop.is-still .lava,
.page-glow.is-still .lava { animation-play-state: paused; }
}
@keyframes lava-a {
0% { transform: translate(-18%, 4%) scale(1); }
50% { transform: translate(8%, -6%) scale(1.12); }
100% { transform: translate(20%, 2%) scale(0.95); }
}
@keyframes lava-b {
0% { transform: translate(16%, 2%) scale(1.05); }
50% { transform: translate(-10%, -4%) scale(0.92); }
100% { transform: translate(-22%, 3%) scale(1.08); }
}
@keyframes lava-c {
0% { transform: translate(-30%, 0) scale(0.9); }
50% { transform: translate(25%, -8%) scale(1.15); }
100% { transform: translate(5%, 2%) scale(1); }
}
@keyframes lava-d {
0% { transform: translate(28%, 0) scale(1.08); }
50% { transform: translate(-6%, -7%) scale(0.88); }
100% { transform: translate(-26%, 2%) scale(1.12); }
}
.footer-slogan-wrap {
margin-top: var(--space-8);
container-type: inline-size;
}
.footer-slogan {
font-family: var(--font-heading);
font-size: var(--text-footer-slogan);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
white-space: nowrap;
color: var(--color-on-ink);
}
.contact-plain a {
text-decoration: none;
}
#site-footer a,
#site-footer a:hover {
text-decoration: none;
}
.footer-social {
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
border: 1px solid var(--color-border-on-ink);
border-radius: var(--radius-pill);
color: var(--color-on-ink);
transition: color var(--duration-link) var(--ease-link), border-color var(--duration-link) var(--ease-link);
}
.footer-social:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
.footer-social svg {
display: block;
}
.brand-gradient {
background: var(--gradient-brand);
color: var(--color-on-ink);
}
.brand-gradient :focus-visible {
outline-color: var(--color-on-ink);
}
.about-purpose {
margin-inline: 0;
margin-bottom: 0;
}
.about-purpose__statement {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.policy {
display: grid;
gap: var(--space-7);
}
@media (min-width: 64rem) {
.policy {
grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
gap: var(--space-8);
}
}
.policy-contents {
display: none;
}
@media (min-width: 64rem) {
.policy-contents {
display: block;
position: sticky;
top: calc(var(--header-height) + var(--space-5));
align-self: start;
}
}
.policy-contents__title {
margin: 0 0 var(--space-4);
color: var(--color-muted);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.policy-contents ol {
display: grid;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.policy-contents a {
display: flex;
gap: var(--space-3);
align-items: baseline;
padding: var(--space-2) 0;
color: var(--color-muted);
font-family: var(--font-heading);
font-weight: var(--weight-medium);
text-decoration: none;
transition: color var(--duration-link) var(--ease-link);
}
.policy-contents a:hover,
.policy-contents a[aria-current="true"] {
color: var(--color-text);
}
.policy-contents__number {
min-width: var(--space-6);
font-variant-numeric: tabular-nums;
}
.policy-contents a::after {
content: "";
flex: none;
align-self: center;
width: var(--space-2);
height: var(--space-2);
margin-left: auto;
border-radius: 50%;
background: var(--color-accent);
transform: scale(0);
transition: transform var(--duration-medium) var(--ease-orb-pop);
}
.policy-contents a[aria-current="true"]::after {
transform: none;
}
.policy-section {
display: grid;
gap: var(--space-5);
padding-block: var(--space-7);
border-top: var(--border-width) solid var(--color-border);
scroll-margin-top: calc(var(--header-height) + var(--space-5));
}
.policy-section:first-child {
padding-top: 0;
border-top: 0;
}
.policy-section__head {
display: grid;
gap: var(--space-2);
}
.policy-section__number {
margin: 0;
color: var(--color-muted);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
}
.policy-subhead {
margin: var(--space-3) 0 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-heading);
}
.policy-tiles {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.policy-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.policy-tile {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.policy-tile__icon {
display: grid;
place-items: center;
width: var(--space-7);
height: var(--space-7);
border-radius: 50%;
background: var(--color-accent);
color: var(--color-on-accent);
}
.policy-tile__icon svg {
width: var(--space-5);
height: var(--space-5);
}
.policy-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.policy-pills li {
padding: var(--space-2) var(--space-4);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-weight: var(--weight-medium);
}
.policy-checks {
display: grid;
gap: var(--space-3) var(--space-6);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
@media (min-width: 48rem) {
.policy-checks--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.policy-checks li {
position: relative;
padding-left: var(--space-6);
}
.policy-checks li::before {
content: "";
position: absolute;
top: var(--space-1);
left: var(--space-1);
width: var(--space-2);
height: var(--space-3);
border: solid var(--color-accent);
border-width: 0 var(--focus-width) var(--focus-width) 0;
transform: rotate(45deg);
}
.policy-nots {
display: grid;
gap: var(--space-3);
margin: 0;
padding: var(--space-5);
border-radius: var(--radius-island);
background: var(--color-ink);
color: var(--color-on-ink);
list-style: none;
}
@media (min-width: 48rem) {
.policy-nots {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: var(--space-6);
}
}
.policy-nots li {
display: grid;
align-content: start;
gap: var(--space-4);
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.policy-nots__cross {
position: relative;
width: var(--space-7);
height: var(--space-7);
border-radius: 50%;
background: var(--color-accent);
}
.policy-nots__cross::before,
.policy-nots__cross::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--space-5);
height: var(--focus-width);
margin: calc(var(--focus-width) / -2) 0 0 calc(var(--space-5) / -2);
border-radius: var(--radius-pill);
background: var(--color-on-accent);
transform: rotate(45deg);
}
.policy-nots__cross::after {
transform: rotate(-45deg);
}
.cookie-art {
flex: none;
width: var(--size-cookie-art);
aspect-ratio: 1;
filter: drop-shadow(var(--shadow-cookie)) drop-shadow(var(--shadow-cookie-near));
}
.cookie-art__image {
display: block;
width: 100%;
height: auto;
}
@media (prefers-reduced-motion: no-preference) {
.cookie-art__image {
animation:
cookie-turn var(--duration-cookie-turn) linear infinite,
cookie-in var(--duration-cookie-arrive) var(--ease-out) both;
}
}
@keyframes cookie-turn {
from {
rotate: 0turn;
}
to {
rotate: 1turn;
}
}
@keyframes cookie-in {
from {
opacity: 0;
scale: 0.6;
translate: 0 var(--space-5);
transform: rotate(-0.5turn);
}
}
.ai-policy-art {
display: block;
width: var(--size-cookie-art);
height: auto;
border-radius: var(--radius-md);
}
.cookie-choices {
display: grid;
gap: var(--space-3);
}
@media (min-width: 48rem) {
.cookie-choices {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cookie-choice {
display: grid;
align-content: start;
gap: var(--space-4);
padding: var(--space-5);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-md);
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.cookie-choice--all {
border-color: var(--color-ink);
background: var(--color-ink);
color: var(--color-on-ink);
}
.cookie-choice__label {
justify-self: start;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-medium);
}
.cookie-choice--all .cookie-choice__label {
background: var(--color-accent);
color: var(--color-on-accent);
}
.cookie-name {
font-family: var(--font-display);
font-size: var(--text-lg);
overflow-wrap: anywhere;
}
.cookie-cards {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.cookie-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cookie-card {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.cookie-card dl {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
margin: 0;
}
.cookie-card dt {
color: var(--color-muted);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.cookie-card dd {
margin: 0;
}
}
html body .policy {
.cky-audit-table-element .cky-table-wrapper table.cky-cookie-audit-table :is(thead, tbody, tr, th, td) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--color-text);
}
.cky-audit-table-element .cky-table-wrapper table.cky-cookie-audit-table tbody tr + tr {
border-top: var(--border-width) solid var(--color-border) !important;
}
.cky-audit-table-element .cky-table-wrapper table.cky-cookie-audit-table th {
color: var(--color-muted);
}
.cky-audit-table-element .cky-table-wrapper table.cky-cookie-audit-table th {
border-bottom: var(--border-width) solid var(--color-border) !important;
}
.cky-audit-table-element {
display: grid;
gap: var(--space-3);
margin-top: var(--space-6);
}
.cky-audit-table-element h3 {
margin: var(--space-4) 0 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
}
.cky-audit-table-element .cky-category-des p {
margin: 0;
color: var(--color-muted);
}
.cky-audit-table-element .cky-table-wrapper {
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface);
}
.cky-audit-table-element .cky-cookie-audit-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.cky-audit-table-element .cky-cookie-audit-table thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.cky-audit-table-element .cky-cookie-audit-table tr {
display: grid;
gap: var(--space-2);
padding: var(--space-5);
}
.cky-audit-table-element .cky-cookie-audit-table tbody tr + tr {
border-top: var(--border-width) solid var(--color-border);
}
.cky-audit-table-element .cky-cookie-audit-table td {
display: block;
padding: 0;
overflow-wrap: anywhere;
}
.cky-audit-table-element .cky-cookie-audit-table td::before {
display: block;
color: var(--color-muted);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
@media (max-width: 47.99rem) {
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(1)::before { content: "Cookie"; }
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(2)::before { content: "Duration"; }
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(3)::before { content: "Description"; }
}
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(1) {
font-family: var(--font-display);
font-size: var(--text-lg);
}
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(1)::before {
font-family: var(--font-heading);
}
@media (min-width: 48rem) {
.cky-audit-table-element .cky-cookie-audit-table {
table-layout: fixed;
}
.cky-audit-table-element .cky-cookie-audit-table thead {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
.cky-audit-table-element .cky-cookie-audit-table tr {
display: table-row;
padding: 0;
}
.cky-audit-table-element .cky-cookie-audit-table th,
.cky-audit-table-element .cky-cookie-audit-table td {
display: table-cell;
padding: var(--space-4) var(--space-5);
vertical-align: top;
}
.cky-audit-table-element .cky-cookie-audit-table th {
border-bottom: var(--border-width) solid var(--color-border);
color: var(--color-muted);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.cky-audit-table-element .cky-cookie-audit-table th:nth-child(1),
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(1) {
width: 32%;
}
.cky-audit-table-element .cky-cookie-audit-table th:nth-child(2),
.cky-audit-table-element .cky-cookie-audit-table td:nth-child(2) {
width: 16%;
}
}
}
@layer components {
.dei-commitments {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.dei-commitments {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.dei-commitment {
display: grid;
align-content: start;
gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius-md);
background: transparent;
box-shadow: inset 0 0 0 var(--border-width) var(--color-border-on-ink);
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.dei-commitment__letter {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--weight-heading);
line-height: 0.9;
}
.dei-commitment--coral .dei-commitment__letter { color: var(--color-accent); }
.dei-commitment--pink .dei-commitment__letter { color: var(--color-pink); }
.dei-commitment--purple .dei-commitment__letter { color: var(--color-purple); }
.dei-commitment__name {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-heading);
}
.dei-objectives {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.dei-objectives {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dei-objective {
display: grid;
align-content: start;
gap: var(--space-4);
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.dei-closing {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-snug);
text-wrap: balance;
}
.sitemap {
columns: var(--size-sitemap-column);
column-gap: var(--space-7);
}
.sitemap-group {
break-inside: avoid;
margin-bottom: var(--space-7);
}
.sitemap-group__title {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-heading);
}
.sitemap-group__count {
display: grid;
place-items: center;
min-width: var(--space-6);
height: var(--space-6);
padding-inline: var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-accent);
color: var(--color-on-accent);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.sitemap-list {
margin: 0;
padding: 0;
list-style: none;
border-top: var(--border-width) solid var(--color-border);
}
.sitemap-list li {
border-bottom: var(--border-width) solid var(--color-border);
}
.sitemap-link {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: var(--touch-target);
padding: var(--space-2) 0;
color: var(--color-text);
text-decoration: none;
transition: color var(--duration-link) var(--ease-link);
}
.sitemap-thumb {
display: block;
flex: none;
width: var(--size-sitemap-thumb);
height: var(--size-sitemap-thumb);
border-radius: var(--radius-sm);
background: var(--color-surface);
object-fit: cover;
}
.sitemap-thumb--brand {
background: var(--gradient-brand);
}
.sitemap-link__name {
flex: 1;
}
.sitemap-link__name,
.sitemap-link::after {
padding-top: calc((var(--size-sitemap-thumb) - 1lh) / 2);
}
.sitemap-link::after {
content: "→";
flex: none;
color: var(--color-accent-strong);
opacity: 0;
transform: translateX(calc(-1 * var(--space-2)));
transition:
opacity var(--duration-medium) var(--ease-out),
transform var(--duration-medium) var(--ease-out);
}
.sitemap-link:hover,
.sitemap-link:focus-visible {
color: var(--color-accent-strong);
}
.sitemap-link:hover::after,
.sitemap-link:focus-visible::after {
opacity: 1;
transform: none;
}
.island {
padding-inline: var(--island-inset);
}
:is(.island, .case-inset, #values) + :is(.island, .case-inset, #values, .next-up) {
margin-top: var(--section-space);
}
:is(.case-inset, #picture-run) + :is(.case-inset, #picture-run) {
margin-top: var(--bento-gap);
}
main > :is(.island, .case-inset):is(:last-child, :has(+ :is(.next-up, .next-up-shade))) {
padding-bottom: var(--island-inset);
}
.island__inner {
border-radius: var(--radius-island);
}
.insight-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.insight-card__title {
font-size: var(--text-xl);
}
.insight-card__desc {
display: none;
}
.insight-card.is-featured .insight-card__desc {
display: block;
}
@media (min-width: 48rem) {
.insight-card.is-featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--space-7);
}
.insight-card.is-featured .insight-card__title {
font-size: var(--text-2xl);
}
}
.sport-hero {
position: relative;
container-type: size;
height: 100vh;
min-height: calc(var(--sport-hero-min) + var(--header-height));
margin-top: calc(-1 * var(--header-height));
padding-top: var(--header-height);
overflow: hidden;
background: var(--surface, var(--color-bg));
}
.sport-hero__title {
position: absolute;
top: calc(var(--header-height) + 100cqh - (1 - var(--hero-text-line)) * min(100cqh, 112.7cqw));
left: 50%;
z-index: 1;
width: max-content;
max-width: none;
margin: 0;
font-size: var(--text-hero);
line-height: var(--leading-hero);
text-align: center;
white-space: nowrap;
transform: translate(-50%, -100%);
}
.sport-hero__athlete {
position: absolute;
inset: var(--header-height) 0 0;
z-index: 2;
width: 100%;
max-width: none;
height: calc(100% - var(--header-height));
object-fit: contain;
object-position: 50% 100%;
}
.sport-hero--photo {
background: var(--color-ink);
color: var(--color-on-ink);
}
.sport-hero__photo {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
}
.sport-hero--photo::after {
content: "";
position: absolute;
inset: 0;
background: var(--gradient-industry-scrim);
pointer-events: none;
}
.sport-hero--photo .sport-hero__title {
top: calc(var(--header-height) + 50cqh);
z-index: 2;
font-size: min(var(--text-hero), var(--hero-fit));
transform: translate(-50%, -50%);
}
.sport-hero--photo .sport-hero__title--long {
font-size: min(var(--text-hero), var(--hero-fit-long));
}
.sport-hero__letter {
display: inline-block;
}
.sport-intro {
background: var(--surface, var(--color-ink));
}
.page-ball,
.page-ball__shadow {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
}
.page-ball {
z-index: 60;
width: var(--space-8);
height: var(--space-8);
}
.page-ball__skin {
position: absolute;
inset: 0;
background: url("../images/sport/ball.png") center / contain no-repeat;
}
.page-ball__shadow {
z-index: 59;
width: var(--space-8);
height: var(--space-5);
border-radius: var(--radius-pill);
background: radial-gradient(closest-side, var(--color-shadow), transparent 80%);
}
.carousel {
position: relative;
}
.carousel__track {
display: flex;
gap: var(--space-5);
margin: 0;
padding: 0 calc((100% - var(--width-carousel-slide)) / 2);
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
display: none;
}
.carousel__slide {
position: relative;
flex: 0 0 var(--width-carousel-slide);
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
background: var(--color-ink);
scroll-snap-align: center;
isolation: isolate;
}
.carousel__slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--gradient-carousel-scrim);
pointer-events: none;
}
.carousel__slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: var(--color-ink);
opacity: 0;
pointer-events: none;
}
.carousel__media {
position: absolute;
inset: 0;
display: block;
}
.carousel__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel__pics {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.carousel__pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-out);
}
.carousel__pic.is-shown {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.carousel__pic {
transition: none;
}
}
.carousel__video--fit {
object-fit: contain;
}
.carousel__empty {
display: grid;
place-items: center;
height: 100%;
color: var(--color-muted-on-ink);
}
.carousel__logo {
position: absolute;
top: var(--space-6);
left: var(--space-6);
z-index: 2;
width: auto;
max-width: var(--width-carousel-logo);
height: var(--height-carousel-logo);
object-fit: contain;
object-position: left center;
filter: brightness(0) invert(1);
pointer-events: none;
}
.carousel__logo[style*="--logo-scale"] {
height: calc(var(--size-carousel-logo) * var(--logo-scale));
}
.carousel__logo--empty {
height: auto;
font-family: var(--font-heading);
font-size: var(--text-sm);
color: var(--color-on-ink);
filter: none;
}
.carousel__caption {
position: absolute;
left: var(--space-6);
right: var(--space-6);
bottom: var(--space-6);
z-index: 2;
display: grid;
gap: var(--space-2);
color: var(--color-on-ink);
pointer-events: none;
}
.carousel__line {
margin: 0;
}
.carousel__in {
display: block;
}
.carousel__name {
font-size: var(--text-3xl);
line-height: var(--leading-tight);
}
.carousel__tagline {
font-size: var(--text-lg);
}
.carousel__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-2) 0 0;
padding: 0;
list-style: none;
}
.carousel__tags li {
padding: var(--space-1) var(--space-3);
border: var(--border-width) solid var(--color-carousel-tag);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--text-sm);
}
.carousel__loader {
position: absolute;
top: var(--space-5);
right: var(--space-5);
z-index: 4;
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--color-on-ink);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-medium) var(--ease-out), visibility var(--duration-medium);
}
.carousel__slide.is-active .carousel__loader {
opacity: 1;
visibility: visible;
}
.carousel__ring,
.carousel__half,
.carousel__fill {
position: absolute;
inset: 0;
border-radius: 50%;
}
.carousel__ring {
box-shadow: inset 0 0 0 var(--line-width) var(--color-carousel-track);
}
.carousel__half--right { clip-path: inset(0 0 0 50%); }
.carousel__half--left { clip-path: inset(0 50% 0 0); }
.carousel__fill {
box-shadow: inset 0 0 0 var(--line-width) var(--color-on-ink);
transform: rotate(0deg);
}
.carousel__half--right .carousel__fill { clip-path: inset(0 50% 0 0); }
.carousel__half--left .carousel__fill { clip-path: inset(0 0 0 50%); }
.carousel.is-playing .carousel__slide.is-active .carousel__half--right .carousel__fill {
animation: carousel-ring-a var(--duration-carousel) linear both;
}
.carousel.is-playing .carousel__slide.is-active .carousel__half--left .carousel__fill {
animation: carousel-ring-b var(--duration-carousel) linear both;
}
.carousel.is-held .carousel__fill {
animation-play-state: paused !important;
}
@keyframes carousel-ring-a {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
@keyframes carousel-ring-b {
0%, 50% { transform: rotate(0deg); }
100% { transform: rotate(180deg); }
}
.carousel__sign {
position: relative;
width: var(--space-2);
height: var(--space-3);
border-inline: var(--line-width) solid currentColor;
}
.carousel.is-stopped .carousel__sign {
width: 0;
height: 0;
border-inline: 0;
border-block: calc(var(--space-3) / 2) solid transparent;
border-left: var(--space-3) solid currentColor;
transform: translateX(calc(var(--line-width) / 2));
}
@media (min-width: 48rem) {
.carousel__slide {
aspect-ratio: 16 / 9;
}
.carousel__caption {
left: var(--space-8);
right: calc(var(--space-8) + var(--touch-target) + var(--space-5));
bottom: var(--space-7);
}
.carousel__logo {
top: var(--space-7);
left: var(--space-8);
}
.carousel__loader {
top: auto;
right: var(--space-7);
bottom: var(--space-7);
}
}
.carousel--portrait {
--width-carousel-slide: var(--width-carousel-slide-portrait);
}
.carousel--portrait .carousel__slide {
aspect-ratio: var(--aspect-carousel-portrait);
}
.carousel--portrait .carousel__logo {
display: none;
}
.carousel--portrait .carousel__caption {
left: var(--space-5);
right: var(--space-5);
bottom: var(--space-5);
}
.carousel--portrait .carousel__loader {
top: var(--space-4);
right: var(--space-4);
bottom: auto;
}
.carousel--portrait .carousel__name {
font-size: var(--text-2xl);
}
.carousel--portrait .carousel__tagline {
font-size: var(--text-base);
}
.carousel.is-live .carousel__slide {
transform: scale(var(--scale-carousel-rest));
transition: transform var(--duration-carousel-move) var(--ease-carousel);
}
.carousel.is-live .carousel__slide::after {
opacity: var(--opacity-carousel-dim);
transition: opacity var(--duration-carousel-move) var(--ease-carousel);
}
.carousel.is-live .carousel__slide.is-active {
transform: none;
}
.carousel.is-live .carousel__slide.is-active::after {
opacity: 0;
}
.carousel.is-live .carousel__in {
opacity: 0;
transform: translateY(var(--space-4));
transition: opacity calc(var(--duration-carousel-move) / 3) var(--ease-carousel), transform calc(var(--duration-carousel-move) / 3) var(--ease-carousel);
}
.carousel.is-live .carousel__logo {
opacity: 0;
transform: translateY(var(--space-3));
transition: opacity calc(var(--duration-carousel-move) / 2) var(--ease-carousel), transform calc(var(--duration-carousel-move) / 2) var(--ease-carousel);
}
.carousel.is-live .is-active .carousel__logo {
opacity: 1;
transform: none;
transition: opacity var(--duration-carousel-move) var(--ease-carousel) calc(var(--duration-carousel-move) / 3), transform var(--duration-carousel-move) var(--ease-carousel) calc(var(--duration-carousel-move) / 3);
}
.carousel.is-live .is-active .carousel__in {
opacity: 1;
transform: none;
transition:
opacity var(--duration-carousel-move) var(--ease-carousel) calc(var(--duration-carousel-move) / 3 + (var(--i, 0) + 3) * var(--stagger-carousel)),
transform var(--duration-carousel-move) var(--ease-carousel) calc(var(--duration-carousel-move) / 3 + (var(--i, 0) + 3) * var(--stagger-carousel));
}
.carousel__dots {
display: flex;
gap: var(--space-4);
width: fit-content;
margin: var(--space-6) auto 0;
padding-right: var(--indicator-stretch);
}
.carousel__dot {
position: relative;
width: var(--indicator-size);
height: var(--indicator-size);
padding: 0;
border: 0;
background: none;
cursor: pointer;
opacity: var(--opacity-dot);
transition: opacity var(--duration-carousel-move) var(--ease-carousel), transform var(--duration-carousel-move) var(--ease-carousel);
}
.carousel__dot::before {
content: "";
position: absolute;
inset: calc(-1 * var(--space-2));
}
.carousel__dot-cap,
.carousel__dot-bar {
position: absolute;
top: 0;
height: var(--indicator-size);
background: var(--color-text);
transition: transform var(--duration-carousel-move) var(--ease-carousel);
}
.carousel__dot-cap {
left: 0;
width: var(--indicator-size);
border-radius: var(--radius-pill);
}
.carousel__dot-bar {
left: calc(var(--indicator-size) / 2);
width: var(--indicator-stretch);
transform: scaleX(0);
transform-origin: 0 50%;
}
.page-ink .carousel__dot-cap,
.page-ink .carousel__dot-bar {
background: var(--color-on-ink);
}
.carousel__dot.is-active {
opacity: 1;
}
.carousel__dot.is-active .carousel__dot-bar {
transform: none;
}
.carousel__dot.is-active .carousel__dot-cap--end {
transform: translateX(var(--indicator-stretch));
}
.carousel__dot.is-active ~ .carousel__dot {
transform: translateX(var(--indicator-stretch));
}
.drag-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 45;
width: var(--size-drag-cursor);
height: var(--size-drag-cursor);
margin: calc(var(--size-drag-cursor) / -2) 0 0 calc(var(--size-drag-cursor) / -2);
pointer-events: none;
}
.drag-cursor__badge {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-on-accent);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
opacity: 0;
transform: scale(0.3);
transition: opacity var(--duration-medium) var(--ease-out), transform var(--duration-medium) var(--ease-out);
}
.drag-cursor.is-shown .drag-cursor__badge {
opacity: 1;
transform: none;
}
.drag-cursor.is-shown.is-pressed .drag-cursor__badge {
transform: scale(1.12, 0.88);
}
.carousel.has-drag-cursor .carousel__track {
cursor: none;
}
.carousel.has-drag-cursor .carousel__loader {
cursor: pointer;
}
.carousel.is-jumping .carousel__slide,
.carousel.is-jumping .carousel__slide::after,
.carousel.is-jumping .carousel__in,
.carousel.is-jumping .carousel__logo {
transition: none !important;
}
.carousel.is-dragging .carousel__track {
scroll-snap-type: none;
cursor: grabbing;
}
.carousel.has-drag-cursor.is-dragging .carousel__track {
cursor: none;
}
@media (prefers-reduced-motion: reduce) {
.carousel .carousel__slide,
.carousel .carousel__slide::after,
.carousel .carousel__in,
.carousel .carousel__logo,
.carousel__dot,
.carousel__dot-cap,
.carousel__dot-bar {
transition: none !important;
}
}
.tool-card {
isolation: isolate;
}
.tool-card > h2,
.tool-card > p {
position: relative;
z-index: 1;
}
.tool-orbs {
--orb-lg: var(--size-orb-lg-compact);
--orb-md: var(--size-orb-md-compact);
--orb-sm: var(--size-orb-sm-compact);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-6) var(--space-5);
max-width: var(--measure);
margin: var(--space-7) auto var(--space-5);
padding: 0;
list-style: none;
}
.tool-orbs > :nth-child(even) {
margin-top: var(--space-6);
}
.tool-orb {
--orb-size: var(--orb-md);
--depth: 0.7;
--orb-speed: 1;
--orb-delay: 0s;
position: relative;
width: var(--orb-size);
height: var(--orb-size);
}
.tool-orb__body,
.tool-orb__push {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.tool-orb__shadow {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--color-orb-shadow);
filter: blur(var(--blur-orb-shadow));
transform: translate(calc(var(--depth) * var(--orb-cast-x)), calc(var(--depth) * var(--orb-cast-y)));
opacity: calc(1 - var(--depth) * 0.4);
pointer-events: none;
}
.tool-orb__face {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--orb-fill, var(--color-orb-dark));
}
.tool-orb__logo {
display: block;
width: var(--logo-width, 46%);
height: auto;
}
.tool-orb--claude { --orb-fill: var(--color-orb-claude); --logo-width: 48%; --orb-size: var(--orb-lg); --depth: 1;    --orb-speed: 1;    --orb-delay: -1s; }
.tool-orb--grok { --orb-size: var(--orb-sm); --depth: 0.4;  --orb-speed: 1.3;  --orb-delay: -3s; }
.tool-orb--azzoo { --orb-fill: var(--gradient-orb-azzoo); --logo-width: 52%; --depth: 0.75; --orb-speed: 0.85; --orb-delay: -2s; }
.tool-orb--adobe-express { --orb-fill: var(--color-orb-adobe); --logo-width: 44%; --depth: 0.65; --orb-speed: 1.15; --orb-delay: -4s; }
.tool-orb--canva { --orb-fill: var(--gradient-orb-canva); --logo-width: 66%; --depth: 0.7;  --orb-speed: 1.1;  --orb-delay: -0.5s; }
.tool-orb--figma { --logo-width: 30%; --orb-size: var(--orb-lg); --depth: 0.95; --orb-speed: 0.9; --orb-delay: -2.5s; }
.tool-orb--kittl { --orb-fill: var(--color-orb-kittl); --depth: 0.75; --orb-speed: 1.2;  --orb-delay: -3.5s; }
.tool-orb--openai { --orb-size: var(--orb-sm); --depth: 0.45; --orb-speed: 1.25; --orb-delay: -1.5s; }
.tool-orb--cortex { --orb-fill: var(--color-orb-cortex); --logo-width: 42%; --depth: 0.8; --orb-speed: 1.05; --orb-delay: -2.2s; }
.tool-orb--cortex .tool-orb__logo { transform: translateX(-8%); }
.tool-orb--wordpress { --orb-fill: var(--color-orb-wordpress); --logo-width: 62%; --depth: 0.7; --orb-speed: 0.95; --orb-delay: -3.2s; }
.tool-orb--wordpress .tool-orb__logo { filter: brightness(0) invert(1); }
@media (min-width: 80rem) {
.tool-orbs {
--orb-lg: var(--size-orb-lg);
--orb-md: var(--size-orb-md);
--orb-sm: var(--size-orb-sm);
position: absolute;
inset: 0;
display: block;
max-width: none;
margin: 0;
pointer-events: none;
}
.tool-orbs > :nth-child(even) {
margin-top: 0;
}
.tool-orb {
position: absolute;
}
.tool-orb--left { left: calc(var(--x) - var(--orb-size) / 2); }
.tool-orb--right { right: calc(var(--x) - var(--orb-size) / 2); }
.tool-orb--left, .tool-orb--right { top: calc(var(--y) - var(--orb-size) / 2); }
.tool-orb--claude { --x: 6%; --y: 3%; }
.tool-orb--grok { --x: 2.5%; --y: 33%; }
.tool-orb--azzoo { --x: 6%; --y: 61%; }
.tool-orb--adobe-express { --x: 4%; --y: 97%; }
.tool-orb--canva { --x: 6%; --y: 1%; }
.tool-orb--figma { --x: 4.5%; --y: 31%; }
.tool-orb--kittl { --x: 6.5%; --y: 63%; }
.tool-orb--openai { --x: 3%; --y: 91%; }
.tool-orb--cortex { --x: 13%; --y: 47%; }
.tool-orb--wordpress { --x: 12%; --y: 49%; }
.tool-orbs.is-orbiting .tool-orb {
left: 50%;
right: auto;
top: 50%;
margin: calc(var(--orb-size) / -2) 0 0 calc(var(--orb-size) / -2);
}
}
@media (prefers-reduced-motion: no-preference) {
.tool-orb__body {
animation: orb-bob calc(var(--duration-float) * var(--orb-speed)) ease-in-out var(--orb-delay) infinite;
}
}
@keyframes orb-bob {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(calc(var(--depth) * var(--float-drift)), calc(-1 * var(--depth) * var(--float-distance)), 0); }
}
.btn-fx {
position: relative;
isolation: isolate;
overflow: hidden;
border-color: transparent;
}
.btn-fx::before {
content: "";
position: absolute;
top: calc(-2 * var(--border-width));
bottom: calc(-2 * var(--border-width));
left: calc(-2 * var(--border-width));
width: calc(200% + 4 * var(--border-width));
z-index: -1;
background: var(--gradient-button);
transition: transform var(--duration-button) var(--ease-link);
pointer-events: none;
}
.btn-fx:hover::before,
.btn-fx:focus-visible::before {
transform: translateX(-50%);
}
.btn-fx--dark::before {
background: var(--gradient-button-dark);
}
.btn-fx__label {
display: inline-flex;
overflow: hidden;
white-space: pre;
}
.btn-fx__char {
position: relative;
display: inline-block;
transition: transform var(--duration-button) var(--ease-link);
transition-delay: calc(var(--i, 0) * var(--stagger-button));
}
.btn-fx__char::after {
content: attr(data-char);
position: absolute;
top: 100%;
left: 0;
}
.btn-fx:hover .btn-fx__char,
.btn-fx:focus-visible .btn-fx__char {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.btn-fx::before {
transition-property: none;
}
.btn-fx__char {
transform: none !important;
}
}
.discipline-slides {
position: relative;
overflow: hidden;
}
.discipline-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-slow) var(--ease-link);
}
.discipline-slide.is-shown {
opacity: 1;
}
.discipline-slide--strategy-2 {
object-position: 50% 28%;
}
.service-cards {
margin: 0;
padding: 0;
list-style: none;
}
.service-card {
--card-fill: var(--color-accent);
--card-ink: var(--color-on-accent);
position: relative;
}
.service-card--1 { --card-fill: var(--color-blue); --card-ink: var(--color-on-ink-fixed); }
.service-card--2 { --card-fill: var(--service-step-2); --card-ink: var(--color-on-ink-fixed); }
.service-card--3 { --card-fill: var(--service-step-3); --card-ink: var(--color-on-ink-fixed); }
.service-card--4 { --card-fill: var(--service-step-4); --card-ink: var(--color-on-ink-fixed); }
.service-card--5 { --card-fill: var(--service-step-5); --card-ink: var(--color-on-accent); }
.service-card--6 { --card-fill: var(--color-accent); --card-ink: var(--color-on-accent); }
.service-card--coral { --card-fill: var(--color-accent); --card-ink: var(--color-on-accent); }
.service-card--pink { --card-fill: var(--color-pink); --card-ink: var(--color-on-ink-fixed); }
.service-card--purple { --card-fill: var(--color-purple); --card-ink: var(--color-on-ink-fixed); }
.service-card--startups .service-card__image { object-position: 55% 25%; }
.service-card--scaleups .service-card__image { object-position: 45% 30%; }
.service-card--matchups .service-card__image { object-position: 50% 40%; }
.service-card__inner {
height: 100%;
}
.service-card__front {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
}
.service-card__front {
position: relative;
}
.service-card__badge {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 1;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--card-fill);
color: var(--card-ink);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
}
.service-card__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.service-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
}
.service-card__body > span:last-child {
color: var(--color-accent-strong);
}
.service-card__link {
color: inherit;
text-decoration: none;
}
.service-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.service-card__link:focus-visible {
outline: none;
}
.service-card:has(.service-card__link:focus-visible) {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
border-radius: var(--radius-md);
}
.service-card__back {
display: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.service-card {
perspective: var(--perspective-flip);
}
.service-card__inner {
position: relative;
transform-style: preserve-3d;
transition: transform var(--duration-flip) var(--ease-out) var(--delay-flip-close);
}
.service-card:hover .service-card__inner,
.service-card:focus-within .service-card__inner {
transform: rotateY(180deg);
transition-delay: 0s;
}
.service-card__front,
.service-card__back {
backface-visibility: hidden;
}
.service-card__back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
overflow: hidden;
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--card-fill);
color: var(--card-ink);
transform: rotateY(180deg);
}
.service-card__number {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.service-card__title {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
}
.service-card__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-base);
line-height: var(--leading-snug);
}
.service-card__list li {
padding-block: var(--space-2);
border-bottom: var(--border-width) solid color-mix(in srgb, var(--card-ink), transparent 70%);
}
.service-card__list a,
.service-card__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: inherit;
font-weight: var(--weight-medium);
text-decoration: none;
}
.service-card__more {
margin-top: auto;
font-family: var(--font-heading);
}
.service-card__back a:focus-visible {
outline: var(--focus-width) solid var(--card-ink);
outline-offset: var(--focus-width);
}
}
.stack-card {
--stack-colour: var(--color-stack-1);
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--stack-colour);
color: var(--color-on-ink);
}
.stack-card--2 { --stack-colour: var(--color-stack-2); }
.stack-card--3 { --stack-colour: var(--color-stack-3); }
.stack-card--4 { --stack-colour: var(--color-stack-4); }
.stack-card--5 { --stack-colour: var(--color-stack-5); }
.stack-card--6 { --stack-colour: var(--color-stack-6); }
.stack-card--7 { --stack-colour: var(--color-stack-7); }
.stack-card__icon {
display: block;
width: var(--space-8);
height: var(--space-8);
}
.stack-card__icon img {
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
}
.stack-card__icon svg {
width: 100%;
height: 100%;
}
.stack-card__link {
color: inherit;
text-decoration: none;
}
.stack-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.stack-card__link:focus-visible {
outline: none;
}
.stack-card:has(.stack-card__link:focus-visible) {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
.stack-card__partner {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: auto;
font-size: var(--text-sm);
opacity: var(--opacity-partner);
}
.stack-card__partner img {
height: var(--space-5);
width: auto;
}
.work-filters {
position: relative;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.work-filters[hidden] {
display: none;
}
.work-filters__count {
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
border-radius: 50%;
background: var(--color-accent);
color: var(--color-on-accent);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.work-filters__count.is-bumped {
animation: work-count-bump var(--duration-orb-pop) var(--ease-orb-pop);
}
@keyframes work-count-bump {
40% {
transform: scale(var(--scale-count-bump));
}
}
main:has(.work-filters) {
overflow-x: clip;
}
.work-select {
position: relative;
}
.work-select.is-open {
z-index: 1;
}
.work-select__button {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--touch-target);
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
border: 0;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 500;
cursor: pointer;
}
.work-select__name {
color: var(--color-muted);
}
.work-select__name::after {
content: "·";
margin-left: var(--space-2);
}
.work-select__chevron {
width: var(--space-4);
height: var(--space-4);
margin-left: var(--space-1);
transition: transform var(--duration-medium) var(--ease-out);
}
.work-select.is-open .work-select__chevron {
transform: rotate(180deg);
}
.work-select__panel {
position: absolute;
top: 0;
left: 0;
display: grid;
justify-items: start;
min-width: 100%;
padding: calc(var(--touch-target) + var(--space-2)) var(--space-3) var(--space-3);
border-radius: var(--radius-island);
background: var(--color-surface);
box-shadow: var(--shadow-card-hover);
opacity: 0;
visibility: hidden;
transform: scale(var(--scale-select-closed));
transform-origin: top left;
transition:
opacity var(--duration-medium) var(--ease-out),
transform var(--duration-medium) var(--ease-out),
visibility 0s linear var(--duration-medium);
}
.work-select.is-open .work-select__panel {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.work-select__option {
display: inline-flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: var(--touch-target);
padding: 0 var(--space-3);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 500;
text-align: left;
white-space: nowrap;
cursor: pointer;
opacity: 0;
transform: translateY(calc(-1 * var(--space-2)));
transition:
opacity var(--duration-medium) var(--ease-out),
transform var(--duration-medium) var(--ease-out),
background-color var(--duration-link) var(--ease-link);
}
.work-select.is-open .work-select__option {
opacity: 1;
transform: none;
}
.work-select.is-open .work-select__option:nth-child(2) { transition-delay: var(--delay-select-step), var(--delay-select-step), 0s; }
.work-select.is-open .work-select__option:nth-child(3) { transition-delay: calc(2 * var(--delay-select-step)), calc(2 * var(--delay-select-step)), 0s; }
.work-select.is-open .work-select__option:nth-child(4) { transition-delay: calc(3 * var(--delay-select-step)), calc(3 * var(--delay-select-step)), 0s; }
.work-select.is-open .work-select__option:nth-child(5) { transition-delay: calc(4 * var(--delay-select-step)), calc(4 * var(--delay-select-step)), 0s; }
.work-select.is-open .work-select__option:nth-child(6) { transition-delay: calc(5 * var(--delay-select-step)), calc(5 * var(--delay-select-step)), 0s; }
.work-select.is-open .work-select__option:nth-child(7) { transition-delay: calc(6 * var(--delay-select-step)), calc(6 * var(--delay-select-step)), 0s; }
.work-select.is-open .work-select__option:nth-child(8) { transition-delay: calc(7 * var(--delay-select-step)), calc(7 * var(--delay-select-step)), 0s; }
.work-select__option:hover,
.work-select__option:focus-visible {
background: var(--color-field);
}
.work-select__option::before {
content: "";
flex: none;
width: var(--space-2);
height: var(--space-2);
border-radius: 50%;
background: var(--color-accent);
transform: scale(0);
transition: transform var(--duration-medium) var(--ease-orb-pop);
}
.work-select__option[aria-pressed="true"]::before {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.work-select__panel,
.work-select__option,
.work-select__chevron {
transition-duration: 0s;
transition-delay: 0s;
}
.work-filters__count.is-bumped {
animation: none;
}
}
.work-grid {
display: grid;
gap: var(--bento-gap);
padding-inline: var(--island-inset);
}
@media (min-width: 48rem) {
.work-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.work-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.work-tile__link {
position: relative;
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-island);
background: var(--color-surface);
isolation: isolate;
text-decoration: none;
}
.work-tile__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
}
.work-tile__media.is-shown {
opacity: 1;
}
.work-tile__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-medium) var(--ease-link);
}
.work-tile__video.is-cover,
.work-tile__video.is-playing {
opacity: 1;
}
.work-tile__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: var(--space-4);
color: var(--color-muted);
font-size: var(--text-sm);
text-align: center;
}
.work-tile__logo {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 1;
display: grid;
place-items: center;
width: var(--size-work-logo);
height: var(--size-work-logo);
border: var(--border-work-logo) solid var(--color-field);
border-radius: var(--radius-md);
background: var(--color-field);
box-shadow: var(--shadow-card-hover);
overflow: hidden;
pointer-events: none;
}
.work-tile__logo img {
flex: none;
width: 112%;
height: 112%;
object-fit: contain;
}
.work-tile__logo--tight img {
width: 86%;
height: 86%;
}
.work-tile__logo--fill img {
width: 100%;
height: 100%;
object-fit: cover;
}
.work-tile__label {
position: absolute;
bottom: var(--space-4);
left: var(--space-4);
right: var(--space-4);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
pointer-events: none;
}
.work-tile__name,
.work-tile__sector {
border-radius: var(--radius-pill);
padding: var(--space-2) var(--space-4);
font-family: var(--font-heading);
font-weight: 500;
line-height: 1.2;
text-align: left;
}
.work-tile__name,
.work-tile__sector {
background: var(--color-bg);
box-shadow: var(--shadow-card-hover);
}
.work-tile__name {
color: var(--color-text);
font-size: var(--text-lg);
}
.work-tile__sector {
color: var(--color-muted);
font-size: var(--text-base);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.work-tile__name,
.work-tile__sector {
transition: transform var(--duration-medium) var(--ease-out);
}
.work-tile__name {
transform: translateY(400%);
}
.work-tile__sector {
transform: translateY(300%);
}
.work-tile__logo {
transform: translateY(-200%);
transition: transform var(--duration-medium) var(--ease-out);
}
.work-tile__link:hover :is(.work-tile__name, .work-tile__sector, .work-tile__logo),
.work-tile__link:focus-visible :is(.work-tile__name, .work-tile__sector, .work-tile__logo) {
transform: none;
transition: transform var(--duration-tile-drop) var(--ease-tile-drop);
}
.work-tile__link:hover .work-tile__sector,
.work-tile__link:focus-visible .work-tile__sector {
transition-delay: var(--delay-tile-drop);
}
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.work-tile__label,
.work-tile__logo {
opacity: 0;
transition: opacity var(--duration-medium) var(--ease-out);
}
.work-tile__link:hover :is(.work-tile__label, .work-tile__logo),
.work-tile__link:focus-visible :is(.work-tile__label, .work-tile__logo) {
opacity: 1;
}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.work-tile__media {
transition:
transform var(--duration-photo) var(--ease-photo),
opacity var(--duration-nav-fade) var(--ease-link);
}
.work-tile__link:hover .work-tile__media {
transform: scale(var(--scale-active));
}
}
.case-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: max(var(--size-case-hero-min), calc(100vh - 2 * var(--island-inset)));
margin: calc(var(--island-inset) - var(--header-height)) var(--island-inset) 0;
padding-block: calc(var(--header-height) + var(--space-5)) var(--space-7);
overflow: hidden;
border-radius: var(--radius-island);
background: var(--color-ink);
isolation: isolate;
}
.case-hero__frame {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.case-hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradient-case-scrim);
}
.case-hero__logo {
display: block;
width: auto;
max-width: 100%;
height: var(--size-case-logo);
}
.case-hero__title {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.case-stats {
display: grid;
gap: var(--space-5);
margin: 0;
padding-top: var(--space-6);
border-top: var(--border-width) solid var(--color-border-on-ink);
}
@media (min-width: 48rem) {
.case-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
}
}
.case-stat__figure {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-medium);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.case-stat__label {
margin: var(--space-2) 0 0;
color: var(--color-muted-on-ink);
}
.case-chapter__number {
margin: 0 0 var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
}
html:has(#main.page-client--pwr), .next-up--pwr { --color-client: var(--color-client-pwr); }
html:has(#main.page-client--stannergill), .next-up--stannergill { --color-client: var(--color-client-stannergill); }
html:has(#main.page-client--dunnet), .next-up--dunnet { --color-client: var(--color-client-dunnet); }
html:has(#main.page-client--glamis), .next-up--glamis { --color-client: var(--color-client-glamis); }
html:has(#main.page-client--caledonia), .next-up--caledonia { --color-client: var(--color-client-caledonia); }
html:has(#main.page-client--adc), .next-up--adc { --color-client: var(--color-client-adc); }
html:has(#main.page-client--pmc), .next-up--pmc { --color-client: var(--color-client-pmc); }
html:has(#main.page-client--pendle), .next-up--pendle { --color-client: var(--color-client-pendle); }
html:has(#main.page-client--primrose), .next-up--primrose { --color-client: var(--color-client-primrose); }
html:has(#main.page-client--brushworks), .next-up--brushworks { --color-client: var(--color-client-brushworks-black); }
html:has(#main.page-client--bell-ingram), .next-up--bell-ingram { --color-client: var(--color-client-bell-ingram); }
html:has(#main.page-client--midton), .next-up--midton { --color-client: var(--color-client-midton); }
html:has(#main.page-client--russwood), .next-up--russwood { --color-client: var(--color-client-russwood); }
html:has(#main.page-client--tailormade), .next-up--tailormade { --color-client: var(--color-client-tailormade); }
html:has(#main.page-client--nc500), .next-up--nc500 { --color-client: var(--color-client-nc500); }
html:has(#main.page-client--benmore), .next-up--benmore { --color-client: var(--color-client-benmore); }
html:has(#main.page-client--highland-hangout), .next-up--highland-hangout { --color-client: var(--color-client-highland-hangout); }
html:has(#main.page-client--balnagown), .next-up--balnagown { --color-client: var(--color-client-balnagown); }
html:has(#main.page-client--landmark-park), .next-up--landmark-park { --color-client: var(--color-client-landmark-park); }
html:has(#main.page-client--tuminds), .next-up--tuminds { --color-client: var(--color-client-tuminds); }
html:has(#main.page-client--st-margarets-school), .next-up--st-margarets-school { --color-client: var(--color-client-st-margarets-school); }
html:has(#main.page-client--wood-leisure), .next-up--wood-leisure { --color-client: var(--color-client-wood-leisure); }
html:has(#main.page-client--heatherlea), .next-up--heatherlea { --color-client: var(--color-client-heatherlea); }
html:has(#main.page-client--invest-in-stirling), .next-up--invest-in-stirling { --color-client: var(--color-client-invest-in-stirling); }
html:has(#main.page-client--cairngorm), .next-up--cairngorm { --color-client: var(--color-client-cairngorm); }
html:has(#main.page-client--national-wallace-monument), .next-up--national-wallace-monument { --color-client: var(--color-client-national-wallace-monument); }
html:has(#main.page-client--sais), .next-up--sais { --color-client: var(--color-client-sais); }
html:has(#main.page-client),
body:has(#main.page-client),
.next-up__wash {
background: var(--color-client);
}
#main.page-client,
.has-footer-reveal #main.page-client {
--color-page: var(--color-bg);
background: var(--color-bg);
color: var(--color-text);
}
.case-colour {
--color-page: var(--color-client);
background: var(--color-client);
color: var(--color-on-ink);
}
.case-colour :focus-visible {
outline-color: var(--color-on-ink);
}
.page-client--pwr .case-colour {
color: var(--color-text);
}
.page-client--pwr .case-colour :focus-visible {
outline-color: var(--color-text);
}
.case-light {
--color-page: var(--color-bg);
--color-on-ink: var(--color-text);
--color-muted-on-ink: var(--color-muted);
--color-border-on-ink: var(--color-border);
background: var(--color-bg);
color: var(--color-text);
}
.case-light :focus-visible {
outline-color: var(--color-text);
}
.case-light [data-on-ink],
.case-light .bg-ink,
.case-light .stack-card {
--color-on-ink: var(--color-on-ink-fixed);
--color-muted-on-ink: var(--color-muted-on-ink-fixed);
--color-border-on-ink: var(--color-border-on-ink-fixed);
color: var(--color-on-ink);
}
.case-inset {
padding-inline: var(--island-inset);
}
.case-end {
height: var(--island-inset);
}
.bento {
display: grid;
gap: var(--bento-gap);
}
@media (min-width: 48rem) {
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.bento__tile {
position: relative;
aspect-ratio: 1;
min-width: 0;
overflow: hidden;
border-radius: var(--radius-md);
isolation: isolate;
}
.bento__tile--full {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
.bento__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.bento__media {
transition: transform var(--duration-photo) var(--ease-photo);
}
.bento__tile:hover .bento__media {
transform: scale(var(--scale-active));
}
}
.highlights {
position: relative;
container-type: inline-size;
}
.highlights__track {
--highlight-width: min(100cqw - 2 * var(--gutter), var(--size-highlight));
display: flex;
gap: var(--space-4);
margin: 0;
padding: var(--space-2) calc((100cqw - var(--highlight-width)) / 2);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
list-style: none;
}
.highlights__track::-webkit-scrollbar {
display: none;
}
@media (min-width: 48rem) {
.highlights__track {
--highlight-width: min(100cqw - 2 * var(--space-9), var(--size-highlight));
}
}
.highlight {
display: grid;
flex: none;
gap: var(--space-5);
width: var(--highlight-width);
padding: var(--space-4);
border-radius: var(--radius-island);
background: var(--color-field);
color: var(--color-text);
scroll-snap-align: center;
}
@media (min-width: 48rem) {
.highlight {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: var(--space-7);
padding: var(--space-5);
}
}
.highlights.is-live .highlight {
position: relative;
transform: scale(var(--scale-carousel-rest));
transition: transform var(--duration-carousel-move) var(--ease-carousel);
}
.highlights.is-live .highlight::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
background: var(--color-page, var(--color-bg));
opacity: var(--opacity-carousel-dim);
pointer-events: none;
transition: opacity var(--duration-carousel-move) var(--ease-carousel);
}
.highlights.is-live .highlight.is-active {
transform: none;
}
.highlights.is-live .highlight.is-active::after {
opacity: 0;
}
.highlights.is-live .highlight:not(.is-active) {
cursor: pointer;
}
.highlights.is-dragging .highlights__track {
scroll-snap-type: none;
cursor: grabbing;
}
.highlights.has-drag-cursor .highlights__track,
.highlights.has-drag-cursor.is-dragging .highlights__track {
cursor: none;
}
.highlights.has-drag-cursor .highlights__track :is(a, button) {
cursor: pointer;
}
.highlights.is-dragging .highlight {
user-select: none;
}
.highlights.is-jumping .highlight,
.highlights.is-jumping .highlight::after {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.highlights.is-live .highlight,
.highlights.is-live .highlight::after {
transition: none;
}
}
.highlight__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
background: var(--color-surface);
}
.highlight__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.highlight__label {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 1;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-field);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.highlights__arrow {
position: absolute;
top: 50%;
z-index: 1;
display: none;
place-items: center;
width: var(--space-7);
height: var(--space-7);
border: 0;
border-radius: 50%;
background: var(--color-field);
color: var(--color-text);
cursor: pointer;
transform: translateY(-50%);
}
.highlights__arrow svg {
width: var(--space-5);
height: var(--space-5);
}
.highlights__arrow--prev {
left: var(--space-3);
}
.highlights__arrow--next {
right: var(--space-3);
}
@media (min-width: 48rem) {
.highlights__arrow {
display: grid;
}
}
.highlights :focus-visible {
outline-color: var(--color-text);
}
.next-up {
display: grid;
gap: var(--space-7);
margin: var(--island-inset);
padding: var(--space-8) var(--gutter);
border-radius: var(--radius-island);
background: var(--color-ink);
color: var(--color-on-ink);
}
@media (min-width: 64rem) {
.next-up {
grid-template-columns: minmax(0, 1fr) minmax(0, var(--width-next-up-thumb));
align-items: end;
}
}
.next-up__eyebrow {
color: var(--color-muted-on-ink);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.next-up__all-link {
color: var(--color-on-ink);
}
.next-up__all-link:hover {
color: var(--color-accent);
}
.next-up[class*="next-up--"] {
background: var(--color-client);
}
.next-up.next-up--pwr {
color: var(--color-text);
}
.next-up.next-up--pwr :is(.next-up__eyebrow, .next-up__link, .next-up__link:hover, .next-up__title, .next-up__all-link, .next-up__all-link:hover) {
color: var(--color-text);
}
.next-up__name {
margin-top: var(--space-3);
font-size: var(--text-4xl);
line-height: var(--leading-tight);
}
.next-up__link {
color: var(--color-on-ink);
text-decoration: none;
}
.next-up__link:hover {
color: var(--color-on-ink);
}
.next-up__title {
max-width: var(--measure);
margin-top: var(--space-4);
color: var(--color-muted-on-ink);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
.next-up__all {
margin-top: var(--space-6);
}
.next-up__thumb {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-md);
}
.next-up__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-photo) var(--ease-photo);
}
.next-up__thumb:hover img {
transform: scale(var(--scale-active));
}
.next-up__expand {
display: none;
}
.next-up.is-live {
position: fixed;
inset: 0;
z-index: 5;
grid-template-columns: minmax(0, 1fr);
align-content: space-between;
margin: 0;
padding: calc(var(--header-height) + var(--space-6)) var(--gutter) var(--gutter) calc(100vw * (1 - var(--next-up-shift)) + var(--gutter));
border-radius: 0;
visibility: hidden;
}
.next-up.is-live.is-showing {
visibility: visible;
}
.next-up.is-live .next-up__thumb {
cursor: pointer;
justify-self: end;
width: min(var(--width-next-up-thumb), 100%);
aspect-ratio: auto;
}
.next-up__more {
display: none;
}
.next-up.is-live .next-up__more {
position: absolute;
bottom: var(--gutter);
left: calc(100vw * (1 - var(--next-up-shift)) + var(--gutter));
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-medium);
}
.next-up__ring {
position: relative;
display: grid;
flex: none;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
}
.next-up__ring .carousel__ring {
box-shadow: inset 0 0 0 var(--line-width) currentColor;
opacity: var(--opacity-ring-track);
}
.next-up__ring .carousel__fill {
box-shadow: inset 0 0 0 var(--line-width) currentColor;
}
.next-up__arrow {
width: var(--space-4);
height: var(--space-4);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
.next-up__arrow {
animation: next-up-nudge var(--duration-nudge) var(--ease-out) infinite;
}
}
@keyframes next-up-nudge {
0%, 60%, 100% { transform: none; }
30% { transform: translateY(var(--space-1)); }
}
.next-up__edge {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--size-next-up-edge);
background: var(--gradient-next-up-edge);
pointer-events: none;
}
.next-up-hold > #main,
.has-footer-reveal .next-up-hold > #main {
position: sticky;
top: var(--next-up-stick);
}
.next-up-room {
height: var(--next-up-room);
}
.next-up-shade {
position: absolute;
inset: 0;
z-index: 100;
background: var(--color-ink);
opacity: 0;
pointer-events: none;
}
.is-next-up .say-hi {
visibility: hidden;
opacity: 0;
transform: translateY(calc(100% + var(--gutter)));
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out), visibility 0s linear var(--duration-medium);
}
.next-up__expand.is-live {
position: fixed;
inset: 0;
z-index: 45;
display: block;
overflow: hidden;
visibility: hidden;
pointer-events: none;
}
.next-up__expand.is-live.is-open {
visibility: visible;
}
.next-up__wash {
position: absolute;
inset: 0;
opacity: 0;
}
.next-up__page {
position: relative;
padding-top: var(--header-height);
}
.next-up__page .case-hero {
transform-origin: 0 0;
}
.next-up__page [data-next-up-hero] {
transform-origin: 0 0;
}
.next-up__expand--value .next-up__wash {
background: var(--color-bg);
}
.next-up--value-accent { --color-client: var(--color-accent); }
.next-up--value-pink { --color-client: var(--color-pink); }
.next-up--value-purple { --color-client: var(--color-purple); }
.next-up--value-blue { --color-client: var(--color-blue); }
.next-up--value-accent,
.next-up--value-accent :is(.next-up__eyebrow, .next-up__link, .next-up__link:hover, .next-up__title, .next-up__all-link, .next-up__all-link:hover) {
color: var(--color-text);
}
.next-up--value-pink :is(.next-up__eyebrow, .next-up__title),
.next-up--value-purple :is(.next-up__eyebrow, .next-up__title),
.next-up--value-blue :is(.next-up__eyebrow, .next-up__title) {
color: var(--color-on-ink);
}
@media (max-width: 63.99rem) {
.next-up--value.is-live,
.next-up--article.is-live {
padding-bottom: calc(var(--gutter) + var(--touch-target) + var(--space-5));
}
}
.next-up--article {
--color-client: var(--color-ink);
}
.next-up__thumb--article {
aspect-ratio: 16 / 9;
}
.next-up__thumb--article img {
width: 100%;
height: 100%;
object-fit: cover;
}
.next-up__thumb--value {
background: none;
}
.next-up__thumb--value img {
width: 100%;
height: 100%;
object-fit: contain;
}
.is-continued .site-bar {
animation: none;
}
.bento__control {
position: absolute;
right: var(--space-5);
bottom: var(--space-5);
z-index: 1;
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--color-on-ink);
cursor: pointer;
}
[data-tile-video]::after {
content: "";
position: absolute;
inset: 0;
background: var(--gradient-carousel-scrim);
pointer-events: none;
}
.bento__control.is-paused .carousel__sign {
width: 0;
height: 0;
border-inline: 0;
border-block: calc(var(--space-3) / 2) solid transparent;
border-left: var(--space-3) solid currentColor;
transform: translateX(calc(var(--line-width) / 2));
}
.bento__control:focus-visible,
.bento__sound:focus-visible {
outline: var(--border-width-strong) solid var(--color-on-ink);
outline-offset: var(--space-1);
}
.bento__sound {
position: absolute;
right: calc(var(--space-5) + var(--touch-target) + var(--space-2));
bottom: var(--space-5);
z-index: 1;
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
padding: 0;
border: 0;
border-radius: 50%;
background: none;
box-shadow: inset 0 0 0 var(--line-width) var(--color-carousel-track);
color: var(--color-on-ink);
cursor: pointer;
transition: box-shadow var(--duration-medium) var(--ease-out);
}
.bento__sound.is-on {
box-shadow: inset 0 0 0 var(--line-width) var(--color-on-ink);
}
.bento__sound svg {
width: var(--space-5);
height: var(--space-5);
}
.bento__sound .bento__sound-on,
.bento__sound.is-on .bento__sound-off {
display: none;
}
.bento__sound.is-on .bento__sound-on {
display: inline;
}
.package-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: var(--size-package-row);
grid-auto-flow: dense;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.package-grid--tall {
grid-auto-rows: var(--size-package-row-tall);
}
@media (min-width: 48rem) {
.package-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.package-tile {
--tile-fill: var(--color-stack-1);
--tile-ink: var(--color-on-ink);
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--tile-fill);
color: var(--tile-ink);
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
text-align: left;
text-wrap: balance;
}
.package-grid--fill {
--fill-cols: 2;
--fill-basis: calc((100% - (var(--fill-cols) - 1) * var(--space-3)) / var(--fill-cols) * 0.999);
display: flex;
flex-wrap: wrap;
}
.package-grid--fill > .package-tile {
flex: 1 1 var(--fill-basis);
height: var(--size-package-row);
}
.package-grid--fill > .package-tile--wide {
flex-basis: calc(2 * var(--fill-basis) + var(--space-3));
}
@media (min-width: 48rem) {
.package-grid--fill {
--fill-cols: 4;
}
}
.package-tile--wide { grid-column: span 2; }
.package-tile--big { grid-column: span 2; grid-row: span 2; }
.package-tile--full { grid-column: 1 / -1; }
.package-tile--s1 { --tile-fill: var(--color-stack-1); }
.package-tile--s2 { --tile-fill: var(--color-stack-2); }
.package-tile--s3 { --tile-fill: var(--color-stack-3); }
.package-tile--s4 { --tile-fill: var(--color-stack-4); }
.package-tile--s5 { --tile-fill: var(--color-stack-5); }
.package-tile--s6 { --tile-fill: var(--color-stack-6); }
.package-tile--s7 { --tile-fill: var(--color-stack-7); }
.package-tile--ink {
--tile-fill: var(--color-ink);
}
.package-tile__link {
color: inherit;
text-decoration: none;
}
.package-tile__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.package-tile__link:focus-visible {
outline: none;
}
.package-tile:has(.package-tile__link:focus-visible) {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
.brief-form .tag-form__tabs-set {
display: none;
}
.package-tile--placeholder {
--tile-fill: var(--color-surface);
--tile-ink: var(--color-muted);
border: var(--border-width) dashed var(--color-border-strong);
}
.package-tile--flip {
z-index: 0;
padding: 0;
background: none;
perspective: var(--perspective-flip);
cursor: pointer;
}
.package-tile.package-tile--flip {
transition: z-index 0s linear calc(var(--duration-flip) + var(--delay-flip-close));
}
.package-tile.package-tile--flip:hover,
.package-tile.package-tile--flip:focus,
.package-tile.package-tile--flip:focus-within {
z-index: 2;
transition-delay: 0s;
}
.package-tile--flip:focus-visible {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
.package-tile__card {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: transform var(--duration-flip) var(--ease-out) var(--delay-flip-close);
}
.package-tile__face {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: var(--space-2);
overflow: hidden;
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--tile-fill);
backface-visibility: hidden;
}
.package-tile__back {
justify-content: flex-start;
transform: rotateY(180deg);
}
.package-tile__back-name {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.package-tile__back-text {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
text-wrap: pretty;
}
.package-tile__back-partner {
display: grid;
gap: var(--space-2);
margin-top: auto;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
}
.package-tile__back-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.package-tile__back-logos img {
width: auto;
height: var(--space-5);
filter: brightness(0) invert(1);
}
.package-tile--wide .package-tile__back-text,
.package-tile--wide .package-tile__back-partner {
font-size: var(--text-base);
}
.package-tile--big .package-tile__back-text,
.package-tile--big .package-tile__back-partner {
font-size: var(--text-lg);
}
.package-tile--wide .package-tile__back-logos img {
height: var(--space-5);
}
.package-tile--big .package-tile__back-logos img {
height: var(--space-6);
}
@media (hover: hover) {
.package-tile--flip:hover .package-tile__card {
transform: rotateY(180deg);
transition-delay: 0s;
}
}
.package-tile--flip:focus-within .package-tile__card,
.package-tile--flip:focus .package-tile__card {
transform: rotateY(180deg);
transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.package-tile__card {
transition: none;
transform: none !important;
}
.package-tile__back {
opacity: 0;
transform: none;
transition: opacity var(--duration-medium) var(--ease-out);
}
.package-tile--flip:hover .package-tile__back,
.package-tile--flip:focus .package-tile__back,
.package-tile--flip:focus-within .package-tile__back {
opacity: 1;
}
}
.package-tile__icon {
flex: none;
width: var(--size-package-icon);
height: var(--size-package-icon);
margin-bottom: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
svg.package-tile__icon {
filter: none;
}
.diy-card__icon {
flex: none;
width: var(--size-package-icon);
height: var(--size-package-icon);
color: var(--color-accent-strong);
}
.package-tile__device {
position: absolute;
top: var(--space-3);
right: var(--space-3);
bottom: var(--space-3);
width: auto;
height: calc(100% - var(--space-5));
max-width: 50%;
object-fit: contain;
object-position: right center;
}
.package-tile__partner {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-regular);
opacity: var(--opacity-partner);
}
.package-tile__partner img {
width: auto;
height: var(--space-4);
filter: brightness(0) invert(1);
}
.package-tile__how {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--weight-regular);
opacity: var(--opacity-partner);
}
.match-panel + .match-panel {
margin-top: var(--space-8);
}
.js [data-tabs] .match-panel + .match-panel {
margin-top: 0;
}
.js [data-tabs] .match-panel__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.package-tile {
transition: transform var(--duration-medium) var(--ease-out);
}
.package-tile:not(.package-tile--flip)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: var(--shadow-lift);
opacity: 0;
transition: opacity var(--duration-medium) var(--ease-out);
pointer-events: none;
}
.package-tile:not(.package-tile--flip):hover {
transform: translateY(calc(-1 * var(--space-2))) scale(var(--scale-card-hover));
}
.package-tile:not(.package-tile--flip):hover::after {
opacity: 1;
}
}
.partner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
}
.partner__mark {
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--color-ink);
color: var(--color-on-ink);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
text-align: center;
}
.partner__mark--image {
width: 100%;
height: auto;
padding: 0;
background: none;
object-fit: cover;
}
.partner__name {
margin: var(--space-3) 0 0;
font-family: var(--font-heading);
font-weight: var(--weight-medium);
}
.partner__what {
margin: var(--space-1) 0 0;
font-size: var(--text-sm);
color: var(--color-muted);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.partner:has(a) .partner__mark {
transition: transform var(--duration-medium) var(--ease-out);
}
.partner:has(a):hover .partner__mark {
transform: translateY(calc(-1 * var(--space-2))) scale(var(--scale-card-hover));
}
}
.partners-tide {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.photo-hero__scrim {
background: var(--gradient-partners-scrim-tall);
}
@media (min-width: 48rem) {
.photo-hero__scrim {
background: var(--gradient-partners-scrim);
}
}
.partners-hero__image {
object-position: 45% 30%;
}
.photo-cta {
gap: var(--size-join-frame-phone);
padding: var(--size-join-frame-phone);
}
@media (min-width: 48rem) {
.photo-cta {
gap: var(--size-join-frame);
padding: var(--size-join-frame);
}
}
.photo-cta__image {
object-position: 62% 30%;
}
.careers-hero__image {
object-position: 75% 30%;
}
@media (min-width: 48rem) {
.careers-hero__scrim,
.startups-hero__scrim {
background: var(--gradient-careers-scrim);
}
}
.startups-hero__image {
object-position: 55% 25%;
}
.what-we-do-hero__image {
object-position: 50% 45%;
}
.brand-strategy-hero__image {
object-position: 50% 45%;
}
.brand-identity-hero__image {
object-position: 50% 50%;
}
.websites-hero__image {
object-position: 50% 48%;
}
.apps-hero__image {
object-position: 50% 45%;
}
.design-hero__image {
object-position: 50% 18%;
}
.ongoing-support-hero__image {
object-position: 25% 40% ;
}
.scroll-story {
display: grid;
gap: var(--space-7);
}
.scroll-story__figure {
margin: 0;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface);
aspect-ratio: 3 / 2;
}
.scroll-story__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.scroll-story__step {
display: grid;
gap: var(--space-5);
align-content: start;
max-width: var(--measure);
}
.scroll-story__figure--tools {
aspect-ratio: auto;
background: var(--color-ink);
}
.scroll-story__tools {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-content: center;
gap: var(--space-4);
height: 100%;
margin: 0;
padding: var(--space-6);
list-style: none;
}
.scroll-story__tools > li {
aspect-ratio: 1;
}
@media (min-width: 64rem) {
.js .scroll-story {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(var(--story-steps), auto);
column-gap: var(--space-9);
row-gap: 0;
}
.scroll-story--2 { --story-steps: 2; }
.scroll-story--3 { --story-steps: 3; }
.js .scroll-story__figure {
grid-column: 1;
grid-row: 1 / -1;
position: sticky;
top: calc(var(--header-height) + var(--space-3));
align-self: start;
height: var(--size-story-figure);
aspect-ratio: auto;
opacity: 0;
transition: opacity var(--duration-story) var(--ease-out);
}
.js .scroll-story__figure.is-active {
opacity: 1;
}
.js .scroll-story__image {
transform: scale(1.08);
transition: transform calc(var(--duration-story) * 2) var(--ease-out);
}
.js .is-active > .scroll-story__image {
transform: none;
}
.js .scroll-story__step {
grid-column: 2;
align-content: center;
min-height: var(--size-story-step);
}
}
@media (min-width: 64rem) {
.js .scroll-story--landscape .scroll-story__figure {
top: calc(var(--header-height) + var(--space-8));
height: auto;
aspect-ratio: 4 / 3;
}
}
@media (prefers-reduced-motion: reduce) {
.js .scroll-story__figure,
.js .scroll-story__image {
transition: none;
}
}
.identity-evidence__image {
object-position: 28% 40%;
}
.brand-system__image {
object-position: 50% 30%;
}
.careers-dei__image {
object-position: 14% 40%;
}
.strategy-workshop__image {
object-position: 60% 40%;
}
.strategy-ed__image {
object-position: 50% 25%;
}
.scroll-story__image--contain {
object-fit: contain;
padding: var(--space-5);
}
.agency-photo__image {
object-position: 20% 50%;
}
.scaleups-hero__image {
object-position: 45% 30%;
}
.matchups-hero__image {
object-position: 50% 40%;
}
.work-with-hero__image {
object-position: 60% 40%;
}
@media (min-width: 64rem) {
.careers-hero__image {
object-position: 20% 30%;
}
}
.careers-facts {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.careers-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.careers-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.careers-fact {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--space-2);
min-height: var(--size-careers-fact);
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
}
.careers-fact--coral {
background: var(--color-accent);
color: var(--color-on-accent);
}
.careers-fact__big {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.careers-fact__label {
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.perks {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.perks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.perks {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.perk {
display: grid;
align-content: start;
gap: var(--space-5);
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
}
.perk__icon {
display: grid;
place-items: center;
width: var(--space-8);
height: var(--space-8);
border-radius: 50%;
background: var(--color-muted-on-ink);
color: var(--color-text);
}
.perk__icon svg {
width: var(--space-6);
height: var(--space-6);
}
.perk__name {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-heading);
line-height: var(--leading-snug);
}
.ny-signal {
width: 100%;
max-width: var(--size-signal);
aspect-ratio: 1;
padding: var(--border-width-signal);
border-radius: var(--radius-island);
background: var(--color-signal);
box-shadow: var(--shadow-signal);
}
.ny-signal__panel {
display: grid;
place-items: center;
height: 100%;
padding: var(--space-6) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-black);
}
.ny-signal__leds {
display: block;
width: 100%;
height: auto;
}
.ny-signal__hand {
fill: var(--color-accent);
filter: drop-shadow(var(--shadow-led) var(--color-accent));
}
.ny-signal__strut {
fill: var(--color-on-ink);
filter: drop-shadow(var(--shadow-led) var(--color-on-ink));
opacity: var(--opacity-led-off);
}
.ny-signal__strut-glow {
fill: var(--color-on-ink);
filter: drop-shadow(var(--shadow-led-glow) var(--color-on-ink));
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.ny-signal__hand {
animation: ny-signal-hand var(--duration-signal) steps(1, end) infinite;
}
.ny-signal__strut {
animation: ny-signal-strut var(--duration-signal) steps(1, end) infinite;
}
.ny-signal__strut-glow {
animation: ny-signal-glow var(--duration-signal) steps(1, end) infinite;
}
}
@keyframes ny-signal-hand {
0% { opacity: 1; }
70% { opacity: var(--opacity-led-off); }
71.2% { opacity: 1; }
72.5% { opacity: var(--opacity-led-off); }
74% { opacity: 1; }
75% { opacity: var(--opacity-led-off); }
77.5% { opacity: 1; }
78.5% { opacity: var(--opacity-led-off); }
79.5% { opacity: 1; }
}
@keyframes ny-signal-strut {
0% { opacity: var(--opacity-led-off); }
70% { opacity: 1; }
71.2% { opacity: var(--opacity-led-off); }
72.5% { opacity: 0.7; }
74% { opacity: var(--opacity-led-off); }
75% { opacity: 1; }
77.5% { opacity: var(--opacity-led-off); }
78.5% { opacity: 0.8; }
79.5% { opacity: var(--opacity-led-off); }
}
@keyframes ny-signal-glow {
0% { opacity: 0; }
70% { opacity: 0.7; }
71.2% { opacity: 0; }
72.5% { opacity: 0.5; }
74% { opacity: 0; }
75% { opacity: 0.7; }
77.5% { opacity: 0; }
78.5% { opacity: 0.55; }
79.5% { opacity: 0; }
}
.careers-apply__promise {
margin-bottom: 0;
padding-left: var(--space-5);
border-left: var(--border-width-strong) solid var(--color-accent);
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.tag-form-region,
.tag-form {
display: grid;
gap: var(--space-7);
}
.tag-form fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.tag-form__summary {
padding: var(--space-4);
border: var(--border-width-strong) solid var(--color-accent);
border-radius: var(--radius-md);
}
.tag-form__summary a,
.tag-form a {
color: var(--color-on-ink);
}
.tag-form__tabs {
position: relative;
display: flex;
gap: var(--space-1);
padding: var(--space-1);
border-radius: var(--radius-pill);
background: var(--color-ink-soft);
}
.tag-form__pill {
position: absolute;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
}
.tag-form__pill > * {
position: absolute;
top: 0;
left: 0;
height: calc(var(--pill-h, 0) * 1px);
background: var(--color-pink);
transform-origin: 0 0;
}
.tag-form__pill-l,
.tag-form__pill-r {
width: calc(var(--pill-h, 0) * 1px);
border-radius: var(--radius-pill);
}
.tag-form__pill-m {
width: 1px;
}
.tag-form__pill-l {
transform: translate(calc(var(--pill-x, 0) * 1px), calc(var(--pill-y, 0) * 1px));
}
.tag-form__pill-m {
transform: translate(calc((var(--pill-x, 0) + var(--pill-h, 0) / 2) * 1px), calc(var(--pill-y, 0) * 1px)) scaleX(calc(var(--pill-w, 0) - var(--pill-h, 0)));
}
.tag-form__pill-r {
transform: translate(calc((var(--pill-x, 0) + var(--pill-w, 0) - var(--pill-h, 0)) * 1px), calc(var(--pill-y, 0) * 1px));
}
.tag-form__tabs.is-ready .tag-form__pill > * {
transition: transform var(--duration-tab) var(--ease-out);
}
.tag-form__tab-input,
.tag-form__tag-input,
.tag-form__human-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.tag-form__tab {
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-height: var(--touch-target);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
color: var(--color-muted-on-ink);
font-family: var(--font-heading);
font-size: var(--text-base);
white-space: nowrap;
font-weight: var(--weight-medium);
cursor: pointer;
transition: background-color var(--duration-link) var(--ease-link), color var(--duration-link) var(--ease-link);
}
.tag-form__tabs .tag-form__tab {
position: relative;
z-index: 1;
}
.tag-form__tabs:has(> :nth-child(5)) {
flex-wrap: wrap;
border-radius: var(--radius-md);
}
@media (min-width: 48rem) {
.tag-form__tabs,
.tag-form__tabs:has(> :nth-child(5)) {
display: inline-flex;
justify-self: start;
flex-wrap: nowrap;
border-radius: var(--radius-pill);
}
.tag-form__tab {
padding-inline: var(--space-5);
font-size: var(--text-lg);
}
}
.tag-form__tab:hover {
color: var(--color-on-ink);
}
.tag-form__tab-input:checked + .tag-form__tab,
.tag-form__tab[aria-selected="true"] {
background: var(--color-pink);
color: var(--color-on-ink);
}
.tag-form__tabs.has-pill .tag-form__tab-input:checked + .tag-form__tab,
.tag-form__tabs.has-pill .tag-form__tab[aria-selected="true"] {
background: none;
}
button.tag-form__tab {
border: 0;
background: none;
}
.tag-form__tabs[role="tablist"] {
max-width: 100%;
}
@media (min-width: 48rem) {
.tag-form__tabs[role="tablist"] {
flex-wrap: wrap;
border-radius: var(--radius-md);
}
}
@media (min-width: 80rem) {
.tag-form__tabs[role="tablist"] {
flex-wrap: nowrap;
border-radius: var(--radius-pill);
}
}
.tag-form__tabs[role="tablist"] .tag-form__tab {
padding-inline: var(--space-4);
font-size: var(--text-base);
}
button.tag-form__tab:focus-visible {
outline: var(--focus-width) solid var(--color-on-ink);
outline-offset: var(--focus-width);
}
.tag-form__tab-input:focus-visible + .tag-form__tab,
.tag-form__tag-input:focus-visible + .tag-form__tag,
.tag-form__human-input:focus-visible + .tag-form__human-label .tag-form__signal {
outline: var(--focus-width) solid var(--color-on-ink);
outline-offset: var(--focus-width);
}
.tag-form__label {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
}
.tag-form__label .tag-form__hint {
display: block;
margin-top: var(--space-1);
font-size: var(--text-sm);
}
.tag-form__hint {
color: var(--color-muted-on-ink);
font-family: var(--font-body);
font-weight: var(--weight-regular);
}
.tag-form__tag-groups {
margin-top: var(--space-2);
}
.tag-form__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-2) 0 0;
padding: 0;
list-style: none;
}
.tag-form__tag {
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
padding: var(--space-2) var(--space-4);
border: var(--border-width-strong) solid var(--color-border-on-ink);
border-radius: var(--radius-pill);
font-size: var(--text-base);
cursor: pointer;
transition: background-color var(--duration-link) var(--ease-link), border-color var(--duration-link) var(--ease-link), color var(--duration-link) var(--ease-link);
}
.tag-form__tag:hover {
border-color: var(--color-on-ink);
}
.tag-form__tag--fun {
border-style: dashed;
color: var(--color-muted-on-ink);
}
.tag-form__tag-input:checked + .tag-form__tag {
border-color: var(--color-on-ink);
background: var(--color-on-ink);
color: var(--color-text);
}
.tag-form__grid {
display: grid;
gap: var(--space-5);
}
@media (min-width: 48rem) {
.tag-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tag-form__field--wide {
grid-column: 1 / -1;
}
}
.tag-form__field {
display: grid;
align-content: start;
gap: var(--space-2);
}
.tag-form:has(.tag-form__tab-input[value="team"]:checked) [data-tab-only]:not([data-tab-only~="team"]),
.tag-form:has(.tag-form__tab-input[value="freelance"]:checked) [data-tab-only]:not([data-tab-only~="freelance"]),
.tag-form:has(.tag-form__tab-input[value="client"]:checked) [data-tab-only]:not([data-tab-only~="client"]),
.tag-form:has(.tag-form__tab-input[value="job"]:checked) [data-tab-only]:not([data-tab-only~="job"]),
.tag-form:has(.tag-form__tab-input[value="general"]:checked) [data-tab-only]:not([data-tab-only~="general"]) {
display: none;
}
.tag-form__input {
width: 100%;
min-height: var(--input-height);
padding: var(--space-3) var(--space-4);
border: var(--border-width-strong) solid transparent;
border-radius: var(--radius-md);
background: var(--color-field);
color: var(--color-text);
font: inherit;
}
.tag-form__input::placeholder {
color: var(--color-muted);
}
.tag-form__input[aria-invalid="true"] {
border-color: var(--color-accent);
}
.tag-form__scope {
display: grid;
gap: var(--space-5);
margin-top: var(--space-3);
}
.tag-form__sublabel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-medium);
}
.tag-form__tags--flush {
margin-top: 0;
}
@media (min-width: 48rem) {
.tag-form__scope {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tag-form__scope .tag-form__field--full {
grid-column: 1 / -1;
}
}
.tag-form__select-wrap {
position: relative;
}
.tag-form__select {
appearance: none;
padding-right: var(--space-7);
cursor: pointer;
text-overflow: ellipsis;
}
.tag-form__select:has(option[value=""]:checked) {
color: var(--color-muted);
}
.tag-form__select option {
color: var(--color-text);
}
.tag-form__select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: var(--space-4);
width: var(--size-select-chevron);
height: var(--size-select-chevron);
border-right: var(--border-width-strong) solid var(--color-text);
border-bottom: var(--border-width-strong) solid var(--color-text);
transform: translateY(-75%) rotate(45deg);
pointer-events: none;
}
.tag-form__error {
margin: 0;
font-weight: var(--weight-bold);
}
.tag-form__human {
display: grid;
gap: var(--space-2);
padding: var(--space-5);
border: var(--border-width) solid var(--color-border-on-ink);
border-radius: var(--radius-md);
}
.tag-form__human-label {
display: flex;
align-items: center;
gap: var(--space-4);
cursor: pointer;
}
.tag-form__signal {
flex-shrink: 0;
padding: var(--border-width-signal-mini);
border-radius: var(--radius-md);
background: var(--color-signal);
}
.tag-form__signal-panel {
display: grid;
place-items: center;
width: var(--size-signal-mini-width);
height: var(--size-signal-mini-height);
padding: var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-black);
}
.tag-form__led {
grid-area: 1 / 1;
width: 100%;
height: 100%;
}
.tag-form__led--hand {
fill: var(--color-accent);
filter: drop-shadow(var(--shadow-led) var(--color-accent));
}
.tag-form__led--walker {
fill: var(--color-on-ink);
filter: drop-shadow(var(--shadow-led) var(--color-on-ink));
opacity: var(--opacity-led-off);
}
.tag-form__human-input:checked + .tag-form__human-label .tag-form__led--hand {
opacity: var(--opacity-led-off);
}
.tag-form__human-input:checked + .tag-form__human-label .tag-form__led--walker {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.tag-form__human-input:checked + .tag-form__human-label .tag-form__led--walker {
animation: signal-walker-on var(--duration-zap) steps(1, end);
}
}
@keyframes signal-walker-on {
0% { opacity: var(--opacity-led-off); }
20% { opacity: 1; }
35% { opacity: var(--opacity-led-off); }
55% { opacity: 0.7; }
70% { opacity: var(--opacity-led-off); }
85% { opacity: 1; }
}
.partner-cards {
display: grid;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.partner-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.partner-card {
position: relative;
display: grid;
gap: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-island);
background: var(--color-surface);
transition: box-shadow var(--duration-medium) var(--ease-out);
}
@media (min-width: 64rem) {
.partner-card {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: center;
gap: var(--space-5);
}
}
.partner-card:has(.partner-card__link:focus-visible) {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
.partner-card__logo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
object-fit: cover;
}
.partner-card__body {
display: grid;
align-content: start;
gap: var(--space-2);
}
.partner-card__name {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
}
.partner-card__link {
color: var(--color-text);
text-decoration: none;
}
.partner-card__link:focus-visible {
outline: none;
}
.partner-card__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.partner-card__what {
margin: 0;
color: var(--color-muted);
font-size: var(--text-lg);
}
.partner-card__site {
margin: var(--space-2) 0 0;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.partner-card__arrow {
display: inline-block;
margin-left: var(--space-1);
transition: transform var(--duration-medium) var(--ease-out);
}
.partner-card__story {
position: relative;
z-index: 1;
margin: var(--space-2) 0 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.partner-card__logo {
transition: transform var(--duration-medium) var(--ease-out);
}
.partner-card:hover .partner-card__logo {
transform: translateY(calc(-1 * var(--space-1))) scale(var(--scale-card-subtle));
}
.partner-card:hover .partner-card__arrow {
transform: translate(var(--space-1), calc(-1 * var(--space-1)));
}
}
.partner-card:hover {
box-shadow: var(--shadow-card-hover);
}
.quadrant {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: ". top ." "left field right" ". bottom .";
align-items: center;
gap: var(--space-3) var(--space-4);
}
.quadrant__axis {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
}
.quadrant__axis--top { grid-area: top; justify-self: center; }
.quadrant__axis--bottom { grid-area: bottom; justify-self: center; }
.quadrant__axis--left { grid-area: left; }
.quadrant__axis--right { grid-area: right; }
@media (max-width: 47.99rem) {
.quadrant__axis--left,
.quadrant__axis--right {
writing-mode: vertical-rl;
}
.quadrant__axis--left {
transform: rotate(180deg);
}
}
.quadrant__field {
position: relative;
grid-area: field;
}
.quadrant__line {
position: absolute;
background: var(--color-text);
pointer-events: none;
}
.quadrant__line--x {
left: 0;
right: 0;
top: 50%;
height: var(--border-width);
background: linear-gradient(to right, var(--color-accent), var(--color-blue));
}
.quadrant__line--y {
top: 0;
bottom: 0;
left: 50%;
width: var(--border-width);
background: linear-gradient(to top, var(--color-accent), var(--color-blue));
}
.quadrant__cells {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
margin: 0;
padding: 0;
list-style: none;
}
.quadrant__cell {
position: relative;
z-index: 0;
transition: z-index 0s linear calc(var(--duration-orb-hide) * 4);
display: grid;
align-content: center;
justify-items: center;
gap: var(--space-2);
padding: var(--space-6) var(--space-3);
text-align: center;
}
@media (min-width: 48rem) {
.quadrant__cell {
padding: var(--space-8) var(--space-6);
}
}
.quadrant__cell:is(:hover, :focus-within) {
z-index: 2;
transition-delay: 0s;
}
.quadrant__where {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-muted);
}
.quadrant__name {
font-size: var(--text-xl);
}
.quadrant__text {
max-width: var(--measure-copy);
margin: 0;
font-size: var(--text-sm);
color: var(--color-muted);
}
@media (min-width: 48rem) {
.quadrant__text {
font-size: var(--text-base);
}
}
.quadrant__tag {
display: inline-block;
margin-left: var(--space-2);
padding: 0 var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-accent);
color: var(--color-on-accent);
font-size: var(--text-sm);
vertical-align: middle;
}
html.is-locked {
overflow: hidden;
}
.slop-game {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: var(--space-4);
border: 0;
background: none;
color: var(--color-on-ink);
}
.slop-game[open] {
display: grid;
place-items: center;
}
.slop-game::backdrop {
background: var(--color-backdrop);
backdrop-filter: blur(var(--blur-backdrop));
}
.slop-phone {
height: min(calc(var(--width-phone) * 2), calc(100dvh - var(--space-8)));
max-width: 100%;
aspect-ratio: 9 / 18;
padding: var(--space-3);
border-radius: var(--radius-phone);
background: var(--color-black);
box-shadow: var(--shadow-phone), 0 0 0 1px var(--color-border-on-ink);
}
@media (prefers-reduced-motion: no-preference) {
.slop-phone {
opacity: 0;
transform: translateY(var(--space-6)) scale(0.94);
transition: transform var(--duration-slow) var(--ease-carousel), opacity var(--duration-medium) var(--ease-out);
}
.slop-game.is-open .slop-phone {
opacity: 1;
transform: none;
}
}
.slop-phone__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: var(--radius-phone-screen);
background: var(--color-ink);
}
.slop-phone__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5) var(--space-5) var(--space-3);
}
.slop-phone__title {
margin: 0;
line-height: 0;
}
.slop-phone__logo {
width: auto;
height: var(--space-7);
}
.slop-banner {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
}
.slop-banner__wall {
position: absolute;
top: -10%;
left: 0;
width: 100%;
height: 120%;
object-fit: cover;
}
.slop-banner__logo {
position: absolute;
inset: 0;
width: 82%;
height: auto;
margin: auto;
}
.slop-phone__count {
margin: 0;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
color: var(--color-muted-on-ink);
}
.slop-deck {
position: relative;
flex: 1;
margin: 0 var(--space-4);
padding: 0;
list-style: none;
}
.slop-card {
position: absolute;
inset: 0;
transition: transform var(--duration-swipe) var(--ease-out), opacity var(--duration-swipe) var(--ease-out);
}
.slop-card__image {
display: grid;
place-items: center;
height: 100%;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-black);
}
.slop-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.slop-card.is-out-slop {
opacity: 0;
transform: translateX(-120%) rotate(-14deg);
}
.slop-card.is-out-not {
opacity: 0;
transform: translateX(120%) rotate(14deg);
}
@media (prefers-reduced-motion: no-preference) {
.slop-card.is-in {
animation: slop-card-in var(--duration-swipe) var(--ease-out);
}
}
@keyframes slop-card-in {
from { opacity: 0; transform: scale(0.92); }
}
.slop-card__stamp {
position: absolute;
top: 50%;
left: 50%;
display: grid;
justify-items: center;
gap: var(--space-1);
margin: 0;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-sm);
background: var(--color-black);
color: var(--color-on-ink);
font-family: var(--font-heading);
font-weight: var(--weight-medium);
text-align: center;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, -50%) rotate(-10deg) scale(1.4);
transition: transform var(--duration-medium) var(--ease-orb-pop), opacity var(--duration-medium) var(--ease-out);
}
.slop-card[data-answer="slop"] .slop-card__stamp {
background: var(--color-accent);
color: var(--color-on-accent);
}
.slop-card[data-answer="not"] .slop-card__stamp {
background: var(--color-blue);
}
.slop-card:is(.is-right, .is-wrong) .slop-card__stamp {
opacity: 1;
transform: translate(-50%, -50%) rotate(-10deg);
}
.slop-card__answer {
font-size: var(--text-2xl);
text-transform: uppercase;
}
.slop-card__verdict {
font-size: var(--text-sm);
}
.slop-phone__actions {
display: flex;
justify-content: center;
gap: var(--space-6);
padding: var(--space-5) var(--space-4) var(--space-6);
}
.slop-choice {
display: grid;
place-items: center;
align-content: center;
gap: var(--space-1);
width: var(--size-slop-choice);
height: var(--size-slop-choice);
border: var(--border-width-strong) solid var(--color-on-ink);
border-radius: var(--radius-pill);
background: none;
color: var(--color-on-ink);
font: inherit;
font-size: var(--text-sm);
cursor: pointer;
transition: background-color var(--duration-link) var(--ease-link), border-color var(--duration-link) var(--ease-link), color var(--duration-link) var(--ease-link);
}
.slop-choice[data-slop-choice="slop"]:hover {
border-color: var(--color-accent);
background: var(--color-accent);
color: var(--color-on-accent);
}
.slop-choice[data-slop-choice="not"]:hover {
border-color: var(--color-blue);
background: var(--color-blue);
}
.slop-choice:focus-visible,
.slop-game__close:focus-visible {
outline: var(--focus-width) solid var(--color-on-ink);
outline-offset: var(--space-1);
}
.slop-result {
container-type: inline-size;
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-ink);
text-align: center;
}
.slop-result__label {
margin: 0;
color: var(--color-muted-on-ink);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.slop-result__score {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-slop-score);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.slop-result__total {
color: var(--color-muted-on-ink);
}
.slop-result__verdict {
max-width: none;
margin: 0;
font-size: var(--text-base);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
text-wrap: balance;
}
.slop-game__close {
position: fixed;
top: var(--space-4);
right: var(--space-4);
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
border: 0;
border-radius: var(--radius-pill);
background: var(--color-black);
color: var(--color-on-ink);
cursor: pointer;
}
.fight-feature {
overflow: hidden;
border-radius: var(--radius-island);
background: var(--color-ink);
box-shadow: var(--shadow-card);
}
.fight-feature__screen {
position: relative;
container-type: inline-size;
}
.fight-feature__image {
display: block;
width: 100%;
height: auto;
}
.fight-feature__tv {
position: absolute;
top: 17.2%;
left: 42.85%;
width: 16.15%;
height: 22.85%;
padding: 0;
border: 0;
border-radius: 6%;
background: none;
cursor: pointer;
transition: box-shadow var(--duration-medium) var(--ease-out);
}
.fight-feature__tv:hover,
.fight-feature__tv:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--size-pixel-half) var(--color-accent), 0 0 var(--space-7) var(--color-purple);
}
.fight-feature__press {
position: absolute;
top: 68%;
left: 50%;
padding: 2% 4% 1%;
background: var(--color-black);
color: var(--color-accent);
font-family: var(--font-pixel);
font-size: var(--text-fight-tv);
line-height: 1.2;
white-space: nowrap;
text-transform: uppercase;
transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
.fight-feature__press {
animation: fight-blink var(--duration-blink) steps(2) infinite;
}
}
.fight-feature__bar {
display: grid;
justify-items: center;
gap: var(--space-6);
padding: var(--space-6);
color: var(--color-on-ink);
text-align: center;
}
@media (min-width: 48rem) {
.fight-feature__bar {
padding: var(--space-7);
}
}
.fight-feature__eyebrow {
margin: 0 0 var(--space-3);
color: var(--color-accent);
font-family: var(--font-pixel);
font-size: var(--text-pixel-xs);
text-transform: uppercase;
}
.fight-feature__title {
margin: 0;
background: var(--gradient-fight-logo);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--font-pixel);
font-size: var(--text-pixel-xl);
font-weight: normal;
line-height: 1.2;
letter-spacing: normal;
text-transform: uppercase;
filter: drop-shadow(var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black)) drop-shadow(var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-blue));
}
.fight-feature__two {
color: var(--color-blue);
-webkit-text-fill-color: var(--color-blue);
}
.fight-feature__text {
max-width: var(--measure);
margin: var(--space-4) auto 0;
color: var(--color-muted-on-ink);
font-size: var(--text-lg);
}
.fight-feature__start {
display: grid;
justify-items: center;
gap: var(--space-5);
}
.fight-feature__button {
min-height: calc(var(--touch-target) * 1.4);
padding: var(--space-4) var(--space-6) var(--space-3);
border: var(--size-pixel-half) solid var(--color-black);
background: var(--color-accent);
box-shadow: var(--size-pixel) var(--size-pixel) 0 var(--color-black), var(--size-pixel) var(--size-pixel) 0 var(--size-pixel-half) var(--color-purple);
color: var(--color-ink);
font-family: var(--font-pixel);
font-size: var(--text-pixel-md);
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.fight-feature__button::before {
content: "";
flex: none;
width: var(--size-fight-arrow-width);
height: var(--size-fight-arrow-height);
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
transform: translateY(var(--shift-fight-arrow));
}
.fight-feature__button:hover {
background: var(--color-on-ink);
}
.fight-feature__button:active {
box-shadow: none;
transform: translate(var(--size-pixel), var(--size-pixel));
}
.fight-feature__button:focus-visible {
outline: var(--size-pixel-half) solid var(--color-on-ink);
outline-offset: var(--size-pixel);
}
.fight-feature__keys {
margin: 0;
color: var(--color-muted-on-ink);
font-family: var(--font-pixel);
font-size: var(--text-pixel-xs);
text-transform: uppercase;
}
.fight-game {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: var(--space-4);
border: 0;
background: none;
color: var(--color-on-ink);
}
.fight-game[open] {
display: grid;
place-items: center;
}
.fight-game::backdrop {
background: var(--color-backdrop);
backdrop-filter: blur(var(--blur-backdrop));
}
.fight {
position: relative;
display: grid;
gap: var(--space-4);
width: min(100%, var(--width-fight));
padding: var(--space-4);
border: var(--size-pixel) solid var(--color-on-ink);
background: var(--color-ink);
box-shadow: 0 0 0 var(--size-pixel) var(--color-black), var(--size-pixel) var(--size-pixel) 0 var(--size-pixel) var(--color-purple), var(--shadow-phone);
font-family: var(--font-pixel);
font-size: var(--text-pixel-sm);
line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
.fight {
opacity: 0;
transform: scale(0.9);
transition: transform var(--duration-medium) steps(4), opacity var(--duration-medium) steps(4);
}
.fight-game.is-open .fight {
opacity: 1;
transform: none;
}
}
.fight__hud {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: var(--space-3);
}
.fight__side {
display: flex;
align-items: flex-end;
gap: var(--space-2);
}
.fight__meter {
flex: 1;
min-width: 0;
}
.fight__face {
flex: none;
width: var(--size-fight-face);
height: var(--size-fight-face);
border: var(--size-pixel-half) solid var(--color-on-ink);
background: var(--color-ink);
image-rendering: pixelated;
}
.fight__centre {
display: grid;
justify-items: center;
gap: var(--space-1);
}
.fight__ko {
padding: var(--space-1) var(--space-2) 0;
border: var(--size-pixel-half) solid var(--color-on-ink);
background: var(--color-ink);
color: var(--color-muted-on-ink);
font-size: var(--text-pixel-xs);
}
.fight__ko.is-on {
background: var(--color-accent);
color: var(--color-ink);
}
.fight__hud[hidden] {
display: none;
}
.fight__name {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-size: var(--text-pixel-xs);
text-transform: uppercase;
}
.fight__side--right .fight__name {
justify-content: flex-end;
}
.fight__tag {
padding: var(--space-1) var(--space-1) 0;
background: var(--color-on-ink);
color: var(--color-ink);
}
.fight__tag.is-player {
background: var(--color-accent);
}
.fight__bar {
position: relative;
height: var(--height-fight-bar);
border: var(--size-pixel-half) solid var(--color-on-ink);
background: var(--color-fight-damage);
}
.fight__bar::after {
content: "";
position: absolute;
inset: 0;
background: var(--gradient-fight-segments);
}
.fight__fill {
display: block;
height: 100%;
background: var(--color-accent);
transform-origin: 0 50%;
transition: transform var(--duration-medium) steps(5);
}
.fight__side--right .fight__fill {
transform-origin: 100% 50%;
}
.fight__fill.is-low {
background: var(--color-pink);
}
.fight__timer {
min-width: 3ch;
margin: 0;
font-size: var(--text-pixel-lg);
text-align: center;
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-purple);
}
.fight__stage {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border: var(--size-pixel-half) solid var(--color-on-ink);
background: var(--color-black);
}
.fight__stage::after {
content: "";
position: absolute;
inset: 0;
background: var(--gradient-scanlines);
pointer-events: none;
}
.fight__canvas {
display: block;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
.fight__screen {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: center;
justify-items: center;
gap: var(--space-5);
padding: var(--space-4);
background: var(--color-fight-veil);
text-align: center;
}
.fight__screen[hidden] {
display: none;
}
.fight__title {
margin: 0;
font-size: var(--text-pixel-xl);
line-height: 1.2;
text-transform: uppercase;
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-purple), var(--size-pixel) var(--size-pixel) 0 var(--color-blue);
}
.fight__verdict {
max-width: 36ch;
margin: 0;
font-size: var(--text-pixel-sm);
line-height: 1.8;
}
@media (prefers-reduced-motion: no-preference) {
.fight__blink,
.fight__tile:focus-visible::before,
.fight__tile:hover::before,
.fight__menu-item:focus-visible::before,
.fight__menu-item:hover::before {
animation: fight-blink var(--duration-blink) steps(2) infinite;
}
}
@keyframes fight-blink {
50% {
opacity: 0;
}
}
.fight__screen--title {
background: transparent;
}
.fight__logo {
display: grid;
justify-items: center;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
}
.fight__logo-line {
font-size: var(--text-pixel-xl);
background: var(--gradient-fight-logo);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black)) drop-shadow(var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-blue));
}
.fight__logo-line {
font-size: var(--text-pixel-xxl);
}
.fight__logo-two {
background: none;
color: var(--color-blue);
-webkit-text-fill-color: var(--color-blue);
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-on-ink);
}
.fight__logo-vs {
margin: var(--space-3) 0 0;
color: var(--color-on-ink);
font-size: var(--text-pixel-md);
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black);
}
.fight__blink {
margin: 0;
color: var(--color-on-ink);
font-size: var(--text-pixel-sm);
text-transform: uppercase;
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black);
}
.fight__menu {
display: grid;
gap: var(--space-2);
}
.fight__menu-item {
position: relative;
padding: var(--space-2) var(--space-4);
border: 0;
background: none;
color: var(--color-on-ink);
font: inherit;
font-size: var(--text-pixel-md);
text-transform: uppercase;
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black);
cursor: pointer;
}
.fight__menu-item:hover,
.fight__menu-item:focus-visible {
color: var(--color-accent);
outline: none;
}
.fight__menu-item:hover::before,
.fight__menu-item:focus-visible::before {
content: "";
position: absolute;
top: 50%;
left: calc(var(--space-3) * -1);
width: var(--size-fight-arrow-width);
height: var(--size-fight-arrow-height);
transform: translateY(calc(-50% + var(--shift-fight-arrow)));
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.fight__credit {
position: absolute;
right: var(--space-4);
bottom: var(--space-3);
left: var(--space-4);
display: flex;
justify-content: space-between;
margin: 0;
color: var(--color-on-ink);
font-size: var(--text-pixel-xs);
text-transform: uppercase;
}
.fight__screen--select {
background: var(--gradient-fight-select), var(--color-fight-veil);
}
.fight__select {
display: grid;
justify-items: center;
}
.fight__select > :not(.fight__portrait),
.fight__screen--select > :not(.fight__select) {
position: relative;
z-index: 1;
}
.fight__portrait {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
margin: 0;
pointer-events: none;
}
.fight__portrait--right {
right: 0;
left: auto;
}
.fight__portrait-image {
position: absolute;
bottom: 0;
left: calc(var(--space-4) * -1);
width: auto;
max-width: none;
height: var(--height-fight-bust);
image-rendering: pixelated;
filter: drop-shadow(var(--size-pixel) 0 0 var(--color-black)) drop-shadow(calc(var(--size-pixel) * -1) 0 0 var(--color-black));
}
.fight__screen--select .fight__portrait-image {
height: var(--height-fight-bust-select);
opacity: 0.9;
}
.fight__portrait--right .fight__portrait-image {
right: calc(var(--space-4) * -1);
left: auto;
}
.fight__portrait-image--flip,
.fight__face--flip {
transform: scaleX(-1);
}
.fight__face.is-flash {
filter: brightness(0) invert(1);
}
.fight__portrait-name {
position: absolute;
bottom: var(--space-4);
left: var(--space-4);
max-width: 90%;
font-size: var(--text-pixel-lg);
line-height: 1.2;
text-align: left;
text-transform: uppercase;
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black), var(--size-pixel) var(--size-pixel) 0 var(--color-purple), calc(var(--size-pixel) * 1.5) calc(var(--size-pixel) * 1.5) 0 var(--color-black);
}
.fight__portrait--right .fight__portrait-name {
right: var(--space-4);
left: auto;
text-align: right;
}
.fight__badge {
position: absolute;
top: var(--space-4);
left: var(--space-4);
color: var(--color-accent);
font-size: var(--text-pixel-md);
text-shadow: var(--size-pixel-half) var(--size-pixel-half) 0 var(--color-black);
}
.fight__portrait--right .fight__badge {
right: var(--space-4);
left: auto;
color: var(--color-on-ink);
}
.fight__roster {
display: grid;
grid-template-columns: repeat(2, var(--size-fight-tile));
gap: var(--space-1);
padding-bottom: var(--space-6);
}
.fight__tile {
position: relative;
display: grid;
place-items: center;
width: var(--size-fight-tile);
height: var(--size-fight-tile);
padding: 0;
border: var(--size-pixel-half) solid var(--color-on-ink);
background: var(--color-ink);
color: var(--color-muted-on-ink);
font: inherit;
cursor: pointer;
}
.fight__tile img {
width: 100%;
height: 100%;
image-rendering: pixelated;
}
.fight__tile:hover,
.fight__tile:focus-visible {
border-color: var(--color-accent);
outline: var(--size-pixel-half) solid var(--color-accent);
outline-offset: 0;
}
.fight__tile:hover::before,
.fight__tile:focus-visible::before {
content: "1P";
position: absolute;
top: 0;
left: 0;
padding: var(--space-1) var(--space-1) 0;
background: var(--color-accent);
color: var(--color-ink);
font-size: var(--text-pixel-xs);
}
.fight__hint {
margin: 0;
color: var(--color-muted-on-ink);
font-size: var(--text-pixel-xs);
}
.fight__screen--vs {
padding: 0;
background: var(--gradient-fight-vs);
}
.fight__versus {
position: absolute;
inset: 0;
}
.fight__vs {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
height: var(--height-fight-vs);
margin: 0;
transform: translate(-50%, -50%);
}
.fight__vs-mark {
display: block;
width: auto;
height: 100%;
image-rendering: pixelated;
filter: drop-shadow(var(--size-pixel) var(--size-pixel) 0 var(--color-black));
}
@media (prefers-reduced-motion: no-preference) {
.fight__screen--vs:not([hidden]) .fight__portrait {
animation: fight-slide-left var(--duration-slow) steps(6) both;
}
.fight__screen--vs:not([hidden]) .fight__portrait--right {
animation-name: fight-slide-right;
}
.fight__screen--vs:not([hidden]) .fight__vs-mark {
animation: fight-slam var(--duration-medium) steps(4) var(--duration-slow) both;
}
}
@keyframes fight-slide-left {
from {
opacity: 0;
transform: translateX(-60%);
}
}
@keyframes fight-slide-right {
from {
opacity: 0;
transform: translateX(60%);
}
}
@keyframes fight-slam {
from {
opacity: 0;
transform: scale(3);
}
}
.fight__again {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
}
.fight__button {
min-height: var(--touch-target);
padding: var(--space-3) var(--space-4) var(--space-2);
border: var(--size-pixel-half) solid var(--color-black);
background: var(--color-accent);
box-shadow: var(--size-pixel) var(--size-pixel) 0 var(--color-black);
color: var(--color-ink);
font: inherit;
text-transform: uppercase;
cursor: pointer;
touch-action: manipulation;
}
.fight__button--alt {
background: var(--color-on-ink);
}
.fight__button:hover {
background: var(--color-on-ink);
}
.fight__button--alt:hover {
background: var(--color-accent);
}
.fight__button:active {
box-shadow: none;
transform: translate(var(--size-pixel), var(--size-pixel));
}
.fight__button:focus-visible,
.fight__sound-button:focus-visible {
outline: var(--size-pixel-half) solid var(--color-on-ink);
outline-offset: var(--size-pixel);
}
.fight__arena {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
}
.fight__pad {
display: grid;
justify-items: center;
align-content: center;
gap: var(--space-5);
min-width: var(--width-arcade-pad);
}
.fight__pad-name {
margin: 0;
color: var(--color-accent);
font-size: var(--text-pixel-sm);
}
.fight__pad-name:empty {
display: none;
}
.fight__arcade {
display: grid;
justify-items: center;
gap: var(--space-3);
padding: 0;
border: 0;
background: none;
color: var(--color-on-ink);
font: inherit;
font-size: var(--text-pixel-xs);
text-transform: uppercase;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.fight__arcade[hidden] {
display: none;
}
.fight__arcade-cap {
display: grid;
place-items: center;
width: var(--size-arcade);
height: var(--size-arcade);
padding-top: var(--size-pixel-half);
border-radius: var(--radius-pill);
background: var(--gradient-arcade-coral);
box-shadow: var(--shadow-arcade-coral);
color: var(--color-ink);
font-size: var(--text-pixel-lg);
text-shadow: 0 var(--size-pixel-half) 0 var(--color-arcade-shine);
transition: transform var(--duration-press) steps(2), opacity var(--duration-medium) var(--ease-out);
}
.fight__arcade--prompts .fight__arcade-cap {
background: var(--gradient-arcade-purple);
box-shadow: var(--shadow-arcade-purple);
color: var(--color-on-ink);
text-shadow: 0 var(--size-pixel-half) 0 var(--color-black);
}
.fight__arcade:hover .fight__arcade-cap {
filter: brightness(1.1);
}
.fight__arcade:active .fight__arcade-cap,
.fight__arcade.is-pressed .fight__arcade-cap {
transform: translateY(var(--size-arcade-depth));
box-shadow: var(--shadow-arcade-pressed);
}
.fight__arcade:focus-visible {
outline: none;
}
.fight__arcade:focus-visible .fight__arcade-cap {
outline: var(--size-pixel-half) solid var(--color-on-ink);
outline-offset: calc(var(--size-arcade-bezel) + var(--size-pixel-half));
}
.fight__arcade.is-cooling .fight__arcade-cap {
opacity: 0.5;
}
.fight__sound {
display: flex;
justify-content: flex-end;
margin: calc(var(--space-2) * -1) 0 0;
}
.fight__sound-button {
padding: var(--space-1) 0;
border: 0;
background: none;
color: var(--color-muted-on-ink);
font: inherit;
font-size: var(--text-pixel-xs);
text-transform: uppercase;
cursor: pointer;
}
.fight__sound-button:hover,
.fight__sound-button[aria-pressed="true"] {
color: var(--color-on-ink);
}
@media (hover: none) {
.fight__key {
display: none;
}
}
@media (max-width: 40rem) {
.fight-game {
padding-top: calc(var(--touch-target) + var(--space-5));
}
.fight {
padding: var(--space-3);
gap: var(--space-3);
}
.fight__stage {
aspect-ratio: 1 / 1;
}
.fight__hud {
gap: var(--space-2);
}
.fight__face {
display: none;
}
.fight__screen {
gap: var(--space-4);
padding: var(--space-3);
}
.fight__title {
font-size: var(--text-pixel-md);
}
.fight__logo-line {
font-size: var(--text-pixel-xl);
}
.fight__roster {
grid-template-columns: repeat(2, calc(var(--size-fight-tile) * 0.75));
padding-bottom: var(--space-5);
}
.fight__tile {
width: calc(var(--size-fight-tile) * 0.75);
height: calc(var(--size-fight-tile) * 0.75);
}
.fight__portrait-image,
.fight__screen--select .fight__portrait-image {
width: 128%;
height: auto;
}
.fight__portrait-name {
bottom: var(--space-3);
font-size: var(--text-pixel-sm);
}
.fight__arena {
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.fight__stage {
grid-row: 1;
grid-column: 1 / -1;
}
.fight__pad {
grid-auto-flow: column;
justify-self: start;
min-width: 0;
gap: var(--space-4);
}
.fight__pad--right {
justify-self: end;
}
.fight__pad-name {
align-self: center;
}
.fight__arcade-cap {
width: calc(var(--size-arcade) * 0.8);
height: calc(var(--size-arcade) * 0.8);
}
}
.offer-step {
display: grid;
align-content: start;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--color-border-on-ink);
}
.offer-step__number {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
color: var(--color-accent);
}
.offer-value {
display: grid;
align-content: start;
gap: var(--space-1);
padding: var(--space-4);
border: var(--border-width) solid var(--color-border-on-ink);
border-radius: var(--radius-md);
}
.offer-value__name {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
}
.offer-value__line {
margin: 0;
font-size: var(--text-sm);
color: var(--color-muted-on-ink);
}
.offer-value--main {
border-color: var(--color-accent);
background: var(--color-accent);
color: var(--color-on-accent);
}
.offer-value--main .offer-value__line {
color: var(--color-on-accent);
}
.brand-file {
margin: 0;
overflow: hidden;
border: var(--border-width) solid var(--color-border-on-ink);
border-radius: var(--radius-md);
background: var(--gradient-brand);
color: var(--color-on-ink);
}
.brand-file__name {
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-width) solid var(--color-border-on-ink);
font-size: var(--text-sm);
color: var(--color-on-ink);
}
.brand-file__body {
margin: 0;
padding: var(--space-5) var(--space-4);
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--leading-normal);
white-space: pre-wrap;
color: var(--color-on-ink);
}
.brand-file__h {
font-weight: var(--weight-bold);
color: var(--color-on-ink);
}
.nutshell-bar {
display: flex;
align-items: center;
gap: var(--space-4);
max-width: var(--measure);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-ink);
color: var(--color-on-ink);
}
.nutshell-bar[hidden] {
display: none;
}
.nutshell-bar__hand {
display: block;
flex: none;
width: auto;
height: var(--size-alert-hand);
fill: var(--color-accent);
filter: drop-shadow(var(--shadow-led) var(--color-accent));
}
.nutshell-bar__text {
flex: 1 1 auto;
min-width: 0;
font-size: var(--text-sm);
line-height: var(--leading-snug);
}
.nutshell-bar__alert {
display: block;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-accent);
}
.nutshell-bar__ask {
display: block;
margin-top: var(--space-2);
font-family: var(--font-heading);
font-weight: var(--weight-medium);
font-size: var(--text-base);
color: var(--color-on-ink);
}
.nutshell-bar__switch {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
min-height: var(--touch-target);
padding: 0;
border: 0;
background: none;
color: var(--color-on-ink);
cursor: pointer;
}
.nutshell-bar__state {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
white-space: nowrap;
}
.nutshell-bar__track {
position: relative;
flex: none;
width: var(--size-switch-width);
height: var(--size-switch-height);
border-radius: var(--radius-pill);
background: var(--color-muted);
}
.nutshell-bar__track::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--color-accent);
opacity: 0;
transition: opacity var(--duration-switch) var(--ease-link);
}
.nutshell-bar__knob {
position: absolute;
top: var(--size-switch-inset);
left: var(--size-switch-inset);
width: calc(var(--size-switch-height) - 2 * var(--size-switch-inset));
height: calc(var(--size-switch-height) - 2 * var(--size-switch-inset));
border-radius: var(--radius-pill);
background: var(--color-field);
transition: transform var(--duration-switch) var(--ease-link);
}
.nutshell-bar__switch[aria-checked="true"] .nutshell-bar__track::before {
opacity: 1;
}
.nutshell-bar__switch[aria-checked="true"] .nutshell-bar__knob {
transform: translateX(calc(var(--size-switch-width) - var(--size-switch-height)));
}
.nutshell-bar__switch:focus-visible .nutshell-bar__track {
outline: var(--focus-width) solid var(--color-on-ink);
outline-offset: var(--focus-width);
}
@media (min-width: 768px) {
.nutshell-bar__switch {
flex-direction: row;
align-items: center;
gap: var(--space-3);
}
}
@media (prefers-reduced-motion: no-preference) {
.nutshell-bar__hand {
animation: nutshell-throb var(--duration-throb) ease-in-out infinite;
}
}
@keyframes nutshell-throb {
0%, 100% { opacity: var(--opacity-throb-low); }
28%, 68% { opacity: 1; }
}
[data-nutshell][hidden],
[data-long-page][hidden] {
display: none;
}
[data-nutshell] {
scroll-margin-top: var(--space-5);
}
.nutshell__number {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-muted);
}
.brand-card {
--card-fill: var(--color-accent);
--card-ink: var(--color-on-accent);
background: var(--card-fill);
color: var(--card-ink);
}
.brand-card--coral { --card-fill: var(--color-accent); --card-ink: var(--color-on-accent); }
.brand-card--pink { --card-fill: var(--color-pink); --card-ink: var(--color-on-ink); }
.brand-card--purple { --card-fill: var(--color-purple); --card-ink: var(--color-on-ink); }
.brand-card--blue { --card-fill: var(--color-blue); --card-ink: var(--color-on-ink); }
.brand-card--ink { --card-fill: var(--color-ink); --card-ink: var(--color-on-ink); }
.brand-card__number {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
html:has(#main.page-ink),
body:has(#main.page-ink),
#main.page-ink,
.has-footer-reveal #main.page-ink {
background: var(--color-ink);
color: var(--color-on-ink);
}
.page-ink :focus-visible {
outline-color: var(--color-on-ink);
}
#main.page-ink {
position: relative;
isolation: isolate;
}
.page-glow {
position: absolute;
top: calc(-1 * var(--header-height));
left: 0;
right: 0;
z-index: -1;
height: var(--height-page-glow);
overflow: hidden;
pointer-events: none;
-webkit-mask-image: var(--mask-page-glow);
mask-image: var(--mask-page-glow);
}
.industry {
display: grid;
gap: var(--space-6);
align-items: center;
}
@media (min-width: 64rem) {
.industry {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-9);
}
}
.industry__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
.industry__media {
aspect-ratio: 3 / 2;
}
}
.parallax-frame {
position: relative;
overflow: hidden;
}
.parallax-frame__image {
position: absolute;
top: -10%;
left: 0;
width: 100%;
height: 120%;
object-fit: cover;
}
.industry__image {
position: absolute;
top: -10%;
left: 0;
width: 100%;
height: 120%;
object-fit: cover;
}
.industry-jump {
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
padding: 0 var(--space-4);
border: var(--border-width) solid var(--color-border-on-ink);
border-radius: var(--radius-pill);
color: var(--color-on-ink);
font-size: var(--text-sm);
text-decoration: none;
transition: background-color var(--duration-link) var(--ease-link), color var(--duration-link) var(--ease-link), border-color var(--duration-link) var(--ease-link);
}
.industry-jump__icon {
flex: none;
width: var(--space-4);
height: var(--space-4);
margin-right: var(--space-2);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.industry-jump:hover {
border-color: var(--color-accent);
background: var(--color-accent);
color: var(--color-on-accent);
}
.article-column {
max-width: var(--measure-article);
margin-inline: auto;
}
.article-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow-wrap: break-word;
gap: var(--space-5);
max-width: var(--measure-article);
font-size: var(--text-lg);
line-height: var(--leading-normal);
color: var(--color-muted);
}
.article-body :is(h2, h3) {
margin-top: var(--space-5);
font-family: var(--font-heading);
font-weight: var(--weight-heading);
line-height: var(--leading-snug);
color: var(--color-text);
}
.article-body h2 { font-size: var(--text-2xl); }
.article-body h3 { font-size: var(--text-xl); }
.article-body strong { font-weight: var(--weight-medium); color: var(--color-text); }
.article-body > p:first-of-type::first-letter {
font-family: var(--font-heading);
font-weight: var(--weight-heading);
color: var(--color-text);
initial-letter: 3;
margin-right: var(--space-3);
}
@supports not (initial-letter: 3) {
.article-body > p:first-of-type::first-letter {
float: left;
font-size: calc(var(--text-lg) * var(--leading-normal) * 3);
line-height: 0.85;
margin-top: var(--space-1);
}
}
.article-body :is(ul, ol) {
display: grid;
gap: var(--space-3);
padding-left: var(--space-5);
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--color-accent-strong); }
.article-body blockquote {
display: grid;
gap: var(--space-3);
padding-left: var(--space-5);
border-left: var(--line-width) solid var(--color-accent);
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--color-text);
}
.article-body figure {
display: grid;
gap: var(--space-3);
}
.article-body figure img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.article-body figcaption {
font-size: var(--text-sm);
color: var(--color-muted);
}
.article-gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
@media (min-width: 48rem) {
.article-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.article-gallery img {
aspect-ratio: 1;
object-fit: cover;
}
.article-image-placeholder {
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
padding: var(--space-5);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
font-size: var(--text-sm);
text-align: center;
overflow-wrap: anywhere;
}
.logo-tile {
display: grid;
place-items: center;
aspect-ratio: 1;
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--color-field);
}
.logo-tile--wide {
aspect-ratio: 16 / 9;
padding: 0;
overflow: hidden;
background: none;
}
.logo-tile--wide img {
object-fit: cover;
}
.logo-tile--name p {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
text-align: center;
}
.logo-tile img {
width: 100%;
height: 100%;
object-fit: contain;
}
.client {
display: grid;
gap: var(--space-5);
}
@media (min-width: 48rem) {
.client {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
column-gap: var(--space-6);
}
}
.client__card {
--client: var(--color-client-pwr);
--shade: 0;
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-island);
background: var(--client);
box-shadow: var(--shadow-card);
}
.client__card::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-ink);
opacity: var(--shade);
pointer-events: none;
}
.client__card img {
position: absolute;
inset: 5% 0;
width: 100%;
height: 90%;
object-fit: contain;
}
.client__card--knockout img {
filter: brightness(0) invert(1);
}
.client__card--skydive { --client: var(--color-client-skydive); }
.client__card--brushworks { --client: var(--color-client-brushworks); }
.client__card--cairngorm { --client: var(--color-client-cairngorm); }
.client__card--primrose { --client: var(--color-client-primrose); }
.client__card--signal { --client: var(--color-client-primrose); }
.client__card--pendle { --client: var(--color-client-pendle); }
.client__card--adc { --client: var(--color-client-adc); }
.client__card--caledonia { --client: var(--color-client-caledonia); }
.client__card--nc500 { --client: var(--color-client-nc500); }
.client__card--glamis { --client: var(--color-client-glamis); }
.client__card--benmore { --client: var(--color-client-benmore); }
.client__card--highland-hangout { --client: var(--color-client-highland-hangout); }
.client__card--balnagown { --client: var(--color-client-balnagown); }
.client__card--landmark-park { --client: var(--color-client-landmark-park); }
.client__card--heatherlea { --client: var(--color-client-heatherlea); }
.client__card--wordmark img {
inset: 0;
margin: auto;
width: 60%;
height: auto;
}
.client__card--light { --client: var(--color-field); }
.client__card--stack-1 { --client: var(--color-stack-1); }
.client__card--stack-3 { --client: var(--color-stack-3); }
.client__card--stack-5 { --client: var(--color-stack-5); }
.client__card--stack-7 { --client: var(--color-stack-7); }
.client__name {
position: relative;
z-index: 0;
padding: var(--space-6);
color: var(--color-on-ink);
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
text-align: center;
}
.client__stats {
border-bottom: var(--border-width) solid var(--color-border-on-ink);
}
.client__trend--up {
color: var(--color-trend-up);
}
.client__trend--down {
color: var(--color-trend-down);
}
.client__tag {
padding: var(--space-1) var(--space-3);
border: var(--border-width) solid var(--color-border-on-ink);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--text-sm);
color: var(--color-muted-on-ink);
}
.fan__media {
position: relative;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-black);
}
.fan__photo,
.fan__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.fan__photo {
transform: scale(var(--scale-fan-rest));
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out);
}
.fan__media:hover .fan__photo {
transform: scale(var(--scale-fan-hover));
opacity: var(--opacity-fan-hover);
}
.fan__play {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: var(--space-5);
border: 0;
background: none;
cursor: pointer;
}
.fan__play-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--space-8);
height: var(--space-8);
border-radius: var(--radius-pill);
background: var(--color-accent);
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out);
}
@media (hover: hover) {
.fan__play-icon {
opacity: 0;
transform: translateY(var(--space-8));
}
.fan__media:hover .fan__play-icon,
.fan__play:focus-visible .fan__play-icon {
opacity: 1;
transform: none;
}
}
.fan__play-icon::before {
content: "";
width: 0;
height: 0;
margin-left: var(--space-1);
border-block: var(--space-2) solid transparent;
border-left: var(--space-3) solid var(--color-on-accent);
}
.fan__play.is-playing .fan__play-icon::before {
width: var(--space-3);
height: var(--space-4);
margin-left: 0;
border-block: 0;
border-inline: var(--space-1) solid var(--color-on-accent);
}
.video-soon {
position: relative;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-surface);
}
.video-soon__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-soon__badge {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
}
.video-soon__play {
display: flex;
align-items: center;
justify-content: center;
width: var(--size-video-play);
height: var(--size-video-play);
border-radius: var(--radius-pill);
background: var(--color-accent);
box-shadow: var(--shadow-card-hover);
}
.video-soon__play::before {
content: "";
width: 0;
height: 0;
margin-left: var(--space-1);
border-block: var(--space-3) solid transparent;
border-left: var(--space-5) solid var(--color-on-accent);
}
.video-soon__label {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
background: var(--color-ink);
color: var(--color-on-ink);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 500;
line-height: 1.2;
}
.sectors-island {
padding-inline: var(--island-inset);
}
.sectors__inner {
border-radius: var(--radius-island);
}
.sector {
display: grid;
gap: var(--space-5);
}
@media (min-width: 48rem) {
.sector {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-6);
}
.sector__media {
grid-row: 1 / span 2;
}
.sector__name {
grid-column: 2;
align-self: end;
}
.sector__copy {
grid-column: 2;
align-self: start;
}
}
[data-fairy-dust].has-wand,
[data-fairy-dust].has-wand *,
.is-wanding,
.is-wanding * {
cursor: none;
}
.fairy-wand {
position: fixed;
top: 0;
left: 0;
z-index: 60;
width: var(--size-wand);
height: var(--size-wand);
margin: calc(var(--size-wand) * -0.052) 0 0 calc(var(--size-wand) * -0.052);
pointer-events: none;
opacity: 0;
transition: opacity var(--duration-medium) var(--ease-out);
}
.fairy-wand.is-shown {
opacity: 1;
}
.fairy-wand__img {
display: block;
width: 100%;
height: 100%;
transform-origin: 5.2% 5.2%;
}
.fairy-wand.is-zapping .fairy-wand__img {
animation: wand-flick var(--duration-zap) var(--ease-out);
}
@keyframes wand-flick {
20% {
transform: rotate(-14deg) scale(1.06);
}
45% {
transform: rotate(8deg);
}
}
.is-zapped {
animation: zap-shake var(--duration-zap) linear;
}
@keyframes zap-shake {
10% { transform: translate(calc(var(--zap-reach) * -1), calc(var(--zap-reach) * 0.4)) rotate(-0.6deg); }
20% { transform: translate(calc(var(--zap-reach) * 0.9), calc(var(--zap-reach) * -0.5)) rotate(0.5deg); }
30% { transform: translate(calc(var(--zap-reach) * -0.75), calc(var(--zap-reach) * 0.35)) rotate(-0.4deg); }
40% { transform: translate(calc(var(--zap-reach) * 0.55), calc(var(--zap-reach) * -0.25)) rotate(0.3deg); }
55% { transform: translate(calc(var(--zap-reach) * -0.33), calc(var(--zap-reach) * 0.15)) rotate(-0.15deg); }
70% { transform: translate(calc(var(--zap-reach) * 0.15), 0) rotate(0.05deg); }
}
.fairy-dust {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
pointer-events: none;
}
.fairy-dust--overlay {
position: fixed;
z-index: 55;
}
.hero-backdrop {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.js [data-hero-dark]:not(.is-light) .hero-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background: var(--color-ink);
pointer-events: none;
}
}
.hero-backdrop__glow {
transform: scaleY(-1);
}
@media (max-width: 47.99rem) {
.hero-backdrop__glow {
inset: 0 -60%;
}
}
.hero-text--fixed {
position: sticky;
top: var(--header-height);
}
.hero-tiles {
display: none;
}
[data-hero-dark]:has(.hero-tiles) {
overflow-x: clip;
}
[data-hero-text]:not(.hero-text--fixed) {
position: relative;
}
@media (min-width: 80rem) {
.hero-tiles {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
display: block;
width: 100vw;
translate: -50% 0;
pointer-events: none;
}
}
.hero-tile {
--tile-zone: calc(50% - var(--hero-text-half) - var(--space-5) - var(--gutter) - var(--tile-width));
--tile-offset: calc(50% + var(--hero-text-half) + var(--space-5) + var(--tile-zone) * var(--tile-spread));
position: absolute;
width: var(--tile-width);
pointer-events: auto;
}
.hero-tile--1, .hero-tile--2, .hero-tile--3 { right: var(--tile-offset); }
.hero-tile--4, .hero-tile--5, .hero-tile--6 { left: var(--tile-offset); }
.hero-tile--1 { --tile-width: var(--size-hero-tile-lg); --tile-ratio: 4 / 3; --tile-tilt: -3deg; --tile-order: 0; --tile-spread: 0.3; top: 0%; }
.hero-tile--2 { --tile-width: var(--size-hero-tile-md); --tile-ratio: 3 / 4; --tile-tilt: 2deg; --tile-order: 2; --tile-spread: 0.75; top: 27%; }
.hero-tile--3 { --tile-width: var(--size-hero-tile-sm); --tile-ratio: 1 / 1; --tile-tilt: -2deg; --tile-order: 4; --tile-spread: 0.2; top: 55%; }
.hero-tile--4 { --tile-width: var(--size-hero-tile-sm); --tile-ratio: 1 / 1; --tile-tilt: 3deg; --tile-order: 1; --tile-spread: 0.3; top: 0%; }
.hero-tile--5 { --tile-width: var(--size-hero-tile-xl); --tile-ratio: 16 / 10; --tile-tilt: -2deg; --tile-order: 3; --tile-spread: 0.75; top: 24%; }
.hero-tile--6 { --tile-width: var(--size-hero-tile-md); --tile-ratio: 4 / 5; --tile-tilt: 3deg; --tile-order: 5; --tile-spread: 0.2; top: 52%; }
.hero-tile__frame {
position: relative;
overflow: hidden;
aspect-ratio: var(--tile-ratio);
border-radius: var(--radius-md);
background: var(--color-ink-soft);
rotate: var(--tile-tilt);
transition: rotate var(--duration-hero-tile-hover) var(--ease-orb-pop), scale var(--duration-hero-tile-hover) var(--ease-orb-pop);
}
.hero-tile:hover .hero-tile__frame {
rotate: 0deg;
scale: var(--scale-hero-tile-hover);
}
.hero-tile__media {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-hero-tile-swap) var(--ease-out);
}
.hero-tile__media.is-current {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.hero-tile {
animation: hero-tile-in var(--duration-hero-tile-in) var(--ease-orb-pop) both;
animation-delay: calc(var(--delay-hero-tiles) + var(--tile-order) * 0.12s);
}
.hero-tile__float {
animation: hero-tile-float var(--duration-hero-tile-float) ease-in-out infinite alternate;
animation-delay: calc(var(--tile-order) * -1.1s);
}
}
@keyframes hero-tile-in {
from {
opacity: 0;
scale: 0.4;
translate: 0 var(--distance-hero-tile-rise);
}
}
@keyframes hero-tile-float {
from { translate: 0 calc(-1 * var(--distance-hero-tile-float)); }
to { translate: 0 var(--distance-hero-tile-float); }
}
@media (prefers-reduced-motion: reduce) {
.hero-tile__frame,
.hero-tile__media {
transition: none;
}
}
.logo-marquee {
overflow-x: auto;
}
.logo-marquee.is-running {
overflow: hidden;
}
.logo-marquee__inner {
display: flex;
width: max-content;
}
.logo-marquee__track {
display: flex;
gap: var(--space-7);
margin: 0;
padding: 0 var(--space-7) 0 0;
list-style: none;
}
.logo-marquee__item {
position: relative;
}
.logo-marquee__logo {
display: block;
width: var(--marquee-logo-size);
height: var(--marquee-logo-size);
}
.logo-marquee__placeholder {
display: grid;
place-items: center;
border: var(--border-width) dashed var(--color-border-strong);
border-radius: var(--radius-md);
color: var(--color-muted);
font-family: var(--font-heading);
font-size: var(--text-sm);
text-align: center;
}
.logo-marquee__logo--grey {
position: absolute;
inset: 0;
filter: grayscale(1);
transition: opacity var(--duration-medium) var(--ease-out);
}
.logo-marquee__item:hover .logo-marquee__logo--grey {
opacity: 0;
}
.logo-marquee--tiles .logo-marquee__item {
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--color-field);
}
.logo-marquee--tiles .logo-marquee__logo {
width: calc(var(--marquee-logo-size) - var(--space-3) * 2);
height: calc(var(--marquee-logo-size) - var(--space-3) * 2);
object-fit: contain;
}
.logo-marquee--tiles .logo-marquee__logo--grey {
display: none;
}
.logo-marquee.is-running .logo-marquee__inner {
animation: logo-marquee var(--duration-marquee) linear infinite;
}
.logo-marquee.is-running:focus-within .logo-marquee__inner {
animation-play-state: paused;
}
@keyframes logo-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logo-marquee.is-running .logo-marquee__inner {
animation: none;
}
}
.hand-underline,
.orb-host {
position: relative;
white-space: nowrap;
}
.orb-host {
display: inline-block;
--word-orb-reach-x: var(--quadrant-orb-reach-x);
--word-orb-reach-y: var(--quadrant-orb-reach-y);
}
.hand-underline__mark {
position: absolute;
left: 0;
top: 84%;
width: 100%;
height: auto;
overflow: visible;
pointer-events: none;
}
.hand-underline__mark path {
fill: none;
stroke: var(--color-accent-strong);
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100 200;
}
.service-card .hand-underline__mark path {
stroke: var(--color-border-strong);
stroke-dashoffset: 0;
}
.word-orbs {
position: absolute;
inset: 0;
pointer-events: none;
}
.word-orb {
--a: 0deg;
--turn: 0deg;
--orb-w: 1;
--orb-h: 1;
--orb-size: var(--size-word-orb-md);
--depth: 0.6;
--orb-fill: var(--color-accent);
position: absolute;
left: calc(50% + cos(var(--a) + var(--turn)) * (50% + var(--word-orb-reach-x)));
top: calc(50% + sin(var(--a) + var(--turn)) * (50% + var(--word-orb-reach-y)));
width: calc(var(--orb-size) * var(--orb-w));
height: calc(var(--orb-size) * var(--orb-h));
z-index: 2;
margin: calc(var(--orb-size) * var(--orb-h) / -2) 0 0 calc(var(--orb-size) * var(--orb-w) / -2);
}
.word-orbs.is-orbiting .word-orb {
left: 50%;
top: 50%;
}
.word-orb__pop,
.word-orb__float {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.word-orb__pop {
opacity: 0;
transform: scale(0);
transition:
transform var(--duration-orb-hide) var(--ease-orb-hide) calc(var(--i, 0) * var(--delay-orb-step) / 2),
opacity var(--duration-orb-hide) var(--ease-orb-hide) calc(var(--i, 0) * var(--delay-orb-step) / 2);
}
.hand-underline:focus-visible .word-orb__pop,
[data-orbs-hover]:focus-within .word-orb__pop {
opacity: 1;
transform: none;
transition:
transform var(--duration-orb-pop) var(--ease-orb-pop) calc(var(--i, 0) * var(--delay-orb-step)),
opacity var(--duration-orb-hide) var(--ease-out) calc(var(--i, 0) * var(--delay-orb-step));
}
@media (hover: hover) {
.hand-underline:hover .word-orb__pop,
[data-orbs-hover]:hover .word-orb__pop {
opacity: 1;
transform: none;
transition:
transform var(--duration-orb-pop) var(--ease-orb-pop) calc(var(--i, 0) * var(--delay-orb-step)),
opacity var(--duration-orb-hide) var(--ease-out) calc(var(--i, 0) * var(--delay-orb-step));
}
}
@media (prefers-reduced-motion: reduce) {
.word-orb__pop,
.hand-underline:is(:hover, :focus-visible) .word-orb__pop,
[data-orbs-hover]:is(:hover, :focus-within) .word-orb__pop {
transform: none;
transition: opacity var(--duration-orb-hide) linear;
}
}
@media (prefers-reduced-motion: no-preference) {
.hand-underline:is(:hover, :focus-visible) .word-orb__float,
[data-orbs-hover]:is(:hover, :focus-within) .word-orb__float {
animation: orb-bob calc(var(--duration-float) * (0.8 + var(--depth) * 0.4)) ease-in-out calc(var(--i, 0) * -0.7s) infinite;
}
}
.word-orb__face {
overflow: hidden;
isolation: isolate;
}
.word-orb .tool-orb__face,
.word-orb .tool-orb__shadow {
border-radius: var(--radius-word-orb);
}
.word-orb__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--duration-nav-fade) var(--ease-link);
}
.word-orb__img.is-shown {
opacity: 1;
}
.word-orb:nth-child(1) { --i: 0; }
.word-orb:nth-child(2) { --i: 1; }
.word-orb:nth-child(3) { --i: 2; }
.word-orb:nth-child(4) { --i: 3; }
.word-orb:nth-child(5) { --i: 4; }
.word-orb--lg { --orb-size: var(--size-word-orb-lg); --depth: 0.9; }
.word-orb--sm { --orb-size: var(--size-word-orb-sm); --depth: 0.35; }
.word-orb--tall { --orb-w: var(--orb-tall-w); --orb-h: var(--orb-tall-h); }
.word-orb--portrait { --orb-w: var(--orb-portrait-w); --orb-h: var(--orb-portrait-h); }
.word-orb--coral { --orb-fill: var(--color-accent); }
.word-orb--pink { --orb-fill: var(--color-pink); }
.word-orb--purple { --orb-fill: var(--color-purple); }
.word-orb--blue { --orb-fill: var(--color-blue); }
.word-orb--ink { --orb-fill: var(--color-ink); }
.word-orbs--2 > :nth-child(1) { --a: -55deg; }
.word-orbs--2 > :nth-child(2) { --a: 150deg; }
.word-orbs--3 > :nth-child(1) { --a: -60deg; }
.word-orbs--3 > :nth-child(2) { --a: 55deg; }
.word-orbs--3 > :nth-child(3) { --a: 195deg; }
.word-orbs--4 > :nth-child(1) { --a: -145deg; }
.word-orbs--4 > :nth-child(2) { --a: -40deg; }
.word-orbs--4 > :nth-child(3) { --a: 30deg; }
.word-orbs--4 > :nth-child(4) { --a: 150deg; }
.word-orbs--5 > :nth-child(1) { --a: -155deg; }
.word-orbs--5 > :nth-child(2) { --a: -85deg; }
.word-orbs--5 > :nth-child(3) { --a: -20deg; }
.word-orbs--5 > :nth-child(4) { --a: 45deg; }
.word-orbs--5 > :nth-child(5) { --a: 140deg; }
.word-orbs--turned > * { --turn: 25deg; }
.title-word {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-bottom: var(--title-mask-bleed);
margin-bottom: calc(var(--title-mask-bleed) * -1);
}
.title-word__inner {
display: inline-block;
}
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--color-accent);
color: var(--color-on-accent);
font-weight: var(--weight-medium);
border-radius: var(--radius-sm);
transform: translateY(-200%);
}
.skip-link:focus {
transform: none;
outline-color: var(--color-text);
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.form__honeypot {
position: absolute;
left: -100vw;
width: 1px;
height: 1px;
overflow: hidden;
}
html:not(.js) [data-api-form-region] {
display: none;
}
.lifecycle__steps > li {
position: relative;
}
.lifecycle-step--1 { --step: var(--color-blue); --step-ink: var(--color-on-ink); --step-next: var(--color-purple); }
.lifecycle-step--2 { --step: var(--color-purple); --step-ink: var(--color-on-ink); --step-next: var(--color-pink); }
.lifecycle-step--3 { --step: var(--color-pink); --step-ink: var(--color-on-ink); --step-next: var(--color-accent); }
.lifecycle-step--4 { --step: var(--color-accent); --step-ink: var(--color-on-accent); }
.lifecycle__marker {
border-color: var(--step);
}
.lifecycle-step__connector {
position: absolute;
top: var(--marker-size);
left: calc(var(--marker-size) / 2 - var(--line-width) / 2);
width: var(--line-width);
height: calc(100% - var(--marker-size) + var(--space-6));
overflow: hidden;
transform-origin: top center;
}
.lifecycle-step__line {
display: block;
width: 100%;
height: 100%;
transform-origin: top center;
background: linear-gradient(to bottom, var(--step), var(--step-next, var(--step)));
}
.lifecycle-step__connector--dashed .lifecycle-step__line {
-webkit-mask-image: repeating-linear-gradient(to bottom, var(--color-black) 0 var(--space-3), transparent var(--space-3) calc(var(--space-3) + var(--space-2)));
mask-image: repeating-linear-gradient(to bottom, var(--color-black) 0 var(--space-3), transparent var(--space-3) calc(var(--space-3) + var(--space-2)));
}
.lifecycle__return {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-6);
padding-left: calc(var(--marker-size) + var(--space-4));
}
.lifecycle__return-path {
display: none;
}
@media (min-width: 900px) {
.lifecycle-step__connector {
top: calc(var(--marker-size) / 2 - var(--line-width) / 2);
left: var(--marker-size);
width: calc(100% - var(--marker-size) + var(--space-6));
height: var(--line-width);
transform-origin: left center;
}
.lifecycle-step__line {
transform-origin: left center;
background: linear-gradient(to right, var(--step), var(--step-next, var(--step)));
}
.lifecycle-step__connector--dashed .lifecycle-step__line {
-webkit-mask-image: repeating-linear-gradient(to right, var(--color-black) 0 var(--space-3), transparent var(--space-3) calc(var(--space-3) + var(--space-2)));
mask-image: repeating-linear-gradient(to right, var(--color-black) 0 var(--space-3), transparent var(--space-3) calc(var(--space-3) + var(--space-2)));
}
.lifecycle__return {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--space-6);
margin-top: var(--space-4);
padding-left: 0;
}
.lifecycle__return-icon {
display: none;
}
.lifecycle__return-path {
display: block;
position: relative;
grid-column: 2 / 5;
grid-row: 1;
height: var(--space-7);
margin-left: calc(var(--marker-size) / 2);
margin-right: calc((100% - 2 * var(--space-6)) / 3 - var(--marker-size) / 2);
border: var(--line-width) dashed var(--color-accent-strong);
border-top: 0;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.lifecycle__return-path::before,
.lifecycle__return-path::after {
content: "";
position: absolute;
top: calc(var(--space-2) * -1);
width: 0;
height: 0;
border-left: var(--space-2) solid transparent;
border-right: var(--space-2) solid transparent;
border-bottom: var(--space-3) solid var(--color-accent-strong);
}
.lifecycle__return-path::before {
left: calc(var(--space-2) * -1 - var(--line-width) / 2);
}
.lifecycle__return-path::after {
left: calc(50% - var(--space-2));
}
.lifecycle__return-branch {
position: absolute;
bottom: 0;
left: calc(50% - var(--line-width) / 2);
height: 100%;
border-left: var(--line-width) dashed var(--color-accent-strong);
}
.lifecycle__return-label {
grid-column: 2 / 5;
grid-row: 2;
margin-top: var(--space-3);
margin-left: calc(var(--marker-size) / 2);
margin-right: calc((100% - 2 * var(--space-6)) / 3 - var(--marker-size) / 2);
text-align: center;
}
}
.faq-icon {
position: relative;
flex-shrink: 0;
align-self: center;
width: var(--space-5);
height: var(--space-5);
transition: transform var(--duration-medium) var(--ease-out);
}
.faq-icon__bar {
position: absolute;
left: 0;
right: 0;
top: calc(50% - var(--line-width) / 2);
height: var(--line-width);
border-radius: var(--radius-pill);
background: var(--color-accent-strong);
transition: transform var(--duration-medium) var(--ease-out);
}
.faq-icon__bar--upright {
transform: rotate(90deg);
}
details[open] > summary .faq-icon {
transform: rotate(180deg);
}
details[open] > summary .faq-icon__bar--upright {
transform: rotate(180deg);
}
.faq-panel {
overflow: hidden;
}
details[data-faq].is-enhanced .faq-icon,
details[data-faq].is-enhanced .faq-icon__bar {
transition: none;
}
.team-photo {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--color-surface);
}
.team-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.team-photo-wrap {
position: relative;
}
.team-photo__social {
position: absolute;
right: var(--space-3);
bottom: var(--space-3);
z-index: 2;
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
border-radius: var(--radius-pill);
background: var(--color-linkedin);
color: var(--color-on-ink);
transition: background-color var(--duration-link) var(--ease-link);
}
.team-photo__social:hover,
.team-photo__social:focus-visible {
background: color-mix(in srgb, var(--color-linkedin), black 25%);
}
.team-photo__social:focus-visible {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
.team-photo__social svg {
display: block;
}
html:not(.js) .team-photo__grey {
display: none;
}
.team-photo {
isolation: isolate;
}
.team-photo img,
.team-photo__mesh {
transition: transform var(--duration-photo) var(--ease-photo), opacity var(--duration-photo-fade) var(--ease-photo);
will-change: transform;
backface-visibility: hidden;
}
[data-member][data-active] .team-photo :is(img, .team-photo__mesh),
[data-member]:hover .team-photo :is(img, .team-photo__mesh),
[data-member]:focus-within .team-photo :is(img, .team-photo__mesh) {
transform: scale(var(--scale-active));
}
@media (min-width: 1024px) {
.team-panel {
position: sticky;
top: var(--header-height);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-7);
height: calc(100vh - var(--header-height));
max-height: calc(var(--space-10) * 6);
padding-block: var(--space-4) var(--space-6);
}
}
.team-cards {
position: relative;
min-height: var(--space-10);
}
.team-card__skills {
max-width: var(--measure);
margin-bottom: 0;
}
.team-card {
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transform: translateY(var(--space-4));
transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-medium) var(--ease-out);
}
.team-card.is-active {
opacity: 1;
transform: none;
}
.say-hi {
position: fixed;
right: var(--gutter);
bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
z-index: 35;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
pointer-events: none;
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out);
}
.say-hi.is-tucked {
opacity: 0;
transform: translateY(calc(100% + var(--gutter)));
}
.say-hi__toggle {
display: inline-flex;
align-items: center;
height: var(--touch-target);
padding: 0 calc((var(--touch-target) - var(--space-5)) / 2);
border: 0;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-lift);
color: var(--color-on-ink);
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
pointer-events: auto;
}
.say-hi__toggle.btn-fx::before {
background: var(--gradient-corner-button);
}
.say-hi__toggle:hover,
.say-hi__toggle:focus-visible {
color: var(--color-on-ink);
}
.say-hi__toggle[hidden] {
display: none;
}
.say-hi__toggle:focus-visible {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
.say-hi__icon {
position: relative;
display: block;
flex: none;
width: var(--space-5);
height: var(--space-5);
}
.say-hi__icon svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--duration-medium) var(--ease-orb-pop), opacity var(--duration-medium) var(--ease-out);
}
.say-hi__toggle:hover .say-hi__open {
transform: rotate(-12deg);
}
.say-hi__close {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
.say-hi.is-open .say-hi__open {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
.say-hi.is-open .say-hi__close {
opacity: 1;
transform: none;
}
.say-hi__label {
display: block;
max-width: var(--width-corner-label);
padding-inline: var(--space-2);
overflow: hidden;
transition: max-width var(--duration-medium) var(--ease-out), padding var(--duration-medium) var(--ease-out);
}
.say-hi.is-compact .say-hi__label {
max-width: 0;
padding-inline: 0;
}
.say-hi.is-compact .say-hi__toggle:hover .say-hi__label,
.say-hi.is-compact .say-hi__toggle:focus-visible .say-hi__label {
max-width: var(--width-corner-label);
padding-inline: var(--space-2);
}
.say-hi.is-compact:not(.say-hi--left) .say-hi__toggle {
flex-direction: row-reverse;
}
.say-hi.is-instant,
.say-hi.is-instant * {
transition: none;
}
@media (max-width: 47.99rem) {
.say-hi .say-hi__toggle .say-hi__label,
.say-hi.is-compact .say-hi__toggle:hover .say-hi__label,
.say-hi.is-compact .say-hi__toggle:focus-visible .say-hi__label {
max-width: 0;
padding-inline: 0;
}
}
.say-hi__panel {
display: grid;
gap: var(--space-4);
width: min(var(--width-say-hi), 100vw - 2 * var(--gutter));
padding: var(--space-6);
border: var(--border-width) solid var(--color-border-on-ink);
border-radius: var(--radius-md);
background: var(--color-ink);
box-shadow: var(--shadow-card);
color: var(--color-on-ink);
visibility: hidden;
opacity: 0;
transform: translateY(var(--space-4)) scale(0.94);
transform-origin: 100% 100%;
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out), visibility 0s linear var(--duration-medium);
}
.say-hi.is-open .say-hi__panel {
visibility: visible;
opacity: 1;
transform: none;
pointer-events: auto;
transition: transform var(--duration-medium) var(--ease-orb-pop), opacity var(--duration-medium) var(--ease-out), visibility 0s;
}
.say-hi--left {
right: auto;
left: var(--gutter);
align-items: flex-start;
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out), z-index 0s linear var(--duration-medium);
}
.say-hi--left.is-tucked {
opacity: 1;
transform: none;
}
.say-hi--left:not(.is-instant) .say-hi__toggle {
transition: transform var(--duration-medium) var(--ease-out), opacity var(--duration-medium) var(--ease-out);
}
.say-hi--left.is-tucked .say-hi__toggle {
opacity: 0;
transform: translateY(calc(100% + var(--gutter)));
}
.say-hi--left.is-open {
z-index: 70;
transition-delay: 0s;
}
.say-hi--left.is-open .say-hi__toggle {
visibility: hidden;
}
.brand-check__backdrop {
position: fixed;
inset: 0;
background: var(--color-backdrop-drawer);
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-medium) var(--ease-out), visibility 0s linear var(--duration-medium);
}
.say-hi.is-open .brand-check__backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity var(--duration-medium) var(--ease-out), visibility 0s;
}
.brand-check {
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: grid;
align-content: start;
gap: var(--space-5);
width: min(var(--width-brand-check), 100vw);
--bc-edge: var(--space-7);
padding: calc(var(--bc-edge) * 2 + var(--touch-target) + env(safe-area-inset-top)) var(--bc-edge) calc(var(--space-7) + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 0 var(--radius-island) var(--radius-island) 0;
box-shadow: var(--shadow-card);
visibility: hidden;
transform: translateX(-100%);
transition: transform var(--duration-drawer) var(--ease-out), visibility 0s linear var(--duration-drawer);
}
@media (max-width: 47.99rem) {
.brand-check {
--bc-edge: var(--gutter);
padding-inline: var(--gutter);
border-radius: 0;
}
}
.say-hi.is-open .brand-check {
visibility: visible;
transform: none;
pointer-events: auto;
transition: transform var(--duration-drawer) var(--ease-out), visibility 0s;
}
.brand-check__close {
position: absolute;
top: calc(var(--bc-edge) + env(safe-area-inset-top));
right: var(--bc-edge);
display: grid;
place-items: center;
width: var(--touch-target);
height: var(--touch-target);
border: 0;
border-radius: 50%;
background: var(--color-backdrop-drawer);
color: var(--color-on-ink);
cursor: pointer;
}
.brand-check__close svg {
width: var(--space-5);
height: var(--space-5);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.brand-check__logo {
position: absolute;
top: calc(var(--bc-edge) + env(safe-area-inset-top) + (var(--touch-target) - var(--size-brand-check-logo-height)) / 2);
left: var(--bc-edge);
display: block;
width: auto;
height: var(--size-brand-check-logo-height);
}
@media (max-width: 47.99rem) {
.brand-check__logo {
left: var(--gutter);
}
}
.brand-check__close:focus-visible {
outline: var(--focus-width) solid var(--color-on-ink);
outline-offset: var(--focus-width);
}
.brand-check__title {
max-width: var(--measure-heading);
font-size: var(--text-3xl);
line-height: var(--leading-tight);
}
@media (prefers-reduced-motion: reduce) {
.brand-check,
.say-hi.is-open .brand-check,
.brand-check__backdrop,
.say-hi.is-open .brand-check__backdrop {
transition: none;
}
}
.say-hi__title {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
}
.say-hi__text {
color: var(--color-muted-on-ink);
}
.say-hi__list {
display: grid;
gap: var(--space-1);
font-size: var(--text-lg);
}
.say-hi__list a {
color: var(--color-on-ink);
}
.say-hi__list a:hover {
color: var(--color-accent);
}
.say-hi__panel .btn-fx {
justify-self: start;
}
@media (prefers-reduced-motion: reduce) {
.say-hi,
.say-hi__icon svg,
.say-hi__panel,
.say-hi.is-open .say-hi__panel,
.say-hi__label {
transition: none;
}
}
@media (forced-colors: active) {
.gradient-text {
background: none;
color: CanvasText;
}
}
}
html:not(.js) body {
padding-inline: var(--space-4);
}
html:not(.js) section,
html:not(.js) footer {
padding-block: var(--space-7);
}
html:not(.js) :where(h1, h2, h3, p, ul, ol, details, form, address, div) + * {
margin-top: var(--space-4);
}
.lifecycle__fill {
position: absolute;
inset: calc(var(--line-width) * -1);
display: grid;
place-items: center;
border-radius: var(--radius-pill);
background: var(--step, var(--color-accent-strong));
color: var(--step-ink, var(--color-on-accent));
opacity: 0;
transform: scale(0);
}
html:not(.js) .lifecycle-step__connector {
display: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0s !important;
animation: none !important;
}
}
[data-sectors].is-pinned {
padding-block: var(--island-inset);
}
.is-pinned .sectors__inner {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--island-inset) * 2);
padding-block: var(--space-7);
}
.is-pinned .sectors {
position: relative;
container-type: inline-size;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: var(--space-8);
}
.is-pinned .sector {
display: contents;
}
.is-pinned .sector__name {
font-size: min(var(--text-2xl), calc((100cqi - var(--sector-media-height) * 0.75 - var(--space-8) * 2) / 22));
grid-area: 1 / 1;
align-self: center;
justify-self: end;
text-align: right;
white-space: nowrap;
transform-origin: 100% 50%;
}
.sector__jump {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: inherit;
cursor: pointer;
transition: color var(--duration-medium) var(--ease-out);
}
.sector__jump:hover {
color: var(--color-accent);
}
.values-island .sectors__inner {
position: relative;
isolation: isolate;
overflow: hidden;
}
.sectors__wash {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.values-island.is-pinned .sector__name {
font-size: var(--text-2xl);
white-space: normal;
}
.values-island.is-pinned .sectors__inner {
color: var(--color-text);
}
.values-island.is-pinned .sectors__head p {
color: inherit;
}
.values-island.is-pinned .sectors__tick-cap,
.values-island.is-pinned .sectors__tick-bar {
background: var(--color-text);
}
.values-island.is-pinned :focus-visible {
outline-color: var(--color-text);
}
.values-island .value-link {
color: var(--color-on-ink);
}
.values-island.is-pinned .value-link {
color: inherit;
}
.values-island .value-link:hover {
color: inherit;
}
.values-island .sector__jump:hover {
color: inherit;
}
.is-pinned .sector__media {
grid-area: 1 / 2;
width: calc(var(--sector-media-height) * 0.75);
}
.is-pinned .sector__image {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
.is-pinned .sector__copy {
grid-area: 1 / 3;
align-self: center;
}
.sectors__ticks {
position: relative;
grid-area: 1 / 2;
justify-self: end;
align-self: center;
width: var(--indicator-size);
row-gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
translate: calc(100% + var(--space-4)) 0;
}
.sectors__tick {
position: absolute;
top: 0;
left: 0;
width: var(--indicator-size);
}
.sectors__tick-cap,
.sectors__tick-bar {
position: absolute;
left: 0;
width: var(--indicator-size);
background: var(--color-on-ink);
}
.sectors__tick-cap {
top: 0;
height: var(--indicator-size);
border-radius: var(--radius-pill);
}
.sectors__tick-bar {
top: calc(var(--indicator-size) / 2);
height: var(--indicator-stretch);
transform-origin: 50% 0;
}
[data-sectors].is-pinned-narrow .sectors__inner {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: calc(100svh - var(--island-inset) * 2);
min-height: 0;
padding-top: calc(var(--header-height) - var(--island-inset));
padding-bottom: calc(var(--touch-target) + var(--space-4));
}
[data-sectors].is-pinned-narrow .sectors__inner > div:has(> [data-sectors-stage]) {
display: flex;
flex: 1 1 auto;
min-height: 0;
margin-top: var(--space-4);
}
[data-sectors].is-pinned-narrow .sectors {
container-type: normal;
flex: 1 1 auto;
min-height: 0;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr) auto auto;
column-gap: var(--space-4);
row-gap: var(--space-4);
}
[data-sectors].is-pinned-narrow .sector__media {
grid-area: 1 / 1;
width: 100%;
height: 100%;
min-height: 0;
}
[data-sectors].is-pinned-narrow .sector__image {
width: 100%;
height: 100%;
aspect-ratio: auto;
}
[data-sectors].is-pinned-narrow .sector__name {
grid-area: 2 / 1 / 3 / 3;
justify-self: start;
align-self: end;
font-size: var(--text-2xl);
text-align: left;
white-space: normal;
transform-origin: 0 50%;
}
[data-sectors].is-pinned-narrow .sector__copy {
grid-area: 3 / 1 / 4 / 3;
align-self: start;
}
[data-sectors].is-pinned-narrow .sector__copy p:first-child {
font-size: var(--text-base);
line-height: var(--leading-normal);
}
[data-sectors].is-pinned-narrow .sector__copy p + p {
margin-top: var(--space-3);
}
[data-sectors].is-pinned-narrow .sectors__ticks {
grid-area: 1 / 2;
justify-self: center;
translate: none;
}
[data-sectors].is-pinned-narrow .sectors__inner > div:not(:has(> [data-sectors-stage])) p {
display: none;
}
[data-sectors].is-pinned-narrow .sectors__inner > div:not(:has(> [data-sectors-stage])) h2 {
margin-top: 0;
font-size: var(--text-xl);
}
@media (max-height: 47.5rem) {
[data-sectors].is-pinned-narrow .sector__name {
font-size: var(--text-xl);
}
[data-sectors].is-pinned-narrow .sector__copy p:first-child {
font-size: var(--text-sm);
line-height: var(--leading-snug);
}
}
[data-deck].is-pinned {
padding-block: var(--island-inset);
}
[data-deck].is-pinned .island__inner {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--island-inset) * 2);
padding-block: var(--space-7);
}
.is-pinned .deck {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: center;
column-gap: var(--space-8);
min-height: var(--deck-height);
}
.is-pinned .client {
display: contents;
}
.is-pinned .client__card {
grid-area: 1 / 1;
justify-self: center;
width: min(100%, calc(var(--deck-height) * 0.9));
}
.is-pinned .client__story {
grid-area: 1 / 2;
align-self: center;
}
@layer components {
.quiz-island__title {
max-width: var(--measure-heading);
}
.quiz {
display: grid;
gap: var(--space-5);
}
.quiz__facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.quiz__facts li {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: var(--weight-medium);
}
.quiz__facts li + li::before {
content: "·";
margin-right: var(--space-2);
}
.quiz__start,
.quiz__submit {
margin: 0;
}
.quiz__form {
display: grid;
gap: var(--space-7);
}
.quiz__form.is-stepped {
gap: var(--space-6);
}
.quiz__question {
display: grid;
gap: var(--space-5);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.quiz__legend {
display: grid;
gap: var(--space-3);
max-width: var(--measure);
padding: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: var(--leading-snug);
}
.quiz__legend:focus {
outline: none;
}
.quiz__legend + .quiz__options {
margin-top: var(--space-6);
}
.is-stepped .quiz__number {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.quiz__number {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
font-variant-numeric: tabular-nums;
}
.quiz__options {
display: grid;
gap: var(--space-3);
max-width: var(--measure);
}
.quiz__option {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
min-height: var(--touch-target);
padding: var(--space-3) var(--space-4);
border: var(--border-width) solid var(--color-quiz-outline);
border-radius: var(--radius-md);
background: var(--color-quiz-option);
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background-color var(--duration-link) var(--ease-link), color var(--duration-link) var(--ease-link);
}
.quiz__option:hover {
background: var(--color-quiz-option-hover);
}
.quiz__option:has(:checked) {
background: var(--color-bg);
color: var(--color-text);
}
.quiz__option:has(:focus-visible) {
outline: var(--focus-width) solid currentColor;
outline-offset: var(--focus-width);
}
.quiz__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quiz__key {
display: grid;
flex: none;
place-items: center;
width: var(--size-quiz-key);
height: var(--size-quiz-key);
border: var(--border-width) solid var(--color-quiz-outline);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
}
.quiz__option:has(:checked) .quiz__key {
background: var(--color-text);
color: var(--color-bg);
}
.quiz__progress {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-4);
}
.quiz__progress[hidden] {
display: none;
}
.quiz__count {
margin: 0;
font-family: var(--font-heading);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
.quiz__segments {
display: grid;
grid-template-columns: repeat(15, minmax(0, 1fr));
gap: var(--space-1);
}
.quiz__segment {
position: relative;
height: var(--height-quiz-segment);
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--color-quiz-track);
}
.quiz__segment::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: currentColor;
transform: translateX(-100%);
transition: transform var(--duration-medium) var(--ease-out);
}
.quiz__segment.is-done::after {
transform: none;
}
.quiz__nav {
display: flex;
justify-content: space-between;
gap: var(--space-4);
max-width: var(--measure);
}
.quiz__nav[hidden] {
display: none;
}
.quiz__back,
.quiz__link {
min-height: var(--touch-target);
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
font-family: var(--font-heading);
font-weight: var(--weight-medium);
text-decoration: underline;
text-underline-offset: var(--underline-offset);
cursor: pointer;
}
.quiz__back {
text-decoration: none;
}
.quiz__back:disabled {
opacity: 0.4;
cursor: default;
}
.quiz__summary {
padding: var(--space-4);
border: var(--border-width-strong) solid currentColor;
border-radius: var(--radius-sm);
}
.quiz__summary:empty {
display: none;
}
.quiz__error {
margin: 0;
font-weight: var(--weight-bold);
}
.quiz--step .quiz__form {
max-width: var(--measure);
}
.quiz input[autocomplete="one-time-code"] {
max-width: calc(var(--space-10) * 2);
font-family: var(--font-heading);
font-size: var(--text-xl);
letter-spacing: var(--tracking-wide);
font-variant-numeric: tabular-nums;
}
.quiz__title {
max-width: var(--measure-heading);
margin: 0;
font-size: var(--text-3xl);
line-height: var(--leading-tight);
}
.quiz__title:focus {
outline: none;
}
.quiz__lead {
max-width: var(--measure);
margin: 0;
font-size: var(--text-lg);
}
.quiz__test {
max-width: var(--measure);
margin: 0;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
background: var(--color-quiz-option);
}
@media (prefers-reduced-motion: no-preference) {
.quiz__question.is-entering,
.quiz--step {
animation: quiz-in var(--duration-quiz-step) var(--ease-out) both;
}
.quiz__question.is-entering-back {
animation: quiz-in-back var(--duration-quiz-step) var(--ease-out) both;
}
.quiz__question.is-leaving {
animation: quiz-out var(--duration-quiz-leave) ease-in both;
}
.quiz__question.is-leaving-back {
animation: quiz-out-back var(--duration-quiz-leave) ease-in both;
}
.quiz__option:has(:checked) {
animation: quiz-pick var(--duration-quiz-step) var(--ease-out);
}
}
@keyframes quiz-in {
from {
opacity: 0;
transform: translateX(var(--shift-quiz-step));
}
}
@keyframes quiz-in-back {
from {
opacity: 0;
transform: translateX(calc(var(--shift-quiz-step) * -1));
}
}
@keyframes quiz-out {
to {
opacity: 0;
transform: translateX(calc(var(--shift-quiz-step) * -1));
}
}
@keyframes quiz-out-back {
to {
opacity: 0;
transform: translateX(var(--shift-quiz-step));
}
}
@keyframes quiz-pick {
50% {
transform: scale(0.98);
}
}
.results-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 64rem) {
.results-hero {
grid-template-columns: minmax(0, 1fr) auto;
}
}
.results-score {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
order: -1;
justify-self: end;
text-align: center;
}
@media (min-width: 64rem) {
.results-score__number {
--score-size: var(--size-score-circle-lg);
}
.results-score {
grid-row: 1;
grid-column: 2;
align-self: start;
order: 0;
}
}
.results-score__number {
--score-size: var(--size-score-circle);
display: grid;
place-items: center;
width: var(--score-size);
aspect-ratio: 1;
margin: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--color-blue) calc(var(--meter, 0) * 100%), var(--color-accent));
color: var(--color-bg);
font-family: var(--font-heading);
font-size: calc(var(--score-size) * var(--ratio-score-number));
font-weight: var(--weight-heading);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.results-score__label {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.stages {
position: relative;
}
.stages__list {
display: grid;
margin: 0;
padding: 0;
border-left: var(--border-width) solid var(--color-border-strong);
list-style: none;
}
.stages__stage {
position: relative;
padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
}
.stages__stage + .stages__stage {
border-top: var(--border-width) solid var(--color-border);
}
.stages__stage.is-value {
background: var(--color-stage-value);
}
.stages__dot {
position: absolute;
top: calc(var(--space-5) + var(--space-1));
left: calc(var(--size-stage-dot) / -2);
width: var(--size-stage-dot);
height: var(--size-stage-dot);
border-radius: 50%;
background: var(--color-text);
}
.stages__stage.is-ahead .stages__dot {
background: var(--color-bg);
box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-text);
}
.stages__stage.is-current .stages__dot {
background: var(--color-accent);
transform: scale(1.5);
}
.stages__stage.is-current .stages__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--color-accent);
}
@media (prefers-reduced-motion: no-preference) {
.stages__stage.is-current .stages__dot::after {
animation: stage-pulse var(--duration-cookie-arrive) var(--ease-out) infinite;
}
}
@keyframes stage-pulse {
from {
opacity: 0.6;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(2.5);
}
}
.stages__here {
display: inline-block;
margin-bottom: var(--space-3);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-ink);
color: var(--color-on-ink);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.stages__number {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-base);
}
.stages__name {
margin: 0;
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.stages__quality {
margin: var(--space-3) 0 var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-sm);
}
.stages__percent {
font-weight: var(--weight-bold);
}
.stages__points {
display: grid;
gap: var(--space-3);
margin: var(--space-4) 0 0;
font-size: var(--text-sm);
line-height: var(--leading-snug);
padding-left: var(--space-5);
color: var(--color-muted);
list-style: disc;
}
.stages__line,
.stages__band,
.stages__axis {
display: none;
}
@media (min-width: 64rem) {
.stages {
padding: var(--space-7) 0 var(--space-7) var(--space-7);
}
.stages__list {
grid-template-columns: repeat(5, minmax(0, 1fr));
border-bottom: var(--border-width) solid var(--color-border-strong);
}
.stages__stage,
.stages__stage + .stages__stage {
border-top: 0;
border-right: var(--border-width) solid var(--color-border);
padding: var(--space-6) var(--space-5) var(--space-5);
}
.stages__stage:nth-child(1) {
padding-top: calc(var(--size-stage-rise) * 4 + var(--space-6));
}
.stages__stage:nth-child(2) {
padding-top: calc(var(--size-stage-rise) * 3 + var(--space-6));
}
.stages__stage:nth-child(3) {
padding-top: calc(var(--size-stage-rise) * 2 + var(--space-6));
}
.stages__stage:nth-child(4) {
padding-top: calc(var(--size-stage-rise) + var(--space-6));
}
.stages__dot {
position: relative;
top: auto;
left: auto;
display: block;
margin-bottom: var(--space-4);
}
.stages__line {
position: absolute;
top: calc(var(--space-7) + var(--space-6) + var(--size-stage-dot) / 2);
left: calc(var(--space-7) + var(--space-5) + var(--size-stage-dot) / 2);
display: block;
width: calc((100% - var(--space-7)) * 0.8);
height: calc(var(--size-stage-rise) * 4);
overflow: hidden;
transform-origin: left;
}
.stages__line-draw {
display: block;
width: 100%;
height: 100%;
transform-origin: left;
background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--color-text) calc(50% - 1px), var(--color-text) calc(50% + 1px), transparent calc(50% + 1px));
}
.stages__band {
position: absolute;
top: 0;
left: calc(var(--space-7) + (100% - var(--space-7)) * 0.4);
display: flex;
align-items: center;
justify-content: center;
width: calc((100% - var(--space-7)) * 0.4);
height: var(--space-7);
margin: 0;
color: var(--color-accent-strong);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.stages__axis {
position: absolute;
display: flex;
justify-content: space-between;
margin: 0;
color: var(--color-muted);
font-size: var(--text-sm);
}
.stages__axis--value {
top: var(--space-7);
bottom: var(--space-7);
left: 0;
width: var(--space-7);
align-items: center;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.stages__axis--time {
right: 0;
bottom: 0;
left: var(--space-7);
height: var(--space-7);
align-items: end;
}
}
.meter {
display: block;
max-width: calc(var(--space-10) * 1.5);
height: var(--height-meter);
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--color-meter-track);
}
.meter--wide {
max-width: none;
}
.meter__fill {
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-blue) calc(var(--meter, 0) * 100%), var(--color-accent));
transform: translateX(calc((var(--meter, 0) - 1) * 100%));
transition: transform var(--duration-slow) var(--ease-out);
}
.meter.is-waiting .meter__fill {
transform: translateX(-100%);
}
.meter__fill--10,
.results-score__number--10 { --meter: 0.1; }
.meter__fill--20,
.results-score__number--20 { --meter: 0.2; }
.meter__fill--30,
.results-score__number--30 { --meter: 0.3; }
.meter__fill--40,
.results-score__number--40 { --meter: 0.4; }
.meter__fill--50,
.results-score__number--50 { --meter: 0.5; }
.meter__fill--60,
.results-score__number--60 { --meter: 0.6; }
.meter__fill--70,
.results-score__number--70 { --meter: 0.7; }
.meter__fill--80,
.results-score__number--80 { --meter: 0.8; }
.meter__fill--90,
.results-score__number--90 { --meter: 0.9; }
.meter__fill--100,
.results-score__number--100 { --meter: 1; }
.quality-list {
margin: 0;
padding: 0;
list-style: none;
}
.quality {
display: grid;
gap: var(--space-4);
padding-block: var(--space-6);
border-top: var(--border-width) solid var(--color-border);
}
@media (min-width: 64rem) {
.quality {
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
grid-template-rows: auto auto 1fr;
column-gap: var(--space-8);
align-items: start;
}
.quality__head {
grid-column: 1;
grid-row: 1;
}
.quality > .meter {
grid-column: 1;
grid-row: 2;
}
.quality > .answers,
.quality > .quality__note {
grid-column: 2;
grid-row: 1 / span 3;
}
}
.quality__note {
margin: 0;
color: var(--color-muted);
font-size: var(--text-lg);
}
.quality__stage,
.quality__score {
margin: 0;
font-family: var(--font-heading);
}
.quality__name {
margin: var(--space-1) 0 var(--space-3);
font-size: var(--text-2xl);
line-height: var(--leading-snug);
}
.quality__percent {
font-weight: var(--weight-bold);
}
.answers {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.answers__item {
display: grid;
grid-template-columns: var(--space-10) minmax(0, 1fr);
align-items: baseline;
gap: var(--space-4);
font-size: var(--text-lg);
}
.answers__answer {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-align: center;
}
.answers__item--yes .answers__answer {
background: var(--color-yes);
color: var(--color-ink);
}
.answers__item--somewhat .answers__answer {
background: var(--color-muted-on-ink);
color: var(--color-ink);
}
.answers__item--no .answers__answer {
background: var(--color-accent);
color: var(--color-on-accent);
}
.confetti {
position: fixed;
inset: 0;
z-index: 60;
width: 100%;
height: 100%;
pointer-events: none;
}
.next-steps {
display: grid;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
counter-reset: next-step;
}
@media (min-width: 48rem) {
.next-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.next-steps__item {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-surface);
counter-increment: next-step;
}
.next-steps__item::before {
content: counter(next-step, decimal-leading-zero);
color: var(--color-accent-strong);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
}
.next-steps__item p {
margin: 0;
font-size: var(--text-lg);
}
}
@layer components {
.brand-check .quiz__progress {
margin-right: var(--touch-target);
}
}
@layer components {
.policy-art {
flex: none;
width: var(--size-cookie-art);
filter: drop-shadow(var(--shadow-cookie)) drop-shadow(var(--shadow-cookie-near));
}
.policy-art__image {
display: block;
width: 100%;
height: auto;
}
@media (prefers-reduced-motion: no-preference) {
.policy-art > img {
animation: policy-art-in var(--duration-cookie-arrive) var(--ease-out) both;
}
.policy-art--swing > img {
transform-origin: 50% 8%;
animation:
policy-art-in var(--duration-cookie-arrive) var(--ease-out) both,
policy-swing var(--duration-policy-swing) ease-in-out infinite alternate;
}
.policy-art--turn > img {
animation:
policy-art-in var(--duration-cookie-arrive) var(--ease-out) both,
cookie-turn var(--duration-cookie-turn) linear infinite;
}
.policy-art--float > img {
animation:
policy-art-in var(--duration-cookie-arrive) var(--ease-out) both,
policy-float var(--duration-policy-float) ease-in-out infinite alternate;
}
}
.quadrant-island {
overflow-x: clip;
}
.sand-art {
width: var(--size-sand-art);
aspect-ratio: 1;
}
@keyframes policy-art-in {
from {
opacity: 0;
scale: 0.6;
}
}
@keyframes policy-swing {
from {
rotate: -5deg;
}
to {
rotate: 5deg;
}
}
@keyframes policy-float {
from {
translate: 0 0;
}
to {
translate: 0 calc(var(--space-3) * -1);
}
}
@media (prefers-reduced-motion: no-preference) {
html:has([data-policy]) {
scroll-behavior: smooth;
}
}
}
@layer components {
.profile-hero {
display: grid;
gap: var(--space-7);
}
@media (min-width: 64rem) {
.profile-hero {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: var(--space-8);
}
}
.profile-hero__photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
border-radius: var(--radius-md);
object-fit: cover;
object-position: 50% 20%;
}
@media (min-width: 64rem) {
.profile-hero__photo {
position: sticky;
top: calc(var(--header-height) + var(--space-5));
aspect-ratio: 2 / 3;
}
}
.profile-linkedin {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: var(--touch-target);
color: var(--color-text);
font-family: var(--font-heading);
font-weight: 500;
text-decoration: none;
}
.profile-linkedin__icon {
display: grid;
place-items: center;
width: var(--size-linkedin-icon);
height: var(--size-linkedin-icon);
border-radius: var(--radius-md);
background: var(--color-linkedin);
color: var(--color-bg);
transition: background-color var(--duration-link) var(--ease-link);
}
.profile-linkedin__icon svg {
display: block;
width: var(--space-4);
height: var(--space-4);
}
.profile-linkedin:hover .profile-linkedin__icon,
.profile-linkedin:focus-visible .profile-linkedin__icon {
background: color-mix(in srgb, var(--color-linkedin), black 25%);
}
.profile-linkedin:focus-visible {
outline: var(--focus-width) solid var(--color-text);
outline-offset: var(--focus-width);
}
main:has(.polaroids) {
overflow-x: clip;
}
.polaroids {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.polaroid {
position: relative;
width: 62%;
margin-top: calc(var(--space-6) * -1);
rotate: var(--tilt, 0deg);
transition: rotate var(--duration-medium) var(--ease-out);
}
.polaroid:first-child {
margin-top: 0;
}
.polaroid:nth-child(even) {
margin-left: auto;
}
.polaroid:hover,
.polaroid:focus-within {
z-index: 5;
rotate: 0deg;
}
.polaroid__card {
margin: 0;
padding: var(--padding-polaroid) var(--padding-polaroid) 0;
border-radius: var(--radius-sm);
background: var(--color-field);
box-shadow: var(--shadow-polaroid);
transition: scale var(--duration-medium) var(--ease-out);
}
.polaroid:hover .polaroid__card {
scale: var(--scale-polaroid-hover);
}
.polaroid__card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
background: var(--color-surface);
}
.polaroid__card figcaption {
display: grid;
place-items: center;
height: var(--height-polaroid-caption);
color: var(--color-text);
font-family: var(--font-hand);
font-size: var(--text-lg);
line-height: var(--leading-snug);
text-align: center;
}
.polaroid:nth-child(1) { --tilt: -5deg; }
.polaroid:nth-child(2) { --tilt: 4deg; }
.polaroid:nth-child(3) { --tilt: -3deg; }
.polaroid:nth-child(4) { --tilt: 6deg; }
.polaroid:nth-child(5) { --tilt: 3deg; }
.polaroid:nth-child(6) { --tilt: -6deg; }
.polaroid:nth-child(7) { --tilt: 2deg; }
@media (min-width: 48rem) {
.polaroids {
position: relative;
min-height: 100svh;
}
.polaroid {
position: absolute;
width: var(--width-polaroid);
margin: 0;
}
.polaroid:nth-child(1) { left: 1%; top: 6%; }
.polaroid:nth-child(2) { left: 25%; top: 0%; }
.polaroid:nth-child(3) { left: 49%; top: 8%; }
.polaroid:nth-child(4) { left: 71%; top: 1%; }
.polaroid:nth-child(5) { left: 10%; top: 46%; }
.polaroid:nth-child(6) { left: 38%; top: 40%; }
.polaroid:nth-child(7) { left: 62%; top: 48%; }
}
@media (min-width: 64rem) {
.polaroid {
width: var(--width-polaroid-lg);
}
}
.profile-stats {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.profile-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.profile-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.profile-stat {
display: grid;
align-content: start;
gap: var(--space-2);
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.profile-stat__figure {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--weight-heading);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.profile-stat__label {
color: var(--color-muted);
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
.profile-list {
margin: 0;
padding: 0;
border-top: var(--border-width) solid var(--color-border);
list-style: none;
}
.profile-list__item {
display: grid;
gap: var(--space-1);
padding-block: var(--space-5);
border-bottom: var(--border-width) solid var(--color-border);
}
.profile-list__item--image {
grid-template-columns: var(--width-profile-cert) minmax(0, 1fr);
align-items: start;
column-gap: var(--space-5);
}
.profile-cert {
display: block;
width: 100%;
height: auto;
margin-top: var(--space-1);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-sm);
}
.profile-list__title {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
.profile-list__meta {
margin: 0;
color: var(--color-muted);
font-size: var(--text-lg);
}
.profile-quote {
display: grid;
gap: var(--space-4);
margin: 0;
}
.profile-quote blockquote {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
}
.profile-quote figcaption {
color: var(--color-muted);
}
.profile-quote--big {
max-width: var(--measure-wide);
}
.profile-quote--big blockquote {
font-size: var(--text-3xl);
line-height: var(--leading-tight);
}
@media (min-width: 64rem) {
.profile-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}
@layer components {
html:not(.js) .say-hi--left:has(.brand-check:target) {
z-index: 70;
}
html:not(.js) .brand-check:target {
visibility: visible;
transform: none;
}
.brand-check:has(.quiz--step) [data-quiz-intro] {
display: none;
}
}
@layer components {
.results-hero__cta {
margin: 0;
}
@media (min-width: 64rem) {
.results-hero__cta {
grid-column: 1 / -1;
}
}
.call-island__kicker {
color: var(--color-on-ink-fixed);
opacity: var(--opacity-kicker-on-gradient);
}
.results-nudge {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.results-nudge__text {
max-width: var(--measure);
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
.call-island {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}
@media (min-width: 64rem) {
.call-island {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: var(--space-8);
}
}
.call-points {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
}
.call-points li::before {
content: "✓";
margin-right: var(--space-3);
}
.call-times {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.call-time {
padding: var(--space-2) var(--space-4);
font-size: var(--text-base);
}
}
@layer components {
.fighter-pic {
display: block;
width: auto;
height: var(--height-fighter-pic);
image-rendering: pixelated;
}
.fighter-swap--flip {
transform: scaleX(-1);
}
.fighter-swap {
--strike-height: 1;
--strike-left: 0;
position: relative;
display: block;
width: fit-content;
}
.fighter-swap--centaur {
--strike-height: 0.969;
--strike-left: -0.137;
}
.fighter-swap--reverse {
--strike-height: 0.946;
--strike-left: -0.007;
}
.fighter-swap__strike {
position: absolute;
bottom: 0;
left: calc(var(--height-fighter-pic) * var(--strike-left));
display: block;
width: auto;
max-width: none;
height: calc(var(--height-fighter-pic) * var(--strike-height));
image-rendering: pixelated;
opacity: 0;
pointer-events: none;
}
@media (hover: hover) {
.fighter-swap:hover .fighter-swap__idle {
opacity: 0;
}
.fighter-swap:hover .fighter-swap__strike {
opacity: 1;
}
}
}
@layer components {
[data-on-ink] .quadrant__where,
[data-on-ink] .quadrant__text {
color: var(--color-muted-on-ink);
}
[data-on-ink] .quadrant__axis--left,
[data-on-ink] .quadrant__axis--bottom {
color: var(--color-accent);
}
[data-on-ink] .quadrant__axis--top,
[data-on-ink] .quadrant__axis--right {
color: var(--color-blue-on-ink);
}
}
@keyframes say-hi-in-right {
from {
opacity: 0;
transform: translateX(calc(100% + var(--gutter)));
}
}
@keyframes say-hi-in-left {
from {
opacity: 0;
transform: translateX(calc(-100% - var(--gutter)));
}
}
@media (prefers-reduced-motion: no-preference) {
html:not(.is-continued) .say-hi {
animation: say-hi-in-right var(--duration-pill-arrive) var(--ease-out) var(--delay-pill-arrive) backwards;
}
html:not(.is-continued) .say-hi--left {
animation-name: say-hi-in-left;
}
}