:root {
--ik-ease: cubic-bezier(.22, 1, .36, 1);
--ik-ease-in: cubic-bezier(.4, 0, 1, 1);
--ik-indicator: 220ms;
--ik-group: 210ms;
--ik-swap: 240ms;
--ik-swap-fast: 200ms;
--ik-count: 180ms;
--ik-expand: 250ms;
--ik-modal-in: 220ms;
--ik-modal-out: 160ms;
--ik-reveal: 370ms;
--ik-arrow: 180ms;
}
.ik-has-indicator {
position: relative;
}
.ik-has-indicator > button {
position: relative;
z-index: 1;
}
.ik-indicator {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
opacity: 0;
pointer-events: none;
will-change: transform, width, height;
}
.ik-indicator.is-on {
opacity: 1;
}
#work .filter-bar .ik-indicator {
border: 1px solid var(--action);
border-radius: 999px;
background: var(--action);
box-shadow: 0 8px 22px color-mix(in srgb, var(--action) 20%, transparent);
}
#work .filter-bar.ik-has-indicator .filter-button[aria-pressed="true"] {
border-color: transparent;
background: transparent;
box-shadow: none;
}
#work .filter-bar.ik-has-indicator .filter-button {
transition: color 150ms ease, border-color 150ms ease;
}
#work .filter-bar.ik-has-indicator .filter-button:hover[aria-pressed="true"] {
background: transparent;
border-color: transparent;
}
#studio-console .sc-tabs .ik-indicator {
border: 1px solid #f0f4f8;
border-radius: 7px;
background: linear-gradient(#f4f6f8, #dfe6ee);
box-shadow: 0 8px 18px rgb(var(--studio-cast) / 0.22);
}
#studio-console .sc-tabs.ik-has-indicator .sc-tab[aria-selected="true"] {
background: transparent;
border-color: transparent;
box-shadow: none;
transform: none;
}
#studio-console .sc-tabs.ik-has-indicator .sc-tab {
transition: color 150ms var(--sc-ease, ease);
}
#taste-stage .taste-stage-tabs .ik-indicator {
border-radius: 999px;
background: var(--ink);
}
html[data-skin="nocturne"] #taste-stage .taste-stage-tabs .ik-indicator {
background: #0b162b;
}
#taste-stage .taste-stage-tabs.ik-has-indicator button[aria-selected="true"] {
background: transparent;
}
html[data-skin="nocturne"] #taste-stage .taste-stage-tabs.ik-has-indicator button[aria-selected="true"] {
background: transparent;
}
#taste-stage [data-taste-img] {
will-change: opacity;
}
.ik-group-fade {
transition: opacity var(--ik-group) var(--ik-ease);
}
.ik-group-fade.is-swapping {
opacity: 0.28;
}
.ik-arrow {
display: inline-block;
transition: transform var(--ik-arrow) var(--ik-ease);
will-change: transform;
}
a:hover > .ik-arrow,
a:focus-visible > .ik-arrow,
button:hover > .ik-arrow,
button:focus-visible > .ik-arrow,
a:hover .button-copy > .ik-arrow,
a:focus-visible .button-copy > .ik-arrow {
transform: translateX(2px);
}
.ik-arrow[data-ik-arrow="up-right"] {
transition: transform var(--ik-arrow) var(--ik-ease);
}
a:hover > .ik-arrow[data-ik-arrow="up-right"],
a:focus-visible > .ik-arrow[data-ik-arrow="up-right"],
a:hover .button-copy > .ik-arrow[data-ik-arrow="up-right"],
a:focus-visible .button-copy > .ik-arrow[data-ik-arrow="up-right"] {
transform: translate(1.6px, -1.6px);
}
html.cloud-entry-active .hero h1 > span {
display: inline-block;
opacity: 0;
transform: translateY(7px);
}
html.cloud-entry-active .hero h1.is-revealed > span {
opacity: 1;
transform: none;
transition: opacity var(--ik-reveal) var(--ik-ease), transform var(--ik-reveal) var(--ik-ease);
}
html.cloud-entry-active .hero h1.is-revealed > span:nth-child(2) {
transition-delay: 40ms;
}
.ik-modal-anim {
animation: ik-modal-in var(--ik-modal-in) var(--ik-ease) both;
}
.ik-modal-anim-backdrop {
animation: ik-fade-in var(--ik-modal-in) var(--ik-ease) both;
}
.ik-modal-closing .ik-modal-anim {
animation: ik-modal-out var(--ik-modal-out) var(--ik-ease-in) both;
}
.ik-modal-closing .ik-modal-anim-backdrop {
animation: ik-fade-out var(--ik-modal-out) var(--ik-ease-in) both;
}
@keyframes ik-modal-in {
from { opacity: 0; transform: scale(.985); }
to   { opacity: 1; transform: none; }
}
@keyframes ik-modal-out {
from { opacity: 1; transform: none; }
to   { opacity: 0; transform: scale(.985); }
}
@keyframes ik-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes ik-fade-out {
from { opacity: 1; }
to   { opacity: 0; }
}
@media (max-width: 720px) {
@keyframes ik-modal-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes ik-modal-out {
from { opacity: 1; }
to   { opacity: 0; }
}
}
.ik-embed-shell {
position: relative;
}
.ik-embed-veil {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-content: center;
gap: 10px;
justify-items: center;
padding: 20px;
text-align: center;
background: color-mix(in srgb, var(--surface, #101722) 88%, transparent);
transition: opacity var(--ik-group) var(--ik-ease);
}
.ik-embed-veil[hidden] {
display: none;
}
.ik-embed-veil.is-clearing {
opacity: 0;
pointer-events: none;
}
.ik-embed-poster {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.ik-embed-label {
margin: 0;
color: var(--muted, #9aa7b8);
font-size: 0.8rem;
letter-spacing: 0.02em;
}
.ik-embed-retry {
min-height: 40px;
padding: 0 16px;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.ik-indicator,
.ik-group-fade,
.ik-arrow,
.ik-embed-veil {
transition: none !important;
}
.ik-group-fade.is-swapping {
opacity: 1;
}
a:hover > .ik-arrow,
a:focus-visible > .ik-arrow,
button:hover > .ik-arrow,
button:focus-visible > .ik-arrow,
a:hover .button-copy > .ik-arrow,
a:focus-visible .button-copy > .ik-arrow {
transform: none;
}
html.cloud-entry-active .hero h1 > span {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.ik-modal-anim,
.ik-modal-anim-backdrop,
.ik-modal-closing .ik-modal-anim,
.ik-modal-closing .ik-modal-anim-backdrop {
animation: none !important;
}
}
:root {
--accent: #3468ac;
--accent-2: #244b7a;
--cloud-rain-color-paper: #264b54;
--cloud-rain-color-night: #c0ced4;
}
html[data-skin="nocturne"] { --accent: #72a5df; --accent-2: #4779b1; }
#packs .pack-rail-card { --pack-card-bg: #eef0f3; }
#cases,
.site-footer a[href="#cases"] {
display: none !important;
}
.site-stars,
.site-speckles,
.site-rainfall,
.footer-meteors { display: none !important; }
.site-footer > .footer-stars {
z-index: 4 !important;
pointer-events: none;
}
.cloud-rain { z-index: 2 !important; }
.page-stars {
position: fixed;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: none;
}
html[data-skin="nocturne"] .page-stars { display: block; }
html:not([data-skin="nocturne"]) .page-stars { display: none; }
.hero-stars {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
pointer-events: none;
display: none;
}
html[data-skin="nocturne"] .hero-stars { display: block; }
html:not([data-skin="nocturne"]) .hero-stars { display: none; }
main { position: relative; z-index: auto !important; }
.section > .container { position: relative; z-index: 5 !important; }
.hero, #packs, #process, #process-radial, #taste-stage, #work, #studio-console { isolation: auto !important; }
.site-footer { isolation: auto !important; z-index: auto !important; }
.hero-sky-near-mask { z-index: 2 !important; }
.hero-product-stage { z-index: 4; }
.hero-copy { z-index: 6; }
.hero-actions, .hero .button, .hero-services { position: relative; z-index: 7; }
.hero::after { z-index: 0; }
.work-tile, .taste-card, .pack-rail-card, .sc-visual, .studio-panel-frame, .pr-board {
position: relative;
z-index: 6;
isolation: isolate;
}
html:not([data-skin="nocturne"]) body { color: var(--muted); background: var(--paper); }
html:not([data-skin="nocturne"]) h1,
html:not([data-skin="nocturne"]) h2,
html:not([data-skin="nocturne"]) h3 { color: var(--ink); }
#process-radial .eyebrow,
#packs .eyebrow {
font-family: var(--mono);
font-size: var(--type-micro);
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.4;
text-transform: uppercase;
color: var(--muted) !important;
}
#work .work-head-title h2,
#packs .packs-head h2,
#compare .compare-lite-intro h2,
#process .pipeline-heading h2,
#process-radial .pr-heading h2,
#partnership .partnership-copy h2 {
font-size: var(--section-display-size);
line-height: .94 !important;
letter-spacing: -.055em !important;
}
#compare .compare-lite-intro h2 em { display: block; }
#faq.studio-panel-band {
padding-block: clamp(34px, 4.5vw, 64px);
scroll-margin-top: 82px;
}
#faq .studio-panel-alias { scroll-margin-top: 82px; }
#faq .studio-panel-container { width: min(1280px, calc(100% - clamp(32px, 7vw, 112px))); }
#faq .studio-panel-frame {
--studio-h: clamp(560px, 66vh, 660px);
height: var(--studio-h); min-height: var(--studio-h); max-height: var(--studio-h);
padding: 14px; border: 0; border-radius: 28px;
background: linear-gradient(145deg, #2b384a, #152234 42%, #0d1727);
box-shadow: 0 22px 48px #0713232e, 0 4px 10px #07132318;
}
#faq .studio-panel-grid { grid-template-columns: minmax(0, 1fr) 174px; gap: 14px; }
#faq .studio-panel-main {
height: 100%; min-height: 0; padding: clamp(26px, 3.2vw, 42px);
border: 0; border-radius: 12px;
background: radial-gradient(ellipse at 50% 0%, #20334c66, transparent 70%), #091422;
box-shadow: inset 0 2px 12px #0005;
}
#faq .studio-panel-view { position: absolute; inset: 0; overflow: hidden; gap: 26px; }
#faq .studio-panel-head { max-width: 100%; gap: 10px; }
#faq .studio-panel-kicker { color: #a4b8cf; font-size: .58rem; }
#faq .studio-panel-head h2 { font-size: clamp(1.65rem, 2.5vw, 2.15rem); color: #ccd6e3; }
#faq .studio-panel-proof { height: 100%; gap: 26px; }
#faq .client-review-stage[data-client-reviews] { height: 190px !important; }
#faq .client-review { align-content: center !important; gap: 22px !important; }
#faq .client-review blockquote {
order: -1; max-width: 27ch !important;
font-size: clamp(2rem, 3.4vw, 2.8rem) !important; line-height: 1.12 !important;
}
#faq .client-review-identity strong { font-size: .8rem; letter-spacing: 0; }
#faq .client-review-identity span { color: #a7b6c9; font-size: .73rem; }
#faq .client-review-avatar { width: 36px; height: 36px; border-color: #a4b8cf55; }
#faq .studio-panel-side { padding: 20px 0 12px; border: 0; border-left: 0; align-content: center; gap: 26px; }
#faq .studio-panel-side::before { display: none !important; content: none !important; }
#faq .studio-panel-modes { padding: 6px; gap: 6px; background: #070f1b; border: 1px solid #ffffff12; border-radius: 10px; }
#faq .studio-panel-mode {
min-height: 42px; padding: 10px 12px; border-radius: 5px;
border: 1px solid #ffffff12; background: linear-gradient(#233044, #192536);
color: #b9c7d8; font-size: .75rem; box-shadow: inset 0 1px #ffffff09;
}
#faq .studio-panel-mode[aria-selected="true"] { background: linear-gradient(#edf1f6, #cbd5e1); border-color: #f0f4f8; color: #10233c; }
#faq .studio-panel-mode-dot { background: #8197b0; border-color: transparent; box-shadow: none; }
#faq .studio-panel-mode[aria-selected="true"] .studio-panel-mode-dot { background: #3468ac; box-shadow: none; }
#faq .studio-panel-nav { max-width: 300px; }
#faq .studio-panel-nav-btn { border-radius: 7px; background: #172638; color: #d2deec; }
#faq .studio-panel-nav-btn:hover, #faq .studio-panel-nav-btn:focus-visible { background: #294667; border-color: #8bacd0; }
#faq .studio-panel-progress i { background: #91b3d8; }
#faq .faq-split { min-height: 265px; }
#faq .faq-index button[aria-selected="true"] { background: #213952; border-color: #597b9f; }
#faq .studio-panel-mode:focus-visible { outline: 2px solid #8eabc9; outline-offset: 3px; }
#compare.compare-lite { position: relative; z-index: auto; isolation: auto; }
#compare .compare-lite-shell { position: relative; z-index: 3; }
#compare .compare-lite-stage {
width: min(1000px, 100%);
margin-inline: auto;
column-gap: clamp(14px, 2vw, 26px);
}
#compare .compare-lite-shot,
#compare .compare-lite-col-label,
#compare .compare-lite-points {
width: min(300px, 100%);
justify-self: center;
}
#compare .compare-lite-shot { max-height: 220px; }
#process.process-desk { --signal: #4b6f98; --process-ground: #F7F8FA; padding-block: clamp(52px, 5.3vw, 76px); }
html[data-skin="nocturne"] #process.process-desk { --signal: #6688b0; --process-ground: var(--paper); }
html[data-skin="nocturne"] #process .process-stage .process-stage-node {
background: #13243a; color: #c0d2e6; border-color: #3c536d;
box-shadow: inset 0 1px 0 #ffffff0d, 0 6px 16px #0003;
}
html[data-skin="nocturne"] #process .process-stage.is-active .process-stage-node {
border-color: #7ea7d6; box-shadow: 0 0 0 2px #7ea7d624;
}
html[data-skin="nocturne"] #process .process-stage--ship.is-active .process-stage-node {
color: #d6e2ee; border-color: #8da7c1; box-shadow: 0 0 0 3px #8da7c124;
}
#process .process-glow-line { stroke-width: 2; }
#process .process-glow-bloom { stroke-width: 5; opacity: .09; }
#process .process-glow-head { fill: #8da7c1; stroke: #dce8f4; }
#process .process-stage { color: var(--ink); }
#process .process-stage-node,
#process .process-stage.is-active .process-stage-node,
#process .process-stage.is-lit .process-stage-node { color: #23466f; }
#process .process-stage .ps-draw { stroke-dashoffset: 0; opacity: .85; }
#process .process-stage.is-active .ps-draw { opacity: 1; }
#process .process-stage-num,
#process .process-stage-label,
#process .process-stage p { position: relative; background: var(--process-ground); box-shadow: 0 0 0 5px var(--process-ground); border-radius: 3px; }
#process .process-stage p { color: var(--muted); }
#process .process-decor { display: block; opacity: .76; }
#process .process-orbit { opacity: .48; }
#process .process-scatter { opacity: .18; }
#process .process-spark { opacity: .68; }
#process .process-stage--ship .process-stage-node { position: relative; }
#process .process-stage--ship.is-active .process-stage-node {
background: #122941; color: #d6e2ee; border-color: #8da7c1;
box-shadow: 0 8px 24px #152b4320, 0 0 0 3px #8da7c124;
}
#process .process-stage--ship.is-active .process-stage-node::after {
content: ""; position: absolute; inset: -6px; border: 1px solid #8da7c1;
border-radius: 50%; animation: ship-confirm 1.6s ease-out both;
}
@keyframes ship-confirm { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.4); opacity: 0; } }
@media (min-width: 981px) {
#process .process-rail { min-height: clamp(345px, 37vw, 420px); }
#process .process-glow-svg { height: clamp(280px, 30vw, 345px); }
#process .process-stage { width: min(134px, 12vw); --node: clamp(54px, 5.4vw, 68px); }
}
@media (max-width: 860px) {
#work .work-head-title h2,
#packs .packs-head h2,
#compare .compare-lite-intro h2,
#process .pipeline-heading h2,
#process-radial .pr-heading h2,
#partnership .partnership-copy h2 {
font-size: 40px;
line-height: .96 !important;
}
#faq.studio-panel-band { scroll-margin-top: 70px; }
#faq .studio-panel-alias { scroll-margin-top: 70px; }
#faq .studio-panel-container { width: calc(100% - 28px); }
#faq .studio-panel-frame {
--studio-h: 560px;
height: var(--studio-h); min-height: var(--studio-h); max-height: var(--studio-h);
padding: 10px; border-radius: 18px;
}
#faq .studio-panel-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; }
#faq .studio-panel-side { padding: 0; }
#faq .studio-panel-side::before { display: none !important; content: none !important; }
#faq .studio-panel-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#faq .studio-panel-mode { padding: 10px 4px; font-size: .7rem; }
#faq .studio-panel-main { height: 100%; padding: 24px 20px; min-height: 0; }
#faq .client-review-stage[data-client-reviews] { height: 205px !important; }
#faq .client-review blockquote { font-size: clamp(1.9rem, 6vw, 2.5rem) !important; }
#faq .studio-panel-head h2 { font-size: 1.65rem; }
#faq .studio-panel-nav { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#process .process-stage.is-active .ps-pulse,
#process .process-stage--ship.is-active .process-stage-node::after { animation: none; }
}
.section-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 88px; pointer-events: none; }
html.case-preview #cases { display: block !important; }
.site-nav a { position: relative; text-decoration: none; transition: color 180ms ease, transform 180ms ease; }
.site-nav a::after { content: none; display: none; }
.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible {
transform: scale(1.08);
text-decoration: none;
}
@media (max-width: 860px) {
.site-header .site-nav.is-open a:not(.nav-contact):hover,
.site-header .site-nav.is-open a:not(.nav-contact):focus-visible {
transform: none;
}
}
.site-header .site-nav .nav-contact {
background: var(--action);
color: var(--action-ink);
box-shadow: none;
}
.footer-cta-button {
background: var(--action);
color: var(--action-ink);
border-color: var(--action);
box-shadow: none;
}
.site-header .site-nav .nav-contact:hover,
.site-header .site-nav .nav-contact:focus-visible {
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
color: var(--action-ink);
box-shadow: none;
filter: none;
}
.footer-cta-button:hover,
.footer-cta-button:focus-visible {
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
color: var(--action-ink);
box-shadow: none;
filter: none;
}
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:hover,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:focus-visible,
html[data-skin="nocturne"] .footer-cta-button:hover,
html[data-skin="nocturne"] .footer-cta-button:focus-visible {
background: var(--cta-hover, #4087f7) !important;
border-color: var(--cta-hover, #4087f7) !important;
color: #061026 !important;
box-shadow: none !important;
filter: none !important;
}
@media (min-width: 861px) {
#footer .footer-cta-button { display: none !important; }
#footer .footer-cta-stack { margin-top: 18px; }
}
.section .eyebrow, .section h2 { text-wrap: balance; }
#studio-console.studio-console { z-index: auto; isolation: auto; background: transparent; padding-block: clamp(40px, 5vw, 72px); }
#studio-console .sc-frame {
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 82px minmax(0, 1fr);
height: clamp(540px, calc(100svh - 120px), 650px); min-height: 540px; padding: 0; overflow: hidden;
border: 0; outline: 0; border-radius: 24px;
background: var(--pack-card-bg, #eef0f3);
box-shadow: none;
}
#studio-console .sc-main { grid-row: 2; padding: 28px 40px 36px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; min-height: 0; }
#studio-console .sc-stage { position: relative; display: grid; height: 100%; min-height: 480px; }
#studio-console .sc-panel { grid-area: 1 / 1; position: relative; inset: auto; height: auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #70849b55 transparent; }
#studio-console .sc-panel.is-active { visibility: visible; opacity: 1; }
#studio-console .sc-panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; z-index: 0; }
#studio-console .sc-rail { grid-row: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px 40px 0; gap: 20px; }
#studio-console .sc-tabs { flex-direction: row; gap: 4px; padding: 4px; border: 0; border-radius: 30px; background: #e4eef60b; }
#studio-console .sc-tab { width: auto; min-height: 42px; padding: 10px 18px; font-size: .875rem; border: 0; border-radius: 24px; background: transparent; box-shadow: none; transform: none; }
#studio-console .sc-tab[aria-selected="true"] { background: linear-gradient(155deg, #e8f0f5, #cfdee8); color: #132b3c; box-shadow: 0 4px 14px #0002; transform: none; }
#studio-console .sc-signoff { position: static; border: 0; padding: 0; margin: 0; font-size: .65rem; letter-spacing: .13em; color: #9baebe; text-align: right; }
#studio-console .sc-signoff br { display: none; }
#studio-console .section-anchor { top: clamp(40px, 5vw, 72px); }
#studio-console .sc-kicker { font-size: var(--type-micro); color: var(--muted); }
#studio-console .sc-heading { max-width: 28ch; font-size: var(--type-studio); line-height: 1.08; color: var(--ink); }
#studio-console .sc-panel--testimonials { grid-template-columns: minmax(0, 1.45fr) minmax(220px, .85fr); column-gap: 32px; align-items: center; }
#studio-console .sc-quote {
max-width: min(46rem, 100%);
font-family: var(--body);
font-size: 24px;
letter-spacing: -0.02em;
line-height: 1.32;
}
#studio-console .sc-author strong {
font-family: var(--display);
font-size: 1.05rem;
letter-spacing: -0.02em;
text-transform: none;
}
#studio-console .sc-author > div > span { font-size: .8rem; letter-spacing: 0; }
#studio-console .sc-visual { margin: 0; border-radius: 16px; min-height: 0; }
#studio-console .sc-visual::after { background: linear-gradient(90deg, #101e2b22, transparent 35%); }
#studio-console .sc-proof-visual { min-height: 0; }
#studio-console .sc-panel--faq > header,
#studio-console .sc-panel--faq .sc-heading { display: none; }
#studio-console .sc-panel--faq { grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 0; }
#studio-console .sc-faq-board { min-height: 0; margin-top: 0; align-self: stretch; }
#studio-console .sc-faq-trigger { min-height: 38px; }
#studio-console .sc-faq-detail p:last-child { font-size: 1rem; }
#studio-console .sc-faq-item.is-active .sc-faq-trigger { background: #d1e3ef0e; box-shadow: inset 2px 0 #8caabf; }
#studio-console .sc-faq-board::before { opacity: .45; }
#studio-console .sc-proof-row { min-height: 0; }
#studio-console .sc-proof-num { color: #cfdfeb; }
.packs-clarity {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 20px 0 26px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 14px;
overflow: hidden;
background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.packs-clarity span {
padding: 14px 16px;
background: color-mix(in srgb, var(--paper) 92%, var(--ink));
color: var(--muted);
font-size: .86rem;
line-height: 1.35;
}
.packs-clarity strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
#packs .pack-rail-card-head { align-items: flex-start; }
#packs .pack-rail-card-head > div { min-width: 0; }
#packs .pack-rail-card-meta { display: block; margin-top: 8px; color: var(--muted); font: 500 var(--type-meta)/1.4 var(--mono); letter-spacing: .025em; }
@media (max-width: 899px) { .packs-clarity { grid-template-columns: 1fr; margin-bottom: 18px; } .packs-clarity span { padding: 12px 14px; } }
@media (max-width: 899px) {
#studio-console .sc-frame { height: auto !important; min-height: 0 !important; grid-template-rows: auto auto !important; overflow: hidden !important; padding: 0; }
#studio-console .sc-rail { padding: 18px 20px 0; justify-content: center; }
#studio-console .sc-main { padding: 18px 24px 22px; height: auto !important; overflow: hidden !important; }
#studio-console .sc-stage { position: relative; height: auto !important; min-height: 0; }
#studio-console .sc-signoff { display: none; }
#studio-console .sc-panel--testimonials {
display: flex !important;
flex-direction: column;
grid-template-columns: none;
grid-template-rows: none;
gap: 16px;
}
#studio-console .sc-panel--testimonials.is-active {
position: relative !important;
inset: auto !important;
height: auto !important;
overflow: visible !important;
visibility: visible;
}
#studio-console .sc-panel--testimonials:not(.is-active) {
position: relative !important;
inset: auto !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
#studio-console .sc-visual,
#studio-console .sc-visual img { display: none !important; }
#studio-console .sc-quote {
max-width: none;
font-size: 0.95rem;
letter-spacing: -0.02em;
line-height: 1.32;
}
#studio-console .sc-controls { display: none; }
#studio-console .sc-proof-layout { grid-template-columns: 1fr; grid-template-rows: 170px auto; gap: 18px; }
#studio-console .sc-proof-visual { height: 170px; aspect-ratio: auto; }
#studio-console .sc-proof-row { padding: 12px 0; }
#studio-console .sc-panel--faq { display: flex; }
#studio-console .section-anchor { top: 40px; }
#studio-console .sc-faq-board { margin-top: 0; }
}
@media (max-width: 560px) {
#studio-console .sc-wrap.container { padding-inline: var(--gutter); }
#studio-console .sc-frame { border-radius: 20px; }
#studio-console .sc-main { padding-inline: 20px; }
#studio-console .sc-rail { padding-inline: 16px; }
#studio-console .sc-tab { padding: 10px 13px; font-size: .8rem; }
#studio-console .sc-tab-dot { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: no-preference) {
.editorial-reveal { opacity: 0; transform: translateY(14px); transition: opacity 650ms ease, transform 750ms cubic-bezier(.22,1,.36,1); transition-delay: var(--editorial-delay, 0ms); }
.editorial-reveal.is-revealed { opacity: 1; transform: none; }
.work-tile img { transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.work-tile:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { .editorial-reveal { opacity: 1; transform: none; } }
@media (min-width: 981px) {
#process-radial .pr-heading {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
column-gap: clamp(32px, 5vw, 80px);
align-items: end;
}
#process-radial .pr-heading .eyebrow { grid-column: 1 / -1; }
#process-radial .pr-heading h2 { max-width: 24ch; }
#process-radial .pr-lede { margin: 0 0 4px; max-width: 43ch; }
#process-radial .pr-board { max-width: clamp(740px, calc((100svh - 350px) * 1.6667), 1040px); min-height: 0; margin: -12px auto 0; }
#process-radial .pr-svg-desk .pr-active,
#process-radial .pr-svg-desk .pr-hover-seg { display: none; }
#process-radial .pr-step[data-place="bl"] .pr-copy { left: -30px; right: auto; top: 50px; width: 170px; text-align: left; }
#process-radial .pr-step[data-place="br"] .pr-copy { right: -30px; left: auto; top: 50px; width: 170px; text-align: right; }
#process-radial .pr-well-copy { top: 92%; }
}
.pr-summary { margin: 0 0 24px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.pr-summary strong { color: var(--ink); font-weight: 600; }
#taste-stage .taste-card-motion { perspective: 1000px; }
#taste-stage .taste-card { transform-style: preserve-3d; transition: box-shadow 350ms ease, border-color 350ms ease; }
#taste-stage .taste-card::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(280px circle at var(--shine-x,30%) var(--shine-y,0%), #ffffff30, transparent 65%); opacity: 0; transition: opacity 300ms ease; }
#taste-stage .taste-card:hover::before { opacity: 1; }
#taste-stage .taste-card--pick { background: radial-gradient(ellipse at 10% 0, #31557680, transparent 58%), linear-gradient(145deg, #172d43, #0a1726 75%); border-color: #90b5d980; box-shadow: 0 3px 0 #081320, 0 5px 0 #658eb44d, 0 28px 48px #0b203b30, inset 0 1px 0 #d7eaff7a; }
#taste-stage .taste-card--pick .taste-card-label { color: #d4e7f8; width: fit-content; padding: 6px 9px; border: 1px solid #bddfff33; border-radius: 6px; background: #d3e9ff0d; letter-spacing: .13em; }
#taste-stage .taste-card--pick .taste-card-star { color: #94c4f6; text-shadow: 0 0 12px #70b5ff80; }
#taste-stage .taste-card--pick .taste-card-points { color: #e0e9f1; }
#taste-stage .taste-card--pick .taste-card-vs { color: #a2c6e8; }
#taste-stage .taste-card--pick::after { animation: none; opacity: .32; background: linear-gradient(140deg,#d5eaff14,transparent 38%,transparent 80%,#94bfee15); }
#taste-stage .taste-card--pick:hover { border-color: #b8d9f3; box-shadow: 0 3px 0 #081320, 0 5px 0 #82b8e566, 0 34px 58px #0b203b40, 0 0 30px #72a7d714, inset 0 1px 0 #e6f4ff99; }
#taste-stage .taste-plinth { filter: drop-shadow(8px 16px 12px rgb(var(--taste-cast) / .13)); }
#taste-stage .taste-plinth-cap { height: 23px; clip-path: polygon(0 100%,100% 100%,88% 0,12% 0); background: linear-gradient(155deg, var(--surface), color-mix(in srgb,var(--muted) 24%,var(--paper))); }
#taste-stage .taste-plinth-rise { background: linear-gradient(110deg, color-mix(in srgb,var(--muted) 25%,var(--paper)), var(--surface) 65%, color-mix(in srgb,var(--muted) 34%,var(--paper))); box-shadow: inset 0 1px #ffffff80, inset -10px 0 20px #12253b12; }
#taste-stage .taste-lane--pick .taste-plinth-cap { background: linear-gradient(155deg,#a9c0d5,#355574); }
#taste-stage .taste-lane--pick .taste-plinth-rise { background: linear-gradient(105deg,#183149,#42637f 65%,#172d43); border-color: #345777; box-shadow: inset 0 1px #bddfff99, inset 0 4px 12px #13223530; }
#taste-stage.taste-stage,
#packs.packs-outcomes,
#compare.compare-lite,
#process-radial.process-radial {
background: transparent;
}
@media (prefers-reduced-motion: reduce) { #taste-stage .taste-card::before { display: none; } }
@media (min-width: 981px) {
.pr-summary { position: absolute; left: 50%; top: 58%; width: 43%; max-width: 360px; margin: 0; padding: 10px 14px; transform: translate(-50%, -50%); text-align: center; font-size: clamp(.875rem,1.08vw,1rem); line-height: 1.6; background: var(--paper); box-shadow: 0 0 18px 8px var(--paper); border-radius: 12px; z-index: 2; }
}
html:not([data-skin="nocturne"]) .site-footer { --footer-night: #dcdce0; --dark-ink: var(--ink); background: transparent !important; color: var(--ink); }
html:not([data-skin="nocturne"]) .site-footer::after { background: linear-gradient(180deg, var(--paper), #dcdce0 65%, #d4d6da); }
html:not([data-skin="nocturne"]) .site-footer > .footer-stars { display: none; }
html[data-skin="nocturne"] .site-footer > .footer-stars[data-sky-owned="stage"] { display: none; }
html:not([data-skin="nocturne"]) .footer-brand .brand-mark { background: var(--ink) !important; }
html:not([data-skin="nocturne"]) .site-footer .footer-col a:hover,
html:not([data-skin="nocturne"]) .footer-email:hover { color: var(--accent); }
html:not([data-skin="nocturne"]) .footer-stage::before { display: none; }
@media (max-width: 860px) {
.hero .hero-services { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.hero .hero-group { text-align: left; padding-inline: 12px; justify-self: stretch; }
.hero .hero-mode { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; justify-items: start; justify-content: start; text-align: left; gap: 10px; min-height: 48px; padding: 8px 12px; border-right: 0; }
.hero .hero-mode svg { width: 26px; height: 26px; }
.hero .hero-mode span { transform: none; }
.hero .hero-mode--left { grid-column: 1; }
.hero .hero-mode--right { grid-column: 2; }
.hero .hero-mode--video, .hero .hero-mode--3d { grid-row: 2; }
.hero .hero-mode--ugc, .hero .hero-mode--configurator { grid-row: 3; }
.hero .hero-mode--imagery, .hero .hero-mode--ar { grid-row: 4; }
.hero .hero-mode:last-child { grid-column: 2; }
.hero .hero-mode[aria-checked="true"], .hero .hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: none; border-radius: 8px; }
}
#studio-console .sc-frame {--frame-x:18px;--frame-y:12px;position:relative;background:var(--pack-card-bg,#eef0f3);border-radius:24px;box-shadow:none;}
#studio-console .sc-panel {overscroll-behavior:auto;}
#studio-console .sc-frame::before,
#studio-console .sc-frame::after {
position:absolute;left:var(--frame-x);right:var(--frame-x);height:1px;z-index:3;
background:color-mix(in srgb,#fff 16%,transparent);content:"";pointer-events:none;
}
#studio-console .sc-frame::before {top:var(--frame-y);}
#studio-console .sc-frame::after {bottom:var(--frame-y);}
#studio-console .sc-frame > .outcomes-mark,
#studio-console .sc-frame > .outcomes-cross {z-index:4;}
#studio-console .sc-tab[aria-selected="true"] {background:#edf0f4;color:#0b1734;border-radius:14px;}
#studio-console .sc-tabs {border-radius:18px;}
#studio-console .sc-quote,#studio-console .sc-heading {color:var(--ink);}
#studio-console .sc-author strong {color:var(--ink);}
#studio-console .sc-author span {color:var(--muted);}
#packs.packs-outcomes .pack-rail-card,#packs.packs-outcomes .pack-rail-card.is-expanded,#packs.packs-outcomes .pack-rail-card:focus-within {border-radius:20px!important;overflow:hidden!important;clip-path:inset(0 round 20px);isolation:isolate;}
#packs .pack-rail-card-detail {border-radius:0 0 20px 20px;}
#process-radial .pr-lede {color:var(--muted);font-size:var(--type-body);line-height:1.85;max-width:43ch;}
@media(min-width:981px) {
#process-radial .pr-board {margin-top:24px;}
#process-radial .pr-copy p {opacity:0;transform:translateY(7px);transition:opacity 350ms ease,transform 450ms ease;}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-copy p {opacity:1;transform:none;}
#process-radial .pr-copy strong {display:block;opacity:.55;transform-origin:center;transition:color 350ms,opacity 350ms,transform 350ms;}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-copy strong {opacity:1;color:var(--accent);transform:translateY(-2px) scale(1.06);}
}
#taste-stage .taste-stage-intro .taste-stage-led {position:relative;inset:auto;width:auto;max-width:520px;margin:18px auto;display:flex;align-items:center;justify-content:center;gap:9px;padding:0;border:0;box-shadow:none;background:none;}
#taste-stage .taste-stage-led-kicker {font:600 .8rem var(--body);white-space:nowrap;}
#taste-stage .taste-stage-led-copy {font-size:.8rem;}
#taste-stage .taste-planes {display:block;}
#taste-stage .taste-lane--pick {--plinth-h:100px;}
#taste-stage .taste-lane--agency {--plinth-h:62px;}
#taste-stage .taste-lane--diy {--plinth-h:28px;}
#taste-stage .taste-lane--pick::before {content:'';position:absolute;inset:-18% -28% 8%;z-index:-1;background:radial-gradient(ellipse at 50% 46%,#74b6ee66,transparent 66%);pointer-events:none;filter:blur(2px);}
#taste-stage .taste-lane--pick .taste-plinth {position:relative;}
#taste-stage .taste-lane--pick .taste-plinth::after {content:'';position:absolute;inset:-18% -12% -28%;z-index:-1;border-radius:40%;background:radial-gradient(ellipse at 50% 40%,#7ec2ff88,transparent 68%);filter:blur(10px);pointer-events:none;opacity:.85;animation:pick-plinth-glow 4.8s ease-in-out infinite;}
@keyframes pick-plinth-glow {0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.95;transform:scale(1.04);}}
@media (prefers-reduced-motion:reduce) {#taste-stage .taste-lane--pick .taste-plinth::after {animation:none;}}
#taste-stage .taste-card--pick {box-shadow:0 1px 0 #c1e4ff,0 7px 0 #14283b,0 20px 36px #112b4a35,0 0 64px #6cb3ed33,inset 0 1px 0 #e1f2ff80;}
#taste-stage .taste-plinth {width:92%;filter:drop-shadow(9px 18px 15px #10233b29);}
#taste-stage .taste-plinth-cap {height:30px;clip-path:polygon(0 100%,100% 100%,91% 0,9% 0);background:linear-gradient(165deg,#f0f4f7,#99adbd);}
#taste-stage .taste-plinth-rise {border-radius:0 0 5px 5px;background:linear-gradient(90deg,#8498a9,#b8c6d0 12%,#d7e0e6 75%,#7d94a6 76%,#667f93);box-shadow:inset 0 1px #fff9,inset 0 -12px 20px #172d4320;}
#taste-stage .taste-lane--pick .taste-plinth-cap {background:linear-gradient(160deg,#c5dff1,#668bab);}
#taste-stage .taste-lane--pick .taste-plinth-rise {background:linear-gradient(90deg,#203c57,#3d617e 12%,#547994 75%,#203b53 76%,#142b41);box-shadow:inset 0 1px #d7efffcc,0 -8px 35px #7bb9ed25;}
#taste-stage .taste-podium-floor {opacity:1;left:3%;right:3%;bottom:2px;height:78px;z-index:1;pointer-events:none;}
#taste-stage .taste-podium-floor-cap {height:32px;clip-path:polygon(1% 100%,99% 100%,93% 0,7% 0);background:linear-gradient(180deg,#f4f4f6,#c5c5cc);border:1px solid #ffffffaa;box-shadow:inset 0 1px #fff,0 0 0 1px #0001;}
#taste-stage .taste-podium-floor-front {height:42px;background:linear-gradient(180deg,#b4b4bc 0%,#8e8e96 55%,#7a7a82);border:1px solid #00000014;box-shadow:inset 0 8px 14px #fff4,0 22px 36px #10101826;}
#taste-stage .taste-podium-floor::after {content:'';position:absolute;left:8%;right:8%;top:100%;height:22px;background:linear-gradient(180deg,#10101818,transparent);filter:blur(6px);}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-cap {background:linear-gradient(180deg,#4a5d72,#243140);border-color:#8aa4bc44;box-shadow:inset 0 1px #cfe4ff55;}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {background:linear-gradient(180deg,#2a3a4c,#141c26);border-color:#0006;box-shadow:inset 0 1px #9ec0dd33,0 22px 36px #0008;}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor::after {background:linear-gradient(180deg,#7eb6e622,transparent);}
@media(max-width:860px) {#taste-stage .taste-stage-intro .taste-stage-led {flex-wrap:wrap;} #taste-stage .taste-lane--pick {--plinth-h:60px;} #taste-stage .taste-lane--agency {--plinth-h:38px;} #taste-stage .taste-lane--diy {--plinth-h:20px;}}
@media(prefers-reduced-motion:reduce) {#process-radial .pr-copy p,#process-radial .pr-copy strong {opacity:1!important;transform:none!important;}}
@media(min-width:861px){
#taste-stage .taste-stage-intro {max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:8%;text-align:left;margin-bottom:10px;}
#taste-stage .taste-stage-intro .eyebrow {grid-column:1;grid-row:1;justify-content:flex-start;}
#taste-stage .taste-stage-intro h2 {grid-column:1;grid-row:2 / 5;margin:8px 0 0;}
#taste-stage .taste-stage-sub {grid-column:2;grid-row:1 / 3;align-self:end;margin:0 0 10px;}
#taste-stage .taste-stage-lede {grid-column:2;grid-row:3;margin:0;max-width:50ch;}
#taste-stage .taste-stage-intro .taste-stage-led {grid-column:2;grid-row:4;justify-content:flex-start;margin:12px 0 0;}
#taste-stage .taste-stage-tabs {display:flex;justify-content:center;margin:22px auto 0;}
}
#taste-stage .taste-led-path {display:none;}
#taste-stage .taste-planes {display:block;opacity:1;inset:8% 4% 8%;}
#taste-stage .taste-plane {border:1px solid #ffffff66;border-radius:18px;box-shadow:inset 0 1px #fff8, 8px 14px 28px #10101814;transform:none;}
#taste-stage .taste-plane--a {background:linear-gradient(145deg,#f3d9e4,#e8c4d4);}
#taste-stage .taste-plane--b {background:linear-gradient(145deg,#d5e4f4,#b9d0ea);}
#taste-stage .taste-plane--c {background:linear-gradient(145deg,#e7f0d8,#cfe0b8);}
#taste-stage .taste-plane--d {background:linear-gradient(145deg,#f7e6c8,#ecd4a8);}
#taste-stage .taste-plane--e {display:block;background:linear-gradient(145deg,#ddd4f0,#c8bce3);}
#taste-stage .taste-plane--f {background:linear-gradient(145deg,#d8f0ea,#b7ddd4);}
#taste-stage .taste-plane--g {background:linear-gradient(145deg,#f0d8d4,#e0bdb8);}
#taste-stage .taste-plane--h {background:linear-gradient(145deg,#dce6f2,#c5d2e4);}
html[data-skin="nocturne"] #taste-stage .taste-plane {border-color:#ffffff18;box-shadow:inset 0 1px #ffffff14, 8px 14px 28px #0006;}
html[data-skin="nocturne"] #taste-stage .taste-plane--a {background:linear-gradient(145deg,#3d2a36,#2a1c26);}
html[data-skin="nocturne"] #taste-stage .taste-plane--b {background:linear-gradient(145deg,#243448,#1a2636);}
html[data-skin="nocturne"] #taste-stage .taste-plane--c {background:linear-gradient(145deg,#2c3824,#1f2818);}
html[data-skin="nocturne"] #taste-stage .taste-plane--d {background:linear-gradient(145deg,#3a3020,#2a2318);}
html[data-skin="nocturne"] #taste-stage .taste-plane--e {background:linear-gradient(145deg,#2e2740,#211c30);}
html[data-skin="nocturne"] #taste-stage .taste-plane--f {background:linear-gradient(145deg,#1f3330,#172624);}
html[data-skin="nocturne"] #taste-stage .taste-plane--g {background:linear-gradient(145deg,#3a2826,#2a1d1c);}
html[data-skin="nocturne"] #taste-stage .taste-plane--h {background:linear-gradient(145deg,#243040,#1a2430);}
#taste-stage .taste-card {background:radial-gradient(ellipse at 10% 0%,#34496277,transparent 62%),linear-gradient(145deg,#18283d,#0c172a 85%);border-color:#7691ae44;color:#d5deea;box-shadow:inset 0 1px #b4cae344,0 4px 0 #071120,0 18px 32px #08142630;}
#taste-stage .taste-card-points {color:#d5deea;}
#taste-stage .taste-card-vs {color:#a8c6e8;}
#taste-stage .taste-card-label {width:100%;text-align:center;color:#e4ebf5;font:600 clamp(.85rem,1.2vw,1.1rem)/1.3 var(--body);letter-spacing:.06em;padding:5px 0 10px;}
#taste-stage .taste-card--pick .taste-card-label {display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:5px 0 12px;background:none;border:0;border-radius:0;text-align:center;font:650 clamp(1.05rem,1.5vw,1.35rem)/1.3 var(--body);letter-spacing:.07em;color:#f4f8ff;}
#taste-stage .taste-card--pick {background:radial-gradient(ellipse at 45% 0%,#36567866,transparent 62%),linear-gradient(145deg,#142840,#080f21);box-shadow:inset 0 1px #c3dcf466,0 5px 0 #060d1b,0 22px 36px #06132555;}
#taste-stage .taste-lane--pick::before {opacity:var(--landing-glow,0);background:radial-gradient(ellipse at 50% 45%,#70a9e666,transparent 64%);transition:opacity 180ms linear;}
#taste-stage .taste-card--pick::after {opacity:calc(var(--landing-glow,0) * .4);}
#taste-stage .taste-card--pick:hover {box-shadow:inset 0 1px #d3e8ff99,0 5px 0 #060d1b,0 26px 44px #06132566;}
#taste-stage .taste-plinth-cap {background:linear-gradient(155deg,#465b73,#1e3049 70%,#10223b);border-color:#7994b13d;}
#taste-stage .taste-plinth-rise {background:linear-gradient(90deg,#0b172b,#24364d 12%,#1b2c43 75%,#0b172a 76%,#071123);box-shadow:inset 0 1px #a4bfd755,inset 0 -10px 15px #02091866;}
#taste-stage .taste-lane--pick .taste-plinth-cap {background:linear-gradient(155deg,#657e97,#293d56 70%,#12263e);}
#taste-stage .taste-lane--pick .taste-plinth-rise {background:linear-gradient(90deg,#091629,#2b4159 12%,#20334b 75%,#0b192d 76%,#060e20);box-shadow:inset 0 1px #c4def177,inset 0 -10px 20px #02071855;}
#taste-stage .taste-card-label {justify-content:center;}
#taste-stage .taste-planes {opacity:1;inset:14% 8% 14%;}
:root {--studio-navy:#0b1734;}
html[data-skin="nocturne"] {--studio-navy:#101e3c;}
.page-stars {display:none!important;}
@media(min-width:861px){
.hero .hero-services {position:absolute!important;inset:0 clamp(10px,5vw,92px)!important;height:auto!important;}
.hero .hero-mode {position:absolute!important;}
.hero .hero-mode--video,.hero .hero-mode--3d {top:20%!important;}
.hero .hero-mode--ugc,.hero .hero-mode--configurator {top:46%!important;}
.hero .hero-mode--imagery,.hero .hero-mode--ar {top:72%!important;}
.hero .hero-mode--left {left:0!important;right:auto!important;}
.hero .hero-mode--right {right:0!important;left:auto!important;}
}
@media(max-width:860px){
#work .work-row {display:contents!important;}
#work .work-tile[hidden] {display:none!important;}
}
@media (max-width: 860px) {
html:not(.js) #work .work-tile--phone-hide { display: none; }
}
#packs .outcomes-panel,#studio-console .sc-frame {background:radial-gradient(ellipse at 50% 0%,#ffffff09,transparent 60%),var(--studio-navy)!important;box-shadow:0 24px 50px #07132926;}
#studio-console {--sc-ivory:#edf1f7;--sc-muted:#aab8cc;}
#studio-console .sc-quote,#studio-console .sc-heading,#studio-console .sc-author strong,#studio-console .sc-proof-row strong,#studio-console .sc-proof-num {color:#edf1f7!important;}
#studio-console .sc-kicker,#studio-console .sc-author span,#studio-console .sc-signoff,#studio-console .sc-faq-trigger,#studio-console .sc-faq-detail,#studio-console .sc-proof-row p {color:#aab8cc!important;}
#studio-console .sc-tabs {background:#ffffff0b;}
#studio-console .sc-main {background:transparent!important;}
#studio-console .sc-tab {color:#bac7d8;}
#studio-console .sc-tab[aria-selected="true"] {color:#0b1734;background:#edf1f7;}
#taste-stage .taste-stage-intro .taste-stage-led {grid-column:2;grid-row:1/5;align-self:center;}
#taste-stage .taste-stage-intro h2 {grid-row:2;}
#taste-stage .taste-stage-arena {min-height:0;padding:10px 0 32px;}
#taste-stage .taste-lanes {gap:0;padding:30px 2% 0;}
#taste-stage .taste-lane {position:relative;}
#taste-stage .taste-plinth {width:100%;margin:0;filter:none;}
#taste-stage .taste-plinth-cap {height:18px;clip-path:polygon(0 100%,100% 100%,94% 0,6% 0);}
#taste-stage .taste-plinth-rise {border-radius:0;}
#taste-stage .taste-podium-floor {left:2%;right:2%;bottom:0;height:34px;}
#taste-stage .taste-podium-floor-cap {height:0;border:0;}
#taste-stage .taste-podium-floor-front {height:34px;border-radius:0 0 8px 8px;background:linear-gradient(#28364c,#101a2e)!important;border:0;}
@media (min-width: 861px) {
#taste-stage .taste-card-motion {width:90%;}
}
#taste-stage .taste-card,#taste-stage .taste-card--pick {background:linear-gradient(145deg,#ffffff16,#ffffff04),rgba(11,23,52,.2)!important;backdrop-filter:blur(18px) saturate(.55);-webkit-backdrop-filter:blur(18px) saturate(.55);border:1px solid #ffffff99;box-shadow:inset 0 1px #ffffffcc,inset 0 -1px #10223b30,0 14px 32px #09182f24;}
#taste-stage .taste-card--pick {border-color:#ffffffee;box-shadow:inset 0 1px 2px #fff,0 16px 36px #07173333;}
#taste-stage .taste-card-label,#taste-stage .taste-card--pick .taste-card-label,#taste-stage .taste-card-points,#taste-stage .taste-card-vs {color:var(--ink);}
#taste-stage .taste-card-shot {border:1px solid #ffffff66;box-shadow:0 1px 0 #ffffff88;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {background:linear-gradient(135deg,#ffffff18,#91a3bc12)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #93a4bb44;box-shadow:inset 0 1px #ffffff99,5px 9px 20px #07172d14;}
#taste-stage .taste-lane--pick .taste-plinth::after {animation:none;opacity:calc(var(--landing-glow,0)*.5);}
#taste-stage .taste-lane--pick::before {background:radial-gradient(ellipse,#97b9dc66,transparent 65%);}
@media(min-width:861px) and (min-height:700px){
#taste-stage.taste-stage {overflow:visible;padding-bottom:72px;}
#taste-stage .taste-stage-shell {position:sticky;top:var(--header, 72px);}
#taste-stage .taste-card-shot {max-height:206px;min-height:0;aspect-ratio:4/5;}
#taste-stage .taste-card--pick .taste-card-shot {max-height:252px;}
}
@media(max-width:860px){#taste-stage .taste-lanes{gap:12px;}#taste-stage .taste-card-motion{width:100%;}#taste-stage .taste-stage-intro .taste-stage-led{margin:16px auto;}#taste-stage .taste-podium-floor{display:none;} }
#taste-stage .taste-stage-tabs {
display:flex;
justify-content:center;
position:relative;
z-index:4;
width:fit-content;
margin:10px auto 0;
}
@media(max-width:860px){
#taste-stage .taste-stage-tabs {margin-top:16px;}
}
#studio-console .sc-frame {
background: var(--pack-card-bg, #eef0f3) !important;
box-shadow: none !important;
}
#studio-console .sc-quote,
#studio-console .sc-heading,
#studio-console .sc-author strong,
#studio-console .sc-proof-row strong,
#studio-console .sc-proof-num { color: var(--ink) !important; }
#studio-console .sc-kicker,
#studio-console .sc-author span,
#studio-console .sc-signoff,
#studio-console .sc-faq-trigger,
#studio-console .sc-faq-detail,
#studio-console .sc-proof-row p { color: var(--muted) !important; }
#studio-console .sc-tab { color: var(--muted); }
#studio-console .sc-tab[aria-selected="true"] { color:#0b1734; background:#edf1f7; }
#taste-stage .taste-plane,
html[data-skin="nocturne"] #taste-stage .taste-plane {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#taste-stage .taste-plane--a { background: linear-gradient(145deg,#f3d9e4,#e8c4d4) !important; }
#taste-stage .taste-plane--b { background: linear-gradient(145deg,#d5e4f4,#b9d0ea) !important; }
#taste-stage .taste-plane--c { background: linear-gradient(145deg,#e7f0d8,#cfe0b8) !important; }
#taste-stage .taste-plane--d { background: linear-gradient(145deg,#f7e6c8,#ecd4a8) !important; }
#taste-stage .taste-plane--e { background: linear-gradient(145deg,#ddd4f0,#c8bce3) !important; }
#taste-stage .taste-plane--f { background: linear-gradient(145deg,#d8f0ea,#b7ddd4) !important; }
#taste-stage .taste-plane--g { background: linear-gradient(145deg,#f0d8d4,#e0bdb8) !important; }
#taste-stage .taste-plane--h { background: linear-gradient(145deg,#dce6f2,#c5d2e4) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--a { background: linear-gradient(145deg,#3d2a36,#2a1c26) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--b { background: linear-gradient(145deg,#243448,#1a2636) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--c { background: linear-gradient(145deg,#2c3824,#1f2818) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--d { background: linear-gradient(145deg,#3a3020,#2a2318) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--e { background: linear-gradient(145deg,#2e2740,#211c30) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--f { background: linear-gradient(145deg,#1f3330,#172624) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--g { background: linear-gradient(145deg,#3a2826,#2a1d1c) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--h { background: linear-gradient(145deg,#243040,#1a2430) !important; }
#taste-stage .taste-podium-floor {
left: 3%;
right: 3%;
bottom: 0;
height: 86px !important;
z-index: 1;
opacity: 1;
}
#taste-stage .taste-podium-floor-cap {
display: block;
height: 34px !important;
border: 1px solid #ffffffaa;
clip-path: polygon(1% 100%,99% 100%,93% 0,7% 0);
background: linear-gradient(180deg,#f4f4f6,#c5c5cc) !important;
box-shadow: inset 0 1px #fff, 0 0 0 1px #0001;
}
#taste-stage .taste-podium-floor-front {
height: 52px !important;
border-radius: 0 0 10px 10px;
background: linear-gradient(180deg,#b4b4bc 0%,#8e8e96 55%,#7a7a82) !important;
border: 1px solid #00000014 !important;
box-shadow: inset 0 8px 14px #fff4, 0 22px 36px #10101826;
}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-cap {
background: linear-gradient(180deg,#4a5d72,#243140) !important;
border-color: #8aa4bc44;
}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
background: linear-gradient(180deg,#2a3a4c,#141c26) !important;
}
html[data-skin="nocturne"] .hero-stars {
display: block;
z-index: 1;
}
.hero-sky-near-mask { z-index: 2 !important; }
html[data-skin="nocturne"] .page-stars { display: none !important; }
#packs .packs-head-led {display:grid;grid-template-columns:18px 1fr;gap:7px 12px;max-width:390px;background:none!important;filter:none!important;box-shadow:none!important;}
#packs .packs-head-led::before,#packs .packs-head-led::after {display:none!important;}
#packs .packs-head-led .taste-stage-led-kicker {font-size:1.12rem;white-space:nowrap;}
#packs .packs-head-led .taste-stage-led-copy {grid-column:2;font-size:1rem;line-height:1.5;}
#packs .outcomes-panel,#studio-console .sc-frame {background:linear-gradient(160deg,#ffffff0d,transparent 45%),color-mix(in srgb,var(--studio-navy) 94%,transparent)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #a9c4e32b;box-shadow:inset 0 1px #d9e9ff38,inset 0 -1px #02091e70,0 20px 45px #09152e26;}
#packs .pack-rail-card {backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #ffffffbd,0 8px 18px #020a2117;}
#taste-stage .taste-card::before,#taste-stage .taste-card::after {display:none!important;}
#taste-stage .taste-card:hover {filter:none!important;box-shadow:inset 0 1px #ffffffb3,0 16px 34px #09182f26!important;}
#taste-stage .taste-card:hover .taste-card-shot img {transform:none!important;filter:inherit;}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {box-shadow:inset 0 1px #ffffffcc,0 14px 32px #0a17333b,0 0 26px #91b7e024!important;}
#taste-stage .taste-lane--pick::before {inset:2% -7% 12%;background:radial-gradient(ellipse,#a6c7e84d,transparent 70%);filter:blur(18px);}
#taste-stage .taste-lane--pick .taste-plinth::after {display:none;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {background:linear-gradient(135deg,#d9e5f13d,#8098b01c)!important;border-color:#a5bcd16b;box-shadow:inset 0 1px #edf7ff99,0 12px 28px #08142a12;}
#taste-stage .taste-stage-intro .taste-stage-tabs {align-self:end;margin-bottom:4px;transform:translateY(18px);}
#taste-stage.is-settled .taste-card--pick {animation:pick-soft-float 6s ease-in-out infinite;}
@keyframes pick-soft-float {0%,100%{translate:0 0;}50%{translate:0 -5px;}}
.section-night-stars {position:absolute!important;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none;}
html[data-skin="nocturne"] .section-night-stars {display:block;}
@media(prefers-reduced-motion:reduce){#taste-stage.is-settled .taste-card--pick {animation:none;}}
@media(max-width:860px){#taste-stage .taste-stage-intro .taste-stage-tabs {transform:none;margin:20px 0 0;}#packs .packs-head-led{max-width:100%;}}
#taste-stage .taste-card--pick .taste-card-points {color:var(--ink)!important;}
#taste-stage .taste-card--pick .taste-card-vs {color:var(--accent)!important;}
#taste-stage .taste-stage-tabs {margin-top:26px;}
#taste-stage .taste-plane {backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}
#studio-console .sc-quote,#studio-console .sc-heading,#studio-console .sc-author strong,#studio-console .sc-proof-row strong,#studio-console .sc-proof-num {color:#edf1f7!important;}
#studio-console .sc-kicker,#studio-console .sc-author span,#studio-console .sc-signoff,#studio-console .sc-faq-trigger,#studio-console .sc-faq-detail,#studio-console .sc-proof-row p,#studio-console .sc-tab {color:#b8c6d8!important;}
#studio-console .sc-tab[aria-selected="true"] {color:#0b1734!important;}
.site-footer .footer-main {position:relative;z-index:6!important;}
.footer-stage::before {display:none!important;}
#taste-stage .taste-plane {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#packs .pack-rail-card {backdrop-filter:none;-webkit-backdrop-filter:none;}
#taste-stage .taste-card,
#taste-stage .taste-card--pick {
background:linear-gradient(145deg,#e8f1ff12,transparent 58%),#0b1734e8!important;
color:#e7edf6; border:1px solid #a8bfd02e!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
border-radius:18px;isolation:isolate;transform-style:flat;backface-visibility:hidden;
box-shadow:inset 0 1px #f0f6ff24,0 2px 3px #02091b26,0 14px 28px #07122430!important;
animation:none!important;translate:none!important;
}
#taste-stage .taste-card:hover {
box-shadow:inset 0 1px #f0f6ff30,0 18px 30px #07122438!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
background:radial-gradient(ellipse at 50% -35%,#9bbddd28,transparent 70%),#0b1734ed!important;
border-color:#aec8e45c!important;
box-shadow:inset 0 1px #e4f2ff40,0 8px 18px #020c2233,0 0 65px #91bce224!important;
}
#taste-stage .taste-card-label,#taste-stage .taste-card--pick .taste-card-points,
#taste-stage .taste-card-points {color:#dce5f1!important;}
#taste-stage .taste-card-shot {border:0!important;border-radius:10px;box-shadow:none!important;overflow:hidden;}
#taste-stage .taste-card-shot img {backface-visibility:hidden;}
#taste-stage .taste-lane--pick::before {filter:none!important;background:radial-gradient(ellipse at 50% 45%,#a6c7e82b,transparent 72%);inset:-5% -20% 0;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {
background:linear-gradient(145deg,#b9cbd622,#788fa612)!important;
border:1px solid #9aafc52b!important;box-shadow:inset 0 1px #e1eefe1a,0 12px 24px #07152b0d!important;
border-radius:20px;filter:none!important;
}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
background:linear-gradient(165deg,#46576c,#2c3e54 55%,#192b41)!important;
box-shadow:none!important;border:0!important;height:16px;
clip-path:polygon(0 100%,100% 100%,94% 0,6% 0);
}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {
background:linear-gradient(105deg,#17283e,#26394e 35%,#1a2b41 72%,#101e33)!important;
border:0!important;box-shadow:inset 0 1px #c4d5e51a,inset 0 -8px 14px #030b1824!important;
}
#taste-stage .taste-podium-floor {left:2%;right:2%;height:26px!important;bottom:5px;}
#taste-stage .taste-podium-floor-cap {display:none!important;}
#taste-stage .taste-podium-floor-front,html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
height:26px!important;border:0!important;border-radius:0 0 9px 9px;
background:linear-gradient(#213348,#14243a)!important;
box-shadow:inset 0 1px #b4c8dc12,0 16px 28px #020b1d28!important;
}
#taste-stage .taste-podium-floor::after {display:none!important;}
#packs .outcomes-panel,#studio-console .sc-frame {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#process-radial .is-active .pr-node::after {content:'';position:absolute;inset:-7px;border:1px solid #75a4dd35;border-radius:50%;pointer-events:none;}
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after {animation-play-state:paused!important;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane{transform:scale(var(--plane-scale,1));}
#taste-stage .taste-card,#taste-stage .taste-card:hover,#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
background:#0b1734!important;filter:none!important;
box-shadow:0 8px 22px #07122426!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {border-color:#8ba9cd66!important;box-shadow:0 8px 22px #07122426,0 0 48px #84a6cd24!important;}
#taste-stage .taste-card--diy .taste-card-shot img,#taste-stage .taste-card--diy:hover .taste-card-shot img {filter:saturate(.5) contrast(.9) brightness(1.06) grayscale(.12)!important;}
#taste-stage .taste-card--agency .taste-card-shot img,#taste-stage .taste-card--agency:hover .taste-card-shot img {filter:saturate(.86) contrast(.98)!important;}
#taste-stage .taste-card--pick .taste-card-shot img,#taste-stage .taste-card--pick:hover .taste-card-shot img {filter:saturate(1.06) contrast(1.06)!important;}
#taste-stage .taste-card .taste-stage-tabs {position:relative;inset:auto;margin:8px auto 0;transform:none;max-width:100%;background:#ffffff0a;border:1px solid #a5b8cf30;box-shadow:none;}
#taste-stage .taste-card .taste-stage-tabs button {color:#b9c7db;}
#taste-stage .taste-card .taste-stage-tabs button[aria-selected="true"] {color:#0b1734;background:#e9eef6;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {background:#9eafc133!important;border-color:#8195af57!important;box-shadow:none!important;}
#taste-stage .taste-planes {inset:-28px 0 35px;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {clip-path:none;height:7px;background:#34465d!important;border-radius:2px 2px 0 0;transform:none;}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {background:linear-gradient(#203148,#192a40)!important;box-shadow:none!important;}
#taste-stage .taste-lane--diy {--plinth-h:22px;}
#taste-stage .taste-lane--agency {--plinth-h:38px;}
#taste-stage .taste-lane--pick {--plinth-h:54px;}
#taste-stage .taste-card-motion {margin-bottom:0;}
#taste-stage .taste-podium-floor-front {box-shadow:0 14px 24px #020b1d22!important;}
#taste-stage .taste-stage-arena {padding-bottom:26px;}
.hero .hero-actions .hero-readout {top:-12px!important;}
.hero .hero-readout-desc {font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.4;white-space:normal;}
@media (max-width:860px) {
.hero .hero-actions .hero-readout {top:-8px!important;}
.hero .hero-readout-desc {min-height:calc(1.4em * 2);}
html .hero.has-sky,
html .hero.has-sky-fallback {
min-height: 100svh;
height: 100svh;
padding-bottom: 16px;
}
}
#packs .packs-head-led .taste-stage-led-kicker {font-size:clamp(1.25rem,1.55vw,1.45rem);line-height:1.25;}
#packs .packs-head-led .taste-stage-led-copy {font-size:clamp(1rem,1.2vw,1.1rem);}
@media (max-width:860px) {
#packs .packs-head-copy .eyebrow,
#packs .packs-head-copy h2 {text-align:right;justify-self:end;}
#packs .packs-head-led {
justify-self:end;margin-left:auto;width:max-content;max-width:100%;
}
#packs .packs-head-led .taste-stage-led-kicker {
font-size:.8rem!important;line-height:1.2;white-space:nowrap;
}
#packs .packs-head-led .taste-stage-led-copy {
font-size:.78rem!important;line-height:1.35;text-align:right;
}
}
@media (min-width:981px) {
#packs.packs-outcomes .packs-head {
grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
gap:0 clamp(32px,5vw,80px);
align-items:center;
margin-bottom:24px;
}
#packs .packs-head-copy {display:contents;}
#packs .packs-head-copy .eyebrow {grid-column:2;grid-row:1;}
#packs .packs-head-copy h2 {grid-column:2;grid-row:2;}
#packs .packs-head-led {grid-column:1;grid-row:2;align-self:center;max-width:410px;margin:0;}
#process-radial .pr-heading {align-items:center;}
#process-radial .pr-lede {align-self:center;margin:0;}
#work .work-head {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;}
#work .work-head-title {grid-column:2;grid-row:1;justify-self:end;}
#work .work-head-title h2 {margin-block:0;}
#work .work-head-side {grid-column:1;grid-row:1;min-width:0;padding-bottom:0;}
#work .work-head-side .filter-bar {justify-content:flex-start;flex-wrap:wrap;}
}
@media(min-width:981px) {
#packs .packs-head-copy .eyebrow,#packs .packs-head-copy h2 {text-align:right;justify-self:end;}
#work .work-head-title {text-align:right;}
#packs .outcomes-panel {--outcomes-panel-h:620px;}
#packs.packs-outcomes .outcomes-rail,
#packs.packs-outcomes.is-pack-hovering .outcomes-rail {padding-top:48px;padding-bottom:12px;}
}
#packs.packs-outcomes .pack-rail-card.is-expanded,
#packs.packs-outcomes .pack-rail-card:focus-within {border-radius:20px!important;clip-path:none;}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail {
display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
overflow:visible;padding:0 4px 2px;border-radius:0;
}
#packs .pack-rail-card-stats,#packs .pack-controls {flex-shrink:0;}
#packs .pack-rail-card-cta {flex-shrink:0;margin-top:auto;}
#packs.packs-outcomes .pack-slider {padding-inline:4px;overflow:visible;}
#packs.packs-outcomes .pack-slider span {align-items:baseline;overflow:visible;}
#packs.packs-outcomes .pack-slider strong {
flex:none;min-width:1.25em;padding-inline:2px;line-height:1.2;overflow:visible;
}
#packs.packs-outcomes .pack-slider input[type="range"] {
width:calc(100% - 8px);margin-inline:4px;
}
#packs .pack-rail-card-cta,
#packs .pack-rail-card .pack-rail-card-cta.button--dark {
background: var(--action);
color: var(--action-ink);
border-color: var(--action);
box-shadow: none;
filter: none;
}
#packs .pack-rail-card-cta:hover,
#packs .pack-rail-card-cta:focus-visible,
#packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
#packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
color: var(--action-ink);
box-shadow: none;
filter: none;
}
html[data-skin="nocturne"] #packs .pack-rail-card-cta,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark {
background:linear-gradient(180deg,#3b73e9 0%,#2961db 45%,#2250b4 100%);
border:1px solid rgba(255,255,255,.28);
color:#061026;
box-shadow:inset 0 1px 0 rgb(204 230 255 / .18),inset 0 -1px 0 rgb(6 16 38 / .18);
}
html[data-skin="nocturne"] #packs .pack-rail-card-cta:hover,
html[data-skin="nocturne"] #packs .pack-rail-card-cta:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
background: var(--cta-hover, #4087f7);
border-color: var(--cta-hover, #4087f7);
color: #061026;
box-shadow: none;
filter: none;
}
#packs .pack-rail-card-visual--grid img {min-height:0;max-height:100%;object-fit:cover;}
@media(prefers-reduced-motion:no-preference) {
.editorial-reveal {transform:translateY(22px);transition:opacity 750ms ease,transform 950ms cubic-bezier(.16,1,.3,1);transition-delay:var(--editorial-delay,0ms);}
.editorial-reveal.is-revealed {transform:none;}
html.js #process-radial.is-pending .pr-heading > * {transform:translateY(22px);}
html.js #process-radial.is-in .pr-heading > * {transition:opacity 750ms ease,transform 950ms cubic-bezier(.16,1,.3,1);}
}
#taste-stage {
--stone-top:#7c8189;--stone-mid:#4e5359;--stone-base:#2c3036;
--spotlight:#ffffff8c;--stone-grain:url('assets/ui/limestone.svg');
}
html[data-skin="nocturne"] #taste-stage {
--stone-top:#5c6169;--stone-mid:#3a3e45;--stone-base:#1f2227;--spotlight:#aecaff1c;
}
#taste-stage .taste-stage-arena::before {
content:'';position:absolute;inset:-180px -7% -70px;pointer-events:none;z-index:0;
background:radial-gradient(ellipse at 50% 20%,var(--spotlight),transparent 58%),radial-gradient(ellipse at 50% 90%,var(--spotlight),transparent 60%);
filter:none!important;opacity:1;transform:none;
}
#taste-stage .taste-card,#taste-stage .taste-card:hover {
background:radial-gradient(ellipse at 20% 0%,#31476888,transparent 65%),linear-gradient(160deg,#132341,#0b1734 75%)!important;
border:1px solid #8aa5cb55!important;
box-shadow:inset 0 1px #c4d8f02b,0 12px 24px #07122424!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
background:radial-gradient(ellipse at 50% -20%,#4673ad66,transparent 64%),linear-gradient(160deg,#14294b,#0b1734 75%)!important;
border-color:#81a7e49c!important;
box-shadow:inset 0 1px #c7deff77,0 10px 24px #07122433,0 0 36px #6d95da30!important;
}
#taste-stage .taste-lane--pick::before {background:radial-gradient(ellipse at 50% 32%,#9ebbf540,transparent 65%);}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {
background:linear-gradient(140deg,#e9effc46,#ffffff0f)!important;border-color:#ffffff9c!important;
box-shadow:inset 0 1px #fff5,0 8px 20px #1b27470a!important;
}
html[data-skin="nocturne"] #taste-stage .taste-plane {border-color:#aebeda35!important;background:linear-gradient(140deg,#a2b6d52b,#ffffff07)!important;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
height:12px;clip-path:polygon(0 100%,100% 100%,97% 0,3% 0);border-radius:0;
background:linear-gradient(170deg,var(--stone-top),var(--stone-mid))!important;
}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {
background:var(--stone-grain),linear-gradient(105deg,var(--stone-mid),var(--stone-top) 40%,var(--stone-mid) 76%,var(--stone-base))!important;
background-size:144px 144px,100% 100%!important;
box-shadow:inset 0 1px #fff9,inset 0 -1px #64574733!important;
}
#taste-stage .taste-lane--diy {--plinth-h:50px;}
#taste-stage .taste-lane--agency {--plinth-h:66px;}
#taste-stage .taste-lane--pick {--plinth-h:94px;}
#taste-stage .taste-podium-floor {height:32px!important;bottom:0;}
#taste-stage .taste-podium-floor-front,html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
height:32px;border-radius:2px 2px 5px 5px!important;
background:var(--stone-grain),linear-gradient(180deg,var(--stone-mid),var(--stone-base))!important;
background-size:144px 144px,100% 100%!important;
box-shadow:inset 0 1px var(--stone-top),0 18px 28px #3e332626!important;
}
#taste-stage .taste-stage-arena {padding-bottom:32px;}
#taste-stage .taste-stage-arena::before {mask-image:linear-gradient(transparent,#000 18%,#000 65%,transparent);}
@media(max-width:980px) {
#packs.packs-outcomes.is-pack-hovering .outcomes-panel {height:auto!important;min-height:420px!important;max-height:none!important;}
#packs.packs-outcomes.is-pack-hovering .outcomes-rail {height:auto!important;min-height:0!important;max-height:none!important;padding:28px 2px 16px;align-items:flex-start;}
#packs.packs-outcomes .pack-rail-card.is-expanded {height:auto!important;min-height:0!important;max-height:none!important;align-self:flex-start;}
#packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail {
position:relative!important;inset:auto!important;display:grid;flex:0 0 auto;min-height:0;overflow:visible;
opacity:1;transform:none;pointer-events:auto;padding:8px 0 4px;border-radius:0;
}
#packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail[hidden] {display:none!important;}
}
#taste-stage .taste-stage-intro,
#packs .packs-head,
#work .work-head {
background: transparent !important;
box-shadow: none !important;
}
.ribbon-stack { background: transparent; }
.ribbon { background: transparent; }
.ribbon::before { background: linear-gradient(90deg, var(--paper), transparent); }
.ribbon::after { background: linear-gradient(270deg, var(--paper), transparent); }
#taste-stage .taste-plane,
html[data-skin="nocturne"] #taste-stage .taste-plane {
background: linear-gradient(145deg, rgba(58, 65, 74, 0.56), rgba(28, 33, 40, 0.44)) !important;
border: 1px solid rgba(150, 163, 180, 0.32) !important;
box-shadow:
inset 0 1px 0 rgba(214, 226, 240, 0.16),
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
12px 22px 40px rgba(10, 16, 26, 0.2) !important;
backdrop-filter: blur(12px) saturate(0.9) !important;
-webkit-backdrop-filter: blur(12px) saturate(0.9) !important;
opacity: 0.95;
}
html[data-skin="nocturne"] #taste-stage .taste-plane {
background: linear-gradient(145deg, rgba(114, 126, 144, 0.4), rgba(34, 40, 49, 0.36)) !important;
border-color: rgba(184, 198, 216, 0.28) !important;
box-shadow:
inset 0 1px 0 rgba(206, 222, 242, 0.12),
12px 22px 40px rgba(0, 0, 0, 0.42) !important;
}
#taste-stage:not(.is-settled) .taste-plane {
pointer-events: none;
}
#taste-stage .taste-stage-arena::before {
opacity: 0.45 !important;
}
#taste-stage .taste-card--diy,
#taste-stage .taste-card--agency,
#taste-stage .taste-card--diy:hover,
#taste-stage .taste-card--agency:hover {
background: linear-gradient(170deg, #1c2c40 0%, #111c2b 62%, #1a2939 100%) !important;
border: 1px solid rgba(110, 130, 155, 0.22) !important;
box-shadow:
inset 0 2px 0 rgba(186, 206, 228, 0.18),
0 2px 0 #0d1723,
0 5px 0 #08101a,
0 7px 0 #050a11,
0 11px 14px rgba(7, 18, 36, 0.32),
0 26px 36px rgba(7, 18, 36, 0.2) !important;
filter: saturate(0.62) brightness(0.86) contrast(0.96) !important;
opacity: 0.88;
}
#taste-stage .taste-card--diy .taste-card-label,
#taste-stage .taste-card--agency .taste-card-label,
#taste-stage .taste-card--diy .taste-card-points,
#taste-stage .taste-card--agency .taste-card-points {
color: rgba(190, 202, 216, 0.88) !important;
}
#taste-stage .taste-card--pick,
#taste-stage .taste-card--pick:hover {
background: linear-gradient(168deg, #1e3d64 0%, #0d1c3a 64%, #17294a 100%) !important;
border: 1px solid rgba(126, 190, 255, 0.62) !important;
filter: none !important;
transform-style: preserve-3d;
box-shadow:
inset 0 2px 0 rgba(226, 242, 255, 0.55),
0 2px 0 #0d1c33,
0 5px 0 #091528,
0 9px 0 #060f1e,
0 13px 0 #040a14,
0 18px 22px rgba(7, 22, 48, 0.45),
0 40px 54px rgba(7, 22, 48, 0.28),
0 0 0 1px rgba(122, 196, 255, 0.4),
0 0 26px rgba(88, 176, 255, 0.45) !important;
}
#taste-stage .taste-card--pick::before { display: none !important; }
#taste-stage .taste-lane--pick .taste-card-motion::before {
content: "";
position: absolute;
inset: -7px -9px -12px;
z-index: -1;
pointer-events: none;
border-radius: 24px;
background: linear-gradient(180deg, rgba(126, 208, 255, 0.9), rgba(72, 156, 255, 0.7) 46%, rgba(40, 104, 210, 0.34));
filter: blur(10px);
opacity: calc(var(--landing-glow, 0) * 0.9);
}
#taste-stage .taste-lane--pick::before {
inset: -12% -24% -4%;
z-index: -2;
filter: blur(28px) !important;
background: radial-gradient(ellipse at 50% 46%, rgba(74, 152, 250, 0.3), rgba(58, 122, 220, 0.1) 52%, transparent 74%);
opacity: calc(var(--landing-glow, 0) * 0.9);
}
#taste-stage .taste-card--diy,
#taste-stage .taste-card--agency,
#taste-stage .taste-card--pick,
#taste-stage .taste-card--diy:hover,
#taste-stage .taste-card--agency:hover,
#taste-stage .taste-card--pick:hover {
transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--card-lift, 0px)) !important;
transition: transform 200ms ease-out, opacity 260ms ease, filter 260ms ease !important;
}
#taste-stage .taste-card--pick { --card-lift: -2px; }
#taste-stage.is-settled .taste-card--diy:hover,
#taste-stage.is-settled .taste-card--agency:hover {
--card-lift: -5px;
filter: saturate(0.74) brightness(0.94) contrast(0.97) !important;
opacity: 0.95;
}
#taste-stage.is-settled .taste-card--pick:hover { --card-lift: -6px; }
@media (prefers-reduced-motion: reduce) {
#taste-stage .taste-card--diy,
#taste-stage .taste-card--agency,
#taste-stage .taste-card--pick,
#taste-stage.is-settled .taste-card--diy:hover,
#taste-stage.is-settled .taste-card--agency:hover,
#taste-stage.is-settled .taste-card--pick:hover {
transform: none !important;
transition: none !important;
}
}
#taste-stage .taste-lanes {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr);
}
#taste-stage .taste-lane--diy,
#taste-stage .taste-lane--agency { --card-w: 94%; --plinth-h: 34px; }
#taste-stage .taste-lane--pick { --card-w: 100%; --plinth-h: 54px; }
#taste-stage .taste-card {
overflow: visible !important;
padding: 14px 16px 18px !important;
gap: 12px !important;
text-align: center;
}
#taste-stage .taste-card--pick { padding: 16px 18px 22px !important; gap: 14px !important; }
#taste-stage .taste-lane--diy .taste-card-motion,
#taste-stage .taste-lane--agency .taste-card-motion { margin-bottom: 8px; }
#taste-stage .taste-lane--pick .taste-card-motion { margin-bottom: 14px; }
#taste-stage .taste-card-points {
justify-items: center;
gap: 0.5em;
text-align: center;
font-size: clamp(0.92rem, 1.02vw, 1.04rem) !important;
line-height: 1.42;
}
#taste-stage .taste-card--pick .taste-card-points {
font-size: clamp(1rem, 1.12vw, 1.14rem) !important;
}
#taste-stage .taste-card--diy .taste-card-label,
#taste-stage .taste-card--agency .taste-card-label {
font-size: clamp(0.95rem, 1.3vw, 1.18rem) !important;
}
#taste-stage .taste-card--pick .taste-card-label {
font-size: clamp(1.16rem, 1.62vw, 1.46rem) !important;
}
#taste-stage .taste-lane--pick .taste-plinth-rise {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--plinth-h, 94px);
}
#taste-stage .taste-lane--pick .taste-stage-tabs {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 5;
margin: 0 !important;
width: max-content;
max-width: calc(100% - 16px);
padding: 4px;
border: 1px solid rgba(12, 16, 22, 0.28);
border-radius: 999px;
background: rgba(244, 246, 249, 0.94);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(6, 10, 16, 0.32);
}
#taste-stage .taste-lane--pick .taste-stage-tabs button {
color: color-mix(in srgb, #10151c 68%, transparent);
font-size: 0.58rem;
}
#taste-stage .taste-lane--pick .taste-stage-tabs button[aria-selected="true"] {
background: #10151c;
color: #f4f6f9;
}
#taste-stage .taste-card .taste-stage-tabs {
display: none !important;
}
@media (max-width: 860px) {
#taste-stage .taste-lane--pick .taste-plinth-rise {
min-height: 64px;
}
#taste-stage .taste-lane--pick .taste-stage-tabs {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 10px auto 0 !important;
flex-wrap: nowrap;
}
#taste-stage .taste-lane--pick .taste-stage-tabs button {
font-size: 0.5rem;
white-space: nowrap;
}
#taste-stage .taste-lane--pick .taste-card-motion::before {
inset: -5px -6px -8px;
filter: blur(8px);
opacity: calc(var(--landing-glow, 0) * 0.7);
}
}
#taste-stage .taste-stage-hold { height: 0; }
@media (min-width: 861px) and (min-height: 820px) and (prefers-reduced-motion: no-preference) {
#taste-stage.taste-stage { overflow: visible; }
#taste-stage .taste-stage-shell {
position: sticky;
top: clamp(20px, calc(50vh - 400px), 92px);
}
#taste-stage .taste-stage-hold { height: 50vh; }
}
#process-radial .pr-node {
border: 1px solid #9fb0c559;
background:
radial-gradient(58% 50% at 30% 17%, #ffffff 0%, #ffffffc4 40%, #ffffff00 74%),
radial-gradient(74% 58% at 74% 97%, #ffffff5e 0%, #ffffff00 66%),
linear-gradient(145deg, #fdfeff 0%, #f0f3f8 28%, #dfe5ee 62%, #c4cedc 100%);
box-shadow:
inset 0 1.5px 1px #ffffff,
inset 1.5px 0 1.5px #ffffffa8,
inset 0 -2px 2.5px #8698b03d,
inset -1.5px 0 2px #8f9fb52e,
0 1px 0 #ffffffc4,
0 4px 0 #bcc7d5,
0 5px 1px #8496ab33,
0 8px 12px #16294a1c,
0 17px 26px #16294a22;
}
#process-radial .pr-node::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(145deg, #ffffffeb 0%, #ffffff00 34%, #ffffff00 60%, #7f92aa5c 100%);
-webkit-mask: radial-gradient(circle closest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
mask: radial-gradient(circle closest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
#process-radial .pr-icon { position: relative; z-index: 2; }
#process-radial .pr-step.is-active .pr-node,
#process-radial .pr-step.is-focus .pr-node {
border-color: #7ea6d97a;
background:
radial-gradient(58% 50% at 30% 17%, #ffffff 0%, #ffffffcf 40%, #ffffff00 74%),
radial-gradient(74% 58% at 74% 97%, #dce9f96b 0%, #ffffff00 66%),
linear-gradient(145deg, #fdfeff 0%, #eef4fb 28%, #dae5f2 62%, #bacde3 100%);
box-shadow:
inset 0 1.5px 1px #ffffff,
inset 1.5px 0 1.5px #ffffffb0,
inset 0 -2px 2.5px #6f8dae42,
0 1px 0 #ffffffc4,
0 4px 0 #a8bcd3,
0 5px 1px #7590ad3d,
0 9px 14px #1b3c6924,
0 18px 30px #1b3c692b,
0 0 22px #7ba5dd26;
}
html[data-skin="nocturne"] #process-radial .pr-node {
border-color: #8fb0d642;
background:
radial-gradient(58% 50% at 30% 17%, #7e9cbe75 0%, #7e9cbe1f 45%, #7e9cbe00 76%),
radial-gradient(74% 58% at 74% 97%, #4d76a52e 0%, #4d76a500 66%),
linear-gradient(145deg, #3b4c66 0%, #2a3a52 30%, #1a2740 66%, #101c31 100%);
box-shadow:
inset 0 1.5px 1px #cfe4ff5c,
inset 1.5px 0 1.5px #cfe4ff33,
inset 0 -2px 3px #01070fa8,
inset -1.5px 0 2px #01070f7a,
0 1px 0 #b9d3f229,
0 4px 0 #0b1425,
0 5px 1px #00040c8f,
0 9px 14px #00030a5c,
0 18px 28px #00030a70;
}
html[data-skin="nocturne"] #process-radial .pr-node::before {
background: linear-gradient(145deg, #d9ebff8f 0%, #d9ebff00 32%, #00060f00 58%, #00060f99 100%);
}
html[data-skin="nocturne"] #process-radial .pr-step.is-active .pr-node,
html[data-skin="nocturne"] #process-radial .pr-step.is-focus .pr-node {
border-color: #8fb8e88f;
background:
radial-gradient(58% 50% at 30% 17%, #9dbde075 0%, #9dbde024 45%, #9dbde000 76%),
radial-gradient(74% 58% at 74% 97%, #5b8cc23d 0%, #5b8cc200 66%),
linear-gradient(145deg, #445c7c 0%, #2f4361 30%, #1c2d4a 66%, #122038 100%);
box-shadow:
inset 0 1.5px 1px #d7eaff70,
inset 1.5px 0 1.5px #d7eaff40,
inset 0 -2px 3px #01070fa8,
0 1px 0 #c6dcf933,
0 4px 0 #0c1729,
0 5px 1px #00040c8f,
0 10px 16px #00030a66,
0 20px 32px #00030a78,
0 0 24px #6ea3dd2e;
}
.ribbon-stack {background:transparent!important;}
html:not([data-skin="nocturne"]) .ribbon--clients,
html:not([data-skin="nocturne"]) .ribbon--industries {background:transparent!important;}
.footer-rain-canvas {position:absolute;inset:0;z-index:2;display:block;pointer-events:none;}
#studio-console .sc-shell {isolation:isolate;}
#studio-console .sc-shell::before {
content:"";position:absolute;left:5%;right:5%;bottom:-26px;height:68px;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse at center,#332d3933,transparent 70%);filter:blur(6px);
}
#studio-console .sc-frame {
background:linear-gradient(176deg,#26334f 0%,#17243f 46%,#0b1734 100%)!important;
border:1px solid #e4edff1c;
box-shadow:inset 0 1px #e5efff38,inset 0 -1px #040b1f99,
0 2px 4px #14182c33,0 26px 44px -18px #14182c80,0 60px 90px -50px #14182c66!important;
}
html[data-skin="nocturne"] #studio-console .sc-frame {
background:linear-gradient(176deg,#141f36 0%,#0d1728 46%,#08101f 100%)!important;
border-color:#e4edff17;
box-shadow:inset 0 1px #e5efff24,inset 0 -1px #030918b3,
0 2px 4px #05091933,0 26px 44px -18px #0509198c,0 60px 90px -50px #05091973!important;
}
#studio-console .sc-rail {justify-content:center;}
#studio-console .sc-tabs {
background:#0b173480;
box-shadow:inset 0 1px #dce8ff24,inset 0 -1px #02091f66,0 3px 6px #0a102c33;
}
html[data-skin="nocturne"] #studio-console .sc-tabs {
background:#050d1f99;
box-shadow:inset 0 1px #dce8ff18,inset 0 -1px #01061799,0 3px 6px #05091933;
}
#studio-console .sc-tab[aria-selected="true"] {
background:linear-gradient(180deg,#f7f4ee,#dedbd5);
box-shadow:inset 0 1px #fff9,inset 0 -1px #676b7833,0 2px 4px #03091d55;
}
#studio-console .sc-panel--testimonials {padding:8px 40px 20px 32px;grid-template-rows:auto minmax(0,1fr) auto;}
@media (min-width: 900px) {
#studio-console .sc-reviews {
grid-row: 1 / 3;
align-self: center;
width: 100%;
}
#studio-console .sc-dots {
grid-column:1;grid-row:3;align-self:end;justify-self:center;
justify-content:center;width:100%;margin-top:0;
padding:8px 8px 12px;
}
#studio-console .sc-visual {
grid-row: 1 / -1;
align-self: center;
width: 100%;
height: auto;
max-height: 100%;
aspect-ratio: 1 / 1;
margin: 0;
transform: none;
}
}
#studio-console .sc-visual {
border:1px solid #e4edff2e;border-radius:16px;
box-shadow:0 24px 34px -18px #050c21b3,0 6px 12px -4px #050c2199;
}
@media (min-width: 900px) {
#studio-console .sc-visual { transform: none; }
}
#studio-console .sc-visual::after {
background:none;border-radius:inherit;
box-shadow:inset 0 1px #f0f5ff59,inset 0 -1px #02091f80;
}
#studio-console .sc-avatar,#studio-console .sc-nav-btn {
box-shadow:inset 0 1px #e4edff30,inset 0 -1px #040b1f80,0 3px 6px #050c213d;
}
#studio-console .sc-progress {background:#060f25;box-shadow:inset 0 1px 2px #01071999,0 1px #e4edff20;}
@media(max-width:899px) {
#studio-console .sc-panel--testimonials {padding:6px 8px 16px;}
#studio-console .sc-visual {transform:translateY(-3px);}
}
:root {--section-rhythm:clamp(40px,4.5vw,64px);}
#taste-stage.taste-stage,#packs.packs-outcomes,#process-radial.process-radial,
#work.section,#studio-console.studio-console {padding-block:var(--section-rhythm);margin-block:0;}
#taste-stage .taste-stage-hold {height:0!important;}
#taste-stage .taste-stage-shell {position:relative;top:auto;}
@media (min-width: 861px) {
#taste-stage .taste-stage-shell {
position: sticky;
top: var(--header, 72px);
}
#taste-stage .taste-stage-hold {
height: 118vh !important;
pointer-events: none;
}
}
@media (max-width: 860px) {
body.nav-open .site-header { z-index: 500; }
html.is-over-dark body.nav-open .site-header .menu-button,
body.nav-open .site-header .menu-button {
color: var(--ink) !important;
border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important;
}
body.nav-open .site-header .menu-button-icon,
body.nav-open .site-header .menu-button-icon::before,
body.nav-open .site-header .menu-button-icon::after,
body.nav-open .site-header .menu-button-icon > span {
background: currentColor;
}
html.is-over-dark body.nav-open .site-header .brand,
body.nav-open .site-header .brand,
html.is-over-dark body.nav-open .site-header .brand span,
body.nav-open .site-header .brand span {
color: var(--ink) !important;
}
body.nav-open .design-lab-root,
body.nav-open .theme-toggle {
visibility: hidden;
pointer-events: none;
}
body.nav-open .site-header .header-inner {
isolation: auto;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.site-header .site-nav.is-open {
position: fixed !important;
inset: 0 !important;
z-index: 410 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--paper) !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.site-header .site-nav.is-open a {
letter-spacing: 0.01em !important;
text-shadow: none !important;
-webkit-text-stroke: 0 !important;
font-weight: 600 !important;
transform: none !important;
}
}
.site-footer .footer-main { position: relative; }
.site-footer .footer-main::before {
content: "";
position: absolute;
top: 0;
left: 10px;
right: 10px;
height: 1px;
background: color-mix(in srgb, var(--ink) 11%, transparent);
pointer-events: none;
}
html[data-skin="nocturne"] .site-footer .footer-main::before {
background: color-mix(in srgb, #cfe0ff 13%, transparent);
}
@media (max-width: 860px) {
.site-footer .footer-main::before { left: 7px; right: 7px; }
}
.site-header::before {
left: max(var(--gutter, 18px), calc((100% - 1376px) / 2));
right: max(var(--gutter, 18px), calc((100% - 1376px) / 2));
border-radius: 999px;
opacity: 0;
}
.site-header.is-scrolled::before { opacity: 1; }
.ribbon-stack .ribbon:last-child { border-bottom: 1px solid var(--line); }
#footer .footer-place {
color: color-mix(in srgb, var(--ink) 62%, transparent);
font-family: var(--mono);
font-size: .8rem;
}
.ribbon-stack { position: relative; z-index: 3; }
#work .work-tile[data-work-kind="interactive"] img,
#work .work-tile[data-work-kind="interactive"]:hover img {
transition: none !important;
}
#footer .footer-grid {
grid-template-columns: none !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(0, max-content) !important;
justify-content: end !important;
}
@media (max-width: 860px) {
body.nav-open .site-header .site-nav.is-open {
min-height: 100dvh;
padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
}
}
[data-scroll-fade][data-overflow] {
--fade-start: 0px;
--fade-end: 0px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}
:root {
--section-depth-edge: #fffffff0;
--section-depth-side: #b8ad9e73;
--section-depth-cast: #473d3033;
--section-depth-contact: #473d302e;
--section-depth-face: #fffdf647;
}
html[data-skin="nocturne"] {
--section-depth-edge: #b4d2ff40;
--section-depth-side: #071020e0;
--section-depth-cast: #00030b99;
--section-depth-contact: #00030b70;
--section-depth-face: #809cc012;
}
#taste-stage .taste-stage-shell::before,
#process-radial .pr-shell::before,
#work > .container::before {
content: "";
position: absolute;
inset: -22px 10px -26px;
z-index: -1;
pointer-events: none;
border-radius: 30px;
border: 1px solid var(--section-depth-edge);
background: linear-gradient(150deg,var(--section-depth-face),transparent 52%);
box-shadow:
inset 0 2px 1px var(--section-depth-edge),
inset 1px 0 1px var(--section-depth-edge),
inset 0 -1px 1px var(--section-depth-side),
0 7px 0 -1px var(--section-depth-side),
0 12px 14px -7px var(--section-depth-contact),
0 30px 44px -18px var(--section-depth-cast);
}
#packs .outcomes-panel {
box-shadow:
inset 0 1px 0 #dbeaff38,
inset 0 -1px 0 #00091559,
0 6px 0 -1px #101b31a3,
0 12px 16px -10px #07132838,
0 30px 46px -23px #0713284d!important;
}
html[data-skin="nocturne"] #packs .outcomes-panel {
box-shadow:
inset 0 1px 0 #b4d2ff3d,
inset 0 -1px 0 #00050cb3,
0 6px 0 -1px #020714,
0 12px 18px -9px #00030b80,
0 30px 48px -20px #00030b99!important;
}
@media(max-width:860px) {
#taste-stage .taste-stage-shell::before,
#process-radial .pr-shell::before,
#work > .container::before {
inset:-14px 7px -18px;
border-radius:22px;
box-shadow:inset 0 1px var(--section-depth-edge),0 5px 0 -1px var(--section-depth-side),0 9px 12px -8px var(--section-depth-contact),0 22px 30px -16px var(--section-depth-cast);
}
}
#taste-stage .taste-stage-shell::before,
#process-radial .pr-shell::before,
#work > .container::before {
background:linear-gradient(145deg,#ffffff12,#fffdf605 55%,#e8e4dd08);
backdrop-filter:blur(.3px);
-webkit-backdrop-filter:blur(.3px);
}
html[data-skin="nocturne"] #taste-stage .taste-stage-shell::before,
html[data-skin="nocturne"] #process-radial .pr-shell::before,
html[data-skin="nocturne"] #work > .container::before {
background:linear-gradient(145deg,#dce5ef09,#21334a03 55%,#a3b3c405);
}
@media(max-width:860px) {
#taste-stage .taste-stage-shell::before,
#process-radial .pr-shell::before,
#work > .container::before {
backdrop-filter:blur(.2px);
-webkit-backdrop-filter:blur(.2px);
}
}
#work .work-stage-wrap {width:auto;}
#packs .outcomes-panel,
#work .work-stage-wrap,
#studio-console .sc-frame {
margin-inline: 0;
}
#taste-stage .taste-stage-shell::before,
#work > .container::before {content:none!important;display:none!important;}
#taste-stage {
--frost-face:linear-gradient(145deg,#ffffffb8,#e7edf47a 55%,#dbe4ef4d);
--frost-edge:#ffffffcf;
--frost-shadow:#4b617d1c;
--frost-side:linear-gradient(155deg,#eef0f2f0,#cdd3daf0);
--frost-ink:#354355;
--podium-top:#eee9df;
--podium-face:#d8d0c3;
--podium-base:#b8ae9f;
--podium-edge:#f5f1e9;
--podium-shadow:#574c3c24;
}
html[data-skin="nocturne"] #taste-stage {
--frost-face:linear-gradient(145deg,#d2e3f344,#859eb72e 55%,#a7bacf14);
--frost-edge:#ddecff59;
--frost-shadow:#00081942;
--frost-side:linear-gradient(155deg,#6d7b8fe8,#49596ce8);
--frost-ink:#f0f4f9;
--podium-top:#68645f;
--podium-face:#494641;
--podium-base:#34322f;
--podium-edge:#858078;
--podium-shadow:#00000050;
}
#taste-stage .taste-plane,
html[data-skin="nocturne"] #taste-stage .taste-plane {
background:var(--frost-face)!important;
border:1px solid var(--frost-edge)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
box-shadow:inset 0 1px #ffffff80,inset 0 -1px #8da2bb30,0 12px 26px var(--frost-shadow)!important;
}
#taste-stage .taste-card--diy,#taste-stage .taste-card--agency,
#taste-stage .taste-card--diy:hover,#taste-stage .taste-card--agency:hover,
#taste-stage.is-settled .taste-card--diy:hover,#taste-stage.is-settled .taste-card--agency:hover {
background:var(--frost-side)!important;border:1px solid var(--frost-edge)!important;
opacity:1;filter:none!important;
backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;
box-shadow:inset 0 1px #ffffffa6,inset 0 -1px #697d9433,0 3px 0 #a5b1bf80,0 6px 0 #899bad26,0 16px 28px var(--frost-shadow)!important;
}
#taste-stage .taste-card--diy .taste-card-label,#taste-stage .taste-card--agency .taste-card-label,
#taste-stage .taste-card--diy .taste-card-points,#taste-stage .taste-card--agency .taste-card-points {color:var(--frost-ink)!important;}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
background:linear-gradient(170deg,#1b2d49,#0b1734)!important;
border:1px solid #c0c7d33d!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
transform-style:flat;backface-visibility:hidden;overflow:hidden;
box-shadow:inset 0 1px #f4ece526,inset 0 -1px #02091c66,0 3px 5px #10182b26,0 18px 30px -10px #11203440!important;
}
#taste-stage .taste-card--pick::before,#taste-stage .taste-card--pick::after {content:none!important;display:none!important;}
#taste-stage .taste-lane--pick .taste-card-motion::before {content:none!important;display:none!important;}
#taste-stage .taste-lane--pick::before {
content:"";display:block;inset:-22% -34% 8%;z-index:-2;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse at 50% 32%,#ffd6a052 0%,#f0b46b29 33%,#e7a15a0d 53%,transparent 73%);
filter:blur(18px)!important;opacity:var(--landing-glow,0);
}
html[data-skin="nocturne"] #taste-stage .taste-lane--pick::before {
background:radial-gradient(ellipse at 50% 32%,#eab57438 0%,#c7834820 33%,#ad69370a 53%,transparent 73%);
}
#taste-stage .taste-card--pick {--card-lift:0px;}
#taste-stage.is-settled .taste-card--pick:hover {--card-lift:-2px;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
background:linear-gradient(170deg,var(--podium-edge),var(--podium-top))!important;
box-shadow:inset 0 1px var(--podium-edge)!important;
}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {
background:url("assets/ui/limestone.svg"),linear-gradient(105deg,var(--podium-face),var(--podium-top) 42%,var(--podium-face))!important;
background-size:144px 144px,100% 100%!important;
border:0!important;
box-shadow:inset 0 1px var(--podium-edge),inset 0 -1px var(--podium-base)!important;
}
#taste-stage .taste-podium-floor-front,
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
background:url("assets/ui/limestone.svg"),linear-gradient(180deg,var(--podium-face),var(--podium-base))!important;
background-size:144px 144px,100% 100%!important;
border:0!important;
box-shadow:inset 0 1px var(--podium-edge),0 12px 20px var(--podium-shadow)!important;
}
#taste-stage .taste-lane--pick .taste-stage-tabs {
background:#f7fafcc9;border-color:#ffffffa6;box-shadow:inset 0 1px #fff,0 3px 10px #1c37541a;
}
@media(max-width:860px) {
#taste-stage .taste-card {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}
#taste-stage .taste-stage-arena,#taste-stage .taste-lanes,#taste-stage .taste-lane,
#taste-stage .taste-card-motion {transform-style:flat!important;perspective:none!important;}
#taste-stage .taste-card-motion {isolation:isolate;}
#taste-stage .taste-lane--pick::before,
#taste-stage .taste-lane--pick .taste-card-motion::before,
#taste-stage .taste-stage-arena::before {content:none!important;display:none!important;}
#taste-stage .taste-stage-arena {padding-bottom:0;}
#taste-stage .taste-podium-floor {display:none!important;}
#taste-stage .taste-lane--diy {--plinth-h:70px;}
#taste-stage .taste-lane--pick {--plinth-h:124px;}
#taste-stage .taste-lane--agency {--plinth-h:86px;}
#taste-stage .taste-card-motion {margin-bottom:0!important;}
#taste-stage .taste-plinth-cap {display:none;}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {
background:none!important;box-shadow:none!important;border:0!important;
}
#taste-stage .taste-lanes::before {
content:"";position:absolute;left:2%;right:2%;bottom:0;height:124px;pointer-events:none;
background:url("assets/ui/limestone.svg"),linear-gradient(180deg,var(--podium-top),var(--podium-face));
background-size:144px 144px,100% 100%;
clip-path:polygon(0 43.55%,30.864% 43.55%,30.864% 0,69.136% 0,69.136% 30.65%,100% 30.65%,100% 100%,0 100%);
}
@media(max-width:860px) {
#taste-stage .taste-stage-shell {position:relative;top:auto;}
#taste-stage .taste-planes,#taste-stage .taste-lanes::before {display:none!important;}
#taste-stage .taste-lanes {display:flex;flex-direction:column;gap:22px;padding:16px 0 0;align-items:stretch;}
#taste-stage .taste-lane {width:100%;align-items:stretch;}
#taste-stage .taste-lane--pick {order:0;}
#taste-stage .taste-lane--agency {order:1;}
#taste-stage .taste-lane--diy {order:2;}
#taste-stage .taste-card-motion {width:100%!important;max-width:none;}
#taste-stage .taste-card {width:100%;transform:none!important;}
#taste-stage:not(.is-mobile-story) .taste-card-shot {width:100%;max-height:none!important;min-height:280px;aspect-ratio:4/5!important;}
#taste-stage.is-mobile-story .taste-card-shot {width:100%;max-height:none!important;min-height:0;aspect-ratio:auto!important;}
#taste-stage .taste-card-points {text-align:left;justify-items:start;font-size:.95rem!important;}
#taste-stage .taste-plinth {display:none;}
#taste-stage .taste-lane--pick .taste-plinth {display:block;width:100%;}
#taste-stage .taste-lane--pick .taste-plinth-rise {height:auto;min-height:0;padding:14px 0 0;}
#taste-stage .taste-lane--pick .taste-stage-tabs {margin:0 auto!important;}
#taste-stage .taste-lane--pick .taste-stage-tabs button {font-size:.65rem;min-height:36px;padding-inline:14px;}
}
#taste-stage {
--stage-light:radial-gradient(ellipse 40% 62% at 50% 8%,#fffdf6d9,transparent 80%),radial-gradient(ellipse 46% 9% at 50% 94%,#d4c5ad42,transparent 80%);
--frost-face:linear-gradient(145deg,#ffffff9c,#dedbd32b 72%,#e1ddd522);
--frost-edge:#ffffffb3;
--frost-side:linear-gradient(165deg,#e6e7e8,#d0d3d6);
--frost-ink:#3c4652;
--podium-top:#e3ded4;--podium-face:#c6beb0;--podium-base:#b1a99b;--podium-edge:#f9f5ed;
}
html[data-skin="nocturne"] #taste-stage {
--stage-light:radial-gradient(ellipse 38% 66% at 50% 12%,#e7d8c461,#c3b39e24 47%,transparent 80%),radial-gradient(ellipse 46% 10% at 50% 94%,#d9d5cc2b,transparent 80%);
--frost-face:linear-gradient(145deg,#ddd7d027,#b6b1ae12 65%,#aaa7a30b);
--frost-edge:#ded9d24d;--frost-side:linear-gradient(165deg,#464c55,#2c323c);--frost-ink:#dde0e6;
--podium-top:#56585c;--podium-face:#3c3e42;--podium-base:#292b2e;--podium-edge:#909296;
}
#taste-stage .taste-stage-shell {isolation:isolate;}
#taste-stage .taste-stage-shell::after {
content:"";position:absolute;inset:-64px -5vw -55px;z-index:-1;background:var(--stage-light);pointer-events:none;
mask-image:linear-gradient(transparent,#000 14% 84%,transparent);
-webkit-mask-image:linear-gradient(transparent,#000 14% 84%,transparent);
}
#taste-stage .taste-stage-intro {display:block;max-width:100%;margin:0 auto 18px;text-align:center;}
#taste-stage .taste-stage-intro .eyebrow {display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 14px;letter-spacing:.23em;}
#taste-stage .taste-stage-intro .eyebrow::before,#taste-stage .taste-stage-intro .eyebrow::after {
content:"";position:static;display:block;width:clamp(28px,6vw,82px);height:1px;background:currentColor;opacity:.25;box-shadow:none;transform:none;border-radius:0;
}
#taste-stage .taste-stage-intro h2 {margin:0;line-height:1.06;text-align:center;}
@media (min-width:861px) {
#taste-stage .taste-stage-intro .eyebrow {font-size:.84rem;}
#taste-stage .taste-stage-intro h2 {font-size:clamp(3.05rem,4.6vw,4.4rem);line-height:1.04;}
}
#taste-stage .taste-stage-intro h2 em {display:inline;margin:0 0 0 .18em;}
#taste-stage .taste-stage-arena {min-height:0;padding-top:12px;}
#taste-stage .taste-planes {inset:0 3% 12%;}
#taste-stage .taste-plane {border-radius:16px!important;box-shadow:inset 0 1px #ffffff26,0 12px 24px #080b1412!important;}
#taste-stage .taste-card--diy,#taste-stage .taste-card--agency,#taste-stage .taste-card--diy:hover,#taste-stage .taste-card--agency:hover {
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
box-shadow:inset 0 1px #ffffff40,inset 0 -1px #11182138,0 2px 3px #060a1326,0 14px 22px -12px #060a1366!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
background:linear-gradient(165deg,#172741,#0b162b)!important;
box-shadow:inset 0 1px #dce6f233,inset 0 -1px #03091699,0 3px 5px #03071340,0 18px 30px -14px #03071399!important;
}
#taste-stage .taste-card-shot {box-shadow:inset 0 1px #ffffff1f,0 2px 5px #02081526;}
#taste-stage .taste-card-points {list-style:none;justify-items:stretch;text-align:left;}
#taste-stage .taste-card-points li {position:relative;padding-left:1.2em;}
#taste-stage .taste-card-points li::before {
content:"";position:absolute;left:0;top:.43em;width:.58em;height:.58em;opacity:.5;
background:linear-gradient(45deg,transparent 43%,currentColor 44% 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,currentColor 44% 56%,transparent 57%);
}
#taste-stage .taste-card--pick .taste-card-points li::before {
width:.62em;height:.34em;top:.43em;background:none;border-left:1.5px solid #c5d2e4;border-bottom:1.5px solid #c5d2e4;transform:rotate(-45deg);opacity:.8;
}
#taste-stage .taste-card--pick .taste-card-vs {color:#9fb4d0!important;}
@media(min-width:861px) {
#taste-stage .taste-lanes {padding-top:22px;}
#taste-stage .taste-lane--pick .taste-card-shot {max-height:248px!important;min-height:0;aspect-ratio:4/5;}
#taste-stage .taste-lane--diy .taste-card-shot,#taste-stage .taste-lane--agency .taste-card-shot {max-height:204px!important;min-height:0;aspect-ratio:4/5;}
#taste-stage .taste-lane--diy {--plinth-h:76px;--card-w:90%;}
#taste-stage .taste-lane--pick {--plinth-h:144px;--card-w:92%;}
#taste-stage .taste-lane--agency {--plinth-h:100px;--card-w:90%;}
#taste-stage .taste-card-motion {margin-bottom:16px!important;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
display:block;position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:17px;
clip-path:polygon(0 100%,100% 100%,96% 0,4% 0);transform:none;border:0;border-radius:0;
background:linear-gradient(180deg,var(--podium-edge),var(--podium-top))!important;
}
#taste-stage .taste-lanes::before {
height:144px;clip-path:polygon(0 47.222%,30.864% 47.222%,30.864% 0,69.136% 0,69.136% 30.556%,100% 30.556%,100% 100%,0 100%);
background:url("assets/ui/limestone.svg"),linear-gradient(110deg,transparent,#ffffff06 48%,transparent 84%),linear-gradient(180deg,var(--podium-top),var(--podium-face) 48%,var(--podium-base));
background-size:144px 144px,100% 100%,100% 100%;
}
#taste-stage .taste-lanes::after {
content:"";position:absolute;left:4%;right:4%;bottom:-36px;height:66px;z-index:-1;background:radial-gradient(ellipse at center,#312a2447,transparent 70%);pointer-events:none;
}
html[data-skin="nocturne"] #taste-stage .taste-lanes::after {background:radial-gradient(ellipse at center,#00000099,transparent 70%);}
}
html[data-skin="nocturne"] #taste-stage .taste-lane--pick .taste-stage-tabs {background:#292e35;border-color:#b4b8c03d;box-shadow:inset 0 1px #ffffff1c,0 2px 5px #00000033;}
html[data-skin="nocturne"] #taste-stage .taste-lane--pick .taste-stage-tabs button {color:#bfc4cd;}
html[data-skin="nocturne"] #taste-stage .taste-lane--pick .taste-stage-tabs button[aria-selected="true"] {background:#0b162b;color:#edf1f8;}
@media(max-width:860px) {
#taste-stage .taste-stage-intro {margin-bottom:8px;text-align:center;}
#taste-stage .taste-stage-intro h2 {font-size:clamp(2.7rem,12vw,3.4rem);}
#taste-stage .taste-stage-intro h2 em {display:block;margin:0;}
#taste-stage .taste-stage-intro .eyebrow {font-size:.7rem;gap:10px;justify-content:center;}
#taste-stage .taste-stage-shell::after {inset:-40px -20px auto;height:700px;}
#taste-stage .taste-card-points {justify-items:center;text-align:center;}
#taste-stage .taste-card-points li {width:fit-content;max-width:100%;margin-inline:auto;text-align:center;}
}
.taste-story-nav,
.taste-story-nav[hidden] {display:none!important;}
@media(max-width:860px) and (min-height:620px) {
#taste-stage.is-mobile-story {
height:320svh;min-height:0;padding-block:0!important;overflow:visible;
--peek:36px;--plinth-stack:86px;
--title-reveal:1;--spotlight-reveal:1;--category-reveal:1;
}
#taste-stage.is-mobile-story .taste-stage-shell {
position:sticky;top:72px;height:calc(100svh - 128px);min-height:0;
display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding-top:4px;
}
#taste-stage.is-mobile-story .taste-stage-shell::after {opacity:.55;height:100%;inset:-40px -20px;}
#taste-stage.is-mobile-story .taste-stage-intro,
#taste-stage.is-mobile-story.is-pending .taste-stage-intro,
#taste-stage.is-mobile-story .taste-stage-intro > *,
#taste-stage.is-mobile-story.is-pending .taste-stage-intro > * {
margin:0;text-align:center;opacity:1!important;transform:none!important;
}
#taste-stage.is-mobile-story .taste-stage-intro h2 {font-size:clamp(2.7rem,12.5vw,3.4rem)!important;line-height:1.02;}
#taste-stage.is-mobile-story .taste-stage-intro .eyebrow {margin-bottom:8px;justify-content:center;font-size:.7rem!important;}
#taste-stage.is-mobile-story .taste-story-nav {display:none!important;}
#taste-stage.is-mobile-story .taste-stage-arena {padding:0;min-height:0;height:100%;overflow:visible;}
#taste-stage.is-mobile-story .taste-lanes {display:block;height:100%;padding:0;}
#taste-stage.is-mobile-story .taste-lane {position:absolute;inset:0;width:100%;display:block;}
#taste-stage.is-mobile-story .taste-card-motion {
position:absolute;left:0;right:0;top:calc(var(--peek) * 2);bottom:var(--plinth-stack);
width:auto!important;margin:0!important;transform-origin:50% 0;
opacity:1!important;transform:none!important;
transition:top 420ms cubic-bezier(.22,1,.36,1),left 420ms cubic-bezier(.22,1,.36,1),right 420ms cubic-bezier(.22,1,.36,1);
}
#taste-stage.is-mobile-story .taste-lane--diy .taste-card-motion,
#taste-stage.is-mobile-story[data-story-step="pick"] .taste-lane--diy .taste-card-motion,
#taste-stage.is-mobile-story[data-story-step="agency"] .taste-lane--diy .taste-card-motion {
top:0;left:9%;right:9%;z-index:1;
}
#taste-stage.is-mobile-story .taste-lane--agency .taste-card-motion,
#taste-stage.is-mobile-story[data-story-step="pick"] .taste-lane--agency .taste-card-motion {
top:var(--peek);left:4.5%;right:4.5%;z-index:2;
}
#taste-stage.is-mobile-story .taste-lane--pick .taste-card-motion,
#taste-stage.is-mobile-story[data-story-step="pick"] .taste-lane--pick .taste-card-motion {
top:calc(var(--peek) * 2);left:0;right:0;z-index:3;
}
#taste-stage.is-mobile-story[data-story-step="agency"] .taste-lane--pick .taste-card-motion {
top:var(--peek);left:4.5%;right:4.5%;z-index:2;
}
#taste-stage.is-mobile-story[data-story-step="agency"] .taste-lane--agency .taste-card-motion {
top:calc(var(--peek) * 2);left:0;right:0;z-index:3;
}
#taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--agency .taste-card-motion {
top:0;left:9%;right:9%;z-index:1;
}
#taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--pick .taste-card-motion {
top:var(--peek);left:4.5%;right:4.5%;z-index:2;
}
#taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--diy .taste-card-motion {
top:calc(var(--peek) * 2);left:0;right:0;z-index:3;
}
#taste-stage.is-mobile-story .taste-card {
height:100%;display:flex;flex-direction:column;gap:10px!important;padding:13px 14px 16px!important;
overflow:hidden!important;text-align:center;
box-shadow:0 10px 22px #0000003d,0 2px 0 #00000022;
}
#taste-stage.is-mobile-story .taste-card--diy,
#taste-stage.is-mobile-story .taste-card--agency {
background:#2b323c!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#taste-stage.is-mobile-story .taste-card--pick {
background:linear-gradient(168deg,#1e3d64 0%,#0d1c3a 64%,#17294a 100%)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#taste-stage.is-mobile-story .taste-card-label {
flex:none;justify-content:center;font-size:.86rem!important;min-height:22px;padding:0!important;line-height:22px;cursor:pointer;
}
#taste-stage.is-mobile-story .taste-card--pick .taste-card-label {font-size:1.02rem!important;}
#taste-stage.is-mobile-story .taste-card-shot {flex:1;min-height:60px;max-height:none!important;aspect-ratio:auto!important;}
#taste-stage.is-mobile-story .taste-card-points {
flex:none;justify-items:center;text-align:center;
font-size:clamp(.78rem,3.4vw,.94rem)!important;line-height:1.35;gap:.4em;
}
#taste-stage.is-mobile-story .taste-card-points li {
width:fit-content;max-width:100%;margin-inline:auto;text-align:center;
}
#taste-stage.is-mobile-story .taste-card-extra {max-height:none!important;opacity:1!important;display:list-item!important;}
#taste-stage.is-mobile-story .taste-card-toggle {display:none!important;}
#taste-stage.is-mobile-story .taste-lane--diy .taste-plinth,
#taste-stage.is-mobile-story .taste-lane--agency .taste-plinth {display:none!important;}
#taste-stage.is-mobile-story .taste-lane--pick .taste-plinth {
display:block!important;position:absolute;z-index:4;left:5%;right:5%;bottom:0;height:auto;
background:none!important;filter:drop-shadow(0 14px 20px #00000040);
}
#taste-stage.is-mobile-story .taste-plinth-cap {
display:block!important;height:18px;border:0;border-radius:0;
clip-path:polygon(0 100%,100% 100%,91% 0,9% 0);
background:linear-gradient(180deg,var(--podium-edge,#f4efe6),var(--podium-top,#d8d0c3))!important;
box-shadow:inset 0 1px #fff8;
}
#taste-stage.is-mobile-story .taste-plinth-rise {
height:58px;min-height:58px;padding:0;border-radius:0 0 12px 12px;
background:
linear-gradient(180deg,#ffffff2e,transparent 28%),
linear-gradient(180deg,var(--podium-top,#d8d0c3),var(--podium-face,#b7aea0) 58%,var(--podium-base,#9c9386))!important;
box-shadow:inset 0 1px #fff6,inset 0 -14px 18px #00000026,0 10px 16px #0000002e!important;
}
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs {
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);
width:max-content;opacity:1!important;visibility:visible!important;
}
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs button {font-size:.56rem;min-height:32px;padding-inline:11px;}
}
@media(max-width:860px) and (min-height:620px) and (max-height:740px) {
#taste-stage.is-mobile-story {--peek:28px;--plinth-stack:76px;}
#taste-stage.is-mobile-story .taste-stage-shell {height:calc(100svh - 112px);gap:6px;padding-top:2px;}
#taste-stage.is-mobile-story .taste-stage-intro h2 {font-size:clamp(2.45rem,11vw,3.1rem)!important;}
#taste-stage.is-mobile-story .taste-card {padding:10px!important;gap:8px!important;}
#taste-stage.is-mobile-story .taste-card-points {font-size:.76rem!important;}
#taste-stage.is-mobile-story .taste-plinth-cap {height:14px;}
#taste-stage.is-mobile-story .taste-plinth-rise {height:50px;min-height:50px;}
}
#process-radial.process-radial {
--pr-signal:#2f66c9;
--pr-panel-edge:rgb(255 255 255 / .88);
--pr-panel-shadow:rgb(64 54 42 / .24);
background:transparent!important;
overflow:visible;
}
#process-radial .pr-shell {
position:relative;
padding:clamp(28px,3.4vw,46px) clamp(24px,4vw,56px) clamp(20px,2.2vw,30px);
border:1px solid rgb(31 36 48 / .10);
border-radius:26px;
background:
linear-gradient(112deg,rgb(255 244 230 / .94) 0%,rgb(250 246 238 / .92) 27%,rgb(241 239 233 / .90) 54%,rgb(232 235 242 / .91) 82%,rgb(226 231 242 / .94) 100%);
box-shadow:
inset 0 2px 0 var(--pr-panel-edge),
inset 0 -2px 0 rgb(31 36 48 / .08),
0 3px 3px rgb(60 50 40 / .09),
0 30px 50px -24px var(--pr-panel-shadow),
0 70px 100px -62px rgb(40 50 80 / .28);
}
#process-radial .pr-shell::before {display:none!important;}
html:not([data-skin="nocturne"]) #process-radial .pr-shell {
background:
linear-gradient(112deg,rgb(255 244 230 / .64) 0%,rgb(250 246 238 / .60) 27%,rgb(241 239 233 / .58) 54%,rgb(232 235 242 / .60) 82%,rgb(226 231 242 / .64) 100%);
}
#process-radial .pr-heading {
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(280px,400px)!important;
column-gap:clamp(48px,7vw,100px)!important;
align-items:start!important;
max-width:none!important;
margin:0!important;
}
#process-radial .pr-heading .eyebrow {grid-column:1/-1;margin:0 0 16px!important;font-size:var(--type-micro);}
#process-radial .pr-heading h2 {
grid-column:1;
max-width:15ch!important;
font-size:var(--section-display-size)!important;
line-height:.98!important;
letter-spacing:-.04em!important;
text-shadow:0 1px 0 rgb(255 255 255 / .82);
}
#process-radial .pr-lede {
grid-column:2;
align-self:start!important;
max-width:40ch!important;
margin:8px 0 0!important;
font-size:var(--type-body)!important;
line-height:1.85!important;
}
#process-radial .pr-board {
width:100%;
max-width:none!important;
min-height:0!important;
max-height:400px;
height:clamp(350px,33vw,400px);
margin:clamp(-8px,-.5vw,0px) 0 0!important;
perspective:none!important;
}
#process-radial .pr-desk {
width:100%;
height:100%;
min-height:0!important;
aspect-ratio:auto!important;
transform:none!important;
transform-style:flat!important;
}
#process-radial .pr-svg-desk {display:block;width:100%;height:100%;overflow:visible;}
#process-radial .pr-svg-mobile {display:none;}
#process-radial :is(.pr-gauge-lift,.pr-dial-face,.pr-rail-cast,.pr-rail-face,.pr-rail-key,.pr-plinth-cast,.pr-plinth,.pr-guides,.pr-ticks,.pr-anchor,.pr-well-layer) {display:none!important;}
#process-radial :is(.pr-dial-fill,.pr-dial-warm,.pr-dial-cool,.pr-track-shadow,.pr-track-bed,.pr-track-color) {pointer-events:none;}
#process-radial .pr-dial-fill {fill:rgb(255 253 248 / .72);}
#process-radial .pr-dial-warm {fill:url(#prDialWarm);}
#process-radial .pr-dial-cool {fill:url(#prDialCool);}
#process-radial .pr-track-shadow {
fill:none;stroke:rgb(52 42 34 / .28);stroke-width:25;stroke-linecap:round;
transform:translateY(8px);filter:url(#prTrackSoft);opacity:.46;
}
#process-radial .pr-track-bed {fill:none;stroke:rgb(255 255 255 / .9);stroke-width:25;stroke-linecap:round;}
#process-radial .pr-track-color {fill:none;stroke:url(#prArcGradient);stroke-width:16;stroke-linecap:round;}
#process-radial .pr-base {display:block!important;fill:none;stroke:rgb(255 255 255 / .74)!important;stroke-width:2!important;opacity:.92;filter:none!important;}
#process-radial .pr-active {display:none!important;fill:none;stroke:#2f66c9;stroke-width:4;opacity:.34!important;filter:drop-shadow(0 1px 2px rgb(28 74 156 / .28));}
#process-radial .pr-hover-seg {display:none!important;}
#process-radial .pr-head {display:none!important;}
#process-radial .pr-needle {display:block!important;filter:drop-shadow(2px 5px 5px rgb(37 44 62 / .28));}
#process-radial .pr-needle .pr-needle-aura {stroke:#183b82;stroke-width:7;opacity:.24;filter:blur(3px);}
#process-radial .pr-needle .pr-needle-core {stroke:#2c65ca;stroke-width:4;opacity:1;filter:none;}
#process-radial .pr-needle-hub {fill:url(#prHubDome);stroke:rgb(47 102 201 / .28);stroke-width:1;}
#process-radial .pr-needle-pin {fill:#3474df;}
#process-radial .pr-well-copy {
display:block!important;left:50%!important;top:80%!important;bottom:auto!important;
transform:translateX(-50%)!important;width:220px;text-align:center;
}
#process-radial .pr-well-copy strong {font-size:.58rem;letter-spacing:.22em;color:color-mix(in srgb,var(--ink) 54%,var(--pr-signal));}
#process-radial .pr-steps {position:absolute!important;inset:0!important;display:block!important;padding:0!important;}
#process-radial .pr-step {position:absolute!important;left:var(--x)!important;top:var(--y)!important;width:0!important;height:0!important;min-height:0!important;display:block!important;}
#process-radial.process-radial {--pr-node:56px;}
#process-radial .pr-step[data-pr-step="3"] {--pr-node:60px;}
#process-radial .pr-hit {
position:absolute!important;left:0!important;top:0!important;width:var(--pr-node)!important;height:var(--pr-node)!important;
transform:translate(-50%,-50%)!important;
}
#process-radial .pr-node {
border:1px solid rgb(99 107 124 / .16)!important;
background:
radial-gradient(58% 52% at 28% 17%,#fff 0%,rgb(255 255 255 / .82) 39%,transparent 74%),
linear-gradient(132deg,#fff7ee 0%,#faf7f1 43%,#e8eaf0 100%)!important;
box-shadow:
inset 1.5px 1.5px 0 rgb(255 244 231 / .96),
inset -1.5px -2px 2px rgb(60 72 100 / .18),
0 5px 0 #bdb6ad,
0 7px 3px rgb(52 42 34 / .16),
0 15px 22px rgb(52 42 34 / .16)!important;
color:#3d4656!important;
}
#process-radial .pr-icon {width:52%!important;height:52%!important;}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-node {
border-color:rgb(110 151 229 / .76)!important;
background:
radial-gradient(62% 54% at 27% 16%,rgb(220 237 255 / .9) 0%,transparent 72%),
linear-gradient(132deg,#8fbaf6 0%,#3f79df 46%,#1f4a9b 100%)!important;
color:#fff!important;
transform:translateY(-4px) scale(1.08)!important;
box-shadow:
inset 1.5px 1.5px 0 rgb(255 245 232 / .52),
inset -1.5px -2px 3px rgb(8 25 58 / .5),
0 7px 0 #173a78,
0 10px 6px rgb(19 47 100 / .30),
0 22px 34px rgb(47 102 201 / .34)!important;
}
#process-radial .pr-node::before {content:none!important;}
#process-radial .pr-copy {position:absolute!important;width:150px!important;min-width:150px!important;max-width:none!important;transform:none!important;pointer-events:none;}
#process-radial .pr-num {font-size:var(--type-meta)!important;letter-spacing:.14em!important;color:color-mix(in srgb,var(--ink) 38%,transparent)!important;}
#process-radial .pr-title {margin-top:3px!important;font-size:.86rem!important;font-weight:520!important;opacity:.84!important;transform:none!important;}
#process-radial .pr-copy p {margin-top:4px!important;font-size:.73rem!important;line-height:1.35!important;opacity:0!important;transform:translateY(5px)!important;}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-title {color:#2255ab!important;font-weight:650!important;opacity:1!important;transform:none!important;}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-copy p {opacity:1!important;transform:none!important;}
#process-radial .pr-approve {display:none!important;}
@media(min-width:761px) {
#process-radial .pr-step:is([data-place="tl"],[data-place="t"],[data-place="tr"]) .pr-copy p {
max-height:0;margin-top:0!important;overflow:hidden;
transition:max-height 320ms ease,margin-top 320ms ease,opacity 220ms ease,transform 320ms ease;
}
#process-radial .pr-step:is([data-place="tl"],[data-place="t"],[data-place="tr"]):is(.is-active,.is-focus) .pr-copy p {
max-height:5em;margin-top:4px!important;
}
}
#process-radial .pr-step[data-place="bl"] .pr-copy {left:-75px!important;right:auto!important;top:38px!important;bottom:auto!important;text-align:center!important;}
#process-radial .pr-step[data-place="l"] .pr-copy {right:43px!important;left:auto!important;top:-19px!important;bottom:auto!important;text-align:right!important;}
#process-radial .pr-step[data-place="tl"] .pr-copy {right:-34px!important;left:auto!important;top:auto!important;bottom:40px!important;text-align:center!important;}
#process-radial .pr-step[data-place="t"] .pr-copy {left:-75px!important;right:auto!important;top:auto!important;bottom:42px!important;text-align:center!important;transform:none!important;}
#process-radial .pr-step[data-place="tr"] .pr-copy {left:-34px!important;right:auto!important;top:auto!important;bottom:40px!important;text-align:center!important;}
#process-radial .pr-step[data-place="r"] .pr-copy {left:43px!important;right:auto!important;top:-19px!important;bottom:auto!important;text-align:left!important;}
#process-radial .pr-step[data-place="br"] .pr-copy {right:-75px!important;left:auto!important;top:38px!important;bottom:auto!important;text-align:center!important;}
#process-radial .pr-mobile-readout {display:none;}
html[data-skin="nocturne"] #process-radial {
--pr-panel-edge:rgb(176 207 242 / .16);--pr-panel-shadow:rgb(0 3 11 / .72);
}
html[data-skin="nocturne"] #process-radial .pr-shell {
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-color:rgb(160 205 255 / .48);
box-shadow:
0 0 3px rgb(160 205 255 / .36),
0 0 16px rgb(76 153 244 / .19),
0 0 38px rgb(53 119 218 / .10);
}
html[data-skin="nocturne"] #process-radial .pr-board,
html[data-skin="nocturne"] #process-radial .pr-desk {
background:transparent;
}
html[data-skin="nocturne"] #process-radial .pr-dial-fill,
html[data-skin="nocturne"] #process-radial .pr-dial-warm,
html[data-skin="nocturne"] #process-radial .pr-dial-cool {
fill:transparent;
}
html[data-skin="nocturne"] #process-radial .pr-dial-fill {fill:rgb(13 20 34 / .74);}
html[data-skin="nocturne"] #process-radial .pr-dial-warm {opacity:.3;}
html[data-skin="nocturne"] #process-radial .pr-dial-cool {opacity:.44;}
html[data-skin="nocturne"] #process-radial .pr-track-bed {stroke:rgb(189 211 238 / .22);}
html[data-skin="nocturne"] #process-radial .pr-track-shadow {stroke:#000;opacity:.7;}
html[data-skin="nocturne"] #process-radial .pr-node {
border-color:rgb(143 176 214 / .22)!important;
background:radial-gradient(58% 52% at 28% 17%,rgb(139 171 207 / .55),transparent 70%),linear-gradient(132deg,#3b4d68,#253650 48%,#111d32)!important;
color:#dce8f7!important;
box-shadow:inset 1px 1px 0 rgb(218 236 255 / .22),inset -2px -2px 2px rgb(0 4 13 / .52),0 5px 0 #081223,0 8px 5px rgb(0 0 0 / .46),0 18px 28px rgb(0 0 0 / .48)!important;
}
@media(max-width:760px) {
#process-radial .pr-shell {padding:24px 16px 22px;border-radius:22px;}
#process-radial .pr-heading {display:block!important;}
#process-radial .pr-heading .eyebrow {margin-bottom:10px!important;}
#process-radial .pr-heading h2 {width:100%;max-width:none!important;font-size:40px!important;line-height:1.08!important;}
#process-radial .pr-lede {margin:16px 0 0!important;max-width:38ch!important;font-size:var(--type-body)!important;line-height:1.85!important;}
#process-radial .pr-board {height:430px;margin-top:4px!important;overflow:visible!important;}
#process-radial .pr-svg-desk,#process-radial .pr-well-copy {display:none!important;}
#process-radial .pr-svg-mobile {display:block!important;position:absolute;inset:0 0 auto;width:100%;height:330px;overflow:visible;}
#process-radial .pr-dial-warm {fill:url(#prDialWarmMobile);}
#process-radial .pr-dial-cool {fill:url(#prDialCoolMobile);}
#process-radial .pr-track-color {stroke:url(#prArcGradientMobile);stroke-width:12;}
#process-radial .pr-track-bed {stroke-width:20;}
#process-radial .pr-track-shadow {stroke-width:20;filter:url(#prTrackSoftMobile);transform:translateY(6px);}
#process-radial .pr-active {stroke-width:3;}
#process-radial .pr-steps {height:100%!important;}
#process-radial.process-radial {--pr-node:42px;}
#process-radial .pr-step[data-pr-step="3"] {--pr-node:46px;}
#process-radial .pr-copy {width:84px!important;min-width:84px!important;max-width:none!important;}
#process-radial .pr-num {font-size:var(--type-meta)!important;}
#process-radial .pr-title {font-size:.66rem!important;line-height:1.1!important;}
#process-radial .pr-copy p {display:none!important;}
#process-radial .pr-step[data-place="bl"] .pr-copy {left:-42px!important;top:28px!important;}
#process-radial .pr-step[data-place="l"] .pr-copy {right:auto!important;left:-42px!important;top:auto!important;bottom:30px!important;text-align:center!important;}
#process-radial .pr-step[data-place="tl"] .pr-copy {right:-22px!important;bottom:30px!important;}
#process-radial .pr-step[data-place="t"] .pr-copy {left:-42px!important;bottom:33px!important;}
#process-radial .pr-step[data-place="tr"] .pr-copy {left:-22px!important;bottom:30px!important;}
#process-radial .pr-step[data-place="r"] .pr-copy {left:-42px!important;right:auto!important;top:auto!important;bottom:30px!important;text-align:center!important;}
#process-radial .pr-step[data-place="br"] .pr-copy {right:-42px!important;top:28px!important;}
#process-radial .pr-mobile-readout {
position:absolute;left:50%;top:326px;display:flex;flex-direction:column;align-items:center;justify-content:center;
box-sizing:border-box;width:min(310px,92%);height:92px;min-height:92px;max-height:92px;
padding:10px 16px 18px;border:1px solid rgb(255 255 255 / .62);border-radius:14px;background:rgb(255 255 255 / .28);
box-shadow:inset 0 1px rgb(255 255 255 / .72),0 10px 24px rgb(47 45 40 / .09);transform:translateX(-50%);backdrop-filter:blur(8px);
text-align:center;
}
#process-radial .pr-mobile-readout span {display:block;font:500 .55rem var(--mono);letter-spacing:.14em;color:color-mix(in srgb,var(--ink) 42%,transparent);}
#process-radial .pr-mobile-readout strong {display:block;margin-top:2px;font:650 .9rem/1.15 var(--body);color:var(--pr-signal);min-height:1.15em;}
#process-radial .pr-mobile-readout p {
margin:6px 0 0;width:100%;min-height:calc(.82rem * 1.42 * 2);max-height:calc(.82rem * 1.42 * 2);
font:.82rem/1.42 var(--body);color:var(--muted);text-align:center;overflow:hidden;
}
html[data-skin="nocturne"] #process-radial .pr-mobile-readout {background:rgb(19 29 47 / .46);border-color:rgb(176 207 242 / .14);box-shadow:inset 0 1px rgb(213 231 255 / .1),0 12px 26px rgb(0 0 0 / .28);}
}
@media(max-width:430px) {
#process-radial.process-radial {padding-inline:var(--gutter)!important;}
#process-radial .pr-shell {padding-inline:12px;}
#process-radial .pr-board {height:420px;}
#process-radial .pr-svg-mobile {height:318px!important;}
#process-radial .pr-mobile-readout {top:314px;}
}
@media(prefers-reduced-motion:reduce) {
#process-radial .pr-node,#process-radial .pr-icon {animation:none!important;transition:none!important;}
#process-radial .pr-copy p {transition:none!important;}
}
#process-radial .pr-readout {
display: none;
grid-column: 2;
grid-row: 1;
align-self: start;
padding: 18px 22px 20px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 18px;
background: linear-gradient(150deg,
color-mix(in srgb, var(--ink) 3%, transparent), transparent 60%);
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}
#process-radial .pr-readout-num {
display: block;
color: var(--pr-signal);
font-family: var(--mono);
font-size: var(--type-meta);
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1;
}
#process-radial .pr-readout-title {
display: block;
margin-top: 8px;
color: var(--ink);
font-family: var(--display);
font-size: 1.42rem;
font-weight: var(--heading-weight, 400);
letter-spacing: -0.02em;
line-height: 1.05;
}
#process-radial .pr-readout-copy {
max-width: 30ch;
min-height: 4.5em;
margin: 10px 0 0;
color: color-mix(in srgb, var(--ink) 74%, transparent);
font-family: var(--body);
font-size: 0.95rem;
line-height: 1.5;
}
@keyframes pr-readout-turn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
#process-radial .pr-readout.is-turning .pr-readout-num,
#process-radial .pr-readout.is-turning .pr-readout-title,
#process-radial .pr-readout.is-turning .pr-readout-copy {
animation: pr-readout-turn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#process-radial .pr-readout.is-turning .pr-readout-title { animation-delay: 40ms; }
#process-radial .pr-readout.is-turning .pr-readout-copy { animation-delay: 80ms; }
html[data-skin="nocturne"] #process-radial .pr-readout {
border-color: #b4d2ff40;
background: linear-gradient(150deg, #809cc014, transparent 58%);
box-shadow:
inset 0 1px 1px #b4d2ff40,
0 22px 50px -30px #00030b99;
}
html[data-skin="nocturne"] #process-radial .pr-readout-copy {
color: color-mix(in srgb, var(--ink) 78%, transparent);
}
html[data-skin="nocturne"] #process-radial .pr-readout-num {
color: #7fb0ff;
}
@media (min-width: 981px) {
#process-radial .pr-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, 21rem);
column-gap: clamp(28px, 4vw, 72px);
align-items: start;
}
#process-radial .pr-heading { grid-column: 1; grid-row: 1; }
#process-radial .pr-board { grid-column: 1 / -1; grid-row: 2; }
#process-radial .pr-readout { display: block; }
#process-radial .pr-copy p { display: none !important; }
#process-radial .pr-step:is(.is-active, .is-focus) .pr-title {
color: var(--ink) !important;
opacity: 1 !important;
}
}
@media (min-width: 761px) and (max-width: 980px) {
#process-radial .pr-readout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#process-radial .pr-readout.is-turning .pr-readout-num,
#process-radial .pr-readout.is-turning .pr-readout-title,
#process-radial .pr-readout.is-turning .pr-readout-copy {
animation: none;
}
}
#process-radial.process-radial {
padding-inline: var(--gutter);
}
@media (max-width:760px) {
#packs .packs-head-copy h2,
#work .work-head-title h2 {
width:100%;max-width:none;
font-size:40px;
line-height:1.06;
text-wrap:balance;
}
#packs .packs-head-copy,#work .work-head-title {width:100%;min-width:0;}
#taste-stage .taste-stage-intro h2 {max-width:none;font-size:clamp(2.5rem, 8vw, 3.4rem);}
}
#taste-stage {
--frost-face:linear-gradient(145deg,#64676f38,#575b641a 72%);
--frost-edge:#989ca566;
--frost-side:linear-gradient(165deg,#464c55,#2c323c);
--frost-ink:#dde0e6;
--podium-top:#ded8ce;--podium-edge:#fffaf0;
--podium-face:#bdb4a5;--podium-base:#8f8575;
--category-reveal:0;
--spotlight-reveal:0;
}
#taste-stage .taste-stage-intro {transform-origin:50% 100%;}
#taste-stage .taste-card-points {justify-items:center;text-align:center!important;}
#taste-stage .taste-card-points li {width:fit-content;max-width:100%;margin-inline:auto;text-align:center!important;}
#taste-stage .taste-stage-tabs {
opacity:var(--category-reveal,0)!important;
visibility:visible;
clip-path:none;
scale:none;
}
#taste-stage .taste-lane--pick .taste-stage-tabs {
left:50%;top:50%;position:absolute;
transform-origin:50% 50%;
transform:translate(-50%,-50%) scale(var(--category-reveal,0));
}
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs {
left:50%;top:50%;position:absolute;
transform-origin:50% 50%;
transform:translate(-50%,-50%) scale(1);
opacity:1!important;
visibility:visible!important;
}
#taste-stage.is-desktop-story .taste-stage-hold,
#taste-stage.is-tj-pinned .taste-stage-hold {display:block;}
@media(min-width:861px) {
#taste-stage.is-desktop-story,
#taste-stage.is-tj-pinned {height:auto;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
height:18px;clip-path:polygon(0 100%,100% 100%,calc(100% - 16px) 0,16px 0);
background:linear-gradient(180deg,var(--podium-top),var(--podium-edge) 88%,var(--podium-top))!important;
}
#taste-stage .taste-card-motion {margin-bottom:16px!important;}
#taste-stage .taste-lanes::before {
background:url('assets/ui/limestone.svg'),
linear-gradient(90deg,#0000000d,transparent 28%,#00000025 30.8%,transparent 31.2% 67%,#ffffff0d 69%,#00000020 69.3%,transparent 72%),
linear-gradient(180deg,var(--podium-face),var(--podium-base));
background-size:144px 144px,100% 100%,100% 100%;
box-shadow:inset 0 -2px #322a244d;
}
#taste-stage .taste-plinth {filter:drop-shadow(0 3px 2px #00000030);}
#taste-stage .taste-lanes::after {bottom:-26px;height:48px;background:radial-gradient(ellipse,#302a245c,transparent 72%);}
}
@media(max-width:860px) {
#taste-stage .taste-stage-shell {box-sizing:border-box;min-width:0;max-width:100%;}
#taste-stage .taste-card {box-sizing:border-box;min-width:0;}
#taste-stage .taste-stage-intro .eyebrow {font-size:.7rem!important;}
#taste-stage .taste-stage-intro h2 {font-size:clamp(2.7rem,12vw,3.4rem)!important;line-height:1.04;}
#taste-stage .taste-story-nav {display:none!important;}
#taste-stage:not(.is-mobile-story) .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--diy .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--agency .taste-card-shot {
max-height:none!important;
min-height:280px;
aspect-ratio:4/5!important;
flex:none;
}
#taste-stage:not(.is-mobile-story) .taste-card--pick .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-lane--pick .taste-card-shot {
max-height:none!important;
min-height:320px;
aspect-ratio:4/5!important;
flex:none;
}
#packs .packs-head {display:flex;flex-direction:column;align-items:stretch;min-width:0;}
#packs .packs-head-copy {width:100%;min-width:0;max-width:100%;}
#packs .packs-head-copy h2 {width:100%;white-space:normal;overflow-wrap:normal;font-size:40px;}
}
@media(max-width:860px) and (min-height:620px) {
#taste-stage.is-mobile-story {--title-reveal:1;--spotlight-reveal:1;--category-reveal:1;}
#taste-stage.is-mobile-story .taste-stage-shell {width:auto;margin-inline:0;height:calc(100svh - 128px);grid-template-rows:auto minmax(0,1fr);padding-top:4px;}
#taste-stage.is-mobile-story .taste-story-nav {display:none!important;}
#taste-stage.is-mobile-story .taste-stage-intro h2 {font-size:clamp(2.7rem,12.5vw,3.4rem)!important;}
#taste-stage.is-mobile-story .taste-stage-intro .eyebrow {font-size:.7rem!important;}
#taste-stage.is-mobile-story .taste-stage-intro,
#taste-stage.is-mobile-story .taste-stage-intro > * {
opacity:1!important;transform:none!important;
}
#taste-stage.is-mobile-story .taste-planes {display:block!important;inset:20px 0 90px;opacity:.65;overflow:hidden;}
#taste-stage.is-mobile-story .taste-lane--pick .taste-plinth {width:auto!important;left:0;right:0;}
#taste-stage.is-mobile-story .taste-lane--pick .taste-plinth-cap {height:14px;clip-path:polygon(0 100%,100% 100%,calc(100% - 12px) 0,12px 0);}
#taste-stage.is-mobile-story .taste-lane--pick .taste-plinth-rise {box-sizing:border-box;width:100%;border-radius:0 0 4px 4px;}
#taste-stage.is-mobile-story .taste-card--diy,
#taste-stage.is-mobile-story .taste-card--agency {background:var(--frost-side)!important;}
#taste-stage.is-mobile-story .taste-card-points,
#taste-stage.is-mobile-story .taste-card--pick .taste-card-points {font-size:clamp(.72rem,3.1vw,.88rem)!important;line-height:1.32;gap:.35em;}
#taste-stage.is-mobile-story .taste-card-shot {
min-height:60px!important;max-height:none!important;flex:1 1 auto!important;aspect-ratio:auto!important;
}
#taste-stage.is-mobile-story .taste-card {gap:8px!important;}
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs {
max-width:calc(100% - 16px);
opacity:1!important;
transform:translate(-50%,-50%) scale(1)!important;
}
#taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--pick .taste-card-motion {top:0;left:9%;right:9%;z-index:1;}
#taste-stage.is-mobile-story[data-story-step="diy"] .taste-lane--agency .taste-card-motion {top:var(--peek);left:4.5%;right:4.5%;z-index:2;}
#taste-stage.is-mobile-story[data-story-step="agency"] .taste-lane--agency .taste-card-motion {animation:compare-side-arrive .95s cubic-bezier(.22,1,.36,1);}
#taste-stage.is-mobile-story[data-story-step="pick"] .taste-lane--pick .taste-card-motion {animation:compare-drop-arrive 1.1s cubic-bezier(.22,1,.36,1);}
}
@keyframes compare-side-arrive {from{transform:translateX(65px);}to{transform:translateX(0);}}
@keyframes compare-drop-arrive {0%{transform:translateY(-90px);}75%{transform:translateY(4px);}100%{transform:translateY(0);}}
@media(prefers-reduced-motion:reduce) {
#taste-stage .taste-stage-intro {opacity:1!important;transform:none!important;}
#taste-stage .taste-stage-tabs {opacity:1!important;clip-path:none!important;}
}
@media(max-width:860px) {
#packs.packs-outcomes .packs-head {display:flex;flex-direction:column;align-items:stretch;gap:20px;}
#packs.packs-outcomes .packs-head-copy {display:block;flex:none;width:100%;min-width:0;max-width:100%;}
}
#taste-stage .taste-card--pick,
#taste-stage .taste-card--pick:hover,
#taste-stage.is-mobile-story .taste-card--pick {
background:linear-gradient(155deg,#102b4b 0%,#07172d 48%,#040e20 100%)!important;
color:#f1f5fc;
border-color:#b5d5ff55!important;
box-shadow:inset 0 1px #dceaff45,inset 0 -1px #01071399,
0 3px 6px #00071466,0 18px 26px -14px #000613aa!important;
}
#taste-stage .taste-card--pick .taste-card-label,
#taste-stage .taste-card--pick .taste-card-points {color:#eef4ff!important;}
#taste-stage .taste-card--pick .taste-card-vs {color:#a9c4e8!important;}
@media(min-width:861px) {
#taste-stage .taste-lane--diy {--plinth-h:52px;}
#taste-stage .taste-lane--agency {--plinth-h:68px;}
#taste-stage .taste-lane--pick {--plinth-h:98px;position:relative;top:12px;z-index:3;}
#taste-stage .taste-lanes::before {display:none;}
#taste-stage .taste-plinth {opacity:var(--podium-reveal,1);filter:none;}
#taste-stage .taste-plinth-rise,
#taste-stage .taste-lane--pick .taste-plinth-rise {
position:relative;height:var(--plinth-h);min-height:var(--plinth-h);
background:url('assets/ui/limestone.svg'),linear-gradient(105deg,var(--podium-face),var(--podium-base))!important;
background-size:144px 144px,100% 100%!important;
box-shadow:inset 0 1px #ffffff45,inset 0 -1px #00000066,0 4px 5px -3px #00000066!important;
}
#taste-stage .taste-lane--pick .taste-plinth-rise {
box-shadow:inset 0 1px #ffffff66,inset 0 -1px #00000088,
-12px 4px 14px -9px #00000080,12px 4px 14px -9px #00000080,0 15px 18px -12px #00000099!important;
}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
height:18px;
background:linear-gradient(180deg,var(--podium-top),var(--podium-edge) 92%,var(--podium-top))!important;
}
#taste-stage .taste-lane--pick .taste-plinth-cap {
height:24px;clip-path:polygon(0 100%,100% 100%,calc(100% - 16px) 0,16px 0);
}
#taste-stage .taste-lane--pick .taste-card-motion {margin-bottom:22px!important;}
#taste-stage .taste-lane--diy .taste-plinth-cap {
clip-path:polygon(0 100%,100% 100%,100% 0,16px 0);
}
#taste-stage .taste-lane--agency .taste-plinth-cap {
clip-path:polygon(0 100%,100% 100%,calc(100% - 16px) 0,0 0);
}
#taste-stage .taste-lane--pick .taste-plinth::before,
#taste-stage .taste-lane--pick .taste-plinth::after {content:none;display:none;}
#taste-stage .taste-lane--pick .taste-card-shot {filter:none!important;}
#taste-stage .taste-card-shot,
#taste-stage .taste-lane--diy .taste-card-shot,
#taste-stage .taste-lane--agency .taste-card-shot,
#taste-stage .taste-card--pick .taste-card-shot,
#taste-stage .taste-lane--pick .taste-card-shot {
height:auto!important;
aspect-ratio:4/5;
min-height:0;
flex:none;
}
#taste-stage .taste-lane--diy .taste-card-shot,
#taste-stage .taste-lane--agency .taste-card-shot {
max-height:236px!important;
}
#taste-stage .taste-card--pick .taste-card-shot,
#taste-stage .taste-lane--pick .taste-card-shot {
max-height:288px!important;
}
}
@media(max-width:860px) and (min-height:620px) {
#taste-stage.is-mobile-story {--plinth-stack:60px;}
#taste-stage.is-mobile-story .taste-lane--pick .taste-plinth-rise {height:46px;min-height:46px;}
}
@keyframes compare-drop-arrive {0%{transform:translateY(-52px);}75%{transform:translateY(3px);}100%{transform:translateY(0);}}
html[data-skin="nocturne"] #taste-stage .taste-stage-shell::after {opacity:var(--spotlight-reveal,1);}
@media(max-width:860px) and (min-height:620px) {
#taste-stage.is-mobile-story .taste-stage-shell::after,
html[data-skin="nocturne"] #taste-stage.is-mobile-story .taste-stage-shell::after {
opacity:.55!important;transition:none!important;
}
}
@media(prefers-reduced-motion:reduce) {
html[data-skin="nocturne"] #taste-stage .taste-stage-shell::after {opacity:1;transition:none;}
}
@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;
}
#taste-stage.taste-stage {
overflow: visible;
box-sizing: border-box;
scroll-margin-top: var(--header, 72px);
padding-block: clamp(18px, 2.2vw, 32px);
min-height: 0;
}
#taste-stage .taste-stage-shell {
position: sticky !important;
top: var(--header, 72px) !important;
}
#taste-stage .taste-stage-hold {
display: block;
height: 100vh !important;
pointer-events: none;
}
#taste-stage .taste-stage-intro {
margin-bottom: clamp(22px, 2.6vw, 36px) !important;
}
#taste-stage .taste-stage-intro .eyebrow {
margin-bottom: 10px !important;
font-size: 0.84rem !important;
}
#taste-stage .taste-stage-intro h2 {
font-size: clamp(3.05rem, 4.6vw, 4.4rem) !important;
line-height: 1.04;
}
#taste-stage .taste-stage-arena {
min-height: 0 !important;
padding: 10px 0 16px !important;
}
#taste-stage .taste-lanes {
padding-top: 22px !important;
}
#taste-stage .taste-card {
gap: 8px;
padding: 10px 10px 12px;
}
#taste-stage .taste-card--pick {
gap: 10px;
padding: 12px 12px 14px;
}
#taste-stage .taste-card-shot,
#taste-stage .taste-lane--diy .taste-card-shot,
#taste-stage .taste-lane--agency .taste-card-shot {
max-height: 204px !important;
height: auto !important;
}
#taste-stage .taste-card--pick .taste-card-shot,
#taste-stage .taste-lane--pick .taste-card-shot {
max-height: 248px !important;
height: auto !important;
}
#taste-stage .taste-lane--diy { --plinth-h: 40px; }
#taste-stage .taste-lane--agency { --plinth-h: 54px; }
#taste-stage .taste-lane--pick { --plinth-h: 76px; top: 0; }
#taste-stage .taste-card-motion { margin-bottom: 10px !important; }
#taste-stage .taste-lane--pick .taste-card-motion { margin-bottom: 12px !important; }
#taste-stage .taste-card-points { font-size: clamp(0.72rem, 0.8vw, 0.84rem); }
#taste-stage .taste-card--pick .taste-card-points { font-size: clamp(0.76rem, 0.86vw, 0.9rem); }
#taste-stage .taste-lanes::after { bottom: -16px; height: 36px; }
@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;
}
}
}
@media (min-width: 861px) and (max-height: 820px) {
#taste-stage.taste-stage { padding-block: 14px; }
#taste-stage .taste-stage-intro { margin-bottom: clamp(14px, 1.6vw, 22px) !important; }
#taste-stage .taste-stage-intro h2 { font-size: clamp(2.85rem, 4.1vw, 3.8rem) !important; }
#taste-stage .taste-stage-intro .eyebrow { margin-bottom: 8px !important; font-size: 0.8rem !important; }
#taste-stage .taste-lanes { padding-top: 16px !important; }
#taste-stage .taste-lane--diy .taste-card-shot,
#taste-stage .taste-lane--agency .taste-card-shot {
max-height: 182px !important;
}
#taste-stage .taste-card--pick .taste-card-shot,
#taste-stage .taste-lane--pick .taste-card-shot {
max-height: 220px !important;
}
#taste-stage .taste-lane--diy { --plinth-h: 34px; }
#taste-stage .taste-lane--agency { --plinth-h: 46px; }
#taste-stage .taste-lane--pick { --plinth-h: 68px; }
}
@media (min-width: 861px) {
html #taste-stage.taste-stage .taste-stage-intro .eyebrow {
font-size: 0.84rem !important;
letter-spacing: 0.2em;
}
html #taste-stage.taste-stage .taste-stage-intro h2 {
font-size: clamp(3.05rem, 4.6vw, 4.4rem) !important;
line-height: 1.04 !important;
}
html #taste-stage.taste-stage .taste-stage-intro {
margin-bottom: clamp(22px, 2.6vw, 36px) !important;
}
html #taste-stage.taste-stage .taste-lanes {
padding-top: 28px !important;
}
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
html #taste-stage.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)
scale(var(--plane-scale, 1)) !important;
transition: transform 220ms ease-out;
}
}
@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 (min-width: 861px) {
html #taste-stage.taste-stage .taste-stage-intro {
margin-bottom: 8px !important;
}
html #taste-stage.taste-stage .taste-lanes {
padding-top: 10px !important;
}
html #taste-stage.taste-stage .taste-stage-arena {
padding-top: 0 !important;
}
html #taste-stage.taste-stage.is-desktop-story .taste-stage-shell {
position: sticky !important;
top: var(--header, 72px) !important;
box-sizing: border-box;
height: calc(100svh - var(--header, 72px) - 12px);
display: flex;
flex-direction: column;
justify-content: center;
justify-content: safe center;
padding-top: 0;
padding-bottom: 16px;
}
html #taste-stage.taste-stage.is-desktop-story .taste-stage-intro,
html #taste-stage.taste-stage.is-desktop-story .taste-stage-arena {
flex: none;
width: 100%;
}
html #taste-stage.taste-stage.is-desktop-story .taste-stage-arena {
transform: scale(var(--desktop-stage-scale, 0.9));
transform-origin: top center;
}
html #taste-stage.taste-stage.is-desktop-story .taste-stage-hold {
height: 125vh !important;
display: block;
pointer-events: none;
}
html #taste-stage.taste-stage.is-desktop-story .taste-plinth {
opacity: var(--podium-reveal, 0);
transform: translate3d(0, calc((1 - var(--podium-reveal, 0)) * 40px), 0);
}
html #taste-stage.taste-stage.is-desktop-story .taste-plinth-cap {
transform: none;
}
html #taste-stage.taste-stage.is-desktop-story .taste-stage-shell::after,
html[data-skin="nocturne"] #taste-stage.taste-stage.is-desktop-story .taste-stage-shell::after {
opacity: var(--spotlight-reveal, 0);
transition: none;
}
html #taste-stage.taste-stage.is-desktop-story .taste-lane--pick .taste-stage-tabs {
transform: translate(-50%, calc(-50% + (1 - var(--category-reveal, 0)) * 8px));
transition: none;
}
html #taste-stage.taste-stage.is-desktop-story .taste-card--pick {
animation: none;
}
html #taste-stage.taste-stage.is-desktop-story .taste-card-motion,
html #taste-stage.taste-stage.is-desktop-story .taste-plane {
transition: none !important;
}
html #taste-stage.taste-stage.is-desktop-story.is-settled .taste-plane {
transform: scale(1) !important;
}
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
html #taste-stage.taste-stage .taste-stage-shell {
position: relative !important;
top: auto !important;
}
html #taste-stage.taste-stage .taste-stage-hold { height: 0 !important; }
html #taste-stage.taste-stage .taste-lane--pick .taste-stage-tabs {
transform: translate(-50%, -50%);
}
}
#taste-stage .taste-card-shot,
#taste-stage:not(.is-mobile-story) .taste-card-shot,
#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 {
aspect-ratio: 16 / 9 !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
#taste-stage .taste-card-shot img {
object-fit: cover !important;
object-position: center !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
}
#taste-stage[data-taste-pack="0"] .taste-card--diy .taste-card-shot { background: #bfb5a8 !important; }
#taste-stage[data-taste-pack="0"] .taste-card--agency .taste-card-shot { background: #fcfcfc !important; }
#taste-stage[data-taste-pack="0"] .taste-card--pick .taste-card-shot { background: #522321 !important; }
#taste-stage[data-taste-pack="1"] .taste-card--diy .taste-card-shot { background: #d3f7db !important; }
#taste-stage[data-taste-pack="1"] .taste-card--agency .taste-card-shot { background: #fdfdfd !important; }
#taste-stage[data-taste-pack="1"] .taste-card--pick .taste-card-shot { background: #34423d !important; }
#taste-stage[data-taste-pack="2"] .taste-card--diy .taste-card-shot { background: #ababaa !important; }
#taste-stage[data-taste-pack="2"] .taste-card--agency .taste-card-shot { background: #fdfdfd !important; }
#taste-stage[data-taste-pack="2"] .taste-card--pick .taste-card-shot { background: #383226 !important; }
#taste-stage .taste-card--diy .taste-card-points li::before,
#taste-stage .taste-card--agency .taste-card-points li::before {
color: #ff6b6b;
opacity: .92;
}
#taste-stage .taste-card--pick .taste-card-points li::before {
border-left-color: #4ade80;
border-bottom-color: #4ade80;
opacity: 1;
}
#taste-stage .taste-stage-tabs .ik-indicator { display: none !important; }
#taste-stage .taste-stage-tabs.ik-has-indicator button[aria-selected="true"] {
background: #10151c !important;
color: #f4f6f9 !important;
}
html[data-skin="nocturne"] #taste-stage .taste-stage-tabs.ik-has-indicator button[aria-selected="true"] {
background: #0b162b !important;
color: #edf1f8 !important;
}
#taste-stage[data-taste-pack="2"] .taste-card--diy .taste-card-shot img,
#taste-stage[data-taste-pack="2"] .taste-card--diy:hover .taste-card-shot img,
#taste-stage[data-taste-pack="2"] .taste-card--pick .taste-card-shot img,
#taste-stage[data-taste-pack="2"] .taste-card--pick:hover .taste-card-shot img {
transform: scale(1.07) !important;
}
#taste-stage.taste-stage {
position: relative;
z-index: 3;
}
:root {
--control-blue-fill:
radial-gradient(62% 54% at 27% 16%,rgb(220 237 255 / .9) 0%,transparent 72%),
linear-gradient(132deg,#8fbaf6 0%,#3f79df 46%,#1f4a9b 100%);
}
#process-radial .pr-step:is(.is-active,.is-focus) .pr-node {
background:var(--control-blue-fill)!important;
}
html .hero .hero-scene .hero-mode svg {
background:radial-gradient(58% 52% at 28% 17%,#fff,transparent 74%),linear-gradient(132deg,#fff7ee,#faf7f1 43%,#e8eaf0)!important;
border:1px solid rgb(99 107 124 / .16)!important;
color:#3d4656!important;filter:none!important;opacity:1!important;
box-shadow:inset 1px 1px 0 rgb(255 244 231 / .96),inset -1px -2px 2px rgb(60 72 100 / .18),0 3px 0 #bdb6ad,0 5px 3px rgb(52 42 34 / .14),0 10px 16px rgb(52 42 34 / .14)!important;
transition:transform 260ms cubic-bezier(.2,.8,.3,1),box-shadow 260ms ease,color 180ms ease!important;
}
html[data-skin="nocturne"] .hero .hero-scene .hero-mode svg {
background:radial-gradient(58% 52% at 28% 17%,rgb(176 208 249 / .24),transparent 74%),linear-gradient(132deg,#354765,#1a2941)!important;
color:#dce8f7!important;
box-shadow:inset 1px 1px 0 rgb(218 236 255 / .22),inset -1px -2px 2px rgb(0 4 13 / .5),0 3px 0 #081223,0 8px 16px rgb(0 0 0 / .3)!important;
}
html .hero .hero-scene .hero-mode:is(:hover,:focus-visible) svg {
background:radial-gradient(58% 52% at 28% 17%,#fff,transparent 74%),linear-gradient(132deg,#e5f1ff,#c1d9fa 46%,#92b6e8)!important;
border-color:rgb(99 147 217 / .6)!important;color:#2457a6!important;
transform:translateY(-2px) scale(1.04)!important;
box-shadow:inset 1px 1px 0 rgb(255 255 255 / .8),inset -1px -2px 2px rgb(54 91 148 / .24),0 4px 0 #7898c5,0 10px 18px rgb(39 77 134 / .2)!important;
}
html .hero .hero-scene .hero-services .hero-mode[aria-checked="true"] svg {
background:var(--control-blue-fill)!important;
border-color:rgb(110 151 229 / .76)!important;color:#fff!important;
transform:translateY(-3px) scale(1.08)!important;
box-shadow:inset 1px 1px 0 rgb(255 245 232 / .52),inset -1px -2px 3px rgb(8 25 58 / .5),0 5px 0 #173a78,0 8px 5px rgb(19 47 100 / .3),0 15px 24px rgb(47 102 201 / .28)!important;
animation:none!important;
}
html .hero .hero-mode[aria-checked="true"] svg > * {
transform-box:view-box;transform-origin:50% 50%;
animation:hero-control-arrive 520ms cubic-bezier(.2,.8,.3,1) both;
}
@keyframes hero-control-arrive {
0% {transform:scale(.82) rotate(-9deg);opacity:.6;}
55% {transform:scale(1.08) rotate(3deg);opacity:1;}
100% {transform:scale(1) rotate(0);opacity:1;}
}
@media(prefers-reduced-motion:reduce) {
html .hero .hero-scene .hero-mode svg {transition:none!important;}
html .hero .hero-mode[aria-checked="true"] svg > * {animation:none;}
}
@media (max-width: 860px) {
html .hero .hero-scene .hero-mode svg,
html .hero .hero-scene .hero-mode:is(:hover, :focus-visible, :active) svg,
html[data-skin="nocturne"] .hero .hero-scene .hero-mode svg,
html[data-skin="nocturne"] .hero .hero-scene .hero-mode:is(:hover, :focus-visible, :active) svg {
box-shadow: inset 1px 1px 0 rgb(255 244 231 / .9),
inset -1px -2px 2px rgb(60 72 100 / .12),
0 1px 0 #cfc8bf,
0 2px 3px rgb(52 42 34 / .07) !important;
}
html[data-skin="nocturne"] .hero .hero-scene .hero-mode svg,
html[data-skin="nocturne"] .hero .hero-scene .hero-mode:is(:hover, :focus-visible, :active) svg {
box-shadow: inset 1px 1px 0 rgb(218 236 255 / .2),
inset -1px -2px 2px rgb(0 4 13 / .4),
0 1px 0 #0b1526,
0 2px 4px rgb(0 0 0 / .22) !important;
}
html .hero .hero-scene .hero-services .hero-mode[aria-checked="true"] svg,
html .hero .hero-scene .hero-services .hero-mode[aria-checked="true"]:is(:hover, :focus-visible, :active) svg {
box-shadow: inset 1px 1px 0 rgb(255 245 232 / .44),
inset -1px -2px 3px rgb(8 25 58 / .4),
0 2px 0 #23508f,
0 3px 5px rgb(19 47 100 / .14) !important;
}
}
@media (max-width: 860px) {
html .hero .hero-scene .hero-mode svg,
html .hero .hero-scene .hero-mode:is(:hover, :focus-visible) svg,
html .hero .hero-scene .hero-services .hero-mode[aria-checked="true"] svg {
transform: none !important;
transition: color 180ms ease, background 200ms ease,
border-color 200ms ease, box-shadow 200ms ease !important;
}
html .hero .hero-mode[aria-checked="true"] svg > *,
html .hero .hero-scene .hero-mode[aria-checked="true"] svg > * {
animation: none !important;
transform: none !important;
}
}
.pack-mobile-summary, .pack-mobile-options { display: none; }
@media (max-width: 680px) {
#packs.packs-outcomes .outcomes-panel {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 42px 12px 14px !important;
overflow: visible !important;
border-radius: 22px;
}
#packs .outcomes-watermark,
#packs .outcomes-cross { display: none; }
#packs .outcomes-counter { top: 14px; right: 18px; font-size: .7rem; }
#packs.packs-outcomes .outcomes-rail {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
transform: none !important;
scroll-snap-type: none;
}
#packs.packs-outcomes .pack-rail-card {
scroll-snap-align: none !important;
display: flex !important;
flex: none !important;
align-self: stretch !important;
width: 100% !important;
min-width: 0 !important;
height: auto;
min-height: 0 !important;
max-height: none !important;
padding: 0 14px !important;
gap: 10px !important;
border: 0 !important;
border-radius: 0 !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
box-shadow: inset 0 -1px 0 #0b173418 !important;
transition: background-color 180ms ease !important;
overflow: hidden !important;
clip-path: none !important;
}
#packs.packs-outcomes[data-packs-rail] .pack-rail-card.is-dimmed {
flex: none !important;
height: auto;
min-height: 0 !important;
opacity: 1 !important;
}
#packs.packs-outcomes .pack-rail-card::before,
#packs.packs-outcomes .pack-rail-card::after { display: none !important; }
#packs.packs-outcomes .pack-rail-card.is-expanded {
padding-bottom: 16px !important;
margin-block: 6px;
border-radius: 16px !important;
box-shadow: inset 0 1px 0 #fff9, 0 3px 5px #050c1920, 0 14px 22px -16px #0009 !important;
z-index: 2;
}
#packs .pack-rail-card:first-child { border-radius: 14px 14px 0 0 !important; }
#packs .pack-rail-card:last-child { border-radius: 0 0 14px 14px !important; }
#packs.packs-outcomes .pack-rail-card.is-expanded { border-radius: 16px !important; }
#packs .pack-mobile-summary {
display: grid;
grid-template-columns: 18px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
width: 100%;
min-height: 62px;
padding: 12px 0;
border: 0;
background: transparent;
color: var(--pack-card-ink);
text-align: left;
cursor: pointer;
font: inherit;
box-shadow: none;
transform: none;
}
#packs .pack-mobile-summary:focus-visible { outline: 2px solid #4977c9; outline-offset: -2px; border-radius: 8px; }
#packs .pack-mobile-number { font-family: var(--mono); font-size: .55rem; color: var(--pack-card-muted); }
#packs .pack-mobile-title { font-size: clamp(.85rem, 3.6vw, 1.05rem); font-weight: 600; line-height: 1.25; }
#packs .pack-mobile-price { font-size: .8rem; font-weight: 600; white-space: nowrap; }
#packs .pack-rail-card:not(.is-expanded) > :not(.pack-mobile-summary) { display: none !important; }
#packs .pack-rail-card.is-expanded .pack-rail-card-head { padding: 0 !important; margin-top: -8px; }
#packs .pack-rail-card-head h3,
#packs .pack-rail-card-head .pack-rail-card-num { display: none; }
#packs .pack-rail-card-meta { font-size: .62rem; }
#packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-visual {
height: 132px !important;
min-height: 132px !important;
max-height: 132px !important;
margin: 4px 0 !important;
overflow: hidden !important;
border-radius: 10px;
}
#packs .pack-rail-card-price,
#packs .pack-rail-card-blurb,
#packs .pack-mobile-options { display: none !important; }
#packs .pack-rail-card:not([data-pack="interactive"]) .pack-rail-card-stats,
#packs .pack-rail-card:not([data-pack="interactive"]) .pack-rail-card-note { display: none !important; }
#packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail {
position: static !important;
display: grid !important;
padding: 2px 0 0 !important;
gap: 8px;
max-height: none !important;
overflow: visible !important;
opacity: 1 !important;
transform: none !important;
}
#packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail[hidden] { display: none !important; }
#packs.packs-outcomes[data-packs-rail] .pack-rail-card.is-expanded .pack-rail-card-note { display: none; }
#packs .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts { font-size: .72rem; }
#packs .pack-rail-card-cta { min-height: 40px !important; }
#packs .pack-controls { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
#packs.packs-outcomes .pack-slider { gap: 2px; }
#packs.packs-outcomes .pack-slider span { font-size: .52rem; }
#packs.packs-outcomes .pack-slider strong { font-size: .82rem; }
#packs.packs-outcomes .pack-slider input[type="range"] { min-height: 22px; }
}
@media (max-width: 720px) {
#footer .footer-main { gap: 28px; padding-bottom: 24px; }
#footer .footer-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
gap: 24px 20px;
align-items: start;
}
#footer .footer-col:first-child { grid-column: 1; grid-row: 1; }
#footer .footer-col:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
#footer .footer-col--end {
display: contents;
}
#footer .footer-col--end h3 { display: none; }
#footer .footer-col--end > ul { grid-column: 1; grid-row: 2; align-self: start; }
#footer .footer-col:nth-child(2) li:has(a[href="consumer-catalogue.html"]),
#footer .footer-col:nth-child(2) li:has(a[href="industrial-catalogue.html"]) { display: none; }
#footer .footer-col a { font-size: .83rem; line-height: 1.5; }
#footer .footer-col ul { gap: 12px; }
#footer .footer-cta-stack {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 0;
padding-top: 18px;
border-top: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
gap: 12px 10px;
}
#footer .footer-cta-button { flex: 0 0 auto; }
#footer .footer-cta-stack .footer-email { flex: 0 1 auto; min-width: 0; }
#footer .footer-place { flex: 1 0 100%; }
#footer .footer-cta-stack .footer-email { order: 1; }
#footer .footer-cta-button { order: 2; }
#footer .footer-place { order: 3; }
#footer .footer-cta-button,
#footer .footer-cta-button .button-copy {
color: var(--action-ink) !important;
-webkit-text-fill-color: var(--action-ink);
opacity: 1;
visibility: visible;
}
#footer .footer-cta-button {
background: var(--action);
border-color: var(--action);
}
#footer .footer-cta-button:hover,
#footer .footer-cta-button:focus-visible {
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
box-shadow: none;
filter: none;
color: var(--action-ink);
}
#footer .footer-cta-button:hover .button-copy,
#footer .footer-cta-button:focus-visible .button-copy {
color: var(--action-ink) !important;
-webkit-text-fill-color: var(--action-ink);
}
html[data-skin="nocturne"] #footer .footer-cta-button:hover,
html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible {
background: var(--cta-hover, #4087f7);
border-color: var(--cta-hover, #4087f7);
box-shadow: none;
filter: none;
color: #061026;
}
html[data-skin="nocturne"] #footer .footer-cta-button:hover .button-copy,
html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible .button-copy {
color: #061026 !important;
-webkit-text-fill-color: #061026;
}
#footer .footer-cta-stack .footer-email {
margin-left: 0;
text-align: left;
}
#footer .footer-stage {
margin-top: 0 !important;
height: 340px !important;
min-height: 340px !important;
max-height: 340px !important;
touch-action: pan-y;
overscroll-behavior-x: contain;
}
}
#studio-console .sc-panel--faq > header,
#studio-console .sc-panel--faq .sc-heading {
display:none;
}
#studio-console .sc-panel--faq {
display:grid;grid-template-rows:minmax(0,1fr);gap:0;
min-height:0;overflow:hidden;align-content:stretch;
}
#studio-console .sc-faq-board {
display:grid;grid-template-columns:minmax(190px,.30fr) minmax(0,1fr);
grid-template-rows:minmax(0,1fr);gap:0;margin:0;min-height:0;
align-self:stretch;
}
#studio-console .sc-faq-board::before {content:none;display:none;}
#studio-console .sc-faq-topics {
display:grid;grid-template-rows:repeat(8,minmax(36px,1fr));
min-width:0;min-height:0;padding:0 0 4px;align-self:stretch;
}
#studio-console .sc-faq-trigger {
display:grid;grid-template-columns:30px minmax(0,1fr);grid-column:auto;
min-width:0;min-height:36px;width:100%;padding:9px 18px;
border:1px solid transparent;border-radius:7px 0 0 7px;
color:#acbbd2!important;background:none;box-shadow:none;transform:none;
font-size:.84rem;line-height:1.35;text-align:left;
transition:background-color 180ms ease,color 180ms ease;
}
#studio-console .sc-faq-trigger span:first-child {font-size:.56rem;color:#7f9ec9;}
#studio-console .sc-faq-trigger strong {font-weight:500;}
#studio-console .sc-faq-trigger:hover {background:#adcfff0a;color:#eef4ff!important;transform:none;}
#studio-console .sc-faq-trigger[aria-selected="true"] {
background:linear-gradient(105deg,#34487299,#2b3b5d);color:#f3f6ff!important;
border-color:#bdd6ff12;box-shadow:inset 0 1px #dce8ff0d;
}
#studio-console .sc-faq-trigger[aria-selected="true"] span:first-child {color:#9bbcff;}
#studio-console .sc-faq-answers {
min-width:0;min-height:0;border:1px solid #adc6ef2b;border-radius:12px;
background:linear-gradient(155deg,#2b3a5a,#1b2844 68%,#17223a);
box-shadow:inset 0 1px #e6efff21,inset 0 -1px #030c2180,
-5px 3px 12px -7px #03091fbb,0 16px 26px -20px #01091ac4;
overflow:auto;scrollbar-width:thin;scrollbar-color:#7188ad55 transparent;
}
#studio-console .sc-faq-detail {
position:relative;display:block;grid-area:auto;width:auto;max-width:none;
height:auto!important;min-height:100%;padding:clamp(24px,3vw,42px);
box-sizing:border-box;overflow:visible;
color:#d7e1f0!important;
}
#studio-console .sc-panel--faq.is-active .sc-faq-detail:not([hidden]) {
visibility:visible;pointer-events:auto;
}
#studio-console .sc-faq-detail[hidden] {display:none!important;}
#studio-console .sc-faq-count {display:block;margin:0 0 16px;color:#8da7d2;font-size:.58rem;letter-spacing:.13em;}
#studio-console .sc-faq-detail h3 {
max-width:25ch;margin:0;color:#f3f6fc;font-size:clamp(1.7rem,2.6vw,2.5rem);
font-weight:400;line-height:1.1;letter-spacing:-.03em;text-wrap:balance;
}
#studio-console .sc-faq-detail p:last-child {
max-width:66ch;margin:22px 0 0;color:#c6d2e6;font-size:clamp(.9rem,1.12vw,1rem);line-height:1.7;
}
#studio-console .sc-faq-trigger:focus-visible,
#studio-console .sc-faq-detail:focus-visible {outline:2px solid #a4c6ff;outline-offset:-4px;}
#studio-console .sc-panel--testimonials {
position:relative;
z-index:1;
}
#studio-console .sc-panel--faq {
position:absolute;
inset:0;
z-index:0;
}
#studio-console[data-sc-mode="testimonials"] .sc-panel--faq,
#studio-console .sc-panel--faq:not(.is-active) {
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
z-index:0!important;
}
#studio-console[data-sc-mode="testimonials"] .sc-panel--faq *,
#studio-console .sc-panel--faq:not(.is-active) * {
visibility:hidden!important;
pointer-events:none!important;
}
#studio-console[data-sc-mode="faq"] .sc-panel--faq,
#studio-console .sc-panel--faq.is-active {
visibility:visible;
opacity:1;
pointer-events:auto;
z-index:2;
}
#studio-console[data-sc-mode="faq"] .sc-panel--testimonials,
#studio-console .sc-panel--testimonials:not(.is-active) {
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
position:relative!important;
inset:auto!important;
z-index:0!important;
}
#studio-console[data-sc-mode="faq"] .sc-panel--testimonials *,
#studio-console .sc-panel--testimonials:not(.is-active) * {
visibility:hidden!important;
pointer-events:none!important;
}
@media(max-width:899px) {
#studio-console[data-sc-mode="faq"] .sc-frame {height:auto!important;min-height:0!important;}
#studio-console[data-sc-mode="faq"] .sc-main {min-height:0;padding:18px 20px 22px;}
#studio-console[data-sc-mode="faq"] .sc-stage {height:auto;min-height:0;}
#studio-console .sc-panel--faq.is-active {
position:absolute!important;inset:0!important;height:auto!important;min-height:100%!important;
display:flex!important;flex-direction:column;justify-content:flex-start;gap:12px;
overflow:auto!important;z-index:2;visibility:visible;opacity:1;
}
#studio-console .sc-panel--faq:not(.is-active) {
position:absolute!important;inset:0!important;height:auto!important;
overflow:hidden!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;z-index:0!important;
}
#studio-console .sc-panel--faq header {display:none;}
#studio-console .sc-panel--faq .sc-heading {display:none;}
#studio-console .sc-faq-board {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px;margin:0;min-height:0;flex:1;}
#studio-console .sc-faq-topics {
display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
padding:2px 1px 5px;scroll-padding-inline:1px;min-height:0;flex:none;
}
#studio-console .sc-faq-topics::-webkit-scrollbar {display:none;}
#studio-console .sc-faq-trigger {
display:flex;flex:0 0 auto;gap:8px;width:auto;min-height:42px;padding:11px 15px;
border:1px solid #9cb8e31f;border-radius:24px;background:#839ecc0c;
font:500 .62rem/1.2 var(--mono);letter-spacing:.02em;white-space:nowrap;
}
#studio-console .sc-faq-trigger strong {font-weight:500;}
#studio-console .sc-faq-trigger span:first-child {font-size:.49rem;}
#studio-console .sc-faq-trigger[aria-selected="true"] {
background:linear-gradient(180deg,#628eeb,#3d67c9);border-color:#b1cfff5c;
box-shadow:inset 0 1px #e7f1ff40,0 3px 7px -4px #050d2f99;
}
#studio-console .sc-faq-trigger[aria-selected="true"] span:first-child {color:#d8e7ff;}
#studio-console .sc-faq-answers {min-height:0;flex:1;overflow:auto;border-radius:12px;}
#studio-console .sc-faq-detail {padding:18px 18px 22px;height:auto!important;min-height:0;}
#studio-console .sc-faq-count {margin-bottom:12px;}
#studio-console .sc-faq-detail h3 {max-width:24ch;font-size:clamp(1.35rem,6.2vw,1.75rem);line-height:1.12;}
#studio-console .sc-faq-detail p:last-child {font-size:.9rem;line-height:1.6;margin-top:14px;}
}
@media(max-width:360px) {
#studio-console[data-sc-mode="faq"] .sc-main {padding-inline:15px;}
#studio-console .sc-faq-detail {padding:22px 18px 28px;}
}
@media(prefers-reduced-motion:reduce) {
#studio-console .sc-faq-trigger {transition:none;}
}
html[data-skin="nocturne"] #studio-console .sc-faq-answers {
border-color: #adc6ef1f;
background: linear-gradient(155deg, #18223a, #131c32 68%, #101830);
box-shadow: inset 0 1px #e6efff14, inset 0 -1px #02081699,
-5px 3px 12px -7px #02071899, 0 16px 26px -20px #010614cc;
}
html[data-skin="nocturne"] #studio-console .sc-faq-trigger[aria-selected="true"] {
background: linear-gradient(105deg, #1e2a4699, #1b2740);
border-color: #bdd6ff0f;
box-shadow: inset 0 1px #dce8ff08;
}
html[data-skin="nocturne"] #studio-console .sc-faq-trigger:hover {
background: #adcfff08;
}
.theme-toggle {
top: auto;
right: max(16px, calc(env(safe-area-inset-right) + 12px));
bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
}
@media (max-width: 860px) {
.theme-toggle {
right: max(14px, calc(env(safe-area-inset-right) + 10px));
bottom: max(24px, calc(env(safe-area-inset-bottom) + 20px));
}
html .hero.has-sky,
html .hero.has-sky-fallback {
height: auto;
min-height: 100svh;
padding-bottom: clamp(12px, 3.5vw, 22px);
}
html .hero .hero-grid { min-height: 0; }
.hero .hero-intro {
max-width: min(100%, 46ch);
margin-top: 10px;
font-size: clamp(.76rem, 3.2vw, .92rem);
line-height: 1.5;
letter-spacing: -.005em;
}
.hero .hero-showcase-wrap { margin-top: 0; }
.hero .hero-scene { padding-top: 26px; }
.hero .hero-group {
padding-inline: 4px;
text-align: center;
}
.hero .hero-actions .hero-readout {
top: 0 !important;
margin-top: 12px;
}
.hero .hero-readout-desc {
font-size: .84rem;
line-height: 1.4;
}
.hero .hero-actions .hero-readout { width: min(46ch, 97%); }
.hero .hero-mode {
min-height: 38px;
padding-block: 4px;
font-size: .55rem;
}
.hero .hero-mode svg { width: 22px; height: 22px; }
.hero .hero-mode > svg + span { letter-spacing: .04em; }
.hero .hero-group { padding-top: 6px; }
.hero .hero-actions { margin-top: 4px; }
.ribbon-stack { margin-top: 0; }
}
@media (max-width: 860px) {
#packs .packs-head-copy .eyebrow,
#packs .packs-head-copy h2 {
justify-self: start;
text-align: left;
}
}
@media (max-width: 680px) {
#packs .pack-rail-card.is-expanded .pack-rail-card-stats {
display: grid !important;
gap: 6px;
font-size: .72rem;
}
#packs .pack-rail-card.is-expanded .pack-rail-card-stats li { gap: 8px; }
#packs .pack-rail-card.is-expanded .pack-rail-card-stats svg { width: 16px; height: 16px; }
#packs.packs-outcomes[data-packs-rail] .pack-rail-card.is-expanded .pack-rail-card-note {
display: block !important;
font-size: .68rem;
line-height: 1.45;
}
#packs .pack-rail-card.is-expanded .pack-rail-card-price {
display: block !important;
margin: 0;
font-size: 0;
line-height: 0;
}
#packs .pack-rail-card.is-expanded .pack-rail-card-price em,
#packs .pack-rail-card.is-expanded .pack-rail-card-price small { font-size: .68rem; }
#packs .pack-rail-card.is-expanded .pack-rail-card-price em { display: none; }
#packs .pack-rail-card.is-expanded .pack-rail-card-price small {
display: block;
margin: 0;
line-height: 1.4;
letter-spacing: .04em;
}
}
@media (max-width: 760px) {
#process-radial .pr-copy {
width: 90px !important;
min-width: 90px !important;
}
#process-radial .pr-num {
font-size: .5rem !important;
letter-spacing: .16em !important;
}
#process-radial .pr-title {
margin-top: 2px !important;
font-size: .62rem !important;
line-height: 1.14 !important;
}
#process-radial .pr-step[data-place="bl"] .pr-copy { left: -45px !important; top: 32px !important; }
#process-radial .pr-step[data-place="l"]  .pr-copy { width: 76px !important; min-width: 76px !important; left: -56px !important; bottom: 38px !important; }
#process-radial .pr-step[data-place="tl"] .pr-copy { right: -25px !important; bottom: 37px !important; }
#process-radial .pr-step[data-place="t"]  .pr-copy { left: -45px !important; bottom: 40px !important; }
#process-radial .pr-step[data-place="tr"] .pr-copy { left: -25px !important; bottom: 37px !important; }
#process-radial .pr-step[data-place="r"]  .pr-copy { width: 76px !important; min-width: 76px !important; left: -20px !important; bottom: 38px !important; }
#process-radial .pr-step[data-place="br"] .pr-copy { right: -45px !important; top: 32px !important; }
}
@media (max-width: 860px) {
#taste-stage .taste-stage-intro { margin-bottom: 4px; }
#taste-stage .taste-stage-arena { padding-top: 0; }
}
@media (max-width: 860px) {
.hero h1 {
font-size: clamp(1.45rem, 9.6vw, 2.4rem);
line-height: 1.12;
white-space: nowrap;
text-wrap: nowrap;
max-width: none;
}
.hero h1 span { display: inline; }
.hero .hero-intro { display: none; }
.hero .hero-showcase-wrap { margin-top: 4px; }
.hero .hero-mode::before,
.hero .hero-mode::after { display: none !important; }
.hero .hero-actions { gap: 0; }
.hero .hero-actions .hero-readout {
display: flex;
flex-direction: column;
justify-content: center;
margin-block: 14px;
}
.hero .hero-readout-desc {
display: flex;
align-items: center;
justify-content: center;
}
}
html .hero-sky .hero-stars,
html[data-skin="nocturne"] .hero-sky .hero-stars { z-index: 0; }
html .hero-sky .hero-sky-layer--far { z-index: 1; }
@media (max-width: 760px) {
#process-radial .pr-lede { display: none; }
#process-radial .pr-heading { margin-bottom: 0 !important; }
#process-radial .pr-board { margin-top: -6px !important; }
#process-radial .pr-shell { padding-bottom: 16px; }
}
@media (max-width: 860px) {
#packs .packs-head-led {
grid-template-columns: minmax(0, 1fr) 18px;
max-width: 100%;
margin-left: auto;
}
#packs .packs-head-led .taste-stage-led-mark { grid-column: 2; grid-row: 1; }
#packs .packs-head-led .taste-stage-led-kicker {
grid-column: 1;
grid-row: 1;
text-align: right !important;
}
#packs .packs-head-led .taste-stage-led-copy {
grid-column: 1 / -1;
grid-row: 2;
text-align: right !important;
}
}
@media (max-width: 860px) {
html .hero.has-sky,
html .hero.has-sky-fallback {
padding-bottom: clamp(16px, 2.6vh, 28px);
}
html .hero.has-sky .hero-grid,
html .hero.has-sky-fallback .hero-grid {
display: flex;
flex-direction: column;
min-height: calc(100svh - var(--header, 64px) - 14px - clamp(16px, 2.6vh, 28px));
}
html .hero.has-sky .hero-copy,
html .hero.has-sky-fallback .hero-copy { flex: 0 0 auto; }
html .hero.has-sky .hero-showcase-wrap,
html .hero.has-sky-fallback .hero-showcase-wrap {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
html .hero.has-sky .hero-showcase,
html .hero.has-sky-fallback .hero-showcase {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
html .hero.has-sky .hero-scene,
html .hero.has-sky-fallback .hero-scene {
flex: 1 1 auto;
min-height: 0;
grid-template-rows: minmax(0, 1fr) auto;
}
html .hero.has-sky .hero-product-stage,
html .hero.has-sky-fallback .hero-product-stage {
place-self: center;
width: min(100%, calc((100svh - 447px) * 1.34));
max-height: min(38vh, 300px);
}
html .hero.has-sky .hero-actions,
html .hero.has-sky-fallback .hero-actions { flex: 0 0 auto; }
}
@media (max-width: 860px) and (min-height: 620px) {
#taste-stage.is-mobile-story .taste-plinth { margin-inline: -10px; }
#taste-stage.is-mobile-story .taste-stage-intro {
opacity: 0 !important;
transform: translateY(10px) scale(.94) !important;
transform-origin: 50% 100%;
transition: opacity 560ms cubic-bezier(.22, 1, .36, 1),
transform 560ms cubic-bezier(.22, 1, .36, 1);
will-change: opacity, transform;
}
#taste-stage.is-mobile-story.is-title-in .taste-stage-intro {
opacity: 1 !important;
transform: none !important;
}
}
@media (max-width: 860px) and (min-height: 620px) and (prefers-reduced-motion: reduce) {
#taste-stage.is-mobile-story .taste-stage-intro {
opacity: 1 !important;
transform: none !important;
transition: none;
}
}
@media (max-width: 680px) {
#packs.packs-outcomes .pack-rail-card,
#packs.packs-outcomes .pack-rail-card.is-expanded,
#packs.packs-outcomes .pack-rail-card:focus-within {
border-radius: 0 !important;
margin-block: 0 !important;
transition: background-color 180ms ease !important;
}
#packs.packs-outcomes .pack-rail-card:first-child,
#packs.packs-outcomes .pack-rail-card:first-child.is-expanded,
#packs.packs-outcomes .pack-rail-card:first-child:focus-within {
border-radius: 14px 14px 0 0 !important;
}
#packs.packs-outcomes .pack-rail-card:last-child,
#packs.packs-outcomes .pack-rail-card:last-child.is-expanded,
#packs.packs-outcomes .pack-rail-card:last-child:focus-within {
border-radius: 0 0 14px 14px !important;
}
#packs.packs-outcomes .pack-rail-card:focus-within:not(.is-expanded) {
box-shadow: inset 0 -1px 0 #0b173418 !important;
z-index: auto;
}
#packs.packs-outcomes .pack-rail-card.is-expanded {
box-shadow: inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #0b173418 !important;
z-index: 2;
}
#packs.packs-outcomes .pack-rail-card:last-child,
#packs.packs-outcomes .pack-rail-card:last-child:focus-within:not(.is-expanded) {
box-shadow: none !important;
}
#packs.packs-outcomes .pack-rail-card:last-child.is-expanded {
box-shadow: inset 0 1px 0 #ffffffcc !important;
}
}
@media (max-width: 860px) {
.site-footer .footer-main::before { top: 15px; }
}
@media (max-width: 680px) {
#packs.packs-outcomes .pack-rail-card:last-child { box-shadow: none !important; }
}
@media (max-width: 860px) and (min-height: 620px) {
#taste-stage.is-mobile-story .taste-stage-tabs { padding: 3px; }
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs button {
min-height: 26px;
padding: 2px 10px;
font-size: .52rem;
}
}
@media (max-width: 860px) {
html .hero.has-sky .hero-actions,
html .hero.has-sky-fallback .hero-actions {
gap: 0 !important;
margin-top: 0 !important;
}
html .hero.has-sky .hero-actions .hero-readout,
html .hero.has-sky-fallback .hero-actions .hero-readout {
margin: 14px 0 !important;
top: 0 !important;
}
}
@media (max-width: 860px) {
.hero .hero-mode[aria-checked="true"] {
box-shadow: none !important;
position: relative;
}
.hero .hero-mode[aria-checked="true"]::after {
content: "";
display: block !important;
position: absolute;
left: 5px;
top: 50%;
width: 3px;
height: 20px;
margin: 0;
border-radius: 2px;
background: var(--cta-hover, #3357d7);
transform: translateY(-50%);
opacity: 1;
pointer-events: none;
}
}
@media (max-width: 860px) and (min-height: 620px) {
html #taste-stage.taste-stage.is-mobile-story {
height: auto !important;
min-height: 0 !important;
padding-block: 0 !important;
overflow: visible;
--peek: 30px;
--plinth-stack: 46px;
}
html #taste-stage.taste-stage.is-mobile-story .taste-stage-hold {
display: none !important;
height: 0 !important;
pointer-events: none;
}
#taste-stage.is-mobile-story .taste-stage-shell {
position: static !important;
top: auto !important;
height: calc(100svh - 160px);
padding-top: 18px;
}
#taste-stage.is-mobile-story .taste-card-motion {
top: calc(var(--peek) * 2) !important;
left: 11px !important;
right: 11px !important;
--d: 0;
--drop: 0px;
--bow: 0px;
--fade: 1;
--dim: 0;
transform-origin: 50% 0;
will-change: transform, opacity, filter;
backface-visibility: hidden;
transition: none !important;
transform:
translate3d(
var(--enter-x, 0px),
calc(var(--d) * var(--peek) * -1 + var(--drop) + var(--bow) + var(--enter-y, 0px)),
0)
scale(calc(1 - var(--d) * 0.09)) !important;
opacity: calc(var(--fade) * var(--enter-fade, 1)) !important;
filter: saturate(calc(1 - var(--dim) * .55)) brightness(calc(1 - var(--dim) * .18));
}
#taste-stage.is-mobile-story .taste-stage-intro > * {
opacity: var(--title-reveal, 1) !important;
transform: translate3d(0, calc((1 - var(--title-reveal, 1)) * 16px), 0) !important;
transition: none !important;
}
#taste-stage.is-mobile-story .taste-plinth {
opacity: var(--podium-reveal, 1) !important;
transform: translate3d(0, calc((1 - var(--podium-reveal, 1)) * 26px), 0) !important;
transition: none !important;
}
#taste-stage.is-mobile-story .taste-stage-shell::after {
opacity: calc(var(--spotlight-reveal, 1) * .55) !important;
transition: none !important;
}
#taste-stage.is-mobile-story .taste-stage-tabs,
#taste-stage.is-mobile-story .taste-lane--pick .taste-stage-tabs {
opacity: var(--category-reveal, 1) !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
#taste-stage.is-mobile-story .taste-stage-intro > *,
#taste-stage.is-mobile-story .taste-plinth,
#taste-stage.is-mobile-story .taste-stage-tabs {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
#taste-stage.is-mobile-story .taste-stage-shell::after {
opacity: .55 !important;
transition: none !important;
}
}
#taste-stage.is-mobile-story .taste-card-shot {
aspect-ratio: 16 / 9 !important;
flex: 0 1 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
#taste-stage.is-mobile-story .taste-card-points {
flex: 0 0 auto !important;
}
#taste-stage.is-mobile-story .taste-plinth { z-index: 40; }
#taste-stage.is-mobile-story .taste-stage-tabs { z-index: 41; }
}
html.is-taste-snap { scroll-snap-type: y proximity; }
#taste-stage.taste-stage.is-mobile-story { position: relative; }
#taste-stage.is-mobile-story .taste-snap {
position: absolute;
left: 0;
width: 1px;
height: 1px;
pointer-events: none;
background: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
#taste-stage.is-mobile-story.is-taste-anchoring .taste-snap { scroll-snap-align: none; }
@media (max-width: 860px) {
.site-header .menu-button { display: inline-flex !important; }
.site-header .site-nav {
display: none !important;
}
.site-header .site-nav.is-open {
display: flex !important;
}
.site-header .header-inner { gap: 12px; }
}
@media (max-width: 860px) and (min-height: 620px) {
#taste-stage.is-mobile-story .taste-card-motion {
top: auto !important;
bottom: var(--plinth-stack);
height: clamp(300px, 82vw, 340px);
}
#taste-stage.is-mobile-story .taste-card-points {
margin-block: auto !important;
}
}
@media (max-width: 860px) {
html .hero.has-sky .hero-scene[data-mode="configurator"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="configurator"] .hero-product-stage {
overflow: visible !important;
}
.hero-scene[data-mode="configurator"] .hero-config-canvas {
border-radius: 18px;
}
.hero-scene[data-mode="configurator"] {
--chair-col-inset: clamp(-38px, calc(16px - ((100vw - var(--chair-stage-w)) / 2)), 8px);
}
.hero-scene[data-mode="configurator"] .hero-chair-col--left {
left: var(--chair-col-inset) !important;
transform: translate(0, -50%) !important;
}
.hero-scene[data-mode="configurator"] .hero-chair-col--right {
left: auto !important;
right: var(--chair-col-inset) !important;
transform: translate(0, -50%) !important;
}
}
@media (max-width: 860px) and (min-height: 620px) {
#taste-stage.is-mobile-story .taste-stage-shell {
height: max(calc(100svh - 160px), 600px) !important;
}
}
.hero-config-frame {
z-index: 3;
opacity: 0;
pointer-events: none;
}
.hero-config-canvas {
display: block;
width: 100%;
height: 100%;
opacity: 0;
background: transparent;
image-rendering: auto;
touch-action: none;
transition: opacity 420ms ease;
}
.hero-config-spinner {
position: absolute;
z-index: 9;
left: 50%;
top: 50%;
display: none;
place-items: center;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hero-load {
display: grid;
justify-items: center;
gap: 8px;
pointer-events: none;
}
.hero-load-bar,
.hero-config-bar {
position: relative;
width: 92px;
height: 9px;
overflow: hidden;
box-sizing: border-box;
border: 1.5px solid #1b3568;
border-radius: 99px;
background: transparent;
box-shadow: none;
}
.hero-load-bar::after,
.hero-config-bar::after {
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
width: 0;
border-radius: inherit;
background: #8cb4ff;
box-shadow: none;
content: "";
animation: hero-load-fill 1300ms ease-in-out infinite;
}
.hero-load-label {
color: #1b3568;
font-family: var(--mono, ui-monospace, monospace);
font-size: .56rem;
font-weight: 500;
letter-spacing: .14em;
line-height: 1;
text-transform: uppercase;
}
.hero-chair-ui {
position: absolute;
z-index: 8;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 240ms ease;
}
.hero-scene[data-mode="configurator"] {
--chair-stage-w: min(46vw, 620px);
--chair-ui-inset: clamp(44px, 4.2vw, 64px);
}
.hero-chair-col {
position: absolute;
top: 36%;
display: grid;
justify-items: center;
gap: 0;
pointer-events: none;
}
.hero-chair-col--left {
left: calc(50% - (var(--chair-stage-w) / 2) + var(--chair-ui-inset));
transform: translate(-50%, -10%);
}
.hero-chair-col--right {
left: calc(50% + (var(--chair-stage-w) / 2) - var(--chair-ui-inset));
transform: translate(-50%, -10%);
}
.hero-chair-group {
display: grid;
justify-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.hero-chair-group--lower {
margin-top: 26px;
}
.hero-chair-label {
margin: 0;
color: var(--muted);
font-family: var(--mono);
font-size: .56rem;
font-weight: 500;
letter-spacing: .14em;
line-height: 1;
text-transform: uppercase;
}
.hero-chair-swatches,
.hero-chair-pills,
.hero-chair-bases {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.hero-chair-swatches { flex-direction: column; }
.hero-chair-swatch,
.hero-chair-base {
position: relative;
}
.hero-chair-swatch {
width: 22px;
height: 22px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 50%;
background: var(--swatch);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 50%, transparent);
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
}
.hero-chair-swatch[aria-pressed="true"] {
box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink);
}
.hero-chair-tip {
position: absolute;
top: 50%;
z-index: 3;
padding: 0;
color: var(--ink);
font-family: var(--mono);
font-size: .52rem;
letter-spacing: .04em;
line-height: 1;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease, transform 140ms ease;
}
.hero-chair-col--left .hero-chair-swatch .hero-chair-tip {
left: calc(100% + 10px);
right: auto;
transform: translateY(-50%) translateX(-4px);
}
.hero-chair-col--right .hero-chair-swatch .hero-chair-tip {
right: calc(100% + 10px);
left: auto;
transform: translateY(-50%) translateX(4px);
}
.hero-chair-base .hero-chair-tip {
left: 50%;
right: auto;
top: calc(100% + 8px);
bottom: auto;
transform: translateX(-50%) translateY(-4px);
}
.hero-chair-col--left .hero-chair-swatch:hover .hero-chair-tip,
.hero-chair-col--left .hero-chair-swatch:focus-visible .hero-chair-tip {
opacity: 1;
transform: translateY(-50%);
}
.hero-chair-col--right .hero-chair-swatch:hover .hero-chair-tip,
.hero-chair-col--right .hero-chair-swatch:focus-visible .hero-chair-tip {
opacity: 1;
transform: translateY(-50%);
}
.hero-chair-base:hover .hero-chair-tip,
.hero-chair-base:focus-visible .hero-chair-tip {
opacity: 1;
transform: translateX(-50%);
}
.hero-chair-pill {
min-height: 30px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 72%, transparent);
color: var(--ink);
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
}
.hero-chair-pill[aria-pressed="true"] {
border-color: var(--ink);
background: var(--ink);
color: var(--paper);
}
.hero-chair-base {
width: 30px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 50%;
background: color-mix(in srgb, var(--surface) 72%, transparent);
color: var(--ink);
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
}
.hero-chair-base svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 1.4;
}
.hero-chair-base[aria-pressed="true"] {
border-color: var(--ink);
background: var(--ink);
color: var(--paper);
}
html .hero-media-visual,
html .hero-still-stack,
html .hero-video-frame,
html .hero-video-frame video,
html .hero-model-frame,
html .hero-product-image {
-webkit-mask-image: none !important;
mask-image: none !important;
}
html .hero-scene[data-mode="imagery"] .hero-product-ghost,
html .hero-scene[data-mode="imagery"] .hero-product-stage::after {
display: none !important;
}
html .hero-scene[data-mode="imagery"] .hero-media-visual,
html .hero-scene[data-mode="imagery"] .hero-still-stack,
html .hero-scene[data-mode="imagery"] .hero-product-stage {
background: transparent !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
html .hero-scene[data-mode="imagery"] .hero-still-stack {
position: absolute;
inset: 0 !important;
width: auto !important;
height: auto !important;
display: grid;
place-items: center;
overflow: visible;
transform: none;
}
html .hero-scene[data-mode="imagery"] .hero-product-image {
position: relative;
inset: auto !important;
display: block;
object-fit: cover;
filter: none !important;
transform: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.hero-scene[data-mode="configurator"] .hero-config-frame,
.hero-scene[data-mode="configurator"] .hero-media-layer {
-webkit-mask-image: none !important;
mask-image: none !important;
}
.hero-scene[data-mode="configurator"] .hero-haze {
opacity: 0 !important;
}
html .hero-scene[data-mode="configurator"] .hero-config-frame {
opacity: 1 !important;
transition: none !important;
}
html .hero-scene[data-mode="configurator"]:not(.is-chair-ready) .hero-config-canvas {
opacity: 0 !important;
}
html .hero-scene[data-mode="configurator"].is-chair-ready .hero-config-canvas {
opacity: 1 !important;
pointer-events: auto;
transition: none !important;
}
.hero-scene[data-mode="configurator"]:not(.is-chair-ready):not(.is-chair-failed) .hero-config-spinner {
display: grid;
}
html .hero-scene[data-mode="configurator"] .hero-media-layer:not(.hero-config-frame),
html .hero-scene[data-mode="configurator"].is-ready .hero-media-layer:not(.hero-config-frame),
html .hero-scene[data-mode="configurator"].is-ready:not(.is-idle) .hero-still-stack,
html .hero-scene[data-mode="configurator"] .hero-still-stack,
html .hero-scene[data-mode="configurator"] .hero-product-image,
html .hero-scene[data-mode="configurator"] .hero-product-ghost,
html .hero-scene[data-mode="configurator"] .hero-video-frame,
html .hero-scene[data-mode="configurator"] .hero-play {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
filter: none !important;
pointer-events: none !important;
}
html .hero-scene[data-mode="configurator"] .hero-model-frame,
html .hero-scene[data-mode="configurator"].is-model-ready .hero-model-frame {
opacity: 0 !important;
pointer-events: none !important;
}
html .hero-scene[data-mode="configurator"] .hero-configurator-controls,
html .hero-scene[data-mode="configurator"].is-model-ready:not(.is-roulette) .hero-configurator-controls {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.hero-scene[data-mode="configurator"]:not(.is-roulette):not(.is-preparing).is-chair-ready .hero-chair-ui {
opacity: 1 !important;
visibility: visible;
}
.hero-scene.is-media-locked .hero-chair-ui,
.hero-scene.is-roulette .hero-chair-ui,
.hero-scene.is-preparing .hero-chair-ui,
.hero-scene.is-source-visible .hero-chair-ui {
opacity: 0 !important;
visibility: hidden;
pointer-events: none !important;
}
.hero-scene.is-roulette .hero-config-frame,
.hero-scene.is-preparing .hero-config-frame {
opacity: 0 !important;
pointer-events: none !important;
}
.hero-scene.is-chair-dragging { cursor: grabbing; }
html[data-skin="nocturne"] .hero-chair-swatch[aria-pressed="true"] {
box-shadow: 0 0 0 2px #0c1220, 0 0 0 3.5px #f1f5f9;
}
html[data-skin="nocturne"] .hero-load-bar,
html[data-skin="nocturne"] .hero-config-bar {
border-color: #8cb4ff;
background: transparent;
}
html[data-skin="nocturne"] .hero-load-bar::after,
html[data-skin="nocturne"] .hero-config-bar::after {
background: #9ec4ff;
box-shadow: none;
}
html[data-skin="nocturne"] .hero-load-label {
color: #c5d8ff;
}
html .hero-scene[data-mode="3d"] .hero-still-stack,
html .hero-scene[data-mode="3d"] .hero-product-image,
html .hero-scene[data-mode="3d"] .hero-product-ghost,
html .hero-scene[data-mode="3d"] .hero-play,
html .hero-scene[data-mode="3d"] .hero-configurator-controls,
html .hero-scene[data-mode="3d"] .hero-viewfinder,
html .hero-scene[data-mode="3d"] .hero-config-spinner,
html .hero-scene[data-mode="ar"] .hero-still-stack,
html .hero-scene[data-mode="ar"] .hero-product-image,
html .hero-scene[data-mode="ar"] .hero-product-ghost,
html .hero-scene[data-mode="ar"] .hero-video-frame,
html .hero-scene[data-mode="ar"] .hero-play,
html .hero-scene[data-mode="ar"] .hero-configurator-controls,
html .hero-scene[data-mode="ar"] .hero-viewfinder,
html .hero-scene[data-mode="ar"] .hero-config-spinner {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
filter: none !important;
pointer-events: none !important;
}
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-video-frame,
html .hero-scene[data-mode="ugc"] .hero-video-frame {
inset: auto !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 16px;
background: none !important;
}
html .hero-scene[data-mode="video"] .hero-video-frame::after,
html .hero-scene[data-mode="3d"] .hero-video-frame::after,
html .hero-scene[data-mode="ugc"] .hero-video-frame::after,
html .hero-scene[data-mode="video"] .hero-video-frame::before,
html .hero-scene[data-mode="3d"] .hero-video-frame::before,
html .hero-scene[data-mode="ugc"] .hero-video-frame::before {
content: none !important;
display: none !important;
}
html .hero-scene[data-mode="video"] .hero-video-frame video,
html .hero-scene[data-mode="3d"] .hero-video-frame video,
html .hero-scene[data-mode="ugc"] .hero-video-frame video,
html .hero-scene[data-mode="imagery"] .hero-product-image {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 16px !important;
background: none !important;
background-image: none !important;
}
html .hero-scene[data-mode="imagery"] .hero-product-image {
width: min(70%, 600px) !important;
height: auto !important;
}
@media (min-width: 861px) {
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-video-frame {
width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 5 / 3;
}
html .hero-scene[data-mode="video"] .hero-video-frame video,
html .hero-scene[data-mode="3d"] .hero-video-frame video,
html .hero-scene[data-mode="imagery"] .hero-product-image {
width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 5 / 3;
}
html .hero.has-sky .hero-scene[data-mode="ugc"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="ugc"] .hero-product-stage {
width: min(23vw, 296px) !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 16px;
}
html .hero.has-sky .hero-scene[data-mode="ugc"] .hero-media-visual,
html .hero.has-sky-fallback .hero-scene[data-mode="ugc"] .hero-media-visual {
inset: 0 !important;
width: auto !important;
height: auto !important;
transform: none !important;
}
html .hero-scene[data-mode="ugc"] .hero-video-frame {
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
transform: none !important;
}
html .hero-scene[data-mode="3d"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-play,
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="ugc"] .hero-video-frame {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
filter: none !important;
}
html .hero-scene[data-mode="3d"] .hero-ar-shell,
html .hero-scene[data-mode="3d"] .hero-model-frame,
html .hero-scene[data-mode="3d"] .hero-ar-device {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
@media (max-width: 860px) {
html .hero .hero-scene {
--hero-plate-w: min(96vw, calc(var(--hero-plate-h) * 3.33 / 4));
}
html .hero .hero-scene .hero-product-stage {
width: var(--hero-plate-w) !important;
aspect-ratio: 3.33 / 4 !important;
top: -6px;
height: auto !important;
max-height: none !important;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 18px;
}
html .hero-scene[data-mode="video"] .hero-media-visual,
html .hero-scene[data-mode="3d"] .hero-media-visual,
html .hero-scene[data-mode="ugc"] .hero-media-visual,
html .hero-scene[data-mode="imagery"] .hero-media-visual,
html .hero-scene[data-mode="configurator"] .hero-media-visual,
html .hero-scene[data-mode="ar"] .hero-media-visual {
inset: 0 !important;
width: auto !important;
height: auto !important;
transform: none !important;
}
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-video-frame,
html .hero-scene[data-mode="ugc"] .hero-video-frame,
html .hero-scene[data-mode="imagery"] .hero-still-stack,
html .hero-scene[data-mode="imagery"] .hero-product-image,
html .hero-scene[data-mode="configurator"] .hero-config-frame,
html .hero-scene[data-mode="configurator"] .hero-config-canvas {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
inset: 0 !important;
transform: none !important;
aspect-ratio: auto !important;
}
html .hero .hero-scene[data-mode="3d"] .hero-ar-shell,
html .hero .hero-scene[data-mode="ar"] .hero-ar-shell,
html .hero.has-sky .hero-scene[data-mode="3d"] .hero-ar-shell,
html .hero.has-sky .hero-scene[data-mode="ar"] .hero-ar-shell {
left: 50% !important;
top: 50% !important;
width: auto !important;
height: 92% !important;
max-width: 90% !important;
max-height: none !important;
aspect-ratio: .72;
transform: translate(-50%, -50%);
}
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-video-frame,
html .hero-scene[data-mode="ugc"] .hero-video-frame {
border-radius: 18px;
}
html .hero-scene[data-mode="imagery"] .hero-product-image,
html .hero-scene[data-mode="imagery"] .hero-product-ghost {
border-radius: 18px !important;
object-fit: cover !important;
object-position: center !important;
background: none !important;
padding: 0 !important;
box-sizing: border-box !important;
}
html .hero-scene[data-mode="imagery"] .hero-still-stack picture {
display: contents;
}
html .hero-scene[data-mode="3d"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-play,
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="ugc"] .hero-video-frame {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
filter: none !important;
}
html .hero-scene[data-mode="3d"] .hero-ar-shell,
html .hero-scene[data-mode="3d"] .hero-model-frame,
html .hero-scene[data-mode="3d"] .hero-ar-device {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
html .hero-scene[data-mode="video"] .hero-still-stack,
html .hero-scene[data-mode="video"] .hero-product-image,
html .hero-scene[data-mode="video"] .hero-product-ghost,
html .hero-scene[data-mode="video"].is-ready:not(.is-idle) .hero-still-stack,
html .hero-scene[data-mode="video"].is-ready:not(.is-idle) .hero-product-image,
html .hero-scene[data-mode="video"].is-ready:not(.is-idle) .hero-product-ghost,
html .hero-scene[data-mode="video"].is-landed .hero-still-stack,
html .hero-scene[data-mode="video"].is-landed .hero-product-image,
html .hero-scene[data-mode="video"].is-landed .hero-product-ghost,
html .hero-scene[data-mode="ugc"] .hero-still-stack,
html .hero-scene[data-mode="ugc"] .hero-product-image,
html .hero-scene[data-mode="ugc"] .hero-product-ghost,
html .hero-scene[data-mode="ugc"].is-ready:not(.is-idle) .hero-still-stack,
html .hero-scene[data-mode="ugc"].is-ready:not(.is-idle) .hero-product-image,
html .hero-scene[data-mode="ugc"].is-ready:not(.is-idle) .hero-product-ghost,
html .hero-scene[data-mode="ugc"].is-landed .hero-still-stack,
html .hero-scene[data-mode="ugc"].is-landed .hero-product-image,
html .hero-scene[data-mode="ugc"].is-landed .hero-product-ghost {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html .hero-scene[data-mode="3d"] .hero-haze,
html .hero-scene[data-mode="ar"] .hero-haze,
html .hero-scene[data-mode="3d"] .hero-roulette-loader,
html .hero-scene[data-mode="ar"] .hero-roulette-loader,
html .hero-scene[data-mode="configurator"] .hero-roulette-loader {
display: none !important;
opacity: 0 !important;
}
html .hero-scene[data-mode="3d"] .hero-model-frame,
html .hero-scene[data-mode="3d"].is-model-ready .hero-model-frame,
html .hero-scene[data-mode="3d"] .hero-media-layer.hero-model-frame,
html .hero-scene[data-mode="ar"] .hero-model-frame,
html .hero-scene[data-mode="ar"].is-model-ready .hero-model-frame,
html .hero-scene[data-mode="ar"] .hero-media-layer.hero-model-frame {
-webkit-mask-image: none !important;
mask-image: none !important;
}
html .hero-scene[data-mode="3d"] .hero-model-frame,
html .hero-scene[data-mode="ar"] .hero-model-frame {
display: grid !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none;
}
html .hero-scene[data-mode="3d"] .hero-model-frame::after,
html .hero-scene[data-mode="ar"] .hero-model-frame::after {
content: none;
}
.hero-ar-shell {
position: absolute;
inset: 0;
overflow: visible;
pointer-events: none;
}
.hero-scene:not([data-mode="3d"]):not([data-mode="ar"]) .hero-ar-shell {
display: none;
}
.hero-scene[data-mode="3d"] .hero-ar-shell,
.hero-scene[data-mode="ar"] .hero-ar-shell {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
z-index: 5;
width: min(28vw, 340px);
aspect-ratio: .72;
transform: translate(-50%, -50%);
}
.hero-ar-device {
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
}
.hero-scene[data-mode="3d"] .hero-ar-device,
.hero-scene[data-mode="ar"] .hero-ar-device {
overflow: hidden;
isolation: isolate;
border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 28px;
box-shadow: inset 0 0 0 9px color-mix(in srgb, var(--surface) 70%, transparent), 0 18px 36px rgba(17, 19, 15, .08);
}
.hero-scene:not([data-mode="ar"]) .hero-ar-launch,
.hero-scene:not([data-mode="ar"]) .hero-ar-qr { display: none; }
.hero-scene:not([data-mode="3d"]):not([data-mode="ar"]) .hero-ar-spinner { display: none; }
.hero-scene:not([data-mode="3d"]):not([data-mode="ar"]) .hero-ar-device::before { display: none; }
.hero-scene[data-mode="3d"] .hero-ar-device::before,
.hero-scene[data-mode="ar"] .hero-ar-device::before {
position: absolute;
left: 50%;
top: 11px;
z-index: 2;
width: 18%;
height: 5px;
border-radius: 99px;
background: color-mix(in srgb, var(--ink) 34%, transparent);
transform: translateX(-50%);
content: "";
}
.hero-scene[data-mode="3d"] .hero-config-frame,
.hero-scene[data-mode="ar"] .hero-config-frame {
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.hero-scene[data-mode="3d"] .hero-ar-device .hero-config-canvas,
.hero-scene[data-mode="ar"] .hero-ar-device .hero-config-canvas {
position: absolute;
inset: 12px 9px 22px;
z-index: 1;
display: block;
width: auto;
height: auto;
opacity: 0;
background: transparent;
pointer-events: auto;
}
.hero-scene[data-mode="3d"].is-chair-ready .hero-ar-device .hero-config-canvas,
.hero-scene[data-mode="ar"].is-chair-ready .hero-ar-device .hero-config-canvas {
opacity: 1;
}
.hero-scene[data-mode="3d"] .hero-ar-device model-viewer,
.hero-scene[data-mode="ar"] .hero-ar-device model-viewer {
position: absolute !important;
left: 0;
top: 0;
width: 1px !important;
height: 1px !important;
overflow: hidden;
opacity: 0 !important;
pointer-events: none !important;
}
.hero-orbit-hint {
position: absolute;
left: 50%;
top: 48%;
z-index: 8;
display: none;
color: #fff;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(16, 22, 34, .35));
transform: translate(-50%, -50%);
opacity: 0;
}
.hero-orbit-hint.is-on {
display: block;
animation: hero-orbit-hint 2s ease forwards;
}
.hero-orbit-hint svg {
display: block;
width: 64px;
height: 36px;
}
.hero-orbit-hint path { fill: none; }
html[data-skin="nocturne"] .hero-orbit-hint {
color: #fff;
filter: drop-shadow(0 1px 3px rgba(8, 14, 28, .5));
}
@keyframes hero-orbit-hint {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
78% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
.hero-ar-launch {
position: absolute;
right: 14px;
bottom: 16px;
z-index: 6;
display: grid;
width: 36px;
height: 36px;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 50%;
background: color-mix(in srgb, var(--surface) 55%, transparent);
color: var(--ink);
cursor: pointer;
pointer-events: auto;
}
.hero-ar-launch svg {
width: 18px;
height: 18px;
}
.hero-scene[data-mode="3d"]:not(.is-chair-ready):not(.is-chair-failed) .hero-ar-spinner,
.hero-scene[data-mode="ar"]:not(.is-chair-ready):not(.is-chair-failed) .hero-ar-spinner {
display: grid;
}
.hero-ar-corners {
display: none;
pointer-events: none;
}
.hero-scene[data-mode="3d"] .hero-ar-corners,
.hero-scene[data-mode="ar"] .hero-ar-corners {
position: absolute;
z-index: 7;
display: block;
top: 12%;
bottom: 13%;
left: -18%;
right: -18%;
border: 1.5px solid #8cb4ff;
border-radius: 0;
clip-path: none;
box-sizing: border-box;
box-shadow: 0 0 6px rgba(140, 180, 255, .36), 0 0 14px rgba(140, 180, 255, .14);
}
html[data-skin="nocturne"] .hero-scene[data-mode="3d"] .hero-ar-corners,
html[data-skin="nocturne"] .hero-scene[data-mode="ar"] .hero-ar-corners {
border-color: #9ec4ff;
box-shadow: 0 0 7px rgba(158, 196, 255, .4), 0 0 16px rgba(158, 196, 255, .16);
}
.hero-scene[data-mode="3d"] model-viewer::part(default-progress-bar),
.hero-scene[data-mode="3d"] model-viewer::part(default-ar-button),
.hero-scene[data-mode="ar"] model-viewer::part(default-progress-bar),
.hero-scene[data-mode="ar"] model-viewer::part(default-ar-button) {
display: none;
}
.hero-ar-qr {
position: absolute;
right: 12px;
bottom: 58px;
z-index: 8;
display: none;
width: 168px;
padding: 10px 10px 8px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
box-shadow: 0 10px 24px rgba(17, 19, 15, .12);
color: var(--ink);
text-align: center;
pointer-events: auto;
}
.hero-scene[data-mode="ar"] .hero-ar-device:has(.hero-ar-qr.is-on) { overflow: visible; }
.hero-ar-qr.is-on { display: grid; gap: 6px; }
.hero-ar-qr p {
margin: 0;
font-size: .58rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.hero-ar-qr-canvas {
display: block;
width: 148px;
height: 148px;
margin: 0 auto;
border-radius: 8px;
}
.hero-ar-qr-url {
display: none !important;
}
.hero-ar-qr-close {
padding: 2px 0 0;
border: 0;
background: none;
color: var(--ink);
cursor: pointer;
font: inherit;
font-size: .58rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.hero-ar-spinner {
background: transparent;
}
.hero-config-spinner,
.hero-ar-spinner {
background: transparent;
box-shadow: none;
}
@media (min-width: 861px) {
.menu-button { display: none !important; }
html .hero.has-sky,
html .hero.has-sky-fallback {
height: 100svh;
min-height: 100svh;
max-height: 100svh;
padding-top: var(--header, 72px);
padding-bottom: 18px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
html .hero.has-sky .hero-grid,
html .hero.has-sky-fallback .hero-grid {
flex: 1 1 auto;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: 100%;
min-height: 0;
height: auto;
}
html .hero.has-sky .hero-copy,
html .hero.has-sky-fallback .hero-copy {
min-height: 0;
}
html .hero.has-sky h1 {
margin-bottom: 0;
}
html .hero.has-sky h1 span:last-child {
margin-left: .16em;
}
html .hero.has-sky .hero-intro {
margin-top: 0 !important;
}
html .hero.has-sky .hero-showcase-wrap,
html .hero.has-sky-fallback .hero-showcase-wrap {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
min-height: 0;
max-height: none;
height: 100%;
margin-top: 0;
}
html .hero.has-sky .hero-showcase,
html .hero.has-sky-fallback .hero-showcase {
min-height: 0;
height: 100%;
}
html .hero.has-sky .hero-actions,
html .hero.has-sky-fallback .hero-actions {
position: relative !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
gap: 4px !important;
}
html .hero.has-sky .hero-actions .hero-readout {
margin: 0 !important;
top: 0 !important;
}
html .hero.has-sky .hero-product-stage,
html .hero.has-sky-fallback .hero-product-stage {
top: 50%;
width: min(56vw, 94%, 840px);
height: 96%;
max-height: 96%;
aspect-ratio: auto;
}
html .hero.has-sky .hero-scene[data-mode="video"] .hero-product-stage,
html .hero.has-sky .hero-scene[data-mode="3d"] .hero-product-stage,
html .hero.has-sky .hero-scene[data-mode="imagery"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="video"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="3d"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="imagery"] .hero-product-stage {
width: min(45vw, 620px);
height: auto !important;
max-height: none !important;
aspect-ratio: 5 / 3;
overflow: hidden;
border-radius: 28px;
}
html .hero.has-sky .hero-scene[data-mode="video"] .hero-media-visual,
html .hero.has-sky .hero-scene[data-mode="3d"] .hero-media-visual,
html .hero.has-sky .hero-scene[data-mode="imagery"] .hero-media-visual,
html .hero.has-sky-fallback .hero-scene[data-mode="video"] .hero-media-visual,
html .hero.has-sky-fallback .hero-scene[data-mode="3d"] .hero-media-visual,
html .hero.has-sky-fallback .hero-scene[data-mode="imagery"] .hero-media-visual {
inset: 0 !important;
}
.hero-scene[data-mode="configurator"] {
--chair-stage-w: min(50vw, 70%, 720px);
--chair-ui-inset: clamp(46px, calc(2.4vw + 24px), 60px);
}
html .hero.has-sky .hero-scene[data-mode="configurator"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="configurator"] .hero-product-stage {
top: 50%;
width: var(--chair-stage-w);
height: 96%;
max-height: 96%;
aspect-ratio: auto;
overflow: hidden;
}
.hero-scene[data-mode="configurator"] .hero-media-visual,
.hero-scene[data-mode="configurator"] .hero-config-frame {
inset: 0;
overflow: hidden;
}
html .hero.has-sky .hero-scene[data-mode="3d"] .hero-product-stage,
html .hero.has-sky .hero-scene[data-mode="ar"] .hero-product-stage {
overflow: visible;
}
html .hero.has-sky .hero-scene[data-mode="3d"] .hero-ar-shell,
html .hero.has-sky .hero-scene[data-mode="ar"] .hero-ar-shell {
top: 50%;
width: auto;
height: min(88%, 640px);
max-width: min(28vw, 400px);
aspect-ratio: .72;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-config-canvas,
.hero-chair-ui { transition: none; }
.hero-load-bar::after,
.hero-config-bar::after { animation: none; width: calc(100% - 2px); opacity: .7; }
.hero-orbit-hint,
.hero-orbit-hint.is-on { display: none !important; animation: none; }
}
@media (max-width: 1100px) and (min-width: 861px) {
.hero-scene[data-mode="configurator"] { --chair-ui-inset: clamp(44px, calc(3.4vw + 24px), 60px); }
}
@media (max-width: 860px) {
.hero-scene[data-mode="configurator"] {
--chair-stage-w: var(--hero-plate-w, min(58vw, 250px));
--chair-ui-inset: 36px;
}
.hero-chair-ui {
position: absolute;
inset: 0;
z-index: 8;
display: none;
margin: 0;
padding: 0;
}
.hero-scene[data-mode="configurator"]:not(.is-roulette):not(.is-preparing):not(.is-media-locked).is-chair-ready .hero-chair-ui {
display: block;
}
.hero-chair-col,
.hero-chair-col--left,
.hero-chair-col--right {
position: absolute;
top: 50%;
gap: 10px;
}
.hero-chair-col--left,
.hero-chair-col--right {
transform: translate(-50%, -50%);
}
html .hero-scene .hero-utility {
position: absolute !important;
top: auto !important;
bottom: 12px !important;
right: 12px !important;
left: auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 14;
}
html .hero-scene .hero-input-toggle {
position: relative;
width: 28px;
height: 28px;
min-height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50% !important;
background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent) !important;
box-shadow: 0 10px 28px rgb(17 19 15 / .14) !important;
font-size: 0;
line-height: 0;
letter-spacing: 0;
overflow: hidden;
color: transparent;
}
html .hero-scene .hero-input-toggle::before {
content: "";
position: absolute;
inset: 8px 7px;
border: 1.5px solid currentColor;
border-radius: 2px;
color: var(--ink, #1b1f24);
opacity: .9;
}
html .hero-scene .hero-input-toggle::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 9.5px;
height: 5px;
border-radius: 1px;
background: currentColor;
color: var(--ink, #1b1f24);
opacity: .9;
clip-path: polygon(0 100%, 34% 32%, 56% 100%, 72% 58%, 100% 100%);
}
html .hero-scene .hero-input-toggle[aria-pressed="true"]::before,
html .hero-scene .hero-input-toggle[aria-pressed="true"]::after {
opacity: 1;
}
html .hero-scene .hero-utility {
align-items: center;
}
.hero-scene[data-mode="configurator"] .hero-chair-bases {
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.hero-scene[data-mode="configurator"] .hero-chair-pills { gap: 6px; }
.hero-scene[data-mode="configurator"] .hero-chair-base { width: 28px; height: 28px; }
.hero-scene[data-mode="configurator"] .hero-chair-pill { min-height: 26px; padding: 0 7px; }
.hero-chair-col--left {
left: calc(50% - (var(--chair-stage-w) / 2) + var(--chair-ui-inset));
transform: translate(-50%, -50%);
}
.hero-chair-col--right {
left: calc(50% + (var(--chair-stage-w) / 2) - var(--chair-ui-inset));
transform: translate(-50%, -50%);
}
.hero-chair-group--lower { margin-top: 14px; }
.hero-chair-pills { flex-direction: column; gap: 6px; }
.hero-chair-tip { display: none; }
.hero-chair-swatch { width: 24px; height: 24px; }
.hero-chair-pill { min-height: 28px; padding: 0 7px; font-size: .44rem; letter-spacing: .06em; }
.hero-chair-base { width: 32px; height: 32px; }
}
@media (max-width: 560px) {
.hero-chair-label { font-size: .48rem; }
.hero-chair-pills { gap: 6px; }
.hero-chair-pill { padding: 0 9px; }
}
html .hero-scene[data-mode="3d"] .hero-ar-shell,
html .hero-scene[data-mode="3d"] .hero-model-frame,
html .hero-scene[data-mode="3d"] .hero-ar-device,
html .hero-scene[data-mode="3d"] .hero-ar-spinner,
html .hero.has-sky .hero-scene[data-mode="3d"] .hero-ar-shell {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
@keyframes hero-load-fill {
0% { width: 0; }
72% { width: calc(100% - 2px); }
100% { width: calc(100% - 2px); }
}
@keyframes hero-load-shimmer {
0% { transform: translateX(-130%); }
100% { transform: translateX(360%); }
}
@keyframes hero-chair-bar {
0% { transform: translateX(-130%); }
100% { transform: translateX(360%); }
}
@media (max-width: 860px) and (max-height: 700px) {
html .hero .hero-scene {
--hero-plate-h: min(36svh, 260px);
}
.hero-scene[data-mode="configurator"] .hero-chair-col,
.hero-scene[data-mode="configurator"] .hero-chair-col--left,
.hero-scene[data-mode="configurator"] .hero-chair-col--right {
gap: 6px;
}
.hero-scene[data-mode="configurator"] .hero-chair-group--lower { margin-top: 8px; }
.hero-scene[data-mode="configurator"] .hero-chair-swatches { gap: 6px; }
.hero-scene[data-mode="configurator"] .hero-chair-bases { gap: 6px; }
.hero-scene[data-mode="configurator"] .hero-chair-swatch { width: 20px; height: 20px; }
.hero-scene[data-mode="configurator"] .hero-chair-base { width: 26px; height: 26px; }
}
html .hero-scene.is-source-visible .hero-product-stage,
html .hero-scene.is-source-visible .hero-play,
html .hero-scene.is-source-visible .hero-swatch-rail,
html .hero-scene.is-source-visible .hero-viewfinder,
html .hero-scene.is-source-visible .hero-haze {
opacity: 0 !important;
pointer-events: none !important;
}
html .hero-scene[data-mode="configurator"].is-source-visible .hero-chair-ui,
html .hero-scene[data-mode="configurator"].is-source-visible.is-chair-ready .hero-chair-ui {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html .hero-scene.is-source-visible .hero-services,
html .hero-scene.is-source-visible .hero-services .hero-mode,
html .hero-scene.is-source-visible .hero-services .hero-group {
pointer-events: none !important;
}
html .hero-scene[data-mode="video"] .hero-play,
html .hero-scene[data-mode="ugc"] .hero-play,
html .hero-scene[data-mode="3d"] .hero-play {
left: 14px !important;
right: auto !important;
top: auto !important;
bottom: 14px !important;
width: 30px !important;
opacity: .42;
border-color: color-mix(in srgb, var(--paper) 30%, transparent);
background: color-mix(in srgb, rgb(12 14 18) 34%, transparent);
box-shadow: none;
transform: none !important;
transition: opacity 180ms ease;
}
html .hero-scene[data-mode="video"] .hero-play::after,
html .hero-scene[data-mode="ugc"] .hero-play::after,
html .hero-scene[data-mode="3d"] .hero-play::after {
border-left-color: var(--paper);
border-top-width: 5px;
border-bottom-width: 5px;
border-left-width: 8px;
margin-left: 2px;
}
html .hero-scene[data-mode="video"] .hero-play[aria-pressed="true"]::after,
html .hero-scene[data-mode="ugc"] .hero-play[aria-pressed="true"]::after,
html .hero-scene[data-mode="3d"] .hero-play[aria-pressed="true"]::after {
width: 8px;
height: 10px;
margin: 0;
background: linear-gradient(90deg, var(--paper) 0 34%, transparent 34% 66%, var(--paper) 66% 100%);
}
html .hero-scene[data-mode="video"] .hero-play:hover,
html .hero-scene[data-mode="ugc"] .hero-play:hover,
html .hero-scene[data-mode="3d"] .hero-play:hover,
html .hero-scene[data-mode="video"] .hero-play:focus-visible,
html .hero-scene[data-mode="ugc"] .hero-play:focus-visible,
html .hero-scene[data-mode="3d"] .hero-play:focus-visible {
opacity: 1;
}
@media (max-width: 860px) {
html .hero-scene[data-mode="video"] .hero-play,
html .hero-scene[data-mode="ugc"] .hero-play,
html .hero-scene[data-mode="3d"] .hero-play {
left: 12px !important;
bottom: 12px !important;
width: 26px !important;
}
}
.hero-chair-base[data-chair-base="silver"] {
border-color: color-mix(in srgb, var(--ink) 24%, transparent);
background: linear-gradient(150deg, #fbfbfc 6%, #d9dde2 48%, #a9afb8 100%);
color: #545b66;
}
.hero-chair-base[data-chair-base="black"] {
border-color: color-mix(in srgb, var(--ink) 34%, transparent);
background: linear-gradient(150deg, #4a4f57 6%, #23262b 48%, #0d0f12 100%);
color: #e7eaee;
}
html .hero-chair-base[data-chair-base="silver"][aria-pressed="true"],
html .hero-chair-base[data-chair-base="black"][aria-pressed="true"] {
border-color: var(--hero-accent, var(--ink));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--hero-accent, var(--ink)) 60%, transparent);
}
html .hero-chair-base[data-chair-base="silver"][aria-pressed="true"] {
background: linear-gradient(150deg, #fbfbfc 6%, #d9dde2 48%, #a9afb8 100%);
color: #545b66;
}
html .hero-chair-base[data-chair-base="black"][aria-pressed="true"] {
background: linear-gradient(150deg, #4a4f57 6%, #23262b 48%, #0d0f12 100%);
color: #e7eaee;
}
@media (min-width: 861px) {
html .hero-scene[data-mode="video"] .hero-video-frame,
html .hero-scene[data-mode="3d"] .hero-video-frame,
html .hero-scene[data-mode="ugc"] .hero-video-frame,
html .hero-scene[data-mode="video"] .hero-video-frame video,
html .hero-scene[data-mode="3d"] .hero-video-frame video,
html .hero-scene[data-mode="ugc"] .hero-video-frame video,
html .hero-scene[data-mode="imagery"] .hero-product-image,
html .hero-scene[data-mode="imagery"] .hero-product-ghost {
border-radius: 28px !important;
}
html .hero.has-sky .hero-scene[data-mode="ugc"] .hero-product-stage,
html .hero.has-sky-fallback .hero-scene[data-mode="ugc"] .hero-product-stage {
border-radius: 28px;
}
}
@media (max-width: 860px) {
html .hero-scene[data-mode="3d"] .hero-ar-corners,
html .hero-scene[data-mode="ar"] .hero-ar-corners {
left: 10px;
right: 10px;
top: 14%;
bottom: 15%;
}
}
html .hero-scene.is-media-loading .hero-roulette-loader {
display: grid !important;
opacity: .88 !important;
transform: translate(-50%, -50%) scale(1) !important;
}
html .hero-video-frame video {
grid-area: 1 / 1;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
html .hero-video-frame video.is-active {
opacity: 1;
pointer-events: auto;
}
html .hero-scene.is-media-loading .hero-video-frame video,
html .hero-scene.is-media-sizing .hero-video-frame video,
html .hero-scene.is-media-loading .hero-video-frame video.is-active,
html .hero-scene.is-media-sizing .hero-video-frame video.is-active {
opacity: 0;
}
@media (max-width: 860px) {
html .hero .hero-scene.is-revealing .hero-media-visual,
html .hero .hero-scene.is-resolving .hero-media-visual,
html .hero .hero-scene.is-switching .hero-media-visual,
html .hero .hero-scene.is-preparing .hero-media-visual,
html .hero .hero-scene.is-roulette .hero-media-visual {
animation: none !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
html .hero .hero-scene.is-revealing .hero-product-stage,
html .hero .hero-scene.is-resolving .hero-product-stage,
html .hero .hero-scene.is-switching .hero-product-stage,
html .hero .hero-scene.is-preparing .hero-product-stage,
html .hero .hero-scene.is-roulette .hero-product-stage {
opacity: 1 !important;
filter: none !important;
}
html .hero .hero-scene .hero-media-visual {
transition: opacity 180ms ease !important;
}
html .hero .hero-scene .hero-media-layer {
transition: opacity 180ms ease !important;
}
}
@media (max-width: 860px) {
html .hero .hero-scene .hero-utility {
z-index: 15 !important;
display: flex;
justify-content: flex-end;
margin: 0;
transform: none !important;
pointer-events: none;
}
html .hero .hero-scene .hero-utility > * { pointer-events: auto; }
html .hero .hero-scene .hero-services { order: 1; }
html .hero .hero-scene .hero-utility .hero-input-toggle {
min-height: 20px;
padding: 0 9px;
font-size: 6px;
letter-spacing: .05em;
border-radius: 10px;
transform: none !important;
}
}
@media (max-width: 860px) {
html .hero .hero-scene .hero-video-frame video,
html .hero .hero-scene .hero-still-stack .hero-product-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-height: 0 !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: center !important;
transition: opacity 180ms ease !important;
}
html .hero .container.hero-grid .hero-copy {
margin-top: -8px;
}
}
@media (min-width: 1600px) {
html .hero .hero-scene {
--hero-desk-plate-w: min(48vw, 900px, calc((100svh - 430px) * 5 / 3));
}
html .hero .hero-scene .hero-product-stage {
width: var(--hero-desk-plate-w) !important;
}
html .hero .hero-scene[data-mode="configurator"] {
--chair-stage-w: var(--hero-desk-plate-w);
}
}
@media (max-width: 860px) {
html .hero .hero-scene {
--hero-plate-h: min(calc(var(--hero-plate-svh, 100svh) - 336px), 448px);
}
html .hero .hero-readout,
html .hero .hero-mode-note,
html .hero.has-sky .hero-actions .hero-readout,
html .hero.has-sky-fallback .hero-actions .hero-readout {
font-size: 15px !important;
line-height: 1.35 !important;
margin-block: 9px !important;
}
html .hero .hero-services .hero-mode {
min-height: 34px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
html .hero .hero-actions .button {
min-height: 50px !important;
padding-top: 13px !important;
padding-bottom: 13px !important;
}
}
@media (max-width: 860px) {
html .hero .hero-product-stage .hero-media-visual,
html .hero .hero-product-stage .hero-media-layer,
html .hero .hero-product-stage .hero-still-stack,
html .hero .hero-product-stage .hero-video-frame,
html .hero .hero-product-stage .hero-product-image,
html .hero .hero-product-stage .hero-model-frame,
html .hero .hero-product-stage img,
html .hero .hero-product-stage video {
animation: none !important;
transform: none !important;
scale: none !important;
transition: opacity 220ms ease !important;
}
html .hero .hero-scene .hero-product-stage {
animation: none !important;
transition: opacity 220ms ease !important;
}
}
@keyframes hero-media-resolve {
0% { opacity: 0; filter: none; transform: none; }
100% { opacity: 1; filter: none; transform: none; }
}
html .hero .hero-scene.is-revealing .hero-product-stage,
html .hero .hero-scene.is-resolving .hero-product-stage,
html .hero .hero-scene.is-switching .hero-product-stage,
html .hero .hero-scene.is-preparing .hero-product-stage,
html .hero .hero-scene.is-roulette .hero-product-stage,
html .hero .hero-scene.is-revealing .hero-media-visual,
html .hero .hero-scene.is-resolving .hero-media-visual,
html .hero .hero-scene.is-switching .hero-media-visual,
html .hero .hero-scene.is-preparing .hero-media-visual,
html .hero .hero-scene.is-roulette .hero-media-visual,
html .hero .hero-scene.is-revealing .hero-media-layer,
html .hero .hero-scene.is-resolving .hero-media-layer,
html .hero .hero-scene.is-switching .hero-media-layer,
html .hero .hero-scene.is-preparing .hero-media-layer,
html .hero .hero-scene.is-roulette .hero-media-layer {
filter: none !important;
-webkit-filter: none !important;
}
html .hero .hero-scene.is-revealing .hero-media-visual,
html .hero .hero-scene.is-resolving .hero-media-visual,
html .hero .hero-scene.is-switching .hero-media-visual,
html .hero .hero-scene.is-preparing .hero-media-visual,
html .hero .hero-scene.is-roulette .hero-media-visual {
transform: none !important;
}
:root {
--cta-fill: #0b1734;
--cta-sheen: #133cb8;
--cta-ink: #f4f1ea;
--cta-glow: rgb(11 23 52 / .34);
}
html[data-skin="nocturne"] {
--cta-fill: #2961db;
--cta-sheen: #4087f7;
--cta-ink: #f2f6ff;
--cta-glow: rgb(41 97 219 / .45);
}
html .button--dark,
html .footer-cta-button,
html #footer .footer-cta-button,
html .site-header .site-nav .nav-contact,
html .nav-contact,
html .pack .button,
html #packs .pack-rail-card-cta,
html #packs .pack-rail-card .pack-rail-card-cta.button--dark {
border: 1px solid var(--cta-fill);
background-color: var(--cta-fill);
background-image: linear-gradient(152deg,
color-mix(in srgb, var(--cta-sheen) 42%, var(--cta-fill)) 0%,
var(--cta-fill) 62%);
color: var(--cta-ink);
box-shadow: none;
filter: none;
transition: box-shadow 220ms ease, transform 220ms ease, background-color 220ms ease;
}
html .button--dark .button-copy,
html .footer-cta-button .button-copy,
html #footer .footer-cta-button .button-copy,
html .nav-contact .button-copy,
html #packs .pack-rail-card-cta .button-copy {
color: var(--cta-ink);
-webkit-text-fill-color: var(--cta-ink);
}
html .button--dark:hover,
html .button--dark:focus-visible,
html .footer-cta-button:hover,
html .footer-cta-button:focus-visible,
html #footer .footer-cta-button:hover,
html #footer .footer-cta-button:focus-visible,
html .site-header .site-nav .nav-contact:hover,
html .site-header .site-nav .nav-contact:focus-visible,
html .nav-contact:hover,
html .nav-contact:focus-visible,
html .pack .button:hover,
html .pack .button:focus-visible,
html #packs .pack-rail-card-cta:hover,
html #packs .pack-rail-card-cta:focus-visible,
html #packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
html #packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
border-color: var(--cta-sheen);
background-color: var(--cta-sheen);
background-image: linear-gradient(152deg,
color-mix(in srgb, #ffffff 16%, var(--cta-sheen)) 0%,
var(--cta-sheen) 64%);
color: var(--cta-ink);
box-shadow: 0 0 0 1px var(--cta-glow), 0 8px 22px var(--cta-glow);
filter: none;
}
html .footer-cta-button:hover .button-copy,
html .footer-cta-button:focus-visible .button-copy,
html #footer .footer-cta-button:hover .button-copy,
html #footer .footer-cta-button:focus-visible .button-copy,
html .nav-contact:hover .button-copy,
html .nav-contact:focus-visible .button-copy,
html #packs .pack-rail-card-cta:hover .button-copy,
html #packs .pack-rail-card-cta:focus-visible .button-copy {
color: var(--cta-ink);
-webkit-text-fill-color: var(--cta-ink);
}
html .hero .hero-actions .button[data-liquid-button]:hover,
html .hero .hero-actions .button[data-liquid-button]:focus-visible {
box-shadow: none;
}
.button-copy span[aria-hidden="true"],
.case-study-link span[aria-hidden="true"] {
font-variant-emoji: text;
}
@media (max-width: 720px) {
#footer .footer-cta-button {
min-height: 42px;
padding: 11px 18px;
font-size: .8rem;
}
#footer .footer-cta-button .button-copy { gap: 6px; }
}
html[data-skin="nocturne"] .button--dark,
html[data-skin="nocturne"] .footer-cta-button,
html[data-skin="nocturne"] #footer .footer-cta-button,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact,
html[data-skin="nocturne"] .pack .button,
html[data-skin="nocturne"] #packs .pack-rail-card-cta,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark {
border: 1px solid var(--cta-fill) !important;
background-color: var(--cta-fill) !important;
background-image: linear-gradient(152deg,
color-mix(in srgb, var(--cta-sheen) 42%, var(--cta-fill)) 0%,
var(--cta-fill) 62%) !important;
color: var(--cta-ink) !important;
-webkit-text-fill-color: var(--cta-ink);
box-shadow: none !important;
filter: none !important;
}
html[data-skin="nocturne"] .button--dark:hover,
html[data-skin="nocturne"] .button--dark:focus-visible,
html[data-skin="nocturne"] .footer-cta-button:hover,
html[data-skin="nocturne"] .footer-cta-button:focus-visible,
html[data-skin="nocturne"] #footer .footer-cta-button:hover,
html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:hover,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:focus-visible,
html[data-skin="nocturne"] .pack .button:hover,
html[data-skin="nocturne"] .pack .button:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card-cta:hover,
html[data-skin="nocturne"] #packs .pack-rail-card-cta:focus-visible {
border-color: var(--cta-sheen) !important;
background-color: var(--cta-sheen) !important;
background-image: linear-gradient(152deg,
color-mix(in srgb, #ffffff 16%, var(--cta-sheen)) 0%,
var(--cta-sheen) 64%) !important;
box-shadow: 0 0 0 1px var(--cta-glow), 0 8px 22px var(--cta-glow) !important;
}
html[data-skin="nocturne"] .button--dark .button-copy,
html[data-skin="nocturne"] .footer-cta-button .button-copy,
html[data-skin="nocturne"] #footer .footer-cta-button .button-copy,
html[data-skin="nocturne"] .nav-contact .button-copy,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta .button-copy {
color: var(--cta-ink) !important;
-webkit-text-fill-color: var(--cta-ink) !important;
}
html[data-skin="nocturne"] .button--dark:hover,
html[data-skin="nocturne"] .button--dark:focus-visible,
html[data-skin="nocturne"] .footer-cta-button:hover,
html[data-skin="nocturne"] .footer-cta-button:focus-visible,
html[data-skin="nocturne"] #footer .footer-cta-button:hover,
html[data-skin="nocturne"] #footer .footer-cta-button:focus-visible,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:hover,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta:hover,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
border-color: var(--cta-sheen) !important;
background-color: var(--cta-sheen) !important;
background-image: linear-gradient(152deg,
color-mix(in srgb, #ffffff 16%, var(--cta-sheen)) 0%,
var(--cta-sheen) 64%) !important;
color: var(--cta-ink) !important;
box-shadow: 0 0 0 1px var(--cta-glow), 0 8px 22px var(--cta-glow) !important;
filter: none !important;
}
html[data-skin="nocturne"] [data-liquid-button].has-liquid,
html[data-skin="nocturne"] [data-liquid-button].has-liquid:hover,
html[data-skin="nocturne"] [data-liquid-button].has-liquid:focus-visible {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.client-flag {
position: relative;
display: inline-block;
width: 22px;
height: 15px;
flex: 0 0 auto;
border-radius: 2px;
vertical-align: -2px;
filter: drop-shadow(0 1px 1px rgb(8 14 26 / .5));
transform-origin: 0% 50%;
}
.client-flag svg {
display: block;
width: 100%;
height: 100%;
filter: url(#flag-wave);
}
.client-flag::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
100deg,
rgb(255 255 255 / 0) 0%,
rgb(255 255 255 / .58) 13%,
rgb(6 12 24 / .42) 29%,
rgb(255 255 255 / 0) 45%,
rgb(255 255 255 / .5) 61%,
rgb(6 12 24 / .44) 77%,
rgb(255 255 255 / 0) 100%
);
background-size: 220% 100%;
background-position: 0% 0;
pointer-events: none;
}
@keyframes client-flag-wave {
0%    { transform: skewY(0deg)    scaleY(1)    translateY(0); }
12.5% { transform: skewY(-3.2deg) scaleY(.958) translateY(-.35px); }
25%   { transform: skewY(-4.5deg) scaleY(.94)  translateY(-.5px); }
37.5% { transform: skewY(-3.2deg) scaleY(.958) translateY(-.35px); }
50%   { transform: skewY(0deg)    scaleY(1)    translateY(0); }
62.5% { transform: skewY(3.2deg)  scaleY(.958) translateY(.35px); }
75%   { transform: skewY(4.5deg)  scaleY(.94)  translateY(.5px); }
87.5% { transform: skewY(3.2deg)  scaleY(.958) translateY(.35px); }
100%  { transform: skewY(0deg)    scaleY(1)    translateY(0); }
}
@keyframes client-flag-folds {
from { background-position: 0% 0; }
to   { background-position: -120% 0; }
}
.sc-review.is-active .client-flag {
animation: client-flag-wave 3.2s linear infinite;
}
.sc-review.is-active .client-flag::after {
animation: client-flag-folds 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.sc-review.is-active .client-flag,
.sc-review.is-active .client-flag::after { animation: none; }
.client-flag svg { filter: none; }
}
#studio-console .sc-author strong {
display: flex;
align-items: center;
gap: 7px;
}
#studio-console .sc-avatar--monogram {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex: 0 0 auto;
border: 1px solid rgb(164 184 207 / .4);
border-radius: 50%;
background: linear-gradient(150deg, rgb(120 150 196 / .38), rgb(30 46 72 / .55));
color: #e8eff8;
font-family: var(--body, "DM Sans", sans-serif);
font-size: .92rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
text-transform: uppercase;
}
@media (max-width: 860px) {
.client-flag { width: 20px; height: 14px; }
}
@media (max-width: 860px) {
#studio-console .sc-panel--testimonials .sc-quote,
#studio-console .sc-quote {
max-width: none;
font-size: 0.95rem;
line-height: 1.32;
}
#studio-console .sc-visual,
#studio-console .sc-visual img {
display: none !important;
}
}