:root {
--story-radius: clamp(20px, 2.2vw, 34px);
--story-gap: clamp(10px, 1vw, 16px);
--story-blue: #3457d5;
--section-display-size: var(--type-h2, clamp(40px, 3.8vw, 56px));
--section-display-size-contained: clamp(34px, 3.2vw, 48px);
--section-display-leading: .94;
--section-display-tracking: -.045em;
--section-space: clamp(64px, 5.5vw, 88px);
}
html[data-skin="kage"] {
--story-panel: #f3eee5;
--story-soft: #eee7dc;
}
html[data-skin="nocturne"] {
--story-panel: #050a14;
--story-soft: #0a101c;
}
.eyebrow::before { border-radius: 1px; box-shadow: none; }
.section-shader { opacity: .42; }
.section > .container { position: relative; z-index: 2; }
.section:not(#faq) { background-color: var(--paper); }
#work .work-head-title h2,
#process .pipeline-heading h2,
#partnership .partnership h2,
#packs .packs-head h2 {
font-size: var(--section-display-size);
line-height: var(--section-display-leading);
letter-spacing: var(--section-display-tracking);
text-wrap: balance;
}
#clients .client-proof-head h2,
#faq .faq-lab-main h2 {
font-size: var(--section-display-size-contained);
line-height: .97;
letter-spacing: -.04em;
text-wrap: balance;
}
#work.section {
padding-block: var(--section-space) clamp(64px, 6vw, 90px);
overflow: clip;
}
#work .work-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: clamp(28px, 5vw, 76px);
row-gap: 24px;
padding-top: 0;
margin-bottom: clamp(30px, 3.5vw, 48px);
}
#work .work-head-title h2 {
max-width: 13ch;
margin-top: 16px;
}
#work .filter-bar {
gap: 8px;
margin-top: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#work .filter-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
height: 42px;
max-height: 42px;
padding: 0 16px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 68%, transparent);
color: var(--muted);
font-weight: 600;
line-height: 1;
white-space: nowrap;
box-sizing: border-box;
box-shadow: none;
touch-action: manipulation;
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
#work .filter-button:hover {
border-color: color-mix(in srgb, var(--action) 54%, transparent);
background: color-mix(in srgb, var(--action) 8%, var(--surface));
color: var(--ink);
}
#work .filter-button:focus-visible {
outline: 2px solid var(--action);
outline-offset: 3px;
}
#work .filter-button[aria-pressed="true"] {
border-color: var(--action);
background: var(--action);
color: var(--action-ink);
box-shadow: 0 8px 22px color-mix(in srgb, var(--action) 20%, transparent);
}
html[data-skin="nocturne"] #work .filter-button {
border-color: color-mix(in srgb, var(--dark-ink) 20%, transparent);
background: color-mix(in srgb, var(--dark-ink) 5%, transparent);
color: color-mix(in srgb, var(--dark-ink) 72%, transparent);
}
html[data-skin="nocturne"] #work .filter-button:hover {
border-color: color-mix(in srgb, var(--action) 60%, transparent);
background: color-mix(in srgb, var(--action) 16%, transparent);
color: var(--dark-ink);
}
html[data-skin="nocturne"] #work .filter-button[aria-pressed="true"] {
border-color: var(--action);
background: var(--action);
color: var(--action-ink);
}
#work .work-stage-wrap {
max-height: none;
overflow: visible;
padding-bottom: 0;
-webkit-mask-image: none;
mask-image: none;
}
#work .work-mosaic {
gap: var(--story-gap);
}
#work .work-col { gap: var(--story-gap); }
#work .work-row--2,
#work .work-row--3 { transform: none; }
#work .work-tile {
border: 0;
border-radius: clamp(12px, 1.4vw, 20px);
box-shadow: none;
transform: none;
}
#work .work-tile:hover { transform: none; box-shadow: none; }
#work .work-tile-media::after {
position: absolute;
inset: auto 0 0;
height: 35%;
background: linear-gradient(transparent, rgba(5, 10, 24, .68));
content: "";
pointer-events: none;
}
#work .tile-caption { display: none; }
#work .work-tile .placeholder-label {
top: auto;
right: 16px;
bottom: 14px;
left: 16px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
font-size: .58rem;
letter-spacing: .12em;
backdrop-filter: none;
}
#work .work-tile:hover .placeholder-label { background: transparent; color: #fff; }
#work .work-tile {
width: auto;
padding: 0;
appearance: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
#work .work-tile:focus-visible {
outline: 3px solid var(--action);
outline-offset: 4px;
}
#work .work-tile-media { display: block; }
#work .work-tile-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.88) contrast(1.03);
transform: scale(1.002);
transition: filter 400ms ease, transform 700ms var(--ease-out), opacity 260ms ease;
pointer-events: none;
}
#work .work-tile:hover .work-tile-video,
#work .work-tile:focus-visible .work-tile-video,
#work .work-tile.is-playing .work-tile-video {
filter: saturate(1.02) contrast(1.06);
transform: scale(1.035);
}
#work .work-motion-mark {
position: absolute;
z-index: 4;
top: 12px;
right: 12px;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: rgba(5, 10, 24, .54);
color: #fff;
font-family: var(--mono);
font-size: .5rem;
letter-spacing: .1em;
line-height: 1;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
html.work-modal-open { overflow: hidden; }
.work-modal {
position: fixed;
z-index: 3000;
inset: 0;
display: grid;
place-items: center;
padding: clamp(12px, 2.5vw, 32px);
}
.work-modal-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: rgba(4, 8, 18, .76);
backdrop-filter: blur(18px);
cursor: default;
}
.work-modal-card {
position: relative;
z-index: 1;
display: flex;
width: min(1180px, 96vw);
max-height: 94dvh;
flex-direction: column;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: clamp(16px, 2vw, 26px);
background: var(--paper);
box-shadow: 0 42px 120px rgba(2, 7, 18, .42);
}
.work-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px clamp(18px, 2.2vw, 28px);
border-bottom: 1px solid var(--line);
}
.work-modal-head .eyebrow { margin: 0 0 4px; }
.work-modal-head h2 {
margin: 0;
font-size: clamp(1.2rem, 2vw, 1.7rem);
line-height: 1;
}
.work-modal-close,
.work-modal-controls button {
min-height: 44px;
min-width: 44px;
padding: 9px 13px;
border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--paper) 82%, transparent);
color: var(--ink);
font: 600 .72rem/1 var(--body);
cursor: pointer;
}
.work-modal-stage {
position: relative;
min-height: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #050914;
}
.work-modal-video,
.work-modal-interactive,
.work-modal-interactive iframe,
.work-modal-interactive img {
display: block;
width: 100%;
height: 100%;
}
.work-modal-video { object-fit: contain; cursor: pointer; }
.work-modal-controls {
position: absolute;
z-index: 4;
right: 16px;
bottom: 16px;
display: flex;
gap: 8px;
}
.work-modal-controls button {
border-color: rgba(255, 255, 255, .28);
background: rgba(5, 10, 24, .7);
color: #fff;
backdrop-filter: blur(12px);
}
.work-modal-interactive { position: relative; }
.work-modal-interactive iframe { border: 0; background: #f5f3ed; }
.work-modal-interactive img { object-fit: cover; opacity: .72; }
.work-modal-interactive::after {
position: absolute;
inset: 0;
background: linear-gradient(transparent 50%, rgba(4, 8, 18, .62));
content: "";
pointer-events: none;
}
.work-modal-interactive iframe:not([hidden]) + img + [data-work-modal-launch] { opacity: .72; }
.work-modal-interactive [data-work-modal-launch] {
position: absolute !important;
z-index: 3;
right: 18px;
bottom: 18px;
}
@media (max-width: 700px) {
.work-modal { padding: 16px; }
.work-modal-card {
width: 100%;
height: auto;
max-height: calc(100dvh - 32px);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 20px;
}
.work-modal-stage {
flex: 1 1 auto;
aspect-ratio: auto;
min-height: 0;
}
.work-modal-head { padding: 14px 16px; }
.work-modal-interactive { min-height: 58dvh; }
.work-modal-interactive iframe { min-height: 58dvh; }
}
@media (prefers-reduced-motion: reduce) {
#work .work-tile-video { transform: none !important; }
}
#work .work-note {
max-width: 58ch;
margin-top: 22px;
padding: 0;
border: 0;
background: transparent;
color: var(--muted);
}
#catalogue.section {
padding-block: clamp(74px, 8vw, 122px);
overflow: clip;
}
#catalogue .catalogue-cases-shell {
display: grid;
gap: clamp(28px, 3.2vw, 46px);
}
#catalogue .catalogue-cases-head {
display: grid;
gap: 18px;
padding-bottom: clamp(8px, 1vw, 16px);
}
#catalogue .catalogue-cases-head > div {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(280px, .55fr);
gap: clamp(28px, 7vw, 112px);
align-items: end;
}
#catalogue .catalogue-cases-head h2 {
max-width: 12.5ch;
margin: 0;
font-size: var(--section-display-size);
line-height: var(--section-display-leading);
letter-spacing: var(--section-display-tracking);
text-wrap: balance;
}
#catalogue .catalogue-cases-head > div > p {
max-width: 40ch;
margin: 0;
padding-bottom: .35em;
color: var(--muted);
font-size: var(--type-body);
line-height: 1.85;
}
#catalogue .catalogue-case {
--case-bg: #eee6da;
--case-ink: #0d1734;
--case-muted: #626978;
--case-line: rgba(13, 23, 52, .15);
--case-surface: rgba(255, 255, 255, .54);
--case-accent: #4a61ff;
position: relative;
padding: clamp(24px, 3vw, 46px);
overflow: hidden;
border: 1px solid var(--case-line);
border-radius: clamp(24px, 2.6vw, 38px);
background:
radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--case-accent) 14%, transparent), transparent 28%),
var(--case-bg);
color: var(--case-ink);
box-shadow: 0 24px 70px rgba(12, 20, 42, .08);
}
#catalogue .catalogue-case--industrial {
--case-bg: #0c1835;
--case-ink: #f3eee5;
--case-muted: rgba(243, 238, 229, .68);
--case-line: rgba(166, 183, 255, .2);
--case-surface: rgba(255, 255, 255, .055);
--case-accent: #6e83ff;
background:
radial-gradient(circle at 20% 70%, rgba(62, 90, 230, .22), transparent 32%),
linear-gradient(145deg, #0f2048, var(--case-bg) 58%);
box-shadow: 0 28px 80px rgba(6, 13, 32, .18);
}
html[data-skin="nocturne"] #catalogue .catalogue-case--consumer {
--case-bg: #111f42;
--case-ink: #f3eee5;
--case-muted: rgba(243, 238, 229, .68);
--case-line: rgba(166, 183, 255, .18);
--case-surface: rgba(255, 255, 255, .055);
--case-accent: #7890ff;
background:
radial-gradient(circle at 78% 24%, rgba(69, 96, 238, .2), transparent 31%),
var(--case-bg);
}
#catalogue .catalogue-case-head {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .58fr);
gap: clamp(28px, 7vw, 108px);
align-items: end;
margin-bottom: clamp(28px, 3vw, 44px);
}
#catalogue .catalogue-case-index,
#catalogue .catalogue-stage-label,
#catalogue .catalogue-system-kicker,
#catalogue .catalogue-output figcaption {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .67rem;
line-height: 1.4;
letter-spacing: .105em;
text-transform: uppercase;
}
#catalogue .catalogue-case-index {
margin: 0 0 14px;
color: var(--case-accent);
}
#catalogue .catalogue-case-head h3 {
max-width: 13ch;
margin: 0;
color: var(--case-ink);
font-size: clamp(2.15rem, 4vw, 4.5rem);
line-height: .94;
letter-spacing: -.055em;
text-wrap: balance;
}
#catalogue .catalogue-case-head > p {
max-width: 42ch;
margin: 0;
color: var(--case-muted);
line-height: 1.58;
}
#catalogue .catalogue-flow {
position: relative;
display: grid;
grid-template-columns: minmax(240px, .84fr) minmax(150px, .45fr) minmax(440px, 1.42fr);
gap: clamp(20px, 2.4vw, 38px);
align-items: center;
min-height: clamp(470px, 39vw, 580px);
margin: 0;
padding: clamp(20px, 2.5vw, 36px);
overflow: hidden;
border: 1px solid var(--case-line);
border-radius: clamp(20px, 2vw, 30px);
background:
linear-gradient(var(--case-line) 1px, transparent 1px),
linear-gradient(90deg, var(--case-line) 1px, transparent 1px),
color-mix(in srgb, var(--case-surface) 74%, transparent);
background-size: 64px 64px;
isolation: isolate;
}
#catalogue .catalogue-flow::before {
position: absolute;
z-index: -1;
top: 50%;
right: 8%;
left: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--case-accent) 15%, var(--case-accent) 85%, transparent);
content: "";
opacity: .44;
}
#catalogue .catalogue-case--industrial .catalogue-flow {
grid-template-columns: minmax(440px, 1.42fr) minmax(150px, .45fr) minmax(240px, .84fr);
}
#catalogue .catalogue-case--industrial .catalogue-source { grid-column: 3; grid-row: 1; }
#catalogue .catalogue-case--industrial .catalogue-system { grid-column: 2; grid-row: 1; }
#catalogue .catalogue-case--industrial .catalogue-outputs { grid-column: 1; grid-row: 1; }
#catalogue .catalogue-source,
#catalogue .catalogue-outputs,
#catalogue .catalogue-system {
position: relative;
z-index: 2;
min-width: 0;
}
#catalogue .catalogue-stage-label {
display: block;
margin-bottom: 12px;
color: var(--case-muted);
}
#catalogue .catalogue-source-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--case-line);
border-radius: 22px;
background: var(--case-surface);
box-shadow: 0 18px 42px rgba(5, 12, 32, .13);
}
#catalogue .catalogue-source-media::after {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(145deg, rgba(255,255,255,.2), transparent 45%);
content: "";
pointer-events: none;
}
#catalogue .catalogue-source-media img,
#catalogue .catalogue-output img {
width: 100%;
height: 100%;
object-fit: cover;
}
#catalogue .catalogue-source-copy {
display: grid;
gap: 5px;
margin-top: 16px;
}
#catalogue .catalogue-source-copy strong {
color: var(--case-ink);
font-size: 1.05rem;
}
#catalogue .catalogue-source-copy span {
color: var(--case-muted);
font-size: .85rem;
line-height: 1.45;
}
#catalogue .catalogue-system {
display: grid;
place-items: center;
align-content: center;
aspect-ratio: 1;
padding: 24px;
text-align: center;
}
#catalogue .catalogue-system::before,
#catalogue .catalogue-system::after,
#catalogue .catalogue-system-orbit {
position: absolute;
inset: 6%;
border: 1px solid color-mix(in srgb, var(--case-accent) 54%, transparent);
border-radius: 50%;
content: "";
}
#catalogue .catalogue-system::after {
inset: 16%;
border-color: color-mix(in srgb, var(--case-accent) 24%, transparent);
}
#catalogue .catalogue-system-orbit {
inset: 0;
border-style: dashed;
opacity: .48;
}
#catalogue .catalogue-system-kicker {
position: relative;
color: var(--case-accent);
}
#catalogue .catalogue-system strong {
position: relative;
margin-top: 12px;
color: var(--case-ink);
font-size: clamp(1.2rem, 1.65vw, 1.72rem);
line-height: 1.06;
letter-spacing: -.035em;
}
#catalogue .catalogue-system-note {
position: relative;
max-width: 18ch;
margin-top: 14px;
color: var(--case-muted);
font-size: .73rem;
line-height: 1.42;
}
#catalogue .catalogue-output-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 10px;
height: clamp(330px, 29vw, 430px);
}
#catalogue .catalogue-output {
position: relative;
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid var(--case-line);
border-radius: 16px;
background: var(--case-surface);
box-shadow: 0 14px 32px rgba(5, 12, 32, .12);
}
#catalogue .catalogue-output::after {
position: absolute;
inset: 48% 0 0;
background: linear-gradient(transparent, rgba(4, 9, 24, .75));
content: "";
pointer-events: none;
}
#catalogue .catalogue-output--portrait { grid-column: 1 / span 4; grid-row: 1 / span 2; }
#catalogue .catalogue-output--wide { grid-column: 5 / span 8; grid-row: 1; }
#catalogue .catalogue-output--square { grid-column: 5 / span 3; grid-row: 2; }
#catalogue .catalogue-output--banner { grid-column: 8 / span 5; grid-row: 2; }
#catalogue .catalogue-case--industrial .catalogue-output--wide { grid-column: 1 / span 8; }
#catalogue .catalogue-case--industrial .catalogue-output--portrait { grid-column: 9 / span 4; }
#catalogue .catalogue-case--industrial .catalogue-output--banner { grid-column: 1 / span 5; }
#catalogue .catalogue-case--industrial .catalogue-output--square { grid-column: 6 / span 3; }
#catalogue .catalogue-output:nth-child(2) img { object-position: 63% 48%; }
#catalogue .catalogue-output:nth-child(3) img { object-position: 28% 55%; }
#catalogue .catalogue-output:nth-child(4) img { object-position: 74% 42%; }
#catalogue .catalogue-output figcaption {
position: absolute;
z-index: 2;
right: 12px;
bottom: 11px;
left: 12px;
display: flex;
gap: 8px;
align-items: center;
color: #fff;
letter-spacing: .07em;
}
#catalogue .catalogue-output figcaption span { color: color-mix(in srgb, var(--case-accent) 78%, #fff); }
#catalogue .catalogue-scan {
position: absolute;
z-index: 4;
top: 0;
bottom: 0;
left: -16%;
width: 14%;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--case-accent) 25%, transparent), transparent);
filter: blur(1px);
opacity: 0;
pointer-events: none;
}
#catalogue .catalogue-case-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: clamp(22px, 2.4vw, 34px);
padding-top: clamp(18px, 2vw, 28px);
border-top: 1px solid var(--case-line);
color: var(--case-muted);
font-size: .82rem;
line-height: 1.45;
}
#catalogue .catalogue-case-proof span + span { padding-left: 18px; border-left: 1px solid var(--case-line); }
#catalogue .catalogue-case-proof strong { color: var(--case-ink); }
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-source,
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-system,
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-output,
html.catalogue-enhanced #catalogue [data-catalogue-case] .catalogue-case-proof {
opacity: 0;
transform: translateY(18px);
}
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-source,
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-system,
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output,
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-case-proof {
opacity: 1;
transform: translateY(0);
transition: opacity 640ms ease, transform 720ms cubic-bezier(.2,.75,.2,1);
}
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-system { transition-delay: 120ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(1) { transition-delay: 220ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(2) { transition-delay: 300ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(3) { transition-delay: 380ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-output:nth-child(4) { transition-delay: 460ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-case-proof { transition-delay: 520ms; }
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-scan {
animation: catalogue-scan 1850ms 260ms cubic-bezier(.24,.7,.2,1) both;
}
html.catalogue-enhanced #catalogue [data-catalogue-case].is-visible .catalogue-system-orbit {
animation: catalogue-orbit 20s linear infinite;
}
@keyframes catalogue-scan {
0% { left: -16%; opacity: 0; }
18% { opacity: .72; }
82% { opacity: .5; }
100% { left: 102%; opacity: 0; }
}
@keyframes catalogue-orbit { to { transform: rotate(360deg); } }
.outcome-tour { height: 420svh; }
.outcome-shell {
gap: clamp(8px, 1.2vh, 14px);
padding-block: clamp(10px, 1.6vh, 18px) clamp(10px, 1.6vh, 16px);
}
.outcome-head {
display: grid;
justify-items: center;
gap: 0;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
.outcome-head .eyebrow { display: none; }
.outcome-head h2 {
max-width: none;
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 3.15rem);
line-height: 1.05;
letter-spacing: -.045em;
white-space: nowrap;
}
.outcome-head > p { display: none; }
.outcome-progress {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
border: 0;
}
.outcome-jump,
.outcome-jump:first-child {
min-height: 44px;
border: 0;
border-radius: 0;
background: transparent;
color: color-mix(in srgb, var(--dark-ink) 40%, transparent);
}
.outcome-jump span { font-size: .72rem; }
.outcome-jump strong { font-size: 1.05rem; font-weight: 650; }
.outcome-jump[aria-current="step"] {
background: transparent;
color: var(--dark-ink);
}
.outcome-jump[aria-current="step"]::after { display: none; content: none; }
.outcome-jump[aria-current="step"] strong {
box-shadow: inset 0 -2px 0 var(--accent);
}
.outcome-deck {
max-width: min(1120px, 100%);
perspective: 1600px;
}
.outcome-card {
width: min(100%, 1080px);
height: min(66vh, 560px);
min-height: 360px;
border-color: color-mix(in srgb, var(--dark-ink) 18%, transparent);
border-radius: var(--story-radius);
background:
linear-gradient(155deg, color-mix(in srgb, var(--dark-ink) 8%, transparent) 0%, transparent 46%),
color-mix(in srgb, var(--dark) 52%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.outcome-card {
-webkit-backdrop-filter: blur(12px) saturate(1.12);
backdrop-filter: blur(12px) saturate(1.12);
}
}
.outcome-card[data-active="true"]::before { display: none; }
.outcome-card-body {
opacity: 1;
visibility: visible;
max-width: min(52ch, 100%);
}
.outcome-card-label {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--accent);
}
.outcome-card-body p { display: block; }
.outcome-card-body ul {
display: grid;
gap: 10px;
margin: clamp(8px, 1.6vh, 18px) 0 0;
padding: 0;
list-style: none;
}
.outcome-card-body li {
display: block;
position: relative;
margin: 0;
padding: 0 0 0 1.15em;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: color-mix(in srgb, var(--dark-ink) 78%, transparent);
}
.outcome-card-body li::before {
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 1px;
background: var(--accent);
content: "";
}
@media (max-width: 900px) {
.outcome-head h2 { white-space: normal; max-width: 16ch; }
}
@media (pointer: coarse) {
.outcome-card {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
body { overflow-x: clip; }
.outcome-tour,
.outcome-sticky,
.outcome-shell,
.outcome-experience,
.outcome-deck { min-width: 0; max-width: 100%; }
.outcome-tour,
.outcome-sticky { overflow-x: clip; }
#process.section { padding-block: var(--section-space); }
#process .pipeline-heading {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(260px, .5fr);
column-gap: clamp(32px, 6vw, 96px);
row-gap: 12px;
padding-top: 0;
border: 0;
margin-bottom: clamp(36px, 4vw, 56px);
}
#process .pipeline-heading .eyebrow { grid-column: 1 / -1; }
#process .pipeline-heading h2 {
max-width: 16ch;
margin-top: 0;
}
#process .pipeline-intro {
align-self: end;
max-width: 40ch;
margin: 0;
padding-bottom: .3em;
color: color-mix(in srgb, var(--dark-ink) 68%, transparent);
font-size: clamp(.94rem, 1.05vw, 1.05rem);
line-height: 1.5;
}
#process .process-flow {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(12px, 1.6vw, 22px);
margin: 0;
padding: 0;
list-style: none;
}
#process .process-flow-step {
position: relative;
display: grid;
gap: 10px;
justify-items: start;
min-width: 0;
margin: 0;
padding: 0 10px 0 0;
}
#process .process-flow-step:not(:last-child)::after {
position: absolute;
top: 26px;
left: calc(52px + 8px);
right: 4px;
height: 1px;
background: color-mix(in srgb, var(--dark-ink) 22%, transparent);
content: "";
}
#process .process-flow-step--approve:not(:last-child)::after {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--accent, #478aff) 18%, transparent),
color-mix(in srgb, var(--accent, #478aff) 72%, transparent),
color-mix(in srgb, var(--accent, #478aff) 18%, transparent)
);
}
#process .process-flow-icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid color-mix(in srgb, var(--dark-ink) 18%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--dark) 88%, #0a1224);
color: color-mix(in srgb, var(--accent, #478aff) 88%, var(--dark-ink));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dark-ink) 10%, transparent);
}
#process .process-flow-icon svg {
width: 28px;
height: 28px;
}
#process .process-flow-num {
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .14em;
color: color-mix(in srgb, var(--dark-ink) 42%, transparent);
}
#process .process-flow-label {
font-size: clamp(1rem, 1.15vw, 1.15rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--dark-ink);
}
#process .process-flow-step p {
max-width: 18ch;
margin: 0;
color: color-mix(in srgb, var(--dark-ink) 62%, transparent);
font-size: .82rem;
line-height: 1.4;
}
#process .process-flow-badge {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 2px;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, var(--accent, #478aff) 42%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--accent, #478aff) 14%, transparent);
color: color-mix(in srgb, var(--accent, #478aff) 92%, var(--dark-ink));
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
}
#process .process-flow-step--approve .process-flow-icon {
border-color: color-mix(in srgb, var(--accent, #478aff) 48%, transparent);
background: color-mix(in srgb, var(--accent, #478aff) 12%, transparent);
}
@media (max-width: 1100px) {
#process .process-flow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 18px;
}
#process .process-flow-step:not(:last-child)::after { display: none; }
}
@media (max-width: 720px) {
#process .pipeline-heading {
grid-template-columns: 1fr;
gap: 14px;
}
#process .process-flow {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
#process .process-flow { grid-template-columns: 1fr; }
}
#partnership.section { padding-block: var(--section-space); overflow: clip; }
#partnership .partnership {
grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
gap: clamp(44px, 7vw, 120px);
padding-block: 0;
border: 0;
}
#partnership .partnership-copy { align-self: center; }
#partnership .partnership h2 { max-width: 10ch; }
#partnership .partnership-visual { min-height: clamp(480px, 55vw, 660px); }
#partnership .partnership-month--back,
#partnership .partnership-month--middle { display: none; }
#partnership .partnership-month--front {
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#partnership .partnership-month--front > header {
padding: 0 0 16px;
border-bottom: 1px solid var(--line);
}
#partnership .partnership-track {
padding: 14px 0 0;
color: var(--muted);
}
#partnership .partnership-track::after { right: 0; left: 0; }
#partnership .partnership-weeks {
position: relative;
display: block;
height: calc(100% - 98px);
padding: 0;
}
#partnership .week-label { display: none; }
#partnership .calendar-piece {
position: absolute;
overflow: hidden;
border: 0;
border-radius: clamp(16px, 2vw, 26px);
box-shadow: 0 26px 70px color-mix(in srgb, var(--ink) 18%, transparent);
transition: transform 600ms var(--motion-ease);
}
#partnership .calendar-piece--square { top: 12%; left: 1%; width: 34%; height: 54%; transform: rotate(-2deg); }
#partnership .calendar-piece--portrait { top: 2%; left: 38%; width: 22%; height: 48%; transform: rotate(1.6deg); }
#partnership .calendar-piece--landscape { top: 23%; right: 0; width: 43%; height: 40%; transform: rotate(1deg); }
#partnership .calendar-piece--product { right: 16%; bottom: 0; width: 40%; height: 34%; transform: rotate(-1deg); }
#partnership .partnership-visual:hover .calendar-piece--square { transform: translateY(-5px) rotate(-2deg); }
#partnership .partnership-visual:hover .calendar-piece--portrait { transform: translateY(-8px) rotate(1.6deg); }
#partnership .partnership-visual:hover .calendar-piece--landscape { transform: translateY(-4px) rotate(1deg); }
#partnership .partnership-visual:hover .calendar-piece--product { transform: translateY(-7px) rotate(-1deg); }
#partnership .partnership-metrics { right: 0; bottom: -42px; }
#packs.section:not(.packs-outcomes) { padding-block: var(--section-space); }
#packs .packs-head { padding-top: 0; border: 0; }
#packs .packs-head h2 { max-width: none; margin-top: 0; }
#packs:not(.packs-outcomes) .pack-grid {
gap: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--story-radius);
background: color-mix(in srgb, var(--surface) 76%, transparent);
}
#packs:not(.packs-outcomes) .pack {
display: grid;
grid-template-rows: auto auto minmax(4.2em, auto) auto auto;
padding: clamp(22px, 2.3vw, 34px);
border: 0;
border-right: 1px solid var(--line);
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
}
#packs .pack:last-child { border-right: 0; }
#packs:not(.packs-outcomes) .pack:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); transform: none; }
#packs .pack h3 { min-height: 0; }
#packs .pack-summary { min-height: 0; }
#packs .pack-price { align-self: end; }
#packs .pack .button {
min-height: 46px;
align-self: end;
justify-content: center;
border-radius: 999px;
text-align: center;
}
#packs .pack-details { align-self: start; }
#packs .pack-policy { padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
#packs .catalogue-program {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: clamp(24px, 5vw, 80px);
align-items: end;
margin-top: clamp(28px, 3vw, 42px);
padding: clamp(24px, 3vw, 42px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
#packs .catalogue-program h3 {
margin: 10px 0 0;
font-size: clamp(1.8rem, 3vw, 3.2rem);
line-height: .98;
letter-spacing: -.045em;
}
#packs .catalogue-program > div > p:not(.pack-label),
#packs .catalogue-program-scope > p {
max-width: 55ch;
margin: 16px 0 0;
color: var(--muted);
line-height: 1.5;
}
#packs .catalogue-program-scope {
display: grid;
gap: 20px;
justify-items: start;
}
#packs .catalogue-program-scope .button {
min-height: 46px;
white-space: nowrap;
}
#compare.section {
padding-block: var(--section-space);
padding-top: var(--section-heading-top);
}
#clients.section { padding-block: var(--section-space); }
#clients .client-review-showcase {
min-height: min(70svh, 680px);
overflow: hidden;
border: 0;
border-radius: var(--story-radius);
background: linear-gradient(135deg, var(--proof-surface), var(--proof-bg));
color: var(--proof-ink);
box-shadow: none;
}
#clients .client-review-showcase::before { opacity: .55; }
#clients .client-proof-copy { align-self: center; }
#clients .client-proof-head h2 {
max-width: 12ch;
margin-top: 12px;
color: var(--proof-ink);
}
#clients .client-proof-head > p:last-child,
#clients .client-review footer,
#clients .client-review-status {
color: color-mix(in srgb, var(--proof-ink) 66%, transparent);
}
#clients .client-review blockquote,
#clients .client-review strong { color: var(--proof-ink); }
@media (prefers-reduced-transparency: reduce) {
.site-header .site-nav { background: transparent; }
.site-header .site-nav.is-open { background: var(--paper); }
.site-header.is-scrolled::before {
background: var(--paper);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html.is-over-dark .site-header.is-scrolled::before { background: var(--dark); }
}
#faq.section.studio-panel-tour { padding-block: 0; }
#faq.section:not(.studio-panel-tour) { padding-block: var(--section-space); }
#faq .faq-lab-layout { min-height: 560px; }
#faq .faq-lab-main h2 { max-width: 12ch; margin-top: 16px; }
#faq .faq-index button { border-radius: 0; }
html[data-skin="nocturne"] #packs.section,
html[data-skin="nocturne"] #process.section,
html[data-skin="nocturne"] #process-radial.section,
html[data-skin="nocturne"] #partnership.section,
html[data-skin="nocturne"] #clients.section {
padding-top: var(--section-space);
}
html[data-skin="nocturne"] #faq.section:not(.studio-panel-tour) {
padding-top: var(--section-space);
}
.site-footer { padding-top: 0; }
.footer-shell { max-width: 1480px; margin-inline: auto; }
@media (max-width: 1100px) {
#packs .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#packs .pack:nth-child(2n) { border-right: 0; }
#packs .pack:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
:root {
--section-display-size: 40px;
--section-display-size-contained: 34px;
--section-space: clamp(58px, 10vw, 76px);
}
#work .work-head { grid-template-columns: 1fr; align-items: start; }
#work .work-stage-wrap { max-height: none; -webkit-mask-image: none; mask-image: none; }
#work .work-row--2,
#work .work-row--3 { transform: none; }
#catalogue .catalogue-cases-head > div,
#catalogue .catalogue-case-head { grid-template-columns: 1fr; }
#catalogue .catalogue-case-head > p { max-width: 56ch; }
#catalogue .catalogue-flow,
#catalogue .catalogue-case--industrial .catalogue-flow {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
background-size: 52px 52px;
}
#catalogue .catalogue-flow::before {
top: 12%;
right: auto;
bottom: 12%;
left: 50%;
width: 1px;
height: auto;
background: linear-gradient(transparent, var(--case-accent) 15%, var(--case-accent) 85%, transparent);
}
#catalogue .catalogue-case--industrial .catalogue-source,
#catalogue .catalogue-case--industrial .catalogue-system,
#catalogue .catalogue-case--industrial .catalogue-outputs { grid-column: auto; grid-row: auto; }
#catalogue .catalogue-source,
#catalogue .catalogue-outputs { width: 100%; }
#catalogue .catalogue-source-media { aspect-ratio: 16 / 10; }
#catalogue .catalogue-system { width: min(42vw, 230px); margin: 6px auto; }
#catalogue .catalogue-output-grid { height: 410px; }
.outcome-tour { height: auto; padding-block: 80px; }
.outcome-head { justify-items: start; text-align: left; }
.outcome-head > p { padding: 0; }
#process .pipeline-heading { grid-template-columns: 1fr; row-gap: 14px; }
#process .pipeline-heading .eyebrow { grid-column: auto; }
#process .pipeline-intro { margin-top: 8px; padding: 0; }
#partnership .partnership { grid-template-columns: 1fr; }
#partnership .partnership-visual { min-height: 560px; }
#partnership .partnership-metrics { bottom: -54px; }
#packs .catalogue-program { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
#work .work-head-side { width: 100%; overflow-x: auto; }
#work .filter-bar { width: max-content; gap: 7px; }
#work .filter-button { height: 42px; min-height: 42px; max-height: 42px; padding: 0 14px; }
#catalogue.section { padding-block: 64px; }
#catalogue .catalogue-cases-head > div { grid-template-columns: 1fr; }
#catalogue .catalogue-cases-head h2 { max-width: 11ch; }
#catalogue .catalogue-case { padding: 20px; border-radius: 24px; }
#catalogue .catalogue-case-head { margin-bottom: 24px; }
#catalogue .catalogue-case-head h3 { max-width: 14ch; font-size: clamp(2.15rem, 11vw, 3.2rem); }
#catalogue .catalogue-flow,
#catalogue .catalogue-case--industrial .catalogue-flow {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
padding: 16px;
background-size: 44px 44px;
}
#catalogue .catalogue-flow::before {
top: 12%;
right: auto;
bottom: 12%;
left: 50%;
width: 1px;
height: auto;
background: linear-gradient(transparent, var(--case-accent) 15%, var(--case-accent) 85%, transparent);
}
#catalogue .catalogue-case--industrial .catalogue-source,
#catalogue .catalogue-case--industrial .catalogue-system,
#catalogue .catalogue-case--industrial .catalogue-outputs { grid-column: auto; grid-row: auto; }
#catalogue .catalogue-source,
#catalogue .catalogue-outputs { width: 100%; }
#catalogue .catalogue-source-media { aspect-ratio: 16 / 10; }
#catalogue .catalogue-system { width: min(52vw, 210px); margin: 6px auto; }
#catalogue .catalogue-output-grid { height: 390px; }
#catalogue .catalogue-case-proof { grid-template-columns: 1fr; gap: 12px; }
#catalogue .catalogue-case-proof span + span { padding: 12px 0 0; border-top: 1px solid var(--case-line); border-left: 0; }
#partnership .partnership-visual { min-height: 470px; }
#partnership .calendar-piece--square { width: 46%; height: 48%; }
#partnership .calendar-piece--portrait { left: 49%; width: 30%; height: 42%; }
#partnership .calendar-piece--landscape { top: 38%; width: 58%; height: 34%; }
#partnership .calendar-piece--product { right: 25%; width: 50%; height: 30%; }
#packs .pack-grid { grid-template-columns: 1fr; }
#packs .pack,
#packs .pack:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
#packs .pack:last-child { border-bottom: 0; }
#packs .pack { grid-template-rows: auto; }
#packs .pack-summary { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
#partnership .calendar-piece,
#partnership .partnership-visual:hover .calendar-piece,
#work .work-tile-media img { transition: none; transform: none; }
#work .work-tile:hover .work-tile-media img { transform: none; }
#catalogue .catalogue-source,
#catalogue .catalogue-system,
#catalogue .catalogue-output,
#catalogue .catalogue-case-proof {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
#catalogue .catalogue-scan,
#catalogue .catalogue-system-orbit { animation: none !important; }
}
#work .work-stage-wrap {
overflow: visible;
padding: 0;
}
#work .work-stage-wrap::before,
#work .work-stage-wrap::after { display: none; }
#work .work-mosaic {
--work-cols: 5;
--work-gutter: clamp(10px, 1.1vw, 16px);
--work-row: clamp(22px, 2.6vh, 34px);
display: grid;
width: 100%;
height: auto;
grid-template-columns: repeat(var(--work-shown, var(--work-cols)), minmax(0, 1fr));
grid-auto-rows: var(--work-row);
gap: var(--work-gutter);
align-items: stretch;
perspective: none;
-webkit-mask-image: none;
mask-image: none;
}
#work .work-row,
#work .work-col { display: contents; }
#work .work-tile,
#work .work-row .work-tile {
display: block;
width: 100%;
min-width: 0;
min-height: 0;
height: auto;
margin: 0;
aspect-ratio: auto;
grid-row: span 8;
overflow: hidden;
transform: none;
}
#work .work-tile--placeholder {
border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
background: color-mix(in srgb, var(--ink) 4%, transparent);
box-shadow: none;
cursor: default;
pointer-events: none;
}
#work .work-tile--placeholder .work-tile-media {
display: grid;
place-content: center;
gap: 8px;
height: 100%;
background: none;
}
#work .work-placeholder-mark {
font-family: var(--mono, monospace);
font-size: 0.78rem;
letter-spacing: 0.16em;
color: color-mix(in srgb, var(--ink) 34%, transparent);
text-align: center;
}
#work .work-tile--placeholder .placeholder-label {
position: static;
padding: 0;
background: none;
color: color-mix(in srgb, var(--ink) 42%, transparent);
text-align: center;
}
#work article.work-tile { cursor: default; }
#work button.work-tile { cursor: pointer; }
#work .work-tile-media { height: 100%; }
#work .work-row .work-tile.spotlight-surface:hover {
z-index: 1;
transform: none;
}
#work .work-open-mark { display: none !important; }
@media (max-width: 900px) {
#work .work-mosaic {
--work-cols: 2;
--work-gutter: 12px;
}
}
@media (max-width: 640px) {
#work .work-mosaic {
--work-cols: 2;
--work-gutter: 10px;
}
}
:root {
--section-heading-size: clamp(3.25rem, 4.1vw, 4.75rem);
--section-heading-gap: clamp(40px, 6vw, 88px);
--section-heading-copy-size: clamp(.96rem, 1vw, 1.05rem);
--section-heading-top: clamp(64px, 5.5vw, 88px);
}
#work.section,
#compare.section {
padding-top: var(--section-heading-top);
}
.outcome-shell {
padding-top: clamp(10px, 1.6vh, 18px);
}
#work .work-head-title h2 {
max-width: 15ch;
margin-top: 0;
font-size: var(--section-heading-size);
line-height: .95;
letter-spacing: -.045em;
text-wrap: balance;
}
#compare.compare-story .compare-head {
margin: 0 0 clamp(20px, 2.4vw, 32px);
}
#compare .compare-head > p {
width: auto;
max-width: 46ch;
margin: 14px 0 0;
padding: 0;
color: var(--muted);
font-size: var(--section-heading-copy-size);
line-height: 1.5;
}
#work .work-head { margin-bottom: clamp(30px, 2.6vw, 38px); }
.outcome-head h2 {
max-width: none;
margin-top: 0;
font-size: clamp(1.85rem, 3.8vw, 3.15rem);
line-height: 1.05;
letter-spacing: -.045em;
white-space: nowrap;
}
.outcome-head {
width: 100%;
max-width: none;
display: grid;
justify-items: center;
grid-template-columns: none;
align-items: start;
gap: 0;
margin-inline: 0;
margin-bottom: 0;
text-align: center;
}
.outcome-head > p {
width: auto;
max-width: 42ch;
margin: 0;
padding: 0;
color: color-mix(in srgb, var(--dark-ink) 62%, transparent);
font-size: clamp(.9rem, 1.1vw, 1.02rem);
line-height: 1.45;
}
@media (max-width: 860px) {
:root {
--section-heading-size: clamp(2.5rem, 10.5vw, 3.5rem);
--section-heading-top: clamp(58px, 10vw, 72px);
}
.outcome-tour { padding-top: 0; }
.outcome-head {
justify-items: start;
text-align: left;
gap: 12px;
}
#compare .compare-head > p,
.outcome-head > p {
max-width: 56ch;
padding: 0;
}
}
#packs .catalogue-program { display: none !important; }
#work .work-tile-media {
position: relative;
}
#work .work-3d-badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px 7px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(8, 12, 22, 0.58);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
color: #fff;
pointer-events: none;
line-height: 1;
}
#work .work-3d-badge__scene {
width: 16px;
height: 16px;
perspective: 48px;
display: grid;
place-items: center;
}
#work .work-3d-badge__cube {
position: relative;
width: 10px;
height: 10px;
transform-style: preserve-3d;
animation: work-3d-spin 5.2s linear infinite;
}
#work .work-3d-badge__face {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 1px;
backface-visibility: hidden;
}
#work .work-3d-badge__face--front  { background: rgba(210, 225, 255, 0.92); transform: translateZ(5px); }
#work .work-3d-badge__face--back   { background: rgba(120, 150, 220, 0.85); transform: rotateY(180deg) translateZ(5px); }
#work .work-3d-badge__face--right  { background: rgba(150, 180, 245, 0.9);  transform: rotateY(90deg) translateZ(5px); }
#work .work-3d-badge__face--left   { background: rgba(95, 125, 200, 0.88);  transform: rotateY(-90deg) translateZ(5px); }
#work .work-3d-badge__face--top    { background: rgba(255, 255, 255, 0.95); transform: rotateX(90deg) translateZ(5px); }
#work .work-3d-badge__face--bottom { background: rgba(70, 95, 160, 0.9);    transform: rotateX(-90deg) translateZ(5px); }
#work .work-3d-badge__label {
font-size: 11px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.92;
}
@keyframes work-3d-spin {
from { transform: rotateX(-18deg) rotateY(0deg); }
to   { transform: rotateX(-18deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
#work .work-3d-badge__cube { animation: none; transform: rotateX(-18deg) rotateY(-28deg); }
}
#work .work-tile--still-pad .work-tile-media {
background: #ececec;
overflow: hidden;
}
#work .work-tile--still-pad .work-tile-media > img {
object-fit: contain;
object-position: center;
width: 100%;
height: 100%;
padding: 0;
box-sizing: border-box;
background: transparent;
}
#work .work-tile[data-work-kind="interactive"] .work-tile-media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(180deg, #c7cacd 0%, #c3c6ca 55%, #c0c3c7 100%) !important;
overflow: hidden !important;
}
#work .work-tile[data-work-kind="interactive"] {
position: relative;
overflow: hidden;
}
#work .work-tile[data-work-kind="interactive"] .work-tile-media > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
transform: scale(1.3) !important;
transform-origin: center !important;
transition: none !important;
padding: 0 !important;
}
#work .work-tile[data-work-kind="interactive"]:hover .work-tile-media > img,
#work .work-tile[data-work-kind="interactive"]:focus-visible .work-tile-media > img,
#work .work-tile[data-work-kind="interactive"]:active .work-tile-media > img {
transform: scale(1.3) !important;
}
.design-lab-root,
.design-lab-root.design-lab {
position: fixed;
z-index: 400;
right: max(76px, calc(env(safe-area-inset-right) + 68px));
bottom: max(16px, env(safe-area-inset-bottom));
width: auto;
pointer-events: none;
}
.design-lab {
pointer-events: auto;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
width: auto;
font-family: var(--body);
color: var(--ink);
}
.design-lab.is-open {
width: min(420px, calc(100vw - 96px));
}
.design-lab-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 16px 0 12px;
border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--paper) 94%, transparent);
color: var(--ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
box-shadow:
0 10px 28px color-mix(in srgb, var(--ink) 12%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.15);
backdrop-filter: blur(16px) saturate(1.15);
}
.design-lab-toggle-mark {
width: 14px;
height: 14px;
border-radius: 50%;
background:
conic-gradient(from 210deg, var(--accent), var(--accent-2, var(--accent)), var(--ink), var(--accent));
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 70%, transparent);
}
.design-lab.is-open .design-lab-toggle {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.design-lab-panel {
margin-top: 0;
margin-bottom: 10px;
padding: 18px 16px 16px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 22px;
background:
linear-gradient(165deg, color-mix(in srgb, #fff 10%, transparent), transparent 40%),
color-mix(in srgb, var(--paper) 94%, transparent);
box-shadow:
0 24px 60px color-mix(in srgb, var(--ink) 18%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
backdrop-filter: blur(22px) saturate(1.2);
max-height: min(78vh, 720px);
overflow: auto;
}
html[data-skin="nocturne"] .design-lab-panel,
html[data-skin="nocturne"] .design-lab-toggle {
background: color-mix(in srgb, var(--surface) 88%, transparent);
color: var(--ink);
}
.design-lab-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.design-lab-kicker {
margin: 0 0 4px;
color: var(--muted);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.54rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.design-lab-head h2 {
margin: 0;
font-family: var(--display);
font-size: 1.35rem;
letter-spacing: -0.04em;
line-height: 1.05;
}
.design-lab-head p:last-child {
margin: 8px 0 0;
max-width: 28ch;
color: var(--muted);
font-size: 0.84rem;
line-height: 1.4;
}
.design-lab-reset {
flex: none;
min-height: 36px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 999px;
background: transparent;
color: var(--ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.54rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.design-lab-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 14px;
padding: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.design-lab-tab {
min-height: 36px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.design-lab-tab[aria-selected="true"] {
background: var(--paper);
color: var(--ink);
box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent);
}
html[data-skin="nocturne"] .design-lab-tab[aria-selected="true"] {
background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.design-lab-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.design-lab-group {
grid-column: 1 / -1;
margin: 4px 0 0;
color: var(--ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.design-lab-type-grid {
display: grid;
gap: 12px;
}
.design-lab-type-note {
margin: 0;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.45;
}
.design-lab-field {
display: grid;
gap: 6px;
min-width: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.design-lab-field > span {
color: var(--muted);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.54rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.design-lab-field input[type="color"] {
width: 100%;
height: 36px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.design-lab-range-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}
.design-lab-field input[type="range"] {
width: 100%;
accent-color: var(--accent);
cursor: pointer;
}
.design-lab-range-row code {
min-width: 3.6em;
text-align: right;
}
.design-lab-field code {
color: var(--ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.68rem;
letter-spacing: 0.02em;
}
.design-lab-field--select select {
width: 100%;
min-height: 40px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 10px;
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: 0.92rem;
}
.design-lab-apply-theme {
width: 100%;
min-height: 44px;
margin-top: 12px;
border: 0;
border-radius: 999px;
background: var(--action);
color: var(--action-ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
@media (max-width: 720px) {
.design-lab-root {
right: 12px;
left: 12px;
bottom: max(68px, calc(env(safe-area-inset-bottom) + 60px));
}
.design-lab,
.design-lab.is-open {
width: 100%;
align-items: stretch;
}
.design-lab-panel {
max-height: min(68vh, 560px);
border-radius: 18px;
}
.design-lab-grid { grid-template-columns: 1fr 1fr; }
.design-lab-tabs { grid-template-columns: repeat(2, 1fr); border-radius: 16px; }
}
.ribbon-group span::after,
.ribbon-group .ribbon-item::after {
background: var(--accent-2, var(--accent));
}
a:hover { text-decoration-color: var(--accent-2, var(--accent)); }
@media (max-width: 860px) {
:root {
--gutter: 18px;
--header: 64px;
--section-space: clamp(52px, 12vw, 72px);
}
.site-header .header-inner {
min-height: 56px;
}
.hero {
padding-bottom: clamp(28px, 6vw, 40px);
}
.hero-intro {
white-space: normal;
max-width: 36ch;
margin-inline: auto;
text-align: center;
letter-spacing: 0.08em;
font-size: clamp(0.7rem, 2.8vw, 0.78rem);
line-height: 1.45;
}
.ribbon-stack {
margin-top: clamp(28px, 7vw, 48px);
}
.ribbon-logo {
height: 22px;
max-width: 108px;
}
.ribbon--clients .ribbon-group .ribbon-item {
min-height: 48px;
padding-block: 12px;
}
#compare .compare-head h2,
#compare .compare-head--proof h2,
#packs .packs-head h2 {
max-width: 14ch;
font-size: clamp(2rem, 9vw, 2.7rem);
}
#packs .pack-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.pack {
padding: 20px 18px;
}
.pack-controls {
gap: 14px;
}
.pack-slider input[type="range"] {
height: 44px;
}
.pack .button,
.pack a.button {
min-height: 48px;
width: 100%;
justify-content: center;
}
#packs .catalogue-program {
gap: 18px;
padding-block: 22px;
}
#packs .catalogue-program h3 {
font-size: clamp(1.55rem, 7vw, 2.1rem);
}
#process .pipeline-intro {
max-width: none;
}
.process-flow {
grid-template-columns: 1fr;
gap: 0;
}
.studio-panel-container {
max-width: calc(100% - 20px);
}
.studio-panel-frame {
padding: 16px 14px;
border-radius: 18px;
}
.studio-panel-proof .client-review blockquote {
font-size: clamp(1.15rem, 5.5vw, 1.45rem);
}
.footer-main {
grid-template-columns: 1fr;
gap: 28px;
padding-block: 40px 24px;
}
}
@media (max-width: 560px) {
.design-lab-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: clamp(2.35rem, 12vw, 3.2rem);
}
.pack-price {
font-size: clamp(1.55rem, 8vw, 1.9rem);
}
#faq .faq-index {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
#faq .faq-index button {
min-height: 44px;
justify-content: flex-start;
}
}
@media (max-width: 860px) and (pointer: coarse) {
.site-nav a,
.filter-button,
.button,
.menu-button {
min-height: 44px;
}
}
.design-lab-toggle, .design-lab-panel { pointer-events: auto; }
@media (max-width: 860px) {
:root { --section-space: clamp(40px, 9vw, 56px); }
#work.section { padding-bottom: clamp(28px, 6vw, 40px); }
#compare.section,
#compare.compare-story,
#compare.compare-lite,
#packs.section,
#process.section,
#process.process-desk { padding-block: clamp(40px, 8vw, 56px); }
#process .pipeline-intro { font-size: 0.95rem; }
#process .pipeline-heading { margin-bottom: 16px; }
.studio-panel-frame { padding: 14px 12px; }
.studio-panel-head h2 { font-size: clamp(1.45rem, 6.5vw, 1.85rem); }
#faq .faq-answer-pane { padding-top: 12px; }
#faq .faq-answer-current { font-size: 0.9rem; }
#packs.packs-outcomes .packs-head {
gap: 12px;
margin-bottom: 18px;
}
#packs .outcomes-panel {
border-radius: 22px;
}
#packs .outcomes-rail {
margin-inline: -4px;
padding-inline: 4px;
scrollbar-width: none;
}
#packs .outcomes-rail::-webkit-scrollbar { display: none; }
#packs .pack-rail-card-detail {
gap: 12px;
}
#compare .compare-lite-stage { row-gap: 8px; }
#cases.cases { padding-block: clamp(40px, 8vw, 56px); }
.cases-head-main h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); }
.cases-bar { padding: 14px 16px; }
}
@media (max-width: 360px) {
.cases-head, .cases-bar { grid-template-columns: 1fr; }
.case-study-media img { min-height: 0; aspect-ratio: 16 / 9; }
}
:root {
--taste-cast: 11 23 52;
}
html[data-skin="nocturne"] {
--taste-cast: 0 0 0;
}
#taste-stage.taste-stage {
position: relative;
overflow: clip;
padding-block: clamp(48px, 5.2vw, 88px);
background: var(--paper);
}
@media (min-width: 861px) {
#taste-stage.taste-stage {
overflow: visible;
scroll-margin-top: var(--header, 72px);
padding-block: clamp(18px, 2.2vw, 32px);
}
}
.taste-stage-shell {
position: relative;
}
.taste-stage-intro {
position: relative;
z-index: 3;
max-width: 38rem;
margin: 0 auto clamp(12px, 1.6vw, 22px);
text-align: center;
}
.taste-stage-intro .eyebrow {
justify-content: center;
margin-bottom: 0;
font-size: 0.72rem;
}
.taste-stage-intro h2 {
margin-top: 8px;
font-size: clamp(2.4rem, 3.6vw, 3.4rem);
line-height: 1.02;
letter-spacing: var(--section-display-tracking, -0.045em);
text-wrap: balance;
}
.taste-stage-intro h2 em {
display: block;
margin-top: 0.02em;
font-style: italic;
font-weight: 400;
}
.taste-stage-sub {
margin: 10px 0 0;
color: var(--ink);
font-family: var(--display, var(--serif, "Instrument Serif", Georgia, serif));
font-size: clamp(1.12rem, 1.55vw, 1.42rem);
font-style: italic;
line-height: 1.22;
letter-spacing: -0.02em;
}
.taste-stage-lede {
margin: 10px auto 0;
max-width: 46ch;
color: var(--muted);
font-size: clamp(0.86rem, 0.95vw, 0.96rem);
line-height: 1.45;
}
.taste-stage-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
position: relative;
z-index: 4;
width: fit-content;
margin: 18px auto 0;
padding: 3px;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 88%, var(--paper));
}
.taste-stage-tabs button {
min-height: 26px;
padding: 3px 10px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-family: var(--mono);
font-size: 0.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 160ms ease, color 160ms ease;
}
.taste-stage-tabs button[aria-selected="true"] {
background: var(--ink);
color: var(--paper);
}
.taste-stage-tabs button:hover,
.taste-stage-tabs button:focus-visible {
color: var(--ink);
}
.taste-stage-tabs button[aria-selected="true"]:hover,
.taste-stage-tabs button[aria-selected="true"]:focus-visible {
color: var(--paper);
}
.taste-stage-arena {
position: relative;
z-index: 1;
isolation: isolate;
min-height: clamp(520px, 62vh, 680px);
padding: clamp(28px, 4vw, 56px) 0 72px;
perspective: 1400px;
}
.taste-planes {
position: absolute;
inset: 6% 4% 10%;
z-index: 0;
pointer-events: none;
}
.taste-plane {
position: absolute;
border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface) 76%, #fff) 0%, color-mix(in srgb, var(--paper) 88%, var(--surface)) 100%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.42),
0 18px 40px rgb(var(--taste-cast) / 0.05);
}
.taste-plane--a {
width: 38%;
height: 54%;
left: 16%;
top: 10%;
}
.taste-plane--b {
width: 20%;
height: 68%;
left: 48%;
top: 4%;
}
.taste-plane--c {
width: 26%;
height: 32%;
right: 7%;
top: 16%;
}
.taste-plane--d {
width: 18%;
height: 44%;
left: 8%;
bottom: 18%;
}
.taste-plane--e {
width: 64%;
height: 16%;
left: 18%;
bottom: 6%;
}
.taste-plane--f {
width: 22%;
height: 28%;
right: 16%;
bottom: 20%;
}
.taste-plane--g {
width: 15%;
height: 34%;
left: 36%;
top: 6%;
}
.taste-plane--h {
width: 18%;
height: 22%;
right: 30%;
top: 46%;
}
html[data-skin="nocturne"] .taste-plane {
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #fff 4%), color-mix(in srgb, var(--paper) 70%, #000));
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.05),
0 18px 40px rgb(var(--taste-cast) / 0.28);
border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
.taste-stage-led {
position: absolute;
top: 4px;
right: max(0px, 2%);
z-index: 5;
display: grid;
gap: 6px;
width: min(248px, 24%);
padding: 14px 16px 16px;
border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
border-radius: clamp(12px, 1.2vw, 16px);
background:
radial-gradient(ellipse 80% 70% at 12% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
color-mix(in srgb, var(--surface) 92%, var(--paper));
box-shadow:
0 16px 36px rgb(var(--taste-cast) / 0.09),
0 4px 10px rgb(var(--taste-cast) / 0.05),
inset 0 1px 0 rgb(255 255 255 / 0.7);
}
.taste-stage-led-mark {
color: var(--accent);
font-size: 0.95rem;
line-height: 1;
}
.taste-stage-led-kicker {
margin: 0;
color: var(--ink);
font-family: var(--display, var(--serif, "Instrument Serif", Georgia, serif));
font-size: clamp(1.2rem, 1.7vw, 1.55rem);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.08;
}
.taste-stage-led-copy {
margin: 0;
color: color-mix(in srgb, var(--muted) 55%, var(--ink));
font-size: 0.88rem;
line-height: 1.35;
max-width: 22ch;
}
.taste-led-path {
position: absolute;
top: 28px;
right: min(26%, 280px);
z-index: 4;
width: min(140px, 14vw);
height: 72px;
overflow: visible;
pointer-events: none;
}
.taste-led-path path {
fill: none;
stroke: color-mix(in srgb, var(--accent) 55%, transparent);
stroke-width: 1.15;
stroke-linecap: round;
}
.taste-lanes {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.16fr) minmax(0, 0.9fr);
align-items: end;
gap: clamp(10px, 1.8vw, 28px);
padding: 48px 2% 8px;
}
.taste-lane {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-width: 0;
transform-style: preserve-3d;
}
.taste-card-motion {
position: relative;
z-index: 2;
width: var(--card-w, 100%);
margin-bottom: -8px;
transform-origin: 50% 100%;
transform-style: preserve-3d;
}
.taste-lane--diy { --card-w: 86%; --plinth-h: 30px; --plinth-w: 78%; }
.taste-lane--pick { --card-w: 100%; --plinth-h: 64px; --plinth-w: 88%; }
.taste-lane--agency { --card-w: 90%; --plinth-h: 46px; --plinth-w: 82%; }
.taste-card {
position: relative;
display: grid;
gap: 10px;
width: 100%;
padding: 12px 12px 14px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: 14px;
background: var(--surface);
box-shadow:
0 18px 40px rgb(var(--taste-cast) / 0.08),
0 5px 12px rgb(var(--taste-cast) / 0.07),
inset 0 1px 0 rgb(255 255 255 / 0.68);
transform-origin: 50% 100%;
}
.taste-card--diy {
gap: 8px;
padding: 10px 10px 12px;
box-shadow:
0 14px 32px rgb(var(--taste-cast) / 0.06),
0 4px 10px rgb(var(--taste-cast) / 0.05),
inset 0 1px 0 rgb(255 255 255 / 0.55);
}
.taste-card--agency {
box-shadow:
0 18px 42px rgb(var(--taste-cast) / 0.08),
0 5px 12px rgb(var(--taste-cast) / 0.06),
inset 0 1px 0 rgb(255 255 255 / 0.64);
}
.taste-card--pick {
gap: 12px;
padding: 14px 14px 16px;
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow:
0 28px 58px rgb(var(--taste-cast) / 0.13),
0 8px 16px rgb(var(--taste-cast) / 0.08),
0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
inset 0 1px 0 rgb(255 255 255 / 0.82);
}
.taste-card--pick::after {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(110deg, transparent 38%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 62%);
background-size: 240% 100%;
background-position: 0% 0%;
opacity: 0;
content: "";
pointer-events: none;
}
.taste-stage.is-settled .taste-card--pick::after {
opacity: 0.45;
animation: taste-sheen 14s ease-in-out infinite;
}
@keyframes taste-sheen {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.taste-card-label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--muted);
font-family: var(--mono);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.taste-card--pick .taste-card-label {
color: var(--accent);
font-size: 0.64rem;
}
.taste-card-star {
color: var(--accent);
font-size: 0.78rem;
line-height: 1;
}
.taste-card-shot {
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: 4 / 5;
width: 100%;
border-radius: 8px;
background: color-mix(in srgb, var(--surface-alt, var(--surface)) 55%, var(--paper));
}
@media (min-width: 861px) {
.taste-lane--diy .taste-card-shot { max-height: 236px; }
.taste-lane--agency .taste-card-shot { max-height: 240px; }
.taste-lane--pick .taste-card-shot { max-height: 288px; }
}
.taste-card-shot img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
}
.taste-card--diy .taste-card-shot img {
filter: saturate(0.5) contrast(0.9) brightness(1.06) grayscale(0.12);
object-position: 50% 58%;
}
.taste-card--agency .taste-card-shot img {
filter: saturate(0.86) contrast(0.98);
object-position: 42% 52%;
}
.taste-card--pick .taste-card-shot {
background: color-mix(in srgb, var(--ink) 88%, #000);
}
.taste-card--pick .taste-card-shot img {
filter: saturate(1.06) contrast(1.06);
object-position: 50% 46%;
}
.taste-card-points {
display: grid;
gap: 0.38em;
margin: 0;
padding: 0;
color: var(--ink);
font-size: clamp(0.78rem, 0.86vw, 0.9rem);
line-height: 1.35;
}
.taste-card--diy .taste-card-points {
color: color-mix(in srgb, var(--muted) 70%, var(--ink));
font-size: clamp(0.74rem, 0.8vw, 0.84rem);
}
.taste-card--agency .taste-card-points {
color: color-mix(in srgb, var(--muted) 40%, var(--ink));
font-size: clamp(0.76rem, 0.84vw, 0.88rem);
}
.taste-card--pick .taste-card-points {
font-size: clamp(0.84rem, 0.94vw, 0.98rem);
font-weight: 500;
}
.taste-card-vs {
color: var(--accent);
font-family: var(--mono);
font-size: 0.72em;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.taste-card-toggle {
display: none;
width: 32px;
height: 28px;
margin: 2px auto 0;
padding: 0;
border: 0;
background: transparent;
color: var(--accent);
}
.taste-card-toggle::before {
display: block;
width: 7px;
height: 7px;
margin: 8px auto 0;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), margin 280ms ease;
content: "";
}
.taste-card.is-open .taste-card-toggle::before {
margin-top: 12px;
transform: rotate(225deg);
}
.taste-card.is-collapsible .taste-card-toggle {
display: block;
}
.taste-card.is-collapsible:not(.is-open) .taste-card-extra {
max-height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.taste-card-extra {
max-height: 6.5em;
overflow: hidden;
transition: max-height 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, margin 280ms ease;
}
.taste-plinth {
position: relative;
z-index: 1;
width: var(--plinth-w);
margin-top: -2px;
filter: drop-shadow(0 14px 22px rgb(var(--taste-cast) / 0.1));
}
.taste-plinth-cap {
display: block;
height: 15px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 94%, #fff) 0%,
color-mix(in srgb, var(--paper) 78%, var(--surface)) 100%);
border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
border-bottom: 0;
clip-path: polygon(8% 100%, 92% 100%, 86% 0%, 14% 0%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
transform: translateY(1px);
}
.taste-plinth-rise {
display: block;
height: var(--plinth-h);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper) 72%, var(--muted)) 0%,
color-mix(in srgb, var(--paper) 90%, var(--surface)) 100%);
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-top-color: color-mix(in srgb, var(--ink) 6%, transparent);
box-shadow:
inset 0 8px 12px rgb(var(--taste-cast) / 0.04),
inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.taste-lane--pick .taste-plinth-cap {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface) 96%, #fff) 0%,
color-mix(in srgb, var(--accent) 6%, var(--paper)) 100%);
border-color: color-mix(in srgb, var(--accent) 16%, color-mix(in srgb, var(--ink) 8%, transparent));
}
.taste-lane--pick .taste-plinth-rise {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent) 7%, var(--paper)) 0%,
color-mix(in srgb, var(--paper) 88%, var(--surface)) 100%);
}
.taste-podium-floor {
position: absolute;
right: 3%;
bottom: 0;
left: 3%;
z-index: 1;
height: 78px;
pointer-events: none;
}
.taste-podium-floor-cap {
display: block;
height: 12px;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, #fff), color-mix(in srgb, var(--paper) 82%, var(--surface)));
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-bottom: 0;
clip-path: polygon(2% 100%, 98% 100%, 96% 0%, 4% 0%);
}
.taste-podium-floor-front {
display: block;
height: 14px;
background: color-mix(in srgb, var(--paper) 86%, var(--muted));
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-top: 0;
box-shadow: 0 16px 28px rgb(var(--taste-cast) / 0.08);
}
html[data-skin="nocturne"] .taste-card {
box-shadow:
0 18px 40px rgb(var(--taste-cast) / 0.38),
0 5px 12px rgb(var(--taste-cast) / 0.28),
inset 0 1px 0 rgb(255 255 255 / 0.06);
}
html[data-skin="nocturne"] .taste-card--pick {
box-shadow:
0 28px 58px rgb(var(--taste-cast) / 0.5),
0 8px 16px rgb(var(--taste-cast) / 0.32),
0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
inset 0 1px 0 rgb(255 255 255 / 0.08);
}
html[data-skin="nocturne"] .taste-stage-led {
box-shadow:
0 16px 36px rgb(var(--taste-cast) / 0.4),
inset 0 1px 0 rgb(255 255 255 / 0.06);
}
html[data-skin="nocturne"] .taste-plinth-cap,
html[data-skin="nocturne"] .taste-podium-floor-cap {
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff 6%), var(--surface));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
html[data-skin="nocturne"] .taste-plinth-rise,
html[data-skin="nocturne"] .taste-podium-floor-front {
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, #000), color-mix(in srgb, var(--paper) 80%, #000));
}
.taste-stage.is-pending .taste-card-motion,
.taste-stage.is-pending .taste-stage-led,
.taste-stage.is-pending .taste-led-path,
.taste-stage.is-pending .taste-stage-intro > * {
opacity: 0;
}
@media (min-width: 861px) {
#taste-stage.taste-stage.is-pending .taste-card-motion,
#taste-stage.taste-stage.is-pending .taste-card-motion .taste-card,
#taste-stage.taste-stage.is-pending .taste-stage-led,
#taste-stage.taste-stage.is-pending .taste-led-path,
#taste-stage.taste-stage.is-pending .taste-stage-intro > * {
opacity: 0 !important;
visibility: hidden;
}
}
html:not(.js) .taste-stage.is-pending .taste-card-motion,
html:not(.js) .taste-stage.is-pending .taste-stage-led,
html:not(.js) .taste-stage.is-pending .taste-led-path,
html:not(.js) .taste-stage.is-pending .taste-stage-intro > *,
.taste-stage.is-settled .taste-stage-intro > * {
opacity: 1;
}
html:not(.js) #taste-stage {
--category-reveal: 1;
--spotlight-reveal: 1;
}
@media (max-width: 860px) {
#taste-stage.is-settled {
--category-reveal: 1;
--spotlight-reveal: 1;
}
}
.taste-stage:not(.is-settled) .taste-card {
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
#taste-stage.is-settled .taste-plane {
transform: perspective(1100px) rotateX(var(--plane-tilt-x, 0deg)) rotateY(var(--plane-tilt-y, 0deg)) translate3d(0, var(--plane-lift, 0px), 0);
transition: transform 220ms ease-out;
}
.taste-stage.is-settled .taste-card--diy,
.taste-stage.is-settled .taste-card--agency,
.taste-stage.is-settled .taste-card--pick {
transform-style: preserve-3d;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease, border-color 300ms ease;
}
.taste-stage.is-settled .taste-card--diy:hover {
transform: perspective(1100px) rotateY(7deg) translateY(-4px);
}
.taste-stage.is-settled .taste-card--agency:hover {
transform: perspective(1100px) rotateY(-7deg) translateY(-4px);
}
.taste-stage.is-settled .taste-card--pick:hover {
transform: perspective(1200px) rotateX(-3deg) translateY(-6px);
border-color: color-mix(in srgb, var(--accent) 58%, transparent);
box-shadow:
0 34px 64px rgb(var(--taste-cast) / 0.16),
0 10px 18px rgb(var(--taste-cast) / 0.09),
0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
inset 0 1px 0 rgb(255 255 255 / 0.86);
}
.taste-stage.is-settled .taste-card--pick:hover .taste-card-shot img {
transform: scale(1.02);
}
}
@media (max-height: 820px) and (min-width: 861px) {
.taste-stage-arena { min-height: 0; padding-top: 20px; }
.taste-lane--diy { --plinth-h: 24px; }
.taste-lane--agency { --plinth-h: 36px; }
.taste-lane--pick { --plinth-h: 50px; }
.taste-lane--diy .taste-card-shot { max-height: 206px; }
.taste-lane--agency .taste-card-shot { max-height: 218px; }
.taste-lane--pick .taste-card-shot { max-height: 252px; }
.taste-lanes { padding-top: 28px; }
}
@media (max-width: 1100px) and (min-width: 861px) {
.taste-stage-led { width: min(220px, 26%); }
.taste-led-path { display: none; }
.taste-lane--diy .taste-card-shot { max-height: 218px; }
.taste-lane--agency .taste-card-shot { max-height: 228px; }
.taste-lane--pick .taste-card-shot { max-height: 264px; }
}
@media (max-width: 860px) {
#taste-stage.taste-stage {
padding-block: clamp(24px, 5vw, 44px);
}
.taste-stage-intro {
margin-bottom: 12px;
text-align: left;
max-width: none;
}
.taste-stage-intro .eyebrow {
justify-content: flex-start;
font-size: 0.7rem;
}
.taste-stage-intro h2 {
font-size: clamp(2.7rem, 12vw, 3.4rem);
}
.taste-stage-lede { margin-left: 0; }
.taste-stage-arena {
display: grid;
min-height: 0;
padding-top: 8px;
perspective: none;
}
.taste-stage-led {
position: relative;
top: auto;
right: auto;
z-index: 3;
width: 82%;
margin: 0 0 18px auto;
}
.taste-led-path { display: none; }
.taste-planes {
inset: 18% 2% 8%;
}
.taste-plane--c,
.taste-plane--d { display: none; }
.taste-plane--a {
width: 72%;
height: 42%;
left: 10%;
top: 0;
}
.taste-plane--b {
width: 28%;
height: 36%;
left: auto;
right: 6%;
top: 8%;
}
.taste-plane--e {
width: 88%;
height: 22%;
left: 6%;
bottom: 4%;
}
.taste-lanes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"pick pick"
"agency diy";
gap: 14px 10px;
padding: 8px 0 0;
}
.taste-lane--pick { grid-area: pick; --card-w: min(100%, 420px); --plinth-h: 50px; --plinth-w: 70%; }
.taste-lane--agency { grid-area: agency; --card-w: 100%; --plinth-h: 32px; --plinth-w: 78%; }
.taste-lane--diy { grid-area: diy; --card-w: 100%; --plinth-h: 22px; --plinth-w: 72%; }
#taste-stage:not(.is-mobile-story) .taste-lane--diy .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--agency .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--pick .taste-card-shot {
max-height: none;
min-height: 280px;
flex: none;
}
#taste-stage:not(.is-mobile-story) .taste-lane--pick .taste-card-shot { aspect-ratio: 4 / 5; min-height: 320px; }
.taste-lane--diy .taste-card-shot,
.taste-lane--agency .taste-card-shot { aspect-ratio: 4 / 5; }
.taste-card--pick .taste-card-points,
.taste-card--agency .taste-card-points,
.taste-card--diy .taste-card-points {
font-size: 0.9rem;
}
.taste-podium-floor {
left: 4%;
right: 4%;
height: 18px;
}
.taste-stage-tabs button {
min-height: 28px;
font-size: 0.5rem;
}
}
@media (max-width: 430px) {
.taste-card { padding: 10px 10px 12px; border-radius: 12px; }
.taste-card--pick { padding: 12px; }
.taste-stage-led { width: 86%; padding: 12px 14px; }
}
@media (min-width: 861px) {
html #taste-stage.taste-stage:not(.is-mobile-story) .taste-stage-arena {
transform: scale(0.9);
transform-origin: top center;
}
}
@media (prefers-reduced-motion: reduce) {
.taste-stage.is-pending .taste-stage-intro > *,
.taste-stage.is-pending .taste-card-motion,
.taste-stage.is-pending .taste-stage-led,
.taste-stage.is-pending .taste-led-path {
opacity: 1;
}
.taste-card-shot img,
.taste-card,
.taste-card-extra,
.taste-card-toggle::before {
transition: none;
}
.taste-stage.is-settled .taste-card--pick::after {
animation: none;
opacity: 0;
}
.taste-stage.is-settled .taste-card--diy:hover,
.taste-stage.is-settled .taste-card--agency:hover,
.taste-stage.is-settled .taste-card--pick:hover .taste-card-shot img {
transform: none;
}
}
:root { --signal: var(--accent, #5367ee); }
#process.process-desk {
--signal: var(--accent, #5367ee);
background: #F7F8FA;
color: var(--ink);
padding-block: clamp(72px, 6.5vw, 96px);
overflow: visible;
}
#process.process-desk .pipeline-heading {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.65fr);
column-gap: clamp(28px, 5vw, 80px);
row-gap: 10px;
margin-bottom: clamp(28px, 3.5vw, 44px);
padding: 0; border: 0;
}
#process.process-desk .pipeline-heading .eyebrow { grid-column: 1 / -1; color: var(--signal); }
#process.process-desk .pipeline-heading h2 {
max-width: 16ch; margin: 0; font-family: var(--display);
font-size: var(--section-display-size); font-weight: var(--heading-weight, 400);
letter-spacing: -0.045em; line-height: 0.94;
}
#process.process-desk .pipeline-heading h2 em { font-style: italic; }
#process.process-desk .pipeline-intro {
align-self: end; max-width: 32ch; margin: 0; padding: 0 0 0.25em; color: var(--ink);
font-family: var(--display); font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-style: italic; line-height: 1.22;
}
.process-rail {
position: relative;
min-height: clamp(360px, 44vw, 480px);
margin: 0 0 clamp(8px, 1vw, 18px);
padding: clamp(12px, 1.6vw, 22px) 0 clamp(52px, 5vw, 72px);
overflow: visible;
}
.process-glow-svg {
position: absolute;
inset: 0 0 auto;
width: 100%;
height: clamp(300px, 36vw, 400px);
pointer-events: none;
overflow: visible;
z-index: 1;
}
.process-glow-base {
fill: none;
stroke: color-mix(in srgb, var(--ink) 18%, transparent);
stroke-width: 1.15;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.process-glow-bloom {
fill: none;
stroke: var(--signal, var(--accent, #5367ee));
stroke-width: 8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1 10000;
stroke-dashoffset: 1;
opacity: 0.28;
}
.process-glow-line {
fill: none;
stroke: var(--signal, var(--accent, #5367ee));
stroke-width: 2.85;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1 10000;
stroke-dashoffset: 1;
}
.process-glow-head {
fill: var(--signal, var(--accent, #5367ee));
stroke: color-mix(in srgb, var(--paper) 70%, #fff);
stroke-width: 0.6;
opacity: 0;
pointer-events: none;
}
.process-glow-aura {
opacity: 0;
pointer-events: none;
}
.process-scatter-node { opacity: 0.28 !important; }
.process-scatter { pointer-events: none; }
.process-scatter-node { pointer-events: none; }
#process.is-process-live .process-scatter-node {
animation: process-node-in 680ms cubic-bezier(.22, 1, .36, 1) both;
}
#process.is-process-live .process-scatter-node:nth-of-type(1) { animation-delay: 120ms; }
#process.is-process-live .process-scatter-node:nth-of-type(2) { animation-delay: 220ms; }
#process.is-process-live .process-scatter-node:nth-of-type(3) { animation-delay: 320ms; }
@keyframes process-node-in {
from { opacity: 0; }
to { opacity: .45; }
}
.process-orbit { opacity: 0.85; }
.process-spark { opacity: 0.9; }
.process-stages {
position: absolute;
inset: 0;
z-index: 3;
margin: 0;
padding: 0;
list-style: none;
pointer-events: none;
}
.process-stage {
--sx: 50%;
--sy: 50%;
--node: clamp(58px, 5.8vw, 76px);
position: absolute;
left: var(--sx);
top: var(--sy);
width: min(148px, 14vw);
display: grid;
justify-items: center;
gap: 7px;
margin: 0;
padding: 0;
text-align: center;
color: color-mix(in srgb, var(--ink) 46%, transparent);
transform: translate(-50%, calc(var(--node) * -0.5));
transition: color 320ms cubic-bezier(.16,1,.3,1);
pointer-events: auto;
opacity: 1;
}
html.js #process.process-desk .process-stage.reveal-item,
html.js #process.process-desk .process-stage.scan-reveal {
position: absolute;
opacity: 1;
transform: translate(-50%, calc(var(--node) * -0.5));
}
html.js #process.process-desk .process-stage.scan-reveal::after { display: none; }
.process-stage-node {
display: grid;
place-items: center;
width: var(--node);
height: var(--node);
overflow: visible;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 50%;
background: linear-gradient(160deg, #fff 0%, #fff 42%, color-mix(in srgb, var(--paper) 70%, #fff) 100%);
box-shadow:
0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent),
inset 0 1px 0 rgba(255,255,255,.92);
color: #1a2f55;
transform: none;
transition:
transform 420ms cubic-bezier(.16,1,.3,1),
border-color 320ms ease,
color 320ms ease,
background 320ms ease,
box-shadow 320ms ease;
}
.process-stage-svg { width: 62%; height: 62%; overflow: visible; }
.process-stage .ps-draw {
stroke-dasharray: 100;
stroke-dashoffset: 100;
opacity: 0.34;
transition: opacity 320ms ease, stroke-dashoffset 620ms cubic-bezier(.16,1,.3,1);
}
.process-stage.is-lit .ps-draw,
.process-stage.is-active .ps-draw {
stroke-dashoffset: 0;
opacity: 1;
}
.process-stage .ps-pulse {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
}
.process-stage.is-arriving .process-stage-node {
animation: process-node-arrive 620ms cubic-bezier(.2, 1.4, .35, 1) both;
}
@keyframes process-node-arrive {
0% { transform: scale(1); }
42% { transform: scale(1.12); }
100% { transform: scale(1); }
}
@keyframes process-pulse {
0%, 100% { opacity: 0.35; transform: scale(0.86); }
50% { opacity: 1; transform: scale(1.18); }
}
.process-stage-num {
font-family: var(--mono);
font-size: var(--type-meta);
letter-spacing: .14em;
text-transform: uppercase;
}
.process-stage-label {
color: inherit;
font-family: var(--body);
font-size: clamp(.9rem, 1.05vw, 1.05rem);
font-weight: 650;
letter-spacing: -.02em;
}
.process-stage p {
margin: 0;
max-width: 16ch;
color: color-mix(in srgb, var(--muted) 88%, transparent);
font-size: .76rem;
line-height: 1.38;
}
.process-stage-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
padding: 7px 11px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
background: color-mix(in srgb, var(--signal) 10%, #fff);
color: var(--signal);
font-family: var(--mono);
font-size: .5rem;
letter-spacing: .08em;
text-transform: uppercase;
opacity: 0;
transform: translateY(4px);
transition: opacity 280ms ease, transform 280ms ease;
white-space: nowrap;
}
.process-stage.is-lit,
.process-stage.is-active { color: var(--ink); }
.process-stage.is-lit .process-stage-node,
.process-stage.is-active .process-stage-node {
border-color: color-mix(in srgb, var(--signal) 55%, transparent);
color: #1a2f55;
background:
linear-gradient(160deg, #fff, color-mix(in srgb, var(--paper) 65%, #fff));
box-shadow:
0 10px 22px color-mix(in srgb, var(--ink) 8%, transparent),
0 0 0 1px color-mix(in srgb, var(--signal) 28%, transparent);
transform: scale(1);
}
.process-stage.is-active .process-stage-node {
border-color: color-mix(in srgb, var(--signal) 78%, transparent);
color: var(--signal);
box-shadow:
0 10px 22px color-mix(in srgb, var(--ink) 9%, transparent),
0 0 0 1.5px color-mix(in srgb, var(--signal) 55%, transparent);
}
.process-stage.is-lit .ps-draw,
.process-stage.is-active .ps-draw { stroke-dashoffset: 0; }
.process-stage.is-active .ps-pulse { opacity: 0.45; }
.process-stage.is-arriving .ps-pulse { opacity: 1; animation: process-pulse 720ms cubic-bezier(.2, 1, .35, 1) both; }
.process-stage.is-active .process-stage-badge,
.process-stage--approve.is-lit .process-stage-badge { opacity: 1; transform: none; }
.process-stage--approve.is-active .process-stage-node,
.process-stage--approve.is-lit .process-stage-node {
box-shadow:
0 12px 24px color-mix(in srgb, var(--ink) 10%, transparent),
0 0 0 1.5px color-mix(in srgb, var(--signal) 58%, transparent);
}
.process-stage--ship.is-lit .process-stage-node,
.process-stage--ship.is-active .process-stage-node {
background: #fff;
color: var(--signal);
border-color: color-mix(in srgb, var(--signal) 55%, transparent);
}
.process-stage--ship.is-lit .process-stage-label,
.process-stage--ship.is-active .process-stage-label { color: var(--signal); }
.process-stage:not(.is-revealed) {
opacity: 0.55;
transform: translate(-50%, calc(var(--node) * -0.5 + 8px));
}
.process-stage.is-revealed {
opacity: 1;
filter: none;
transform: translate(-50%, calc(var(--node) * -0.5));
transition:
opacity 560ms cubic-bezier(.22, 1, .36, 1),
transform 560ms cubic-bezier(.22, 1, .36, 1),
color 220ms ease;
}
@media (max-width: 980px) {
.process-stage:not(.is-revealed),
.process-stage.is-revealed {
opacity: 1;
filter: none;
transform: none;
}
}
.process-stage--approve {
--node: clamp(68px, 6.6vw, 88px);
}
.process-stage--approve .process-stage-node {
width: var(--node);
height: var(--node);
}
.process-stage--approve.is-focal .process-stage-node,
.process-stage--approve.is-hot .process-stage-node {
border-color: color-mix(in srgb, var(--signal) 55%, transparent);
color: var(--signal);
box-shadow:
0 16px 34px color-mix(in srgb, var(--ink) 10%, transparent),
0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent);
}
.process-stage--approve.is-focal .process-stage-label {
font-size: clamp(1rem, 1.15vw, 1.12rem);
}
.process-stage--approve.is-focal .process-stage-badge,
.process-stage--approve.is-lit .process-stage-badge {
opacity: 1;
transform: none;
}
.process-orbit {
opacity: 0;
transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
}
#process.is-process-live .process-orbit[data-direction-ring] {
transition-delay: 120ms;
}
.process-stage-rings { display: none; }
.is-process-hover .process-glow-base {
stroke: color-mix(in srgb, var(--ink) 22%, transparent);
transition: stroke 220ms ease;
}
.is-process-hover .process-stage.is-hot .process-stage-node {
border-color: color-mix(in srgb, var(--signal) 62%, transparent);
color: var(--signal);
}
.is-process-hover .process-stage.is-near .process-stage-node {
border-color: color-mix(in srgb, var(--signal) 28%, transparent);
}
.is-process-hover .process-stage.is-hot p {
transform: translateY(-3px);
color: color-mix(in srgb, var(--muted) 70%, var(--ink));
}
.process-stage p {
transition: transform 220ms cubic-bezier(.22, 1, .36, 1), color 220ms ease;
}
.process-bar { display: none !important; }
.process-bar ul {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.process-bar li {
margin: 0;
color: color-mix(in srgb, var(--muted) 92%, transparent);
font-size: 0.8rem;
line-height: 1.4;
}
.process-bar strong {
display: block;
margin-bottom: 4px;
color: var(--ink);
font-family: var(--mono);
font-size: 0.56rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.process-notes {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 24px;
padding: 0 8px;
}
.process-note {
color: color-mix(in srgb, var(--muted) 88%, transparent);
font-family: var(--mono);
font-size: .54rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.process-note--human::before,
.process-note--pipe::before,
.process-note--out::before {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 50%;
background: var(--signal);
vertical-align: middle;
content: "";
}
.taste-process-thread {
position: relative;
z-index: 1;
height: clamp(28px, 3vw, 48px);
margin-top: -8px;
background: var(--paper);
pointer-events: none;
}
.taste-process-thread svg {
display: block;
width: 100%;
height: 100%;
}
.taste-thread-line {
stroke: color-mix(in srgb, var(--signal) 38%, transparent);
stroke-width: 1;
stroke-dasharray: 100;
stroke-dashoffset: 100;
vector-effect: non-scaling-stroke;
}
.taste-thread-node {
fill: var(--paper);
stroke: var(--signal);
stroke-width: 1.5;
}
#compare.compare-story.is-taste-live ~ .taste-process-thread .taste-thread-line,
.taste-process-thread.is-drawn .taste-thread-line {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}
@keyframes process-pulse {
0%, 100% { opacity: .35; transform: scale(.85); }
50% { opacity: 1; transform: scale(1.15); }
}
html[data-skin="nocturne"] #process.process-desk {
background: var(--paper);
}
@media (max-width: 980px) {
#process.process-desk {
padding-block: clamp(40px, 8vw, 56px);
}
#process.process-desk .pipeline-heading {
grid-template-columns: 1fr;
margin-bottom: 18px;
}
#process.process-desk .pipeline-heading h2 {
max-width: 16ch;
font-size: 40px;
}
#process.process-desk .pipeline-intro {
max-width: none;
font-size: clamp(1.02rem, 3.6vw, 1.2rem);
}
.process-rail {
min-height: 0;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0 0 8px;
padding: 4px 0 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: thin;
touch-action: pan-x;
}
.process-glow-svg {
display: none;
}
.process-stages {
position: relative;
inset: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
min-width: max(100%, 680px);
margin: 0;
padding: 6px 8px 8px;
border: 0;
pointer-events: auto;
}
.process-stages::before {
position: absolute;
left: 40px;
right: 40px;
top: 30px;
height: 1px;
background: color-mix(in srgb, var(--signal) 34%, transparent);
content: "";
pointer-events: none;
}
.process-stage,
.process-stage:nth-child(even) {
position: relative;
left: auto !important;
top: auto !important;
width: auto;
min-width: 88px;
flex: 1 0 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "node" "num" "label" "copy" "badge";
justify-items: center;
align-content: start;
column-gap: 0;
row-gap: 4px;
margin: 0;
padding: 0 6px 4px;
text-align: center;
transform: none !important;
opacity: 1 !important;
}
.process-stage::before,
.process-stage:nth-child(even)::before { display: none; }
html.js #process.process-desk .process-stage.reveal-item,
html.js #process.process-desk .process-stage.scan-reveal {
position: relative;
transform: none;
}
.process-stage-node { grid-area: node; width: 48px; height: 48px; transform: scale(1); }
.process-stage--approve .process-stage-node { width: 54px; height: 54px; }
.process-stage .ps-draw { stroke-dashoffset: 0; }
.process-stage-num { grid-area: num; font-size: 0.5rem; }
.process-stage-label { grid-area: label; font-size: 0.78rem; line-height: 1.15; }
.process-stage p {
grid-area: copy;
max-width: 13ch;
font-size: 0.66rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.process-stage-badge {
grid-area: badge;
white-space: normal;
max-width: 14ch;
padding: 4px 7px;
font-size: 0.42rem;
letter-spacing: 0.04em;
line-height: 1.25;
}
.process-bar ul {
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.process-notes {
position: relative;
margin-top: 8px;
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 560px) {
.process-rail { scrollbar-width: none; }
.process-rail::-webkit-scrollbar { display: none; }
.process-stages { min-width: max(100%, 620px); padding-inline: 4px; }
.process-stage,
.process-stage:nth-child(even) { min-width: 80px; padding-inline: 4px; }
.process-stage p { display: none; }
.process-bar li { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
.process-stage,
.process-stage-node,
.process-stage .ps-draw,
.process-stage-badge { transition: none !important; }
.process-stage .ps-draw { stroke-dashoffset: 0; }
.process-stage.is-active .ps-pulse { animation: process-pulse 1.6s ease-in-out infinite; opacity: 1; }
.process-glow-bloom,
.process-glow-line { stroke-dashoffset: 0; }
.process-glow-head,
.process-glow-aura { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
.process-stage:not(.is-revealed) { transform: translate(-50%, calc(var(--node) * -0.5)); }
}
#packs.packs-outcomes {
--signal: var(--accent, #5367ee);
background: radial-gradient(ellipse 55% 40% at 80% 0%, color-mix(in srgb, var(--signal) 6%, transparent), transparent 55%), var(--paper);
color: var(--ink);
padding-block: clamp(72px, 6.5vw, 96px);
overflow: visible;
}
#packs.packs-outcomes > .container {
width: min(100%, calc(var(--max, 1340px) + 2 * var(--gutter, 48px)));
max-width: none;
}
#packs.packs-outcomes .packs-head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.7fr);
gap: clamp(12px, 2vw, 28px);
align-items: start;
margin-bottom: clamp(6px, 0.9vw, 10px);
padding: 0;
border: 0;
}
#packs.packs-outcomes .packs-head .eyebrow { color: var(--signal); margin-bottom: 8px; font-size: var(--type-micro); }
#packs.packs-outcomes .packs-head h2 {
max-width: 16ch;
margin: 0;
font-family: var(--display);
font-size: var(--section-display-size);
font-weight: var(--heading-weight, 400);
letter-spacing: -0.045em;
line-height: 1.02;
}
#packs.packs-outcomes .packs-head-lede {
display: none;
}
#packs .packs-head-led {
position: relative;
inset: auto;
width: auto;
max-width: 34ch;
margin: 0;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0;
border: 0;
box-shadow: none;
background: none;
}
#packs .packs-head-led .taste-stage-led-kicker {
margin: 0;
font: 600 0.8rem var(--body);
color: var(--ink);
}
#packs .packs-head-led .taste-stage-led-copy {
margin: 0;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.4;
}
.outcomes-strip,
.outcomes-scrubline,
.outcomes-hint { display: none !important; }
.outcomes-panel {
--outcomes-panel-h: clamp(420px, 48vw, 560px);
--frame-x: 18px;
--frame-y: 12px;
position: relative;
margin-inline: clamp(-12px, -1.2vw, 0px);
margin-top: 0;
padding: clamp(28px, 3.2vw, 40px) clamp(28px, 3.4vw, 56px) clamp(28px, 3.2vw, 40px);
height: var(--outcomes-panel-h);
min-height: var(--outcomes-panel-h);
max-height: var(--outcomes-panel-h);
border-radius: clamp(24px, 3vw, 30px);
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #fff 4%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, #fff 3%, transparent), transparent 24%),
#07152B;
border: 1px solid color-mix(in srgb, #fff 10%, transparent);
color: #f4f0e7;
box-shadow: 0 28px 70px color-mix(in srgb, var(--ink) 22%, transparent);
overflow: hidden;
}
.outcomes-panel.is-live {
height: var(--outcomes-panel-h);
min-height: var(--outcomes-panel-h);
max-height: var(--outcomes-panel-h);
}
.outcomes-panel::before,
.outcomes-panel::after {
position: absolute;
left: var(--frame-x);
right: var(--frame-x);
height: 1px;
background: color-mix(in srgb, #fff 16%, transparent);
content: "";
pointer-events: none;
}
.outcomes-panel::before { top: var(--frame-y); }
.outcomes-panel::after { bottom: var(--frame-y); }
.outcomes-mark,
.outcomes-cross {
--frame-x: 18px;
--frame-y: 12px;
position: absolute;
z-index: 2;
width: 11px;
height: 11px;
color: transparent;
font-size: 0;
line-height: 0;
pointer-events: none;
opacity: 0.55;
}
.outcomes-mark::before,
.outcomes-mark::after,
.outcomes-cross::before,
.outcomes-cross::after {
position: absolute;
left: 50%;
top: 50%;
background: color-mix(in srgb, #fff 70%, transparent);
content: "";
transform: translate(-50%, -50%);
}
.outcomes-mark::before,
.outcomes-cross::before { width: 11px; height: 1px; }
.outcomes-mark::after,
.outcomes-cross::after { width: 1px; height: 11px; }
.outcomes-mark--tl { top: var(--frame-y); left: var(--frame-x); transform: translate(-50%, -50%); }
.outcomes-mark--tr { top: var(--frame-y); right: var(--frame-x); transform: translate(50%, -50%); }
.outcomes-mark--bl { bottom: var(--frame-y); left: var(--frame-x); transform: translate(-50%, 50%); }
.outcomes-mark--br { bottom: var(--frame-y); right: var(--frame-x); transform: translate(50%, 50%); }
.outcomes-cross--l { top: 50%; left: var(--frame-x); transform: translate(-50%, -50%); }
.outcomes-cross--r { top: 50%; right: var(--frame-x); transform: translate(50%, -50%); }
.outcomes-watermark {
position: absolute;
left: 50%;
top: clamp(26px, 2.6vw, 38px);
margin: 0;
transform: translateX(-50%);
color: color-mix(in srgb, #fff 6%, transparent);
font-family: var(--display);
font-size: clamp(40px, 8vw, 80px);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 1;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.outcomes-scrub,
.outcomes-nav,
.outcomes-panel-meta,
.outcomes-panel-page,
.outcomes-panel-kicker { display: none !important; }
.outcomes-rail {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(14px, 1.4vw, 20px);
padding: clamp(72px, 7vw, 96px) 2px 6px;
height: 100%;
min-height: 0;
max-height: 100%;
overflow: hidden;
align-items: center;
transition: padding-top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#packs.packs-outcomes.is-pack-hovering .outcomes-rail {
padding-top: clamp(48px, 5vw, 72px);
}
.outcomes-strip {
position: absolute;
left: clamp(28px, 3.4vw, 56px);
right: clamp(28px, 3.4vw, 56px);
top: clamp(18px, 1.9vw, 26px);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0;
color: color-mix(in srgb, #fff 62%, transparent);
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
pointer-events: none;
}
.outcomes-strip::before,
.outcomes-strip::after {
flex: 1 1 auto;
height: 1px;
max-width: 22%;
background: color-mix(in srgb, #fff 18%, transparent);
content: "";
}
.outcomes-strip i {
width: 3px;
height: 3px;
border-radius: 50%;
background: color-mix(in srgb, #fff 45%, transparent);
}
.outcomes-counter {
position: absolute;
right: clamp(28px, 3.4vw, 56px);
top: clamp(14px, 1.6vw, 22px);
z-index: 2;
margin: 0;
display: flex;
align-items: baseline;
gap: 6px;
color: #f4f0e7;
font-family: var(--mono);
font-size: 0.92rem;
letter-spacing: 0.08em;
pointer-events: none;
}
.outcomes-counter small {
color: color-mix(in srgb, #fff 42%, transparent);
font-size: 0.7rem;
}
.outcomes-scrubline {
position: absolute;
left: clamp(28px, 3.4vw, 56px);
right: clamp(28px, 3.4vw, 56px);
bottom: clamp(30px, 2.9vw, 40px);
height: 8px;
background:
linear-gradient(90deg, color-mix(in srgb, #fff 22%, transparent), color-mix(in srgb, #fff 22%, transparent)) 0 50% / 100% 1px no-repeat,
repeating-linear-gradient(90deg, color-mix(in srgb, #fff 26%, transparent) 0 1px, transparent 1px 12.5%) 0 0 / 100% 100% no-repeat;
pointer-events: none;
}
.outcomes-scrubline-thumb {
--i: 0;
--n: 4;
position: absolute;
top: 50%;
left: calc(var(--i) / var(--n) * 100%);
width: calc(100% / var(--n));
height: 2px;
transform: translateY(-50%);
border-radius: 2px;
background: var(--signal, #5367ee);
box-shadow: 0 0 12px color-mix(in srgb, var(--signal, #5367ee) 70%, transparent);
opacity: 0.45;
transition: left 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}
.outcomes-panel.is-live .outcomes-scrubline-thumb { opacity: 1; }
.outcomes-hint {
position: absolute;
left: 50%;
bottom: clamp(8px, 0.9vw, 12px);
margin: 0;
display: flex;
align-items: center;
gap: 14px;
transform: translateX(-50%);
color: color-mix(in srgb, #fff 58%, transparent);
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
pointer-events: none;
}
.outcomes-hint span { font-size: 0.9rem; line-height: 1; color: color-mix(in srgb, #fff 45%, transparent); }
.pack-rail-card {
--pack-card-bg: #f6f1e8;
--pack-card-ink: #0b1734;
--pack-card-muted: #5c6577;
--pack-card-line: rgba(11, 23, 52, 0.1);
position: relative;
display: flex;
flex-direction: column;
align-content: start;
align-self: stretch;
gap: 10px;
min-width: 0;
min-height: 100%;
flex: 1 1 0;
padding: 18px 18px 18px;
border-radius: 18px;
background: var(--pack-card-bg);
color: var(--pack-card-ink);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transform: none;
transform-origin: 50% 50%;
overflow: hidden;
transition:
flex-grow var(--ik-expand, 250ms) var(--ik-ease, ease),
height var(--ik-expand, 250ms) var(--ik-ease, ease),
min-height var(--ik-expand, 250ms) var(--ik-ease, ease),
max-height var(--ik-expand, 250ms) var(--ik-ease, ease),
transform var(--ik-expand, 250ms) var(--ik-ease, ease),
box-shadow var(--ik-expand, 250ms) var(--ik-ease, ease),
opacity var(--ik-expand, 250ms) var(--ik-ease, ease);
cursor: pointer;
z-index: 1;
}
.pack-rail-card-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 10px;
}
.pack-rail-card-num {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 100%;
color: color-mix(in srgb, var(--pack-card-ink) 46%, transparent);
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
}
.pack-rail-card-num::after {
width: 26px;
height: 1px;
background: color-mix(in srgb, var(--pack-card-ink) 22%, transparent);
content: "";
}
.pack-rail-card h3 {
margin: 0;
flex: 1 1 auto;
font-family: var(--display);
font-size: clamp(1.3rem, 1.75vw, 1.75rem);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--pack-card-ink);
}
.pack-rail-card-price {
margin: 0;
margin-top: auto;
font-family: var(--display);
font-size: clamp(1.5rem, 2vw, 1.9rem);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 1;
color: var(--pack-card-ink);
}
.pack-rail-card-price em {
display: inline-block;
margin-right: 8px;
color: color-mix(in srgb, var(--pack-card-ink) 55%, transparent);
font-family: var(--mono);
font-style: normal;
font-size: 0.55rem;
letter-spacing: 0.14em;
text-transform: uppercase;
vertical-align: 0.35em;
}
.pack-rail-card-price small {
display: block;
margin-top: 6px;
color: color-mix(in srgb, var(--pack-card-ink) 48%, transparent);
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pack-rail-card-blurb {
margin: 0;
color: var(--pack-card-muted);
font-size: 0.78rem;
line-height: 1.35;
}
.pack-rail-card.is-expanded .pack-rail-card-blurb { display: none; }
.pack-rail-card-visual {
position: relative;
display: block;
min-height: 118px;
max-height: 150px;
border-radius: 12px;
overflow: hidden;
background: color-mix(in srgb, var(--pack-card-ink) 4%, var(--pack-card-bg));
}
.pack-rail-card-visual img {
display: block !important;
width: 100%;
height: 100%;
object-fit: cover;
}
.pack-rail-card-visual--social {
display: grid;
place-items: center;
min-height: 160px;
max-height: 200px;
background: transparent;
overflow: visible;
}
.outcome-frame {
position: absolute;
margin: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
background: #111;
}
.outcome-frame img { aspect-ratio: 4 / 5; width: 84px; height: auto; }
.outcome-frame span {
position: absolute;
left: 6px;
bottom: 6px;
padding: 3px 6px;
border-radius: 999px;
background: rgba(10, 18, 32, 0.72);
color: #fff;
font-family: var(--mono);
font-size: 0.48rem;
letter-spacing: 0.08em;
}
.outcome-frame--a { left: 8%; top: 10%; transform: rotate(-8deg); z-index: 1; }
.outcome-frame--b { right: 10%; top: 6%; transform: rotate(7deg); z-index: 3; }
.outcome-frame--b img { width: 98px; }
.outcome-frame--c { left: 28%; bottom: 0; transform: rotate(-2deg); z-index: 2; }
.outcome-frame--c img { width: 90px; }
.pack-rail-card-visual--grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
padding: 4px;
min-height: 160px;
max-height: 200px;
}
.pack-rail-card-visual--grid img { aspect-ratio: 1; border-radius: 6px; }
.pack-rail-card-visual--film {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 16px 8px;
min-height: 150px;
max-height: 190px;
border-radius: 8px;
background: #0d1118;
}
.pack-rail-card-visual--film::before,
.pack-rail-card-visual--film::after {
position: absolute;
left: 10px;
right: 10px;
height: 5px;
border-radius: 1px;
background: repeating-linear-gradient(90deg, #3a404c 0 7px, transparent 7px 16px);
content: "";
pointer-events: none;
}
.pack-rail-card-visual--film::before { top: 5px; }
.pack-rail-card-visual--film::after { bottom: 5px; }
.pack-rail-card-visual--film img {
aspect-ratio: 16 / 10;
align-self: center;
border-radius: 3px;
filter: grayscale(0.35) contrast(1.05);
}
.pack-rail-card-visual--wire {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
min-height: 160px;
max-height: 200px;
background: linear-gradient(180deg, #c7cacd 0%, #c3c6ca 55%, #c0c3c7 100%);
color: color-mix(in srgb, var(--pack-card-ink) 55%, transparent);
background:
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 60%),
color-mix(in srgb, var(--pack-card-ink) 3%, var(--pack-card-bg));
}
.pack-rail-card-visual--wire img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1.3);
transform-origin: center;
opacity: 1;
filter: none;
}
.pack-rail-card-visual--wire svg {
position: relative;
z-index: 1;
width: min(58%, 110px);
height: auto;
color: #f6f1e8;
mix-blend-mode: difference;
}
.pack-rail-card-detail {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
gap: 10px;
align-content: end;
margin: 0;
padding: 18px;
border-radius: inherit;
background:
linear-gradient(
180deg,
transparent 0%,
transparent 42%,
color-mix(in srgb, var(--pack-card-bg) 40%, transparent) 50%,
var(--pack-card-bg) 58%
);
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition:
opacity var(--ik-expand, 250ms) var(--ik-ease, ease),
transform var(--ik-expand, 250ms) var(--ik-ease, ease);
}
.pack-rail-card-detail[hidden] {
display: grid !important;
opacity: 0;
pointer-events: none;
}
.pack-rail-card.is-expanded .pack-rail-card-detail {
opacity: 1;
pointer-events: auto;
transform: none;
}
.pack-rail-card-stats {
list-style: none;
margin: 0;
padding: 10px 0 12px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--pack-card-line);
border-bottom: 1px solid var(--pack-card-line);
}
.pack-rail-card-stats li {
display: grid;
justify-items: center;
gap: 6px;
padding: 2px 6px;
text-align: center;
color: var(--pack-card-ink);
}
.pack-rail-card-stats li + li { border-left: 1px solid var(--pack-card-line); }
.pack-rail-card-stats svg {
width: 26px;
height: 26px;
color: color-mix(in srgb, var(--pack-card-ink) 70%, transparent);
}
.pack-rail-card-stats span {
font-family: var(--mono);
font-size: 0.56rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--pack-card-ink) 68%, transparent);
}
.pack-rail-card-stats strong {
font-weight: 600;
color: var(--pack-card-ink);
}
.pack-rail-card-detail p,
.pack-rail-card-note {
margin: 0;
color: var(--pack-card-muted);
font-size: 0.76rem;
line-height: 1.4;
}
.pack-rail-card-note {
padding-top: 8px;
border-top: 1px solid var(--pack-card-line);
font-size: 0.7rem;
}
.pack-rail-card-facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.pack-rail-card-facts li {
display: grid;
gap: 2px;
padding: 8px 10px;
border-radius: 10px;
background: color-mix(in srgb, var(--pack-card-ink) 4%, var(--pack-card-bg));
color: var(--pack-card-muted);
font-size: 0.72rem;
line-height: 1.35;
}
.pack-rail-card-facts strong {
color: var(--pack-card-ink);
font-family: var(--mono);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#packs.packs-outcomes .pack-controls { display: grid; gap: 10px; }
#packs.packs-outcomes .pack-slider {
display: grid;
gap: 6px;
color: var(--pack-card-ink);
font-size: 0.8rem;
}
#packs.packs-outcomes .pack-slider span {
display: flex;
justify-content: space-between;
gap: 10px;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#packs.packs-outcomes .pack-slider strong {
font-family: var(--display);
font-size: 0.92rem;
letter-spacing: -0.03em;
text-transform: none;
color: var(--pack-card-ink);
}
#packs.packs-outcomes .pack-slider input[type="range"] {
width: 100%;
accent-color: var(--pack-card-ink);
cursor: pointer;
touch-action: pan-y;
}
.pack-rail-card-cta {
width: 100%;
margin-top: 2px;
justify-content: center;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.7rem;
}
#packs.packs-outcomes.is-pack-hovering .pack-rail-card.is-dimmed {
flex-grow: 0.72;
align-self: flex-end;
transform: none;
opacity: 0.9;
z-index: 1;
overflow: hidden;
}
#packs.packs-outcomes .pack-rail-card.is-expanded,
#packs.packs-outcomes .pack-rail-card:focus-within {
flex-grow: 1.06;
flex-basis: 0;
align-self: center;
height: auto;
min-height: 0;
max-height: 92%;
transform: translateY(-2px);
transform-origin: center center;
z-index: 4;
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.28),
0 0 0 1px color-mix(in srgb, var(--signal) 18%, transparent);
}
.pack-rail-card::before {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 46%;
border-radius: 0 2px 2px 0;
background: linear-gradient(180deg, var(--signal, #5367ee), transparent);
opacity: 0;
transition: opacity 320ms ease;
content: "";
pointer-events: none;
}
.pack-rail-card.is-expanded::before { opacity: 1; }
.pack-rail-card.is-expanded .pack-rail-card-head { padding-right: 34%; }
.pack-rail-card.is-expanded .pack-rail-card-price {
position: absolute;
top: 18px;
right: 18px;
margin-top: 0;
text-align: right;
}
.pack-rail-card.is-expanded .pack-rail-card-visual {
position: relative;
z-index: 1;
flex-shrink: 0;
margin-top: 2px;
overflow: visible;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail {
position: relative;
inset: auto;
z-index: 2;
flex: 1 0 auto;
display: grid;
gap: 10px;
align-content: start;
margin: 0;
padding: 0 18px 18px;
background: var(--pack-card-bg);
opacity: 1;
pointer-events: auto;
transform: none;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail[hidden] {
display: none !important;
}
.outcomes-strip,
.outcomes-scrubline,
.outcomes-hint { display: none !important; }
#packs.packs-outcomes.is-coarse-pointer .pack-rail-card.is-expanded {
flex: 1 1 100%;
transform: none;
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.26);
}
#packs.packs-outcomes.is-coarse-pointer.is-pack-hovering .pack-rail-card.is-dimmed {
display: none;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-controls {
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-controls:has(label:only-child) {
grid-template-columns: 1fr;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-note { display: none; }
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual {
min-height: 96px;
max-height: 112px;
overflow: visible;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--social {
min-height: 104px;
max-height: 120px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded {
padding-top: 16px;
padding-bottom: 14px;
gap: 8px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail {
gap: 8px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-stats {
padding: 6px 0 8px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-stats li {
gap: 4px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-cta {
min-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
flex-shrink: 0;
min-height: 88px;
max-height: 104px;
gap: 3px;
padding: 3px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--grid img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
opacity: 1;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--film,
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-visual--wire {
min-height: 120px;
max-height: 140px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-facts {
grid-template-columns: 1fr 1fr 1fr;
}
#packs.packs-outcomes .pack-policy,
#packs.packs-outcomes .catalogue-program { display: none !important; }
html[data-skin="nocturne"] #packs.packs-outcomes {
background: var(--paper);
}
html[data-skin="nocturne"] #packs.packs-outcomes .outcomes-panel {
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #fff 5%, transparent), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 24%),
#0a1a33;
border-color: color-mix(in srgb, #fff 14%, transparent);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
@media (max-width: 980px) {
#packs.packs-outcomes .packs-head { grid-template-columns: 1fr; }
#packs.packs-outcomes .packs-head-lede { max-width: none; }
.outcomes-panel {
margin-inline: 0;
padding: 56px 12px 48px;
}
.outcomes-strip { left: 30px; right: 30px; top: 18px; font-size: 0.52rem; gap: 6px 10px; flex-wrap: wrap; letter-spacing: 0.12em; }
.outcomes-strip::before, .outcomes-strip::after { display: none; }
.outcomes-counter { right: 30px; top: auto; bottom: 8px; font-size: 0.78rem; }
.outcomes-hint { left: 30px; transform: none; }
.outcomes-scrubline { left: 12px; right: 12px; bottom: 26px; }
.outcomes-rail { min-height: 0; }
.outcomes-rail {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 2px 2px 16px;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
perspective: none;
overscroll-behavior-x: contain;
}
.pack-rail-card {
flex: 0 0 min(82vw, 300px) !important;
scroll-snap-align: center;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
.pack-rail-card.is-expanded {
flex-basis: min(88vw, 340px) !important;
}
.pack-rail-card.is-expanded .pack-rail-card-price { position: static; text-align: left; margin-top: auto; }
.pack-rail-card.is-expanded .pack-rail-card-head { padding-right: 0; }
#packs.packs-outcomes.is-pack-hovering .pack-rail-card.is-dimmed {
display: flex;
opacity: 0.92;
flex: 0 0 min(72vw, 260px) !important;
}
.outcomes-watermark { font-size: 80px; opacity: 0.9; }
.process-notes { position: relative; margin-top: 12px; padding: 0; }
.process-stage:not(.is-revealed) { opacity: 1; transform: none; }
.taste-process-thread { display: none; }
}
@media (max-width: 640px) {
.outcomes-panel { padding: 52px 8px 44px; border-radius: 22px; }
.outcomes-watermark { top: 26px; }
.outcomes-cross { display: none; }
.pack-rail-card { padding: 12px; gap: 8px; }
.pack-rail-card-cta { min-height: 44px; }
#packs.packs-outcomes .pack-slider input[type="range"] { min-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.pack-rail-card { transition: none !important; }
.process-stage:not(.is-revealed) { opacity: 1; }
.process-stage.is-active .ps-pulse { animation: process-pulse 1.6s ease-in-out infinite; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 981px) {
.process-stage:not(.is-revealed) { transform: translate(-50%, calc(var(--node) * -0.5)); }
}
#process.process-desk {
background: #F7F8FA !important;
}
html[data-skin="nocturne"] #process.process-desk {
background: var(--paper) !important;
}
#packs .pack-rail-card:not(:hover):not(:focus-within):not(.is-expanded) .pack-rail-card-visual {
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
}
@media (max-width: 1339px) {
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card-stats,
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card[data-pack="interactive"] .pack-rail-card-stats {
grid-template-columns: minmax(0, 1fr);
gap: 7px;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card-stats li {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
justify-items: start;
gap: 9px;
padding: 0;
text-align: left;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card-stats li + li {
border-left: 0;
}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card-stats svg {
width: 18px;
height: 18px;
}
}
#packs .pack-rail-card[data-pack="interactive"] .pack-rail-card-stats {
grid-template-columns: repeat(2, 1fr);
}
#packs.packs-outcomes .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts,
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card[data-pack="interactive"].is-expanded .pack-rail-card-facts {
grid-template-columns: minmax(0, 1fr);
gap: 3px;
align-items: stretch;
}
#packs.packs-outcomes .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts li {
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
justify-items: start;
gap: 7px;
padding: 2px 8px;
line-height: 1.25;
text-align: left;
}
#packs.packs-outcomes .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts li {
align-content: center;
justify-items: center;
text-align: center;
}
:root {
--pr-cast: 11 23 52;
}
html[data-skin="nocturne"] {
--pr-cast: 0 0 0;
}
#process-radial.process-radial {
--pr-ease: cubic-bezier(0.22, 1, 0.36, 1);
--pr-node: 68px;
--pr-signal: var(--accent, #3468ac);
--pr-mx: 0;
--pr-my: 0;
--pr-scroll: 0px;
position: relative;
overflow-x: clip;
overflow-y: visible;
padding-block: clamp(56px, 6vw, 88px) clamp(28px, 3vw, 40px);
background: var(--paper, #F7F8FA);
color: var(--ink);
scroll-margin-top: 88px;
}
#process-radial .pr-shell {
position: relative;
}
#process-radial .pr-heading {
max-width: 46rem;
margin: 0 0 clamp(8px, 1.2vw, 18px);
}
#process-radial .pr-heading .eyebrow {
color: var(--pr-signal);
margin: 0 0 8px;
font-size: var(--type-micro);
}
#process-radial .pr-heading h2 {
max-width: 16ch;
margin: 0;
font-family: var(--display);
font-size: var(--section-display-size);
font-weight: var(--heading-weight, 400);
letter-spacing: -0.045em;
line-height: 0.94;
text-wrap: balance;
}
#process-radial .pr-heading h2 em {
font-style: italic;
}
#process-radial .pr-lede {
max-width: 46ch;
margin: 14px 0 0;
color: var(--muted);
font-family: var(--body);
font-size: var(--type-body);
line-height: 1.85;
}
#process-radial .pr-board {
position: relative;
isolation: isolate;
min-height: 0;
max-height: 400px;
margin-top: clamp(8px, 0.6vw, 16px);
perspective: 1600px;
}
#process-radial .pr-desk {
position: relative;
width: 100%;
min-height: inherit;
aspect-ratio: 1200 / 720;
transform: rotateX(calc(var(--pr-my) * -0.4deg)) rotateY(calc(var(--pr-mx) * 0.6deg));
transform-style: preserve-3d;
}
#process-radial .pr-svg-desk,
#process-radial .pr-svg-mobile {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
#process-radial .pr-svg-mobile {
display: none;
}
#process-radial .pr-guides {
fill: none;
stroke: color-mix(in srgb, var(--ink) 11%, transparent);
stroke-width: 1;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
transform: translate3d(0, calc(var(--pr-scroll) * 0.45), 0);
}
#process-radial .pr-guide--mid {
stroke: color-mix(in srgb, var(--ink) 8%, transparent);
}
#process-radial .pr-guide--inner {
stroke: color-mix(in srgb, var(--ink) 6%, transparent);
}
#process-radial .pr-ticks {
fill: none;
stroke: color-mix(in srgb, var(--ink) 14%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
#process-radial .pr-anchor {
fill: var(--pr-signal);
opacity: 0.42;
}
#process-radial .pr-well-layer {
transform: translate3d(
calc(var(--pr-mx) * 2px),
calc(var(--pr-scroll) * 0.95 + var(--pr-my) * 3px),
0
);
}
#process-radial .pr-topo {
fill: none;
stroke: color-mix(in srgb, var(--ink) 13%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
#process-radial .pr-topo-mesh {
stroke: color-mix(in srgb, var(--ink) 8%, transparent);
}
#process-radial .pr-well-edge {
fill: none;
stroke: color-mix(in srgb, var(--ink) 12%, transparent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
#process-radial .pr-base {
fill: none;
stroke: color-mix(in srgb, var(--ink) 16%, transparent);
stroke-width: 1.15;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
#process-radial .pr-active {
fill: none;
stroke: var(--pr-signal);
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1 10000;
stroke-dashoffset: 1;
opacity: 0;
}
#process-radial .pr-hover-seg {
fill: none;
stroke: var(--pr-signal);
stroke-width: 1.4;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
opacity: 0;
transition: opacity 180ms ease;
}
#process-radial.is-previewing .pr-hover-seg {
opacity: 0.45;
}
#process-radial.is-live .pr-active {
opacity: 1;
}
#process-radial.is-resetting .pr-active {
opacity: 0;
transition: opacity 520ms var(--pr-ease);
}
#process-radial .pr-head {
fill: var(--pr-signal);
stroke: color-mix(in srgb, var(--paper) 72%, #fff);
stroke-width: 0.7;
opacity: 0;
}
#process-radial .pr-well-copy {
position: absolute;
left: 50%;
top: 59.5%;
z-index: 1;
width: min(220px, 34%);
transform: translate(-50%, -50%) translate3d(
calc(var(--pr-mx) * 2px),
calc(var(--pr-scroll) * 0.95 + var(--pr-my) * 3px),
0
);
text-align: center;
pointer-events: none;
}
#process-radial .pr-well-copy span {
display: block;
color: color-mix(in srgb, var(--ink) 55%, transparent);
font-family: var(--mono);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.28em;
line-height: 1;
text-transform: uppercase;
}
#process-radial .pr-well-copy span::before,
#process-radial .pr-well-copy span::after {
display: block;
width: 42px;
height: 1px;
margin: 8px auto;
background: color-mix(in srgb, var(--ink) 16%, transparent);
content: "";
}
#process-radial .pr-well-copy strong {
display: block;
margin-top: 2px;
color: color-mix(in srgb, var(--ink) 72%, var(--pr-signal));
font-family: var(--mono);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.22em;
line-height: 1.35;
text-transform: uppercase;
}
#process-radial .pr-steps {
position: absolute;
inset: 0;
z-index: 3;
margin: 0;
padding: 0;
list-style: none;
}
#process-radial .pr-step {
--pr-on: 0;
position: absolute;
left: var(--x, 50%);
top: var(--y, 50%);
width: 0;
height: 0;
color: var(--ink);
}
#process-radial .pr-hit {
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: grid;
place-items: center;
width: var(--pr-node);
height: var(--pr-node);
padding: 0;
border: 0;
background: transparent;
transform: translate(-50%, -50%);
cursor: pointer;
}
#process-radial .pr-step[data-pr-step="3"] {
--pr-node: 74px;
}
#process-radial .pr-node {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 50%;
background:
linear-gradient(165deg,
color-mix(in srgb, var(--surface) 100%, #fff) 0%,
color-mix(in srgb, var(--paper) 78%, var(--surface)) 100%);
box-shadow:
0 14px 28px rgb(var(--pr-cast) / 0.06),
0 3px 8px rgb(var(--pr-cast) / 0.07),
inset 0 1px 0 rgb(255 255 255 / 0.72);
color: color-mix(in srgb, var(--ink) 55%, var(--pr-signal));
transform: translateY(0) scale(1);
transition:
transform 420ms var(--pr-ease),
border-color 280ms ease,
color 280ms ease,
box-shadow 280ms ease,
background 280ms ease;
}
#process-radial .pr-icon {
width: 58%;
height: 58%;
overflow: visible;
transform-origin: 50% 50%;
transform-box: fill-box;
}
#process-radial .pr-icon .ps-pulse {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
}
#process-radial .pr-step.is-active .ps-pulse,
#process-radial .pr-step.is-focus .ps-pulse {
opacity: 0.4;
}
#process-radial .pr-copy {
position: absolute;
z-index: 1;
width: 13.6rem;
pointer-events: none;
}
#process-radial .pr-num {
display: block;
color: color-mix(in srgb, var(--ink) calc(38% + var(--pr-on) * 22%), transparent);
font-family: var(--mono);
font-size: var(--type-meta);
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
transition: color 280ms ease;
}
#process-radial .pr-title {
display: block;
margin-top: 5px;
color: color-mix(in srgb, var(--ink) calc(72% + var(--pr-on) * 28%), transparent);
font-family: var(--body);
font-size: 0.98rem;
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.1;
transition: color 280ms ease;
}
#process-radial .pr-copy p {
margin: 6px 0 0;
color: color-mix(in srgb, var(--muted) calc(78% + var(--pr-on) * 22%), var(--ink));
font-family: var(--body);
font-size: 0.78rem;
line-height: 1.38;
transition: color 280ms ease;
}
#process-radial .pr-step[data-place="bl"] .pr-copy {
top: 40px;
left: 10px;
width: 12.8rem;
text-align: left;
}
#process-radial .pr-step[data-place="l"] .pr-copy {
left: 42px;
bottom: 36px;
width: 12.2rem;
text-align: left;
}
#process-radial .pr-step[data-place="tl"] .pr-copy {
right: 22px;
bottom: 44px;
width: 13.4rem;
text-align: right;
}
#process-radial .pr-step[data-place="t"] .pr-copy {
bottom: 50px;
left: 50%;
width: 15.5rem;
transform: translateX(-50%);
text-align: center;
}
#process-radial .pr-step[data-place="tr"] .pr-copy {
left: 22px;
bottom: 44px;
width: 13.4rem;
text-align: left;
}
#process-radial .pr-step[data-place="r"] .pr-copy {
right: 42px;
bottom: 36px;
width: 12.2rem;
text-align: right;
}
#process-radial .pr-step[data-place="br"] .pr-copy {
top: 40px;
right: 10px;
width: 13.2rem;
text-align: right;
}
#process-radial .pr-approve {
display: block;
margin-top: 7px;
color: var(--pr-signal);
font-family: var(--mono);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0;
transform: translateY(3px);
transition: opacity 280ms ease, transform 280ms var(--pr-ease);
}
#process-radial .pr-step--approve .pr-node::after {
position: absolute;
inset: -7px;
border: 1px solid color-mix(in srgb, var(--pr-signal) 0%, transparent);
border-radius: 50%;
content: "";
pointer-events: none;
transition: border-color 320ms ease, opacity 320ms ease;
}
#process-radial .pr-step.is-lit {
--pr-on: 0.28;
}
#process-radial .pr-step.is-recent {
--pr-on: 0.46;
}
#process-radial .pr-step.is-active,
#process-radial .pr-step.is-focus,
#process-radial .pr-step.is-preview {
--pr-on: 1;
}
#process-radial .pr-step.is-lit .pr-node,
#process-radial .pr-step.is-recent .pr-node {
border-color: color-mix(in srgb, var(--pr-signal) 22%, var(--ink) 8%);
color: color-mix(in srgb, var(--ink) 42%, var(--pr-signal));
}
#process-radial .pr-step.is-active .pr-node,
#process-radial .pr-step.is-focus .pr-node {
border-color: color-mix(in srgb, var(--pr-signal) 48%, transparent);
background:
linear-gradient(165deg,
color-mix(in srgb, var(--surface) 100%, #fff) 0%,
color-mix(in srgb, var(--paper) 86%, var(--pr-signal)) 100%);
box-shadow:
0 16px 32px rgb(var(--pr-cast) / 0.08),
0 4px 10px rgb(var(--pr-cast) / 0.1),
inset 0 1px 0 rgb(255 255 255 / 0.84);
color: var(--pr-signal);
transform: translateY(-2px) scale(1.03);
}
#process-radial .pr-step.is-active .pr-icon .ps-draw,
#process-radial .pr-step.is-focus .pr-icon .ps-draw {
opacity: 1;
}
#process-radial .pr-step.is-arriving .pr-node {
animation: pr-arrive 460ms var(--pr-ease) both;
}
#process-radial .pr-step.is-preview .pr-node {
transform: translateY(-1px) scale(1.05);
box-shadow:
0 16px 30px rgb(var(--pr-cast) / 0.08),
0 4px 10px rgb(var(--pr-cast) / 0.1),
inset 0 1px 0 rgb(255 255 255 / 0.8);
}
#process-radial .pr-step--approve.is-active .pr-node::after,
#process-radial .pr-step--approve.is-focus .pr-node::after {
border-color: color-mix(in srgb, var(--pr-signal) 42%, transparent);
}
#process-radial .pr-step--approve.is-active .pr-approve,
#process-radial .pr-step--approve.is-focus .pr-approve {
opacity: 0.72;
transform: none;
}
#process-radial .pr-hit:focus-visible {
outline: 0;
}
#process-radial .pr-hit:focus-visible .pr-node {
border-color: var(--pr-signal);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--pr-signal) 22%, transparent),
0 14px 28px rgb(var(--pr-cast) / 0.08);
}
#process-radial .pr-step.is-arriving[data-pr-icon="intake"] .pr-icon {
animation: pr-icon-intake 480ms var(--pr-ease);
}
#process-radial .pr-step.is-arriving[data-pr-icon="research"] .pr-icon {
animation: pr-icon-research 480ms var(--pr-ease);
}
#process-radial .pr-step.is-arriving[data-pr-icon="direction"] .pr-icon {
animation: pr-icon-direction 520ms var(--pr-ease);
}
#process-radial .pr-step.is-arriving[data-pr-icon="generate"] .pr-icon {
animation: pr-icon-generate 500ms var(--pr-ease);
}
#process-radial .pr-step.is-arriving[data-pr-icon="judge"] .pr-icon {
animation: pr-icon-judge 520ms var(--pr-ease);
}
#process-radial .pr-step.is-arriving[data-pr-icon="iterate"] .pr-icon {
animation: pr-icon-iterate 560ms var(--pr-ease);
}
#process-radial .pr-step.is-arriving[data-pr-icon="ship"] .pr-icon {
animation: pr-icon-ship 500ms var(--pr-ease);
}
@keyframes pr-arrive {
0% { transform: translateY(0) scale(1); }
42% { transform: translateY(-3px) scale(1.06); }
100% { transform: translateY(-2px) scale(1.03); }
}
@keyframes pr-icon-intake {
0%, 100% { transform: translateY(0); }
45% { transform: translateY(-1px); }
}
@keyframes pr-icon-research {
0%, 100% { transform: rotate(0deg) scale(1); }
40% { transform: rotate(-2.5deg) scale(1.05); }
}
@keyframes pr-icon-direction {
0% { transform: rotate(0deg); }
55% { transform: rotate(8deg); }
100% { transform: rotate(0deg); }
}
@keyframes pr-icon-generate {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.08); }
}
@keyframes pr-icon-judge {
0% { transform: rotate(0deg); }
55% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
@keyframes pr-icon-iterate {
0% { transform: rotate(0deg); }
60% { transform: rotate(20deg); }
100% { transform: rotate(0deg); }
}
@keyframes pr-icon-ship {
0%, 100% { transform: translate(0, 0); }
45% { transform: translate(2px, -2px); }
}
html.js #process-radial.is-pending .pr-heading > * {
opacity: 0;
transform: translateY(10px);
}
html.js #process-radial.is-in .pr-heading > * {
opacity: 1;
transform: none;
transition: opacity 620ms var(--pr-ease), transform 620ms var(--pr-ease);
}
html.js #process-radial.is-in .pr-heading .eyebrow { transition-delay: 0ms; }
html.js #process-radial.is-in .pr-heading h2 { transition-delay: 70ms; }
html.js #process-radial.is-in .pr-heading .pr-lede { transition-delay: 160ms; }
html.js #process-radial.is-pending .pr-guides,
html.js #process-radial.is-pending .pr-well-edge,
html.js #process-radial.is-pending .pr-base,
html.js #process-radial.is-pending .pr-topo {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
html.js #process-radial.is-in .pr-guides,
html.js #process-radial.is-in .pr-well-edge,
html.js #process-radial.is-in .pr-base,
html.js #process-radial.is-in .pr-topo {
stroke-dashoffset: 0;
transition: stroke-dashoffset 900ms var(--pr-ease);
}
html.js #process-radial.is-pending .pr-well-copy,
html.js #process-radial.is-pending .pr-anchor,
html.js #process-radial.is-pending .pr-ticks {
opacity: 0;
}
html.js #process-radial.is-in .pr-well-copy {
opacity: 1;
transition: opacity 700ms 220ms ease;
}
html.js #process-radial.is-in .pr-anchor {
opacity: 0.42;
transition: opacity 700ms 220ms ease;
}
html.js #process-radial.is-in .pr-ticks {
opacity: 1;
transition: opacity 700ms 220ms ease;
}
html.js #process-radial.is-pending .pr-step {
opacity: 0;
}
html.js #process-radial.is-pending .pr-hit {
transform: translate(-50%, -50%) translateY(4px) scale(0.94);
}
html.js #process-radial.is-in .pr-step {
opacity: 1;
transition: opacity 480ms calc(280ms + var(--i, 0) * 64ms) var(--pr-ease);
}
html.js #process-radial.is-in .pr-hit {
transform: translate(-50%, -50%);
transition: transform 480ms calc(280ms + var(--i, 0) * 64ms) var(--pr-ease);
}
@media (max-width: 1180px) and (min-width: 981px) {
#process-radial .pr-copy {
width: 11.6rem;
}
#process-radial .pr-step[data-place="t"] .pr-copy {
width: 13.2rem;
}
#process-radial .pr-copy p {
font-size: 0.72rem;
}
#process-radial .pr-title {
font-size: 0.9rem;
}
#process-radial {
--pr-node: 62px;
}
#process-radial .pr-step[data-pr-step="3"] {
--pr-node: 68px;
}
}
@media (max-width: 980px) {
#process-radial.process-radial {
padding-block: clamp(40px, 8vw, 56px);
overflow: visible;
}
#process-radial .pr-heading {
margin-bottom: 8px;
}
#process-radial .pr-heading h2 {
max-width: 14ch;
font-size: 40px;
}
#process-radial .pr-lede {
max-width: none;
}
#process-radial .pr-board {
min-height: 0;
max-height: 400px;
margin-top: 16px;
perspective: none;
overflow-x: clip;
max-width: 100%;
}
#process-radial .pr-desk {
min-height: 0;
aspect-ratio: auto;
transform: none;
}
#process-radial .pr-svg-desk,
#process-radial .pr-well-copy {
display: none;
}
#process-radial .pr-svg-mobile {
display: block;
}
#process-radial .pr-steps {
position: relative;
display: flex;
flex-direction: column;
gap: clamp(6px, 1.6vw, 14px);
padding: 8px 0 18px;
}
#process-radial .pr-step {
position: relative;
left: auto;
top: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--pr-node) minmax(0, 1fr);
column-gap: 14px;
align-items: center;
width: 100%;
height: auto;
min-height: 118px;
}
#process-radial .pr-hit {
position: relative;
left: auto;
top: auto;
grid-row: 1;
transform: none;
justify-self: center;
}
#process-radial .pr-copy {
position: relative;
width: auto;
max-width: 100%;
min-width: 0;
transform: none;
}
#process-radial .pr-step[data-place] .pr-copy {
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
max-width: 100%;
transform: none;
}
#process-radial .pr-step:nth-child(odd) .pr-hit {
grid-column: 3;
}
#process-radial .pr-step:nth-child(odd) .pr-copy {
grid-column: 1;
grid-row: 1;
justify-self: stretch;
text-align: right;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
#process-radial .pr-step:nth-child(even) .pr-hit {
grid-column: 1;
}
#process-radial .pr-step:nth-child(even) .pr-copy {
grid-column: 3;
grid-row: 1;
justify-self: stretch;
text-align: left;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
#process-radial {
--pr-node: 58px;
}
#process-radial .pr-step[data-pr-step="3"] {
--pr-node: 64px;
}
#process-radial .pr-title {
font-size: 1rem;
}
#process-radial .pr-copy p {
font-size: 0.82rem;
line-height: 1.4;
}
html.js #process-radial.is-pending .pr-hit,
html.js #process-radial.is-in .pr-hit {
transform: none;
}
}
@media (max-width: 430px) {
#process-radial .pr-step {
column-gap: 10px;
min-height: 108px;
}
#process-radial .pr-copy p {
font-size: 0.78rem;
}
}
@media (prefers-reduced-motion: reduce) {
#process-radial .pr-desk,
#process-radial .pr-guides,
#process-radial .pr-well-layer {
transform: none !important;
}
#process-radial .pr-well-copy {
transform: translate(-50%, -50%) !important;
}
html.js #process-radial.is-pending .pr-heading > *,
html.js #process-radial.is-pending .pr-step,
html.js #process-radial.is-pending .pr-well-copy,
html.js #process-radial.is-in .pr-heading > *,
html.js #process-radial.is-in .pr-step {
opacity: 1;
transform: none;
transition: none;
}
html.js #process-radial.is-pending .pr-hit,
html.js #process-radial.is-in .pr-hit {
transform: translate(-50%, -50%);
transition: none;
}
html.js #process-radial.is-pending .pr-guides,
html.js #process-radial.is-pending .pr-base,
html.js #process-radial.is-pending .pr-topo,
html.js #process-radial.is-pending .pr-well-edge {
stroke-dashoffset: 0;
}
#process-radial .pr-step.is-arriving .pr-node,
#process-radial .pr-step.is-arriving .pr-icon {
animation: none;
}
@media (max-width: 980px) {
html.js #process-radial.is-pending .pr-hit,
html.js #process-radial.is-in .pr-hit {
transform: none;
}
}
}
html[data-skin="nocturne"] #process-radial.process-radial {
background: var(--paper);
}
html[data-skin="nocturne"] #process-radial .pr-node {
background:
linear-gradient(165deg,
color-mix(in srgb, var(--surface) 92%, #fff) 0%,
color-mix(in srgb, var(--paper) 80%, var(--surface)) 100%);
box-shadow:
0 14px 28px rgb(var(--pr-cast) / 0.28),
0 3px 8px rgb(var(--pr-cast) / 0.22),
inset 0 1px 0 rgb(255 255 255 / 0.08);
}
#process-radial .pr-needle { pointer-events: none; }
#process-radial .pr-needle line {
stroke: url(#prNeedleGradient);
stroke-linecap: round;
}
#process-radial .pr-needle-aura {
stroke-width: 7;
opacity: .28;
filter: blur(3px);
}
#process-radial .pr-needle-core {
stroke-width: 2.2;
filter: drop-shadow(0 0 3px rgb(75 151 234 / .28));
}
#process-radial .pr-needle-hub {
fill: var(--paper);
stroke: color-mix(in srgb, var(--pr-signal) 35%, transparent);
stroke-width: 1;
}
#process-radial .pr-needle-pin { fill: var(--pr-signal); }
@media (min-width: 981px) {
#process-radial .pr-step[data-place="l"] .pr-copy {
left: auto; right: 48px; bottom: -28px; width: 148px; text-align: right;
}
#process-radial .pr-step[data-place="r"] .pr-copy {
right: auto; left: 48px; bottom: -28px; width: 148px; text-align: left;
}
#process-radial .pr-well-layer,
#process-radial .pr-svg-desk .pr-head { display: none; }
#process-radial .pr-well-copy { top: 94%; }
#process-radial.is-live .pr-svg-desk .pr-active { opacity: .24; }
}
@media (prefers-reduced-motion: reduce) {
#process-radial .pr-needle { display: none; }
}
#process-radial .pr-gauge-lift { fill: #16233d; fill-opacity: 0.08; }
#process-radial .pr-rail-cast { fill: #16233d; fill-opacity: 0.19; }
#process-radial .pr-plinth-cast { fill: #16233d; fill-opacity: 0.24; }
#process-radial .pr-tube-in { stop-color: #7d8da4; stop-opacity: 0.5; }
#process-radial .pr-tube-low { stop-color: #b2c0d0; stop-opacity: 0.6; }
#process-radial .pr-tube-crest { stop-color: #f8fafd; stop-opacity: 0.95; }
#process-radial .pr-tube-high { stop-color: #ccd7e3; stop-opacity: 0.82; }
#process-radial .pr-tube-out { stop-color: #90a1b6; stop-opacity: 0.58; }
#process-radial .pr-key-lit { stop-color: #ffffff; stop-opacity: 0.5; }
#process-radial .pr-key-mid { stop-color: #ffffff; stop-opacity: 0; }
#process-radial .pr-key-dark { stop-color: #2b3d57; stop-opacity: 0.22; }
#process-radial .pr-plinth-lit { stop-color: #ffffff; stop-opacity: 0.98; }
#process-radial .pr-plinth-hi { stop-color: #e7ecf3; stop-opacity: 0.95; }
#process-radial .pr-plinth-mid { stop-color: #bcc7d5; stop-opacity: 0.92; }
#process-radial .pr-plinth-dark { stop-color: #74849b; stop-opacity: 0.8; }
#process-radial .pr-hub-lit { stop-color: #ffffff; }
#process-radial .pr-hub-mid { stop-color: #eef1f6; }
#process-radial .pr-hub-dark { stop-color: #c2ccda; }
html[data-skin="nocturne"] #process-radial .pr-gauge-lift { fill: #000; fill-opacity: 0.5; }
html[data-skin="nocturne"] #process-radial .pr-rail-cast { fill: #000; fill-opacity: 0.62; }
html[data-skin="nocturne"] #process-radial .pr-plinth-cast { fill: #000; fill-opacity: 0.6; }
html[data-skin="nocturne"] #process-radial .pr-tube-in { stop-color: #24354d; stop-opacity: 0.85; }
html[data-skin="nocturne"] #process-radial .pr-tube-low { stop-color: #46617f; stop-opacity: 0.75; }
html[data-skin="nocturne"] #process-radial .pr-tube-crest { stop-color: #cadcf1; stop-opacity: 0.8; }
html[data-skin="nocturne"] #process-radial .pr-tube-high { stop-color: #7c98b8; stop-opacity: 0.68; }
html[data-skin="nocturne"] #process-radial .pr-tube-out { stop-color: #1b2a40; stop-opacity: 0.9; }
html[data-skin="nocturne"] #process-radial .pr-key-lit { stop-color: #dceaff; stop-opacity: 0.26; }
html[data-skin="nocturne"] #process-radial .pr-key-mid { stop-color: #dceaff; stop-opacity: 0; }
html[data-skin="nocturne"] #process-radial .pr-key-dark { stop-color: #000; stop-opacity: 0.5; }
html[data-skin="nocturne"] #process-radial .pr-plinth-lit { stop-color: #cfe2f6; stop-opacity: 0.62; }
html[data-skin="nocturne"] #process-radial .pr-plinth-hi { stop-color: #6b87a8; stop-opacity: 0.7; }
html[data-skin="nocturne"] #process-radial .pr-plinth-mid { stop-color: #34496a; stop-opacity: 0.82; }
html[data-skin="nocturne"] #process-radial .pr-plinth-dark { stop-color: #050b16; stop-opacity: 0.92; }
html[data-skin="nocturne"] #process-radial .pr-hub-lit { stop-color: #dae9fb; }
html[data-skin="nocturne"] #process-radial .pr-hub-mid { stop-color: #3d5170; }
html[data-skin="nocturne"] #process-radial .pr-hub-dark { stop-color: #101c30; }
#process-radial .pr-needle {
filter: drop-shadow(1px 3px 4px rgb(var(--pr-cast) / 0.3));
}
#process-radial .pr-needle-hub {
fill: url(#prHubDome);
stroke: color-mix(in srgb, var(--pr-signal) 30%, transparent);
stroke-width: 0.8;
}
@media (min-width: 981px) {
#process-radial .pr-svg-desk .pr-base {
stroke: #ffffff;
stroke-opacity: 0.55;
stroke-width: 2.4;
filter: blur(1.2px);
}
html[data-skin="nocturne"] #process-radial .pr-svg-desk .pr-base {
stroke: #dcecff;
stroke-opacity: 0.4;
}
}
:root {
--studio-cast: 11 23 52;
}
html[data-skin="nocturne"] {
--studio-cast: 0 0 0;
}
#studio-console.studio-console {
--sc-ease: cubic-bezier(0.22, 1, 0.36, 1);
--sc-navy: #0d1727;
--sc-mid: #152234;
--sc-deep: #091422;
--sc-ivory: #edf1f6;
--sc-muted: #9aabc0;
--sc-line: rgba(232, 239, 247, 0.12);
--sc-dot: #3468ac;
position: relative;
z-index: 2;
padding-block: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 36px);
background: var(--paper, #F7F8FA);
color: var(--sc-ivory);
scroll-margin-top: 88px;
}
#studio-console .sc-wrap {
position: relative;
z-index: 2;
}
#studio-console .sc-shell {
position: relative;
}
#studio-console .sc-frame {
display: grid;
grid-template-columns: minmax(0, 1fr) 168px;
min-height: 600px;
padding: 12px;
border-radius: 24px;
background:
linear-gradient(145deg, #2b384a 0%, #152234 42%, #0d1727 100%);
box-shadow:
0 22px 48px rgb(var(--studio-cast) / 0.18),
0 4px 10px rgb(var(--studio-cast) / 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#studio-console .sc-main {
position: relative;
min-width: 0;
padding: clamp(26px, 3vw, 40px);
border-radius: 14px;
background:
radial-gradient(ellipse at 50% 0%, #20334c66, transparent 70%),
#091422;
box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
#studio-console .sc-stage {
position: relative;
display: grid;
min-height: 520px;
height: 100%;
}
#studio-console .sc-panel {
grid-area: 1 / 1;
min-width: 0;
min-height: 0;
}
#studio-console .sc-panel:not(.is-active) {
visibility: hidden;
pointer-events: none;
z-index: 0;
}
#studio-console .sc-panel.is-active {
visibility: visible;
z-index: 1;
}
#studio-console .sc-kicker {
margin: 0;
color: #a4b8cf;
font-family: var(--mono);
font-size: var(--type-micro);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
#studio-console .sc-heading {
margin: 8px 0 0;
max-width: 16ch;
color: #e8eef6;
font-family: var(--display);
font-size: var(--type-studio);
font-weight: var(--heading-weight, 400);
letter-spacing: -0.04em;
line-height: 0.96;
}
#studio-console .sc-rail {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding: 18px 8px 52px 12px;
}
#studio-console .sc-tabs {
display: flex;
flex-direction: column;
gap: 8px;
}
#studio-console .sc-tab {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 7px;
background: linear-gradient(#233044, #192536);
box-shadow: inset 0 1px #ffffff0c;
color: #b9c7d8;
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.01em;
text-align: left;
cursor: pointer;
transition:
background-color 280ms var(--sc-ease),
color 280ms var(--sc-ease),
border-color 280ms var(--sc-ease),
transform 280ms var(--sc-ease);
}
#studio-console .sc-tab-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: #8197b0;
transition: background-color 280ms var(--sc-ease);
}
#studio-console .sc-tab[aria-selected="true"] {
background: linear-gradient(#f4f6f8, #dfe6ee);
border-color: #f0f4f8;
color: #10233c;
transform: translateX(2px);
box-shadow: 0 8px 18px rgb(var(--studio-cast) / 0.22);
}
#studio-console .sc-tab[aria-selected="true"] .sc-tab-dot {
background: var(--sc-dot);
}
#studio-console .sc-tab:hover:not([aria-selected="true"]) {
color: #e4ecf5;
border-color: rgba(255, 255, 255, 0.18);
}
#studio-console .sc-tab:focus-visible,
#studio-console .sc-nav-btn:focus-visible,
#studio-console .sc-faq-trigger:focus-visible {
outline: 2px solid #8eabc9;
outline-offset: 3px;
}
#studio-console .sc-signoff {
position: absolute;
right: 10px;
bottom: 14px;
left: 14px;
padding-top: 12px;
border-top: 1px solid var(--sc-line);
color: #c5d0dc;
font-family: var(--mono);
font-size: 0.52rem;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.45;
text-transform: uppercase;
}
#studio-console .sc-panel--testimonials {
display: grid;
grid-template-columns: minmax(250px, 0.46fr) minmax(0, 0.54fr);
grid-template-rows: auto minmax(0, 1fr) auto;
column-gap: clamp(20px, 2.4vw, 36px);
align-items: stretch;
min-height: 520px;
}
#studio-console .sc-panel--testimonials .sc-kicker {
display: none;
}
#studio-console .sc-reviews {
display: grid;
grid-column: 1;
grid-row: 1;
align-self: start;
min-height: 0;
}
#studio-console .sc-review {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 18px;
}
#studio-console .sc-author {
order: 1;
}
#studio-console .sc-quote {
order: 2;
}
#studio-console .sc-review:not(.is-active) {
visibility: hidden;
pointer-events: none;
}
#studio-console .sc-quote {
margin: 0;
max-width: min(46rem, 100%);
color: #f3f6fa;
font-family: var(--body);
font-size: 24px;
font-weight: var(--heading-weight, 400);
letter-spacing: -0.03em;
line-height: 1.32;
}
#studio-console .sc-quote::before {
content: "“";
}
#studio-console .sc-quote::after {
content: "”";
}
#studio-console .sc-author {
display: flex;
align-items: center;
gap: 12px;
}
#studio-console .sc-avatar {
width: 40px;
height: 40px;
flex: 0 0 auto;
border: 1px solid rgba(164, 184, 207, 0.4);
border-radius: 50%;
object-fit: cover;
}
#studio-console .sc-author strong {
display: block;
color: #f4f7fb;
font-family: var(--display);
font-size: 0.95rem;
font-weight: var(--heading-weight, 400);
letter-spacing: -0.02em;
text-transform: none;
}
#studio-console .sc-author > div > span {
display: block;
margin-top: 2px;
color: #a7b6c9;
font-size: 0.73rem;
}
#studio-console .sc-controls {
display: none;
}
#studio-console .sc-nav-btn {
display: grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid rgba(232, 239, 247, 0.28);
border-radius: 50%;
background: transparent;
color: #dce6f0;
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
transition: border-color 200ms ease, color 200ms ease;
}
#studio-console .sc-nav-btn span {
display: block;
transition: transform 200ms var(--sc-ease);
}
#studio-console .sc-nav-btn:hover,
#studio-console .sc-nav-btn:focus-visible {
border-color: #c5d6e8;
color: #fff;
}
#studio-console .sc-nav-btn[data-sc-prev]:hover span,
#studio-console .sc-nav-btn[data-sc-prev]:focus-visible span {
transform: translateX(-2px);
}
#studio-console .sc-nav-btn[data-sc-next]:hover span,
#studio-console .sc-nav-btn[data-sc-next]:focus-visible span {
transform: translateX(2px);
}
#studio-console .sc-status {
margin: 0;
color: #c5d0dc;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#studio-console .sc-progress {
display: block;
flex: 1 1 auto;
height: 1px;
overflow: hidden;
background: rgba(232, 239, 247, 0.16);
}
#studio-console .sc-progress i {
display: block;
height: 100%;
width: 33.3%;
background: #91b3d8;
}
#studio-console .sc-visual {
position: relative;
grid-column: 2;
grid-row: 1 / -1;
margin: -26px -40px -26px 0;
overflow: hidden;
isolation: isolate;
background: #071018;
}
#studio-console .sc-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.015);
}
#studio-console .sc-visual img.is-on {
opacity: 1;
transform: scale(1);
}
#studio-console .sc-dots {
display: flex;
grid-column: 1;
grid-row: 3;
justify-content: center;
justify-self: center;
align-self: end;
align-items: center;
width: 100%;
gap: 14px;
margin-top: 0;
padding: 8px 8px 12px;
}
#studio-console .sc-dot {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--cta-hover, #4087f7) 62%, transparent);
box-shadow: none;
cursor: pointer;
transition: transform 180ms ease, background-color 180ms ease;
}
#studio-console .sc-dot[aria-current="true"] {
background: var(--cta-hover, #4087f7);
transform: scale(1.12);
box-shadow: none;
}
#studio-console .sc-dot:focus-visible {
outline: 2px solid var(--cta-hover, #4087f7);
outline-offset: 3px;
}
#studio-console .sc-visual::after {
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(90deg, #091422 0%, rgba(9, 20, 34, 0.35) 22%, transparent 42%);
content: "";
pointer-events: none;
}
#studio-console .sc-panel--faq > header {
display: none;
}
#studio-console .sc-panel--faq {
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
min-height: 0;
}
#studio-console .sc-faq-board {
display: grid;
grid-template-columns: minmax(200px, 0.38fr) 36px minmax(0, 1fr);
grid-template-rows: repeat(8, auto);
align-items: stretch;
min-height: 340px;
}
#studio-console .sc-faq-item {
display: contents;
}
#studio-console .sc-faq-trigger {
display: grid;
grid-column: 1;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
width: 100%;
min-height: 48px;
padding: 8px 12px 8px 10px;
border: 0;
border-bottom: 1px solid var(--sc-line);
border-radius: 0;
background: transparent;
color: #8fa0b5;
font-family: var(--body);
font-size: 0.86rem;
text-align: left;
cursor: pointer;
transition: color 220ms ease, background-color 240ms var(--sc-ease), transform 220ms ease;
}
#studio-console .sc-faq-item:first-child .sc-faq-trigger {
border-top: 1px solid var(--sc-line);
}
#studio-console .sc-faq-trigger span:first-child {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}
#studio-console .sc-faq-trigger strong {
font-weight: 500;
}
#studio-console .sc-faq-plus {
display: none;
width: 12px;
height: 12px;
position: relative;
}
#studio-console .sc-faq-plus::before,
#studio-console .sc-faq-plus::after {
position: absolute;
top: 50%;
left: 50%;
background: currentColor;
content: "";
}
#studio-console .sc-faq-plus::before {
width: 12px;
height: 1px;
transform: translate(-50%, -50%);
}
#studio-console .sc-faq-plus::after {
width: 1px;
height: 12px;
transform: translate(-50%, -50%);
transition: transform 320ms var(--sc-ease), opacity 200ms ease;
}
#studio-console .sc-faq-item.is-active .sc-faq-plus::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
#studio-console .sc-faq-trigger:hover {
color: #e4ecf5;
transform: translateX(2px);
}
}
#studio-console .sc-faq-item.is-active .sc-faq-trigger {
background: rgba(52, 104, 172, 0.22);
box-shadow: inset 3px 0 0 var(--sc-dot);
color: #f4f7fb;
transform: none;
}
#studio-console .sc-faq-item.is-active .sc-faq-trigger span:first-child {
color: #7eb0e6;
}
#studio-console .sc-faq-detail {
grid-column: 3;
grid-row: 1 / 9;
align-self: start;
max-width: 38rem;
padding: 8px 0 8px 8px;
}
#studio-console .sc-faq-item:not(.is-active) .sc-faq-detail {
visibility: hidden;
pointer-events: none;
}
#studio-console .sc-faq-count {
margin: 0 0 14px;
color: #8fa0b5;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
}
#studio-console .sc-faq-detail h3 {
margin: 0;
max-width: 18ch;
color: #f2f5f9;
font-family: var(--display);
font-size: clamp(1.45rem, 2.2vw, 1.9rem);
font-weight: var(--heading-weight, 400);
letter-spacing: -0.03em;
line-height: 1.18;
}
#studio-console .sc-faq-detail p:last-child {
margin: 16px 0 0;
max-width: 62ch;
color: #c5d0dc;
font-size: 0.95rem;
line-height: 1.6;
}
#studio-console .sc-faq-board::before {
grid-column: 2;
grid-row: 1 / 9;
width: 1px;
justify-self: center;
background: var(--sc-line);
content: "";
}
#studio-console .sc-panel--proof {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 22px;
min-height: 520px;
}
#studio-console .sc-proof-layout {
display: grid;
grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
gap: clamp(24px, 3vw, 48px);
align-items: stretch;
min-height: 0;
}
#studio-console .sc-proof-visual {
position: relative;
min-height: 320px;
margin: 0;
overflow: hidden;
border-radius: 14px;
background: #071018;
}
#studio-console .sc-proof-visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
#studio-console .sc-proof-visual figcaption {
position: absolute;
left: 14px;
bottom: 12px;
margin: 0;
color: rgba(232, 239, 247, 0.78);
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#studio-console .sc-proof-rows {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
#studio-console .sc-proof-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 8px 18px;
padding: 18px 0;
border-bottom: 1px solid var(--sc-line);
transition: transform 220ms ease, border-color 220ms ease;
}
#studio-console .sc-proof-row:first-child {
border-top: 1px solid var(--sc-line);
}
#studio-console .sc-proof-num {
margin: 0;
color: #f2f5f9;
font-family: var(--display);
font-size: clamp(2.2rem, 3vw, 2.85rem);
font-weight: var(--heading-weight, 400);
letter-spacing: -0.04em;
line-height: 1;
}
#studio-console .sc-proof-label {
margin: 0;
color: #eef3f8;
font-family: var(--body);
font-size: 0.92rem;
font-weight: 600;
}
#studio-console .sc-proof-note {
margin: 6px 0 0;
max-width: 36ch;
color: #a7b6c9;
font-size: 0.86rem;
line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
#studio-console .sc-proof-row:hover {
border-color: rgba(232, 239, 247, 0.22);
transform: translateX(2px);
}
#studio-console .sc-proof-row:hover .sc-proof-label {
color: #fff;
}
}
#studio-console.is-pending .sc-frame {
opacity: 0;
}
html:not(.js) #studio-console.is-pending .sc-frame {
opacity: 1;
}
html:not(.js) #studio-console.is-pending .sc-frame {
opacity: 1;
}
@media (max-width: 899px) {
#studio-console.studio-console {
padding-block: 32px 18px;
}
#studio-console .sc-frame {
display: flex;
flex-direction: column;
min-height: 0;
padding: 10px;
border-radius: 18px;
}
#studio-console .sc-rail {
order: -1;
padding: 0 0 10px;
}
#studio-console .sc-tabs {
display: flex;
justify-content: center;
width: fit-content;
margin-inline: auto;
gap: 6px;
}
#studio-console .sc-tab {
justify-content: center;
min-height: 42px;
padding: 8px 6px;
font-size: 0.7rem;
transform: none;
}
#studio-console .sc-tab[aria-selected="true"] {
transform: none;
}
#studio-console .sc-signoff {
display: none;
}
#studio-console .sc-main {
padding: 22px 18px 20px;
}
#studio-console .sc-stage {
min-height: 0;
height: auto;
}
#studio-console .sc-panel--testimonials {
position: relative;
inset: auto;
height: auto;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
}
#studio-console .sc-panel--testimonials:not(.is-active) {
position: relative;
inset: auto;
visibility: hidden;
pointer-events: none;
}
#studio-console .sc-panel--testimonials .sc-kicker { display: none; }
#studio-console .sc-reviews {
order: 1;
}
#studio-console .sc-review {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
}
#studio-console .sc-author {
order: 1;
justify-content: center;
}
#studio-console .sc-quote {
order: 2;
max-width: none;
font-size: 0.95rem;
letter-spacing: -0.02em;
line-height: 1.32;
}
#studio-console .sc-visual,
#studio-console .sc-visual img {
display: none !important;
}
#studio-console .sc-visual::after {
background: linear-gradient(180deg, transparent 55%, rgba(9, 20, 34, 0.35) 100%);
}
#studio-console .sc-controls { display: none; }
#studio-console .sc-dots {
display: flex;
order: 4;
justify-content: center;
align-items: center;
gap: 16px;
padding: 18px 0 12px;
}
#studio-console .sc-dot {
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--cta-hover, #4087f7) 82%, #edf4ff);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--cta-hover, #4087f7) 55%, transparent);
cursor: pointer;
transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
#studio-console .sc-dot[aria-current="true"] {
background: var(--cta-hover, #4087f7);
transform: scale(1.2);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cta-hover, #4087f7) 40%, transparent);
}
#studio-console .sc-dot:focus-visible {
outline: 2px solid var(--cta-hover, #4087f7);
outline-offset: 3px;
}
#studio-console .sc-panel--faq,
#studio-console .sc-panel--proof {
min-height: 0;
gap: 12px;
}
#studio-console .sc-reviews {
align-self: stretch;
width: 100%;
}
#studio-console .sc-heading {
max-width: 14ch;
font-size: clamp(1.55rem, 6.4vw, 2rem);
}
#studio-console .sc-faq-board {
display: flex;
flex-direction: column;
min-height: 0;
}
#studio-console .sc-faq-board::before {
display: none;
}
#studio-console .sc-faq-item {
display: block;
border-bottom: 1px solid var(--sc-line);
}
#studio-console .sc-faq-item:first-child {
border-top: 1px solid var(--sc-line);
}
#studio-console .sc-faq-trigger {
grid-template-columns: 32px minmax(0, 1fr) 16px;
min-height: 52px;
border-bottom: 0;
transform: none !important;
}
#studio-console .sc-faq-item:first-child .sc-faq-trigger {
border-top: 0;
}
#studio-console .sc-faq-plus {
display: block;
}
#studio-console .sc-faq-detail {
grid-column: auto;
grid-row: auto;
max-width: none;
height: 0;
padding: 0 10px;
overflow: hidden;
visibility: visible;
}
#studio-console .sc-faq-item.is-active .sc-faq-detail {
height: auto;
padding: 0 10px 16px;
}
#studio-console .sc-faq-item:not(.is-active) .sc-faq-detail {
visibility: visible;
pointer-events: none;
}
#studio-console .sc-faq-count {
display: none;
}
#studio-console .sc-faq-detail h3 {
max-width: none;
font-size: 1.15rem;
}
#studio-console .sc-proof-layout {
grid-template-columns: 1fr;
gap: 18px;
}
#studio-console .sc-proof-visual {
min-height: 0;
aspect-ratio: 4 / 3;
}
#studio-console .sc-proof-row {
grid-template-columns: 64px minmax(0, 1fr);
padding: 14px 0;
}
#studio-console .sc-proof-num {
font-size: 2rem;
}
}
@media (max-width: 560px) {
#studio-console .sc-wrap.container {
padding-inline: 16px;
}
#studio-console .sc-frame {
padding: 8px;
border-radius: 16px;
}
#studio-console .sc-main {
padding: 18px 14px 16px;
}
#studio-console .sc-tab {
gap: 6px;
padding: 8px 4px;
font-size: 0.64rem;
}
}
@media (prefers-reduced-motion: reduce) {
#studio-console .sc-tab,
#studio-console .sc-nav-btn span,
#studio-console .sc-faq-trigger,
#studio-console .sc-faq-plus::after,
#studio-console .sc-proof-row {
transition: none;
}
#studio-console .sc-visual img {
transform: none;
}
#studio-console.is-pending .sc-frame {
opacity: 1;
}
}
@media (min-width: 861px) {
#studio-console .sc-panel--testimonials .sc-reviews {
grid-row: 1 / 3;
align-self: center;
}
#studio-console .sc-panel--testimonials .sc-review {
justify-content: center;
}
}
#studio-console .sc-panel--testimonials {
touch-action: pan-y;
}
@media (min-width: 861px) {
#studio-console .sc-panel--testimonials .sc-review { align-items: flex-start; text-align: left; gap: 16px; }
#studio-console .sc-panel--testimonials .sc-quote { max-width: min(46rem, 100%); margin-inline: 0; }
#studio-console .sc-panel--testimonials .sc-author { justify-content: flex-start; text-align: left; }
}