:root {
color-scheme: light;
--paper: #F2EFE9;
--surface: #ececee;
--ink: #101014;
--muted: #3d3d47;
--accent: #3468ac;
--accent-2: #244b7a;
--accent-ink: #F2EFE9;
--action: #101014;
--action-hover: #213e79;
--cta-hover: #3357d7;
--action-ink: #F2EFE9;
--lime: var(--accent);
--hero-accent: var(--accent);
--dark: #020617;
--dark-2: #0b1734;
--dark-ink: #F7F8FA;
--proof-bg: #e0e0e2;
--proof-surface: #ececee;
--proof-ink: #101014;
--line: rgba(2, 6, 23, 0.10);
--dark-line: rgba(247, 248, 250, 0.14);
--shadow: 0 28px 70px rgba(11, 23, 52, 0.13);
--grid-size: 52px;
--corner: 20px;
--depth-x: 20px;
--depth-y: 24px;
--heading-track: -0.045em;
--type-micro: 11px;
--type-caption: 12px;
--type-meta: 13px;
--type-callout: 15px;
--type-body: 17px;
--type-lede: 20px;
--type-card: 22px;
--type-sub: 28px;
--type-quote: 34px;
--type-studio: 40px;
--type-h2: clamp(40px, 3.8vw, 56px);
--type-h1: clamp(48px, 4.4vw, 64px);
--hero-title-size: var(--type-h1);
--section-display-size: var(--type-h2);
--section-display-size-contained: clamp(34px, 3.2vw, 48px);
--body-leading: 1.85;
--section-space: clamp(72px, 7.5vw, 108px);
--hero-title-weight: 400;
--heading-weight: 400;
--ui-radius: 999px;
--motion-distance: 16;
--motion-tilt: 2.2;
--motion-duration: 360ms;
--motion-ease: cubic-bezier(.16, 1, .3, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--display: "Canela Deck", "Instrument Serif", Georgia, serif;
--body: "DM Sans", sans-serif;
--mono: "IBM Plex Mono", monospace;
--max: 1340px;
--gutter: clamp(24px, 3.6vw, 56px);
--header: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
html { scroll-padding-top: calc(var(--header) + 18px); overflow-x: clip; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: var(--type-body);
line-height: var(--body-leading);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#grain {
position: fixed;
inset: 0;
z-index: 99;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
opacity: 0.6;
mix-blend-mode: overlay;
}
#vignette {
position: fixed;
inset: 0;
z-index: 98;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 9, 20, 0.25) 100%);
}
html[data-skin="kage"] #vignette {
background: radial-gradient(120% 90% at 50% 40%, transparent 70%, rgba(120, 105, 85, 0.04) 100%);
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.hero-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent);
animation: dot-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes dot-pulse {
0% { transform: scale(0.85); opacity: 0.7; }
100% { transform: scale(1.2); opacity: 1; }
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, a { touch-action: manipulation; }
button, summary { cursor: pointer; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--heading-weight, 400); letter-spacing: var(--heading-track); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; box-shadow: 0 0 0 6px var(--ink); }
main:focus { box-shadow: none; }
main:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; box-shadow: 0 0 0 6px var(--ink); }
::selection { background: var(--lime); color: var(--ink); }
.skip-link {
position: fixed;
z-index: 200;
top: 10px;
left: 10px;
padding: 10px 14px;
background: var(--lime);
color: var(--ink);
font-weight: 700;
transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { width: min(100%, calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-space); }
.section--compact { padding-block: clamp(50px, 6vw, 84px); }
.section--dark { background: var(--dark); color: var(--dark-ink); }
.section--dark .muted { color: color-mix(in srgb, var(--dark-ink) 68%, transparent); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-family: var(--mono);
font-size: var(--type-micro);
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.4;
text-transform: uppercase;
}
.eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); content: ""; flex: none; }
.section--dark .eyebrow { color: color-mix(in srgb, var(--dark-ink) 65%, transparent); }
.packs-head,
.section-heading {
display: block;
padding-top: 24px;
margin-bottom: clamp(24px, 4vw, 48px);
border-top: 1px solid var(--line);
}
.section--dark .packs-head,
.section--dark .section-heading { border-color: var(--dark-line); }
.packs-head h2,
.section-heading h2 {
max-width: 32ch;
margin-top: 16px;
font-size: var(--section-display-size);
line-height: 1.04;
letter-spacing: -0.04em;
}
.packs-head p,
.section-heading p {
max-width: 58ch;
margin-top: 16px;
color: var(--muted);
font-size: var(--type-body);
line-height: 1.85;
}
.muted { color: var(--muted); }
.site-header {
position: sticky;
z-index: 100;
top: 0;
height: var(--header);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
background: color-mix(in srgb, var(--paper) 86%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: border-color 240ms ease, background-color 240ms ease;
}
.header-inner { display: flex; height: 100%; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body), "DM Sans", system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.brand-mark {
position: relative;
display: inline-block;
width: 26px;
height: 26px;
background: url("assets/brand/logo.png") center / contain no-repeat !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
flex-shrink: 0;
}
.brand-mark::before,
.brand-mark::after { display: none !important; content: none !important; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 24px); margin-left: auto; }
.site-nav .nav-link {
position: relative;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
display: block;
height: 20px;
line-height: 20px;
overflow: hidden;
transition: color 240ms ease;
}
.site-nav .nav-link span {
display: block;
height: 20px;
line-height: 20px;
transition: transform 0.5s var(--ease-out), color 0.3s;
}
.site-nav .nav-link .alt {
position: absolute;
inset: 0;
transform: translate3d(0, 100%, 0);
color: var(--accent);
letter-spacing: 0.2em;
font-weight: 700;
}
.site-nav .nav-link:hover span { transform: translate3d(0, -100%, 0); }
.site-nav .nav-link:hover .alt { transform: none; }
.site-nav .nav-contact {
margin-left: 12px;
padding: 9px 20px;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
transition: transform 200ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.site-nav .nav-contact:hover,
.site-nav .nav-contact:focus-visible {
transform: translateY(-2px);
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
box-shadow: none;
filter: none;
color: var(--action-ink);
}
.shader-surface { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: radial-gradient(circle at 18% 35%, color-mix(in srgb, var(--hero-accent) 28%, transparent), transparent 38%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--paper) 16%, transparent), transparent 42%); pointer-events: none; }
.button[data-shader-button] .shader-surface { z-index: 1; opacity: .18; transform: scale(1.08); transition: opacity 260ms ease, transform 600ms cubic-bezier(.16,1,.3,1); }
.button[data-shader-button]:hover .shader-surface,
.button[data-shader-button]:focus-visible .shader-surface { opacity: .38; transform: scale(1.18); }
.button[data-shader-button]:active .shader-surface { opacity: .56; transform: scale(1.28); }
.button[data-liquid-button],
.button {
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--action);
background: var(--action);
color: var(--action-ink);
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms ease, box-shadow 220ms ease;
}
.button:hover,
.button:focus-visible {
transform: translateY(-2px);
background: var(--action-hover);
box-shadow: 0 12px 32px -4px color-mix(in srgb, var(--accent) 35%, transparent);
}
.button .button-copy { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.button[data-liquid-button] {
border: 0;
background: var(--action);
box-shadow: 0 10px 24px -4px color-mix(in srgb, var(--ink) 20%, transparent);
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}
.button[data-liquid-button].has-liquid {
background: transparent !important;
border: 0 !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
.button[data-liquid-button]:hover,
.button[data-liquid-button]:focus-visible {
box-shadow: 0 14px 34px -4px rgba(61, 132, 255, 0.48);
}
.button[data-liquid-button] .button-copy {
color: #faf7f2;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
html[data-skin="nocturne"] .button[data-liquid-button] {
box-shadow: 0 10px 28px -4px rgba(71, 138, 255, 0.35);
}
html[data-skin="nocturne"] .button[data-liquid-button]:hover,
html[data-skin="nocturne"] .button[data-liquid-button]:focus-visible {
box-shadow: 0 14px 36px -4px rgba(148, 199, 255, 0.6);
}
html[data-skin="nocturne"] .button[data-liquid-button] .button-copy {
color: #061026;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.25);
}
html.is-train-scrolling {
scroll-behavior: auto !important;
}
body.is-train-transition {
pointer-events: none;
}
body.is-train-transition main {
transition: filter 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
filter: contrast(1.05) saturate(1.05);
}
.scroll-fade-edge {
position: fixed;
z-index: 95;
top: var(--header);
left: 0;
right: 0;
height: 54px;
pointer-events: none;
background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 68%, transparent) 40%, color-mix(in srgb, var(--paper) 15%, transparent) 78%, transparent 100%);
}
.hero-grid,
.credibility-layout,
.client-proof-layout,
#work > .container,
.outcome-shell,
#studio > .container,
#packs > .container,
#process > .container,
#partnership > .container,
#faq > .container,
#faq .studio-panel-container,
.site-footer > .container { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
.button[data-shader-button] .shader-surface,
.button[data-shader-button]::before,
.button[data-liquid-button] .liquid-surface,
.section-shader { animation: none; transition: none; }
}
.hero { position: relative; min-height: auto; isolation: isolate; overflow: hidden; padding-top: clamp(8px, 1.2vw, 16px); padding-bottom: clamp(24px, 3vw, 42px); }
.hero::after { position: absolute; z-index: -1; left: 50%; top: 61%; width: min(82vw, 1080px); aspect-ratio: 1.7; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 16%, transparent), transparent 68%); filter: blur(18px); transform: translate(-50%, -50%); content: ""; pointer-events: none; }
.hero-grid { position: relative; min-height: calc(100svh - var(--header) - clamp(8px, 1.2vw, 16px) - clamp(24px, 3vw, 42px)); display: grid; grid-template-rows: auto minmax(500px, 1fr); }
.hero-copy { position: relative; z-index: 6; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-family: var(--mono); font-size: var(--type-micro); letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.hero-kicker i { width: 6px; height: 6px; background: var(--lime); }
.hero h1 { max-width: 24ch; margin-inline: auto; font-size: var(--hero-title-size); font-weight: var(--hero-title-weight); letter-spacing: -.065em; line-height: .88; text-wrap: balance; }
.hero h1 span { display: inline; color: var(--ink); }
.hero h1 span:last-child { margin-left: .08em; color: transparent; -webkit-text-stroke: 1.65px var(--ink); }
.hero-intro { max-width: 70ch; margin: 16px auto 0; font-size: var(--type-body); line-height: 1.85; }
.hero .hero-actions { position: absolute; z-index: 8; left: 50%; bottom: 0; display: flex; justify-content: center; transform: translateX(-50%); }
.hero-showcase-wrap { min-width: 0; min-height: clamp(500px, min(46vw, calc(100svh - var(--header) - 255px)), 640px); margin-top: 4px; perspective: 1600px; }
.hero-showcase { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; }
.hero-scene { --hero-x-main: 0px; --hero-y-main: 0px; --hero-rx: 0deg; --hero-ry: 0deg; position: absolute; inset: 0; }
.hero-haze { position: absolute; z-index: 0; left: 50%; top: 48%; width: min(76vw, 960px); aspect-ratio: 1.9; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 78%, transparent) 0 20%, color-mix(in srgb, var(--lime) 16%, transparent) 42%, transparent 72%); filter: blur(9px); transform: translate(-50%, -50%); pointer-events: none; }
.hero-orbit { display: none !important; }
.hero-orbit::before, .hero-orbit::after { position: absolute; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 50%; content: ""; }
.hero-orbit::before { inset: 10%; }
.hero-orbit::after { inset: 24%; border-color: color-mix(in srgb, var(--lime) 62%, transparent); }
.hero-product-stage { appearance: none; position: absolute; z-index: 3; left: 50%; top: 49%; width: min(65vw, 860px); aspect-ratio: 1.5; padding: 0; opacity: 1; border: 0; background: transparent; color: inherit; cursor: pointer; filter: none; transform: translate(-50%, -50%); transform-style: preserve-3d; transition: opacity 540ms ease, filter 540ms ease; }
.hero-product-stage:disabled { cursor: wait; }
.hero-product-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.hero-product-image, .hero-product-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-product-image { z-index: 2; filter: drop-shadow(0 18px 16px rgba(120,105,85,.10)) drop-shadow(0 6px 6px rgba(120,105,85,.05)); transform: rotate(-2deg) scale(1); transition: filter var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease); }
.hero-product-ghost { z-index: 1; opacity: 0; filter: grayscale(1) blur(1px); transform: translate3d(0, 0, -30px) scale(.9); transition: opacity var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease); }
.hero-product-ghost--two { transform: translate3d(0, 0, -60px) scale(.82); }
.hero-play { position: absolute; z-index: 4; left: 50%; top: 50%; width: 62px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface) 74%, transparent); box-shadow: 0 12px 34px rgba(17,19,15,.12); backdrop-filter: blur(12px); transform: translate(-50%, -50%) scale(.86); transition: opacity 180ms ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
.hero-play::after { width: 0; height: 0; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid var(--ink); content: ""; }
.hero-swatch-rail { position: absolute; z-index: 4; right: 18%; top: 31%; display: grid; gap: 9px; opacity: 0; transform: translateX(16px); transition: opacity 180ms ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
.hero-swatch-rail span { width: 26px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 50%; background: var(--swatch); box-shadow: 0 7px 16px rgba(17,19,15,.1); }
.hero-viewfinder { position: absolute; z-index: 4; left: 50%; top: 49%; width: min(33vw, 390px); aspect-ratio: .74; opacity: 0; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: clamp(20px, 3vw, 38px); box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--surface) 56%, transparent), 0 18px 42px rgba(17,19,15,.08); transform: translate(-50%, -50%) scale(.92); transition: opacity 180ms ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
.hero-viewfinder::before { position: absolute; left: 50%; top: 12px; width: 22%; height: 5px; border-radius: 99px; background: var(--ink); opacity: .34; transform: translateX(-50%); content: ""; }
.hero-viewfinder::after { position: absolute; left: 50%; bottom: 12px; width: 34px; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; background: color-mix(in srgb, var(--surface) 72%, transparent); content: ""; transform: translateX(-50%); }
.hero-scene[data-mode="film"] .hero-product-image { transform: rotate(-4deg) scale(.98); }
.hero-scene[data-mode="film"] .hero-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hero-scene[data-mode="imagery"] .hero-product-image { transform: none; }
.hero-scene[data-mode="3d"] .hero-product-image { transform: rotate(-2deg) scale(.94) translateY(6px); }
.hero-scene[data-mode="3d"] .hero-product-ghost { opacity: .16; transform: translate3d(-8%, -16%, -34px) scale(.88); }
.hero-scene[data-mode="3d"] .hero-product-ghost--two { opacity: .09; transform: translate3d(10%, 17%, -68px) scale(.78); }
.hero-scene[data-mode="configurator"] .hero-product-image { transform: rotate(2deg) scale(1.02); }
.hero-scene[data-mode="configurator"] .hero-swatch-rail { opacity: 1; transform: none; }
.hero-scene[data-mode="ar"] .hero-product-image { transform: rotate(-2deg) scale(.83); }
.hero-scene[data-mode="ar"] .hero-viewfinder { opacity: .88; transform: translate(-50%, -50%) scale(1); }
.hero-product-stage:hover:not(:disabled) .hero-product-image, .hero-product-stage:focus-visible .hero-product-image { filter: drop-shadow(0 22px 18px rgba(120,105,85,.12)) drop-shadow(0 8px 8px rgba(120,105,85,.06)) brightness(1.025); }
.hero-meta, .hero-utility, .hero-source-overlay { position: absolute; z-index: 6; }
.hero-meta { left: 22%; top: 5%; display: inline-flex; min-height: 40px; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--ui-radius); background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 10px 36px rgba(17,19,15,.06); backdrop-filter: blur(14px); font-family: var(--mono); font-size: .59rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-meta::before { width: 7px; height: 7px; background: var(--lime); content: ""; }
.hero-utility { right: 22%; top: 5%; display: flex; gap: 8px; }
.hero-input-toggle { min-height: 44px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--ui-radius); background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 10px 36px rgba(17,19,15,.06); backdrop-filter: blur(14px); font-family: var(--mono); font-size: .59rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-input-toggle[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.hero-sound-toggle { position: relative; width: 44px; height: 44px; display: grid; flex: 0 0 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--ui-radius); background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 10px 36px rgba(17,19,15,.06); color: var(--ink); backdrop-filter: blur(14px); }
.hero-sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.hero-sound-toggle .hero-sound-wave { transition: opacity 160ms ease; }
.hero-sound-toggle::after { position: absolute; width: 20px; height: 1.5px; opacity: 0; background: currentColor; transform: rotate(-45deg); transition: opacity 160ms ease; content: ""; }
.hero-sound-toggle[aria-pressed="false"] .hero-sound-wave { opacity: 0; }
.hero-sound-toggle[aria-pressed="false"]::after { opacity: 1; }
.hero-source-overlay { left: 50%; top: 49%; width: min(38vw, 460px); aspect-ratio: 1.3; overflow: visible; opacity: 0; visibility: hidden; border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); background-image: linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 28px 28px; clip-path: polygon(0 10%, 10% 10%, 10% 0, 90% 0, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0 90%); transform: translate(-50%, -50%) scale(.92); transition: opacity var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease); pointer-events: none; }
.hero-source-overlay::before { display: none; content: none; }
.hero-source-overlay::after { position: absolute; z-index: 1; width: 56%; aspect-ratio: 1; left: 50%; top: 50%; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 18px color-mix(in srgb, var(--ink) 5%, transparent), 0 0 0 19px color-mix(in srgb, var(--ink) 22%, transparent); transform: translate(-50%, -50%); pointer-events: none; content: ""; }
.hero-scene.is-source-visible .hero-source-overlay { opacity: .92; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.hero-scene.is-source-visible .hero-product-stage, .hero-scene.is-source-visible .hero-play, .hero-scene.is-source-visible .hero-swatch-rail, .hero-scene.is-source-visible .hero-viewfinder { opacity: .16; }
.hero-scene.is-roulette .hero-product-stage { opacity: .28; filter: blur(6px) grayscale(.24); transition-duration: 160ms, 160ms, 180ms; pointer-events: none; }
.hero-scene.is-roulette .hero-play, .hero-scene.is-roulette .hero-swatch-rail, .hero-scene.is-roulette .hero-viewfinder, .hero-scene.is-roulette .hero-source-overlay { opacity: 0 !important; }
.hero-roulette-loader { position: absolute; z-index: 8; left: 50%; top: 50%; width: 78px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0; color: var(--ink); transform: translate(-50%, -50%) scale(.84); transition: opacity 220ms ease, transform 420ms cubic-bezier(.16,1,.3,1); pointer-events: none; }
.hero-roulette-loader::before { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--hero-accent) 0 calc(var(--roulette-progress, .16) * 1turn), color-mix(in srgb, var(--ink) 10%, transparent) 0 1turn); -webkit-mask: radial-gradient(circle, transparent 0 64%, #000 65% 70%, transparent 71%); mask: radial-gradient(circle, transparent 0 64%, #000 65% 70%, transparent 71%); content: ""; animation: hero-loader-spin 1.2s linear infinite; }
.hero-roulette-loader::after { position: absolute; width: 11px; aspect-ratio: 1; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--hero-accent) 12%, transparent), 0 0 24px color-mix(in srgb, var(--hero-accent) 36%, transparent); content: ""; }
.hero-roulette-loader-mark { position: relative; z-index: 1; width: 38px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--surface) 35%, transparent); color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; backdrop-filter: blur(8px); }
.hero-roulette-loader-label { position: absolute; top: calc(100% + 11px); color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.hero-scene.is-roulette .hero-roulette-loader { opacity: .88; transform: translate(-50%, -50%) scale(1); }
@keyframes hero-loader-spin { to { transform: rotate(360deg); } }
.hero-interaction-hint { position: absolute; z-index: 8; left: 50%; top: 5%; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: .59rem; letter-spacing: .09em; text-transform: uppercase; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.hero-interaction-hint::before { width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 34%, transparent); content: ""; }
.hero-connectors { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; color: #5c636c; --hero-rail-active: #7a93aa; pointer-events: none; }
html[data-skin="nocturne"] .hero-connectors { color: #d5deea; --hero-rail-active: #f4f7fb; }
@media (min-width: 861px) {
.hero-mode::after { display: none !important; }
}
@media (max-width: 860px) {
.hero-connectors { display: none; }
}
.hero-services { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.hero-mode { position: absolute; width: 160px; min-height: 72px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-family: var(--mono); font-size: var(--type-meta); letter-spacing: .095em; line-height: 1.25; text-transform: uppercase; transition: color 180ms ease, transform 180ms ease; pointer-events: auto; }
.hero-mode svg { width: 34px; height: 34px; padding: 7px; overflow: visible; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.35; transition: color 200ms ease, border-color 200ms ease, box-shadow 260ms var(--motion-ease), transform 260ms var(--motion-ease), filter 200ms ease; }
.hero-mode span { transition: color 180ms ease, font-weight 180ms ease; }
.hero-mode::before { position: absolute; top: 50%; width: 6px; height: 6px; opacity: 0; background: var(--lime); transform: translateY(-50%) rotate(45deg); transition: opacity 180ms ease; content: ""; }
.hero-mode::after { position: absolute; top: 50%; width: clamp(54px, 9vw, 138px); height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 30%, transparent), transparent); content: ""; pointer-events: none; }
.hero-mode:hover, .hero-mode:focus-visible, .hero-mode[aria-checked="true"] { color: var(--ink); }
.hero-mode:hover svg { transform: translateY(-1px) scale(1.05); }
.hero-mode[aria-checked="true"] { font-weight: 600; }
.hero-mode[aria-checked="true"] svg { transform: scale(1.1); }
.hero-mode[aria-checked="true"]::before { opacity: 1; }
.hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: scale(1.055); }
.hero-scene.is-roulette .hero-mode, .hero-scene.is-roulette .hero-mode svg { transition-duration: 60ms; }
.hero-scene.is-roulette .hero-mode { opacity: .42; }
.hero-scene.is-roulette .hero-mode[aria-checked="true"] { background: transparent; box-shadow: none; color: var(--muted); }
.hero-scene.is-roulette .hero-mode[aria-checked="true"] svg {  color: var(--muted); }
.hero-scene.is-revealing .hero-mode[aria-checked="true"] svg { animation: hero-roulette-land 680ms ease-out; }
.hero-mode--left::before { right: -5px; }
.hero-mode--left::after { left: calc(100% + 10px); }
.hero-mode--right::before { left: -5px; }
.hero-mode--right::after { right: calc(100% + 10px); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 30%, transparent)); }
.hero-mode--video { left: 0; top: 24%; }
.hero-mode--imagery { left: 0; top: 66%; }
.hero-mode--3d { right: 0; top: 23%; }
.hero-mode--configurator { right: 0; top: 48%; }
.hero-mode--ar { right: 0; top: 71%; }
.credibility { border-block: 1px solid var(--line); background: var(--surface); }
.credibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.credibility-item { min-height: 126px; padding: 24px; border-right: 1px solid var(--line); }
.credibility-item:last-child { border-right: 0; }
.credibility-item strong { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.credibility-item span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.88rem; }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 46px; }
.work-card { grid-column: span 4; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); }
.work-card[hidden] { display: none; }
.work-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.22,.61,.36,1); }
.work-card:hover img, .work-card:focus-within img { transform: scale(1.025); }
.placeholder-label { position: absolute; left: 12px; top: 12px; padding: 7px 9px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
.work-card-copy { padding: 22px; }
.work-card-copy h3 { font-size: 1.45rem; line-height: 1.05; }
.work-card-copy p { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
.work-card-copy ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.work-card-copy li { padding: 6px 8px; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filter-button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); background: transparent; font-size: 0.82rem; font-weight: 700; }
.filter-button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.work-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding: 18px; border-left: 4px solid var(--lime); background: var(--surface); color: var(--muted); font-size: 0.88rem; }
.outcome-tour {
position: relative;
height: 420svh;
background: var(--dark);
color: var(--paper);
}
.outcome-sticky {
position: sticky;
top: var(--header);
height: calc(100svh - var(--header));
min-height: 0;
overflow: hidden;
}
.outcome-shell {
position: relative;
z-index: 1;
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: clamp(8px, 1.2vh, 14px);
padding-block: clamp(10px, 1.6vh, 18px) clamp(10px, 1.6vh, 16px);
}
.outcome-head {
display: grid;
justify-items: center;
gap: 0;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
.outcome-head h2 {
max-width: none;
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 3.15rem);
line-height: 1.05;
letter-spacing: -0.045em;
white-space: nowrap;
}
.outcome-head > p { display: none; }
.outcome-experience {
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: clamp(10px, 1.4vh, 16px);
align-items: stretch;
}
.outcome-progress {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
border: 0;
}
.outcome-jump {
min-height: 44px;
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 8px 2px;
border: 0;
background: transparent;
color: rgba(244,240,231,.4);
text-align: left;
transition: color 180ms ease;
}
.outcome-jump span {
font-family: var(--mono);
font-size: .72rem;
letter-spacing: .14em;
}
.outcome-jump strong {
font-size: 1.05rem;
font-weight: 650;
letter-spacing: -.02em;
}
.outcome-jump[aria-current="step"] {
background: transparent;
color: var(--paper);
}
.outcome-jump[aria-current="step"] strong {
box-shadow: inset 0 -2px 0 var(--lime);
}
.outcome-deck {
position: relative;
min-height: 0;
width: 100%;
max-width: min(1120px, 100%);
margin-inline: auto;
perspective: 1600px;
perspective-origin: 50% 45%;
overflow: hidden;
}
.outcome-card {
--tilt-x: 0deg;
--tilt-y: 0deg;
position: absolute;
left: 50%;
top: 50%;
width: min(100%, 1080px);
height: min(66vh, 560px);
min-height: 360px;
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
overflow: hidden;
border: 1px solid rgba(244,240,231,.18);
background:
linear-gradient(155deg, rgba(255,255,255,.08) 0%, transparent 46%),
linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%),
rgba(10, 16, 28, 0.52);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(0,0,0,.28),
0 20px 48px rgba(0,0,0,.36),
0 4px 16px rgba(0,0,0,.22);
transform-origin: center center;
transform-style: preserve-3d;
will-change: transform, opacity;
border-radius: calc(var(--corner) + 8px);
opacity: 0;
color: rgba(244,240,231,.92);
padding: clamp(28px, 4.2vh, 52px) clamp(28px, 4vw, 56px);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.outcome-card {
-webkit-backdrop-filter: blur(12px) saturate(1.12);
backdrop-filter: blur(12px) saturate(1.12);
}
}
.outcome-card[data-active="true"] {
cursor: grab;
}
.outcome-card::after {
position: absolute;
left: 12px;
right: 12px;
bottom: -11px;
height: 11px;
border-radius: 0 0 16px 16px;
background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.12));
content: "";
z-index: -1;
pointer-events: none;
}
.outcome-card::before { display: none; content: none; }
.outcome-card img,
.outcome-card-visual,
.outcome-diagram { display: none !important; }
.outcome-card-body {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: auto auto auto 1fr;
gap: clamp(10px, 1.4vh, 16px);
align-content: start;
align-self: stretch;
width: 100%;
max-width: min(52ch, 100%);
margin: 0;
padding: 0;
pointer-events: none;
opacity: 1;
visibility: visible;
transform: none;
}
.outcome-card-label {
width: fit-content;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: var(--accent, #3d84ff);
font-family: var(--mono);
font-size: clamp(.78rem, 1.05vw, .92rem);
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
}
.outcome-card-body h3 {
max-width: 16ch;
margin: 0;
font-size: clamp(2.15rem, 4.2vw, 3.45rem);
line-height: 1.02;
letter-spacing: -.04em;
text-wrap: balance;
}
.outcome-card-body p {
display: block;
max-width: 38ch;
margin: 0;
color: rgba(244,240,231,.64);
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.45;
}
.outcome-card-body ul {
display: grid;
gap: 10px;
margin: clamp(8px, 1.6vh, 18px) 0 0;
padding: 0;
list-style: none;
align-self: end;
}
.outcome-card-body li {
position: relative;
margin: 0;
padding: 0 0 0 1.15em;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: rgba(244,240,231,.78);
font-size: clamp(.95rem, 1.1vw, 1.05rem);
line-height: 1.4;
}
.outcome-card-body li::before {
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 1px;
background: var(--accent, #3d84ff);
content: "";
}
@media (max-width: 900px) {
.outcome-head h2 { white-space: normal; text-wrap: balance; max-width: 16ch; }
.outcome-card {
padding: clamp(22px, 4vw, 28px);
}
}
@media (prefers-reduced-motion: reduce) {
.outcome-card { --tilt-x: 0deg !important; --tilt-y: 0deg !important; }
}
@media (pointer: coarse) {
.outcome-card {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background:
linear-gradient(155deg, rgba(255,255,255,.07) 0%, transparent 46%),
rgba(12, 18, 30, 0.88);
}
}
.studio-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(30px, 6vw, 88px); margin-top: 52px; }
.studio-image-stack { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 12px; min-height: 620px; }
.studio-image-stack figure { position: relative; overflow: visible; border: 0; border-top: 1px solid var(--dark-line); background: transparent; }
.studio-image-stack figure:first-child { grid-row: span 2; }
.studio-image-stack img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px 26px 112px 26px; }
.studio-image-stack figure:nth-child(2) img { border-radius: 112px 26px 26px 26px; }
.studio-image-stack figure:nth-child(3) img { border-radius: 26px 26px 26px 112px; }
.studio-image-stack figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 10px; border-radius: 999px; background: var(--dark); color: var(--paper); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.studio-copy h2 { max-width: 12ch; font-size: clamp(2.8rem, 5.6vw, 5.8rem); line-height: 0.91; }
.studio-copy > p { margin-top: 22px; max-width: 46ch; color: rgba(244,240,231,.7); font-size: 1.04rem; }
.studio-services { display: grid; margin-top: 34px; border-top: 1px solid var(--dark-line); }
.studio-service { padding-block: 17px; border-bottom: 1px solid var(--dark-line); }
.studio-service strong { display: block; font-family: var(--display); font-size: 1.08rem; }
.studio-service span { display: block; margin-top: 4px; color: rgba(244,240,231,.6); font-size: 0.84rem; }
.studio-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.pack { display: flex; min-width: 0; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); }
.pack--primary { border: 2px solid var(--ink); box-shadow: calc(var(--depth-x) * .4) calc(var(--depth-y) * .4) 0 var(--lime); }
.pack-label { font-family: var(--mono); font-size: var(--type-meta); letter-spacing: 0.13em; text-transform: uppercase; }
.pack h3 { min-height: 2.2em; margin-top: 18px; font-size: 1.55rem; line-height: 1.04; }
.pack-summary { min-height: 5.1em; margin-top: 12px; color: var(--muted); font-size: 0.88rem; }
.pack-price { margin-top: 24px; font-family: var(--display); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; }
.pack-price small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; }
.pack .button { width: 100%; margin-top: 20px; }
.pack-details { display: grid; gap: 15px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pack-details dt { color: var(--muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pack-details dd { margin: 5px 0 0; font-size: 0.79rem; line-height: 1.5; }
.pack-policy { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 0.86rem; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 46px; border: 1px solid var(--dark-line); }
.workflow-step { min-height: 270px; padding: 26px; border-right: 1px solid var(--dark-line); }
.workflow-step:last-child { border-right: 0; }
.workflow-step span { color: var(--lime); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; }
.workflow-step h3 { margin-top: 48px; font-size: 1.8rem; }
.workflow-step p { margin-top: 12px; color: rgba(244,240,231,.68); font-size: 0.9rem; }
.partnership { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: clamp(30px, 6vw, 84px); align-items: center; padding: clamp(34px, 5vw, 64px) 0; border-block: 1px solid var(--line); background: transparent; }
.partnership h2 { max-width: 12ch; margin-top: 18px; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 0.95; }
.partnership p { margin-top: 18px; max-width: 55ch; color: var(--muted); }
.partnership-actions { display: flex; flex-wrap: wrap; margin-top: 24px; }
.partnership-facts { display: grid; border-top: 1px solid var(--line); }
.partnership-facts li { padding-block: 16px; border-bottom: 1px solid var(--line); }
.partnership-facts strong { display: block; }
.partnership-facts span { color: var(--muted); font-size: 0.86rem; }
.faq-layout { display: grid; grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 100px); }
.faq-intro h2 { max-width: 9ch; margin-top: 18px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 0.94; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; min-height: 72px; display: flex; align-items: center; padding: 18px 46px 18px 0; font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 0; font-family: var(--mono); font-size: 1.15rem; content: "+"; }
.faq-list details[open] summary::after { content: "−"; }
.faq-answer { max-width: 72ch; padding: 0 44px 24px 0; color: var(--muted); }
body, .site-header, .credibility, .work-card, .pack, .partnership, .site-footer, .section--dark, .outcome-tour { transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.site-footer { padding-block: 60px 26px; background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 0.55fr); gap: 36px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.footer-intro h2 { max-width: 15ch; margin-top: 20px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.footer-intro p { margin-top: 16px; max-width: 46ch; color: var(--muted); font-size: var(--type-body); line-height: 1.85; }
.footer-col h3 { font-family: var(--mono); font-size: var(--type-meta); letter-spacing: 0.13em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: 8px; margin-top: 16px; font-size: var(--type-meta); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; color: var(--muted); font-family: var(--mono); font-size: var(--type-meta); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 1120px) {
.hero h1 { font-size: var(--hero-title-size); }
.hero-mode { width: 138px; }
.hero-meta { left: 18%; }
.hero-utility { right: 18%; }
.pack-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1.2fr repeat(3, 0.6fr); }
}
@media (min-width: 861px) and (max-height: 860px) {
.hero { padding-block: 24px 28px; }
.hero-grid { min-height: calc(100svh - var(--header) - 52px); }
.hero-kicker { margin-bottom: 10px; }
.hero h1 { font-size: var(--hero-title-size); }
.hero-intro { margin-top: 10px; }
.hero-showcase-wrap { min-height: clamp(430px, calc(100svh - var(--header) - 190px), 520px); }
.outcome-shell { padding-block: 10px 8px; gap: 8px; }
.outcome-head h2 { font-size: clamp(1.4rem, 3.6vh, 2rem); }
.outcome-card { height: min(64vh, 520px); min-height: 320px; padding: 24px 28px; }
.outcome-card-body h3 { font-size: clamp(1.7rem, 4vh, 2.5rem); }
.outcome-card-body ul { margin-top: 10px; gap: 8px; }
}
@media (max-width: 860px) {
.site-nav { display: none; position: absolute; top: var(--header); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 14px var(--gutter) 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
.site-nav.is-open { display: flex; }
.site-nav a { width: 100%; }
.site-nav .nav-contact { margin: 8px 0 0; justify-content: center; }
.menu-button { display: inline-flex; }
.hero { min-height: auto; padding-top: 44px; }
.hero-grid { min-height: 0; display: block; }
.hero-copy { max-width: 760px; margin-inline: auto; }
.hero h1 { font-size: var(--hero-title-size); white-space: normal; }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin: 0; }
.hero-intro { max-width: 46ch; }
.hero-showcase-wrap { width: 100%; max-width: 760px; min-height: 0; margin: 24px auto 0; }
.hero-showcase { min-height: 0; }
.hero-scene { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; padding-top: 84px; }
.hero-interaction-hint { top: 50px; }
.hero-haze { top: 28%; width: 100%; }
.hero-orbit { top: 29%; width: min(92vw, 620px); }
.hero-product-stage { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: min(100%, 650px); margin-inline: auto; transform: none; }
.hero-meta { left: 0; top: 0; }
.hero-utility { right: 0; top: 0; }
.hero-play { top: 28%; }
.hero-swatch-rail { right: 10%; top: 16%; }
.hero-viewfinder { top: 29%; width: min(48vw, 340px); }
.hero-source-overlay { top: 36%; left: 50%; width: min(66vw, 360px); transform: translate(-50%, -50%) scale(.92); }
.hero-services { position: relative; inset: auto; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -4px; pointer-events: auto; }
.hero-mode { position: relative; inset: auto; width: auto; min-height: 72px; display: flex; justify-content: center; gap: 10px; padding: 12px 8px; border-top: 1px solid var(--line); }
.hero-mode[aria-checked="true"] { background: color-mix(in srgb, var(--lime) 18%, transparent); box-shadow: inset 4px 0 0 var(--lime); }
.hero-mode:nth-child(odd) { border-right: 1px solid var(--line); }
.hero-mode:last-child { grid-column: 1 / -1; border-right: 0; }
.hero-mode::before { left: 10px; right: auto; }
.hero-mode::after { display: none; }
.hero-mode svg { flex: 0 0 auto; width: 30px; height: 30px; }
.hero .hero-actions { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; margin-top: 24px; transform: none; }
.section-heading h2, .packs-head h2 { max-width: none; }
.credibility-grid { grid-template-columns: 1fr 1fr; }
.credibility-item:nth-child(2) { border-right: 0; }
.credibility-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.work-card { grid-column: span 6; }
.outcome-tour { height: auto; padding-block: 72px; }
.outcome-sticky { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
.outcome-shell { height: auto; display: block; padding-block: 0; }
.outcome-head { display: grid; justify-items: start; text-align: left; gap: 12px; }
.outcome-experience { display: block; }
.outcome-progress { display: none; }
.outcome-deck { min-height: 0; display: grid; gap: 16px; margin-top: 28px; max-width: none; }
.outcome-card {
position: relative;
left: auto;
top: auto;
width: 100%;
height: auto;
min-height: 0;
display: grid;
grid-template-columns: 1fr;
padding: 18px;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
.outcome-card-visual {
order: -1;
min-height: 180px;
height: 180px;
}
.outcome-card img { display: none; }
.outcome-card::after {
left: 8px;
right: 8px;
bottom: -8px;
height: 8px;
}
.outcome-card-body {
position: relative;
padding: 8px 4px 4px;
opacity: 1;
visibility: visible;
transform: none;
max-width: none;
}
.outcome-card-body h3 { font-size: clamp(1.7rem, 7vw, 2.4rem); max-width: none; }
.outcome-card-body p { display: block; max-width: 42ch; }
.studio-copy { order: -1; }
.studio-image-stack { min-height: 520px; }
.workflow-grid { grid-template-columns: 1fr; }
.workflow-step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--dark-line); }
.workflow-step:last-child { border-bottom: 0; }
.workflow-step h3 { margin-top: 25px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
:root { --gutter: 20px; }
.section { padding-block: 72px; }
.hero { padding-block: 32px 52px; }
.hero-kicker { gap: 8px; margin-bottom: 16px; font-size: var(--type-micro); letter-spacing: .08em; }
.hero h1 { font-size: var(--hero-title-size); }
.hero h1 span:last-child { -webkit-text-stroke-width: 1.4px; }
.hero-intro { max-width: 34ch; margin-top: 16px; font-size: var(--type-body); line-height: 1.85; }
.hero-showcase-wrap { margin-top: 10px; }
.hero-scene { padding-top: 76px; }
.hero-interaction-hint { top: 46px; font-size: .62rem; letter-spacing: .07em; }
.hero-meta { left: 0; top: 0; }
.hero-utility { right: 0; top: 0; }
.hero-product-stage { width: 100%; aspect-ratio: 1.48; }
.hero-orbit { top: 27%; width: 100%; }
.hero-play { top: 27%; width: 54px; }
.hero-swatch-rail { right: 4%; top: 14%; gap: 7px; }
.hero-swatch-rail span { width: 22px; }
.hero-viewfinder { top: 27%; width: 56vw; }
.hero-source-overlay { width: min(78vw, 320px); top: 34%; }
.hero-roulette-loader { top: 36%; }
.hero-mode { min-height: 60px; font-size: var(--type-meta); letter-spacing: .05em; }
.hero .hero-actions { margin-top: 18px; }
.credibility-grid { grid-template-columns: 1fr; }
.credibility-item { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
.credibility-item:last-child { border-bottom: 0; }
.work-grid { grid-template-columns: 1fr; }
.work-card { grid-column: auto; }
.outcome-card { min-height: 0; }
.studio-image-stack { grid-template-columns: 1fr 1fr; min-height: 500px; }
.studio-image-stack figure:first-child { grid-column: 1 / -1; grid-row: auto; }
.pack-grid { grid-template-columns: 1fr; }
.pack h3, .pack-summary { min-height: 0; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-col:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.hero-showcase { transform: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
.hero-copy > * { animation: hero-copy-in 700ms backwards var(--motion-ease); }
.hero-copy > :nth-child(2) { animation-delay: 70ms; }
.hero-copy > :nth-child(3) { animation-delay: 130ms; }
.hero-meta, .hero-utility, .hero-services { animation: hero-ui-in 650ms 310ms backwards var(--motion-ease); }
.hero-interaction-hint { animation: hero-hint-in 650ms 360ms backwards var(--motion-ease); }
.hero-scene.is-roulette .hero-interaction-hint::before { animation: hero-hint-pulse 720ms ease-out infinite; }
}
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-ui-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-hint-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-hint-pulse { 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes hero-roulette-land { 55% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--lime) 14%, transparent); transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
.outcome-tour { height: auto; padding-block: 90px; }
.outcome-sticky { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; }
.outcome-shell { height: auto; }
.outcome-experience { display: block; }
.outcome-progress { display: none; }
.outcome-deck { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; max-width: none; }
.outcome-card {
position: relative;
left: auto;
top: auto;
width: 100%;
height: auto;
min-height: 0;
opacity: 1 !important;
filter: none !important;
transform: none !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.outcome-card img,
.outcome-card-visual { display: none !important; }
.outcome-card-body {
position: relative;
padding: 0;
opacity: 1;
visibility: visible;
transform: none;
max-width: none;
}
.outcome-card-body ul { display: grid; }
}
html[data-skin="nocturne"] {
color-scheme: dark;
--paper: #020617;
--surface: #030712;
--ink: #f8fafc;
--muted: #94a3b8;
--accent: #3b82f6;
--accent-2: #60a5fa;
--accent-ink: #020617;
--action: #3b82f6;
--action-hover: #60a5fa;
--cta-hover: #4087f7;
--action-ink: #020617;
--lime: var(--accent);
--hero-accent: var(--accent);
--dark: #010409;
--dark-2: #0f172a;
--dark-ink: #f1f5f9;
--proof-bg: #030712;
--proof-surface: #0f172a;
--proof-ink: #f8fafc;
--line: rgba(148, 163, 184, 0.11);
--dark-line: rgba(59, 130, 246, 0.13);
--shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
}
html[data-skin="nocturne"] .section--dark { background: var(--dark); color: var(--dark-ink); }
html[data-skin="nocturne"] .outcome-tour { color: var(--dark-ink); }
html[data-skin="nocturne"] .section--dark .eyebrow,
html[data-skin="nocturne"] .section--dark .muted { color: color-mix(in srgb, var(--dark-ink) 68%, transparent); }
.hero { padding-block: clamp(22px, 2.8vw, 42px) clamp(38px, 4vw, 62px); }
.hero-grid { grid-template-rows: auto minmax(470px, 1fr); }
.hero h1 { line-height: .9; }
.hero-intro { max-width: none; margin-top: 12px; color: var(--muted); font-family: var(--mono); font-size: clamp(.68rem, .88vw, .78rem); font-weight: 500; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.hero-showcase-wrap { min-height: clamp(470px, min(44vw, calc(100svh - var(--header) - 205px)), 610px); margin-top: -10px; }
.hero-haze { top: 45%; }
.hero-orbit { top: 47%; }
.hero-product-stage { top: 46%; width: min(64vw, 840px); cursor: default; pointer-events: none; transition: opacity 560ms ease, filter 560ms ease; }
.hero-media-visual { position: absolute; inset: -2% -3% -1%; opacity: 1; transform: scale(1); transition: opacity 560ms ease, filter 560ms ease, transform 720ms cubic-bezier(.16,1,.3,1); -webkit-mask-image: none; mask-image: none; }
.hero-media-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms ease; }
.hero-still-stack { opacity: 1; }
.hero-video-frame, .hero-model-frame { display: grid; place-items: center; }
.hero-video-frame video { width: 94%; height: 88%; object-fit: cover; opacity: .94; filter: saturate(.84) contrast(.98); }
.hero-video-frame::before { position: absolute; z-index: 2; left: 17%; top: 17%; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: color-mix(in srgb, var(--surface) 74%, transparent); color: var(--ink); font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); content: none; }
.hero-scene[data-mode="ugc"] .hero-video-frame video { width: 40%; height: 92%; border-radius: 28px; object-position: center; }
.hero-scene[data-mode="ugc"] .hero-video-frame::before { content: none; }
.hero-scene[data-mode="ar"] .hero-video-frame video { width: 38%; height: 92%; border: 2px solid color-mix(in srgb, var(--ink) 38%, transparent); border-radius: 34px; object-position: center; }
.hero-scene[data-mode="ar"] .hero-video-frame::before { content: none; }
.hero-video-frame::after { position: absolute; inset: 19% 24%; border: 1px solid transparent; pointer-events: none; content: ""; }
.hero-scene[data-mode="ar"] .hero-video-frame::after { border-color: color-mix(in srgb, var(--lime) 76%, transparent); clip-path: polygon(0 0, 16% 0, 16% 2px, 2px 2px, 2px 16%, 0 16%, 0 0, 100% 0, 100% 16%, calc(100% - 2px) 16%, calc(100% - 2px) 2px, 84% 2px, 84% 0, 100% 0, 100% 100%, 84% 100%, 84% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 84%, 100% 84%, 100% 100%, 0 100%, 0 84%, 2px 84%, 2px calc(100% - 2px), 16% calc(100% - 2px), 16% 100%, 0 100%); }
.hero-model-frame model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; pointer-events: auto; }
.hero-model-frame::after { position: absolute; left: 50%; bottom: 14%; padding: 6px 8px; opacity: .72; background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; transform: translateX(-50%); backdrop-filter: blur(10px); content: "Drag to rotate · Pan to inspect"; white-space: nowrap; pointer-events: none; }
.hero-scene[data-mode="ar"] .hero-still-stack { opacity: .28; filter: blur(.8px); }
.hero-scene[data-mode="video"] .hero-still-stack,
.hero-scene[data-mode="ugc"] .hero-still-stack { opacity: 0; }
.hero-scene[data-mode="3d"].is-model-ready .hero-still-stack,
.hero-scene[data-mode="configurator"].is-model-ready .hero-still-stack { opacity: 0; }
.hero-scene[data-mode="video"] .hero-video-frame,
.hero-scene[data-mode="ugc"] .hero-video-frame,
.hero-scene[data-mode="3d"] .hero-video-frame,
.hero-scene[data-mode="ar"] .hero-video-frame { opacity: 1; }
.hero-scene[data-mode="3d"].is-model-ready .hero-model-frame,
.hero-scene[data-mode="configurator"].is-model-ready .hero-model-frame { opacity: 1 !important; }
.hero-scene:not(.is-preparing):not(.is-roulette) .hero-model-frame.is-active { opacity: 1 !important; }
.hero-scene.is-preparing .hero-still-stack,
.hero-scene.is-roulette .hero-still-stack { opacity: 1 !important; }
.hero-scene.is-preparing .hero-video-frame,
.hero-scene.is-preparing .hero-model-frame,
.hero-scene.is-roulette .hero-video-frame,
.hero-scene.is-roulette .hero-model-frame { opacity: 0 !important; pointer-events: none; }
.hero-scene.is-preparing .hero-product-stage,
.hero-scene.is-roulette .hero-product-stage,
.hero-scene.is-resolving .hero-product-stage { opacity: .3; filter: blur(5px) grayscale(.2); }
.hero-scene.is-preparing .hero-media-visual,
.hero-scene.is-roulette .hero-media-visual,
.hero-scene.is-resolving .hero-media-visual { transform: scale(.5); }
.hero-scene.is-switching .hero-product-stage { opacity: .42; filter: blur(3px); }
.hero-scene.is-switching .hero-media-visual { transform: scale(.94); }
.hero-scene.is-revealing .hero-media-visual { animation: hero-media-resolve 760ms cubic-bezier(.16,1,.3,1); }
.hero-scene.is-media-locked model-viewer,
.hero-scene.is-media-locked .hero-play,
.hero-scene.is-media-locked .hero-configurator-controls { pointer-events: none !important; }
.hero-play { top: 46%; display: grid; pointer-events: none; }
.hero-scene[data-mode="video"] .hero-play,
.hero-scene[data-mode="ugc"] .hero-play,
.hero-scene[data-mode="3d"] .hero-play { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.hero-play[aria-pressed="true"]::after { width: 12px; height: 15px; margin: 0; border: 0; background: linear-gradient(90deg, var(--ink) 0 34%, transparent 34% 66%, var(--ink) 66% 100%); }
.hero-configurator-controls { position: absolute; z-index: 7; left: 50%; bottom: 5%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; opacity: 0; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--surface) 76%, transparent); transform: translate(-50%, 8px); transition: opacity 240ms ease, transform 320ms ease; backdrop-filter: blur(14px); pointer-events: none; }
.hero-configurator-controls span { color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-variant { width: 30px; height: 30px; padding: 0; border: 3px solid var(--surface); border-radius: 50%; background: var(--variant); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.hero-variant[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.hero-scene[data-mode="configurator"].is-model-ready:not(.is-roulette) .hero-configurator-controls { opacity: 1 !important; transform: translate(-50%, 0); pointer-events: auto; }
.hero-scene:not(.is-preparing):not(.is-roulette) .hero-configurator-controls.is-active { opacity: 1 !important; transform: translate(-50%, 0); pointer-events: auto; }
.hero-meta { left: 0; top: 1%; }
.hero-utility { right: 0; top: 1%; }
.hero-services { inset: 0; }
.hero-mode--video { left: 0; top: 20%; }
.hero-mode--ugc { left: 0; top: 46%; }
.hero-mode--imagery { left: 0; top: 72%; }
.hero-mode--3d { right: 0; top: 20%; }
.hero-mode--configurator { right: 0; top: 46%; }
.hero-mode--ar { right: 0; top: 72%; }
.industry-marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
.industry-track { width: max-content; display: flex; animation: industry-run 34s linear infinite; }
.industry-group { display: flex; align-items: center; flex: none; }
.industry-group span { display: inline-flex; align-items: center; gap: 36px; padding: 25px 22px; font-family: var(--display); font-size: clamp(1.45rem, 2.8vw, 2.75rem); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.industry-group span:nth-child(odd) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.industry-group span::after { width: 8px; height: 8px; background: var(--lime); transform: rotate(45deg); content: ""; }
@media (hover: hover) and (pointer: fine) {
.industry-marquee:hover .industry-track,
.industry-marquee:focus-within .industry-track { animation-play-state: paused; }
}
.industry-marquee.is-ribbon-held .industry-track { animation-play-state: paused; }
.client-proof { padding-block: clamp(62px, 7vw, 96px); background: var(--proof-bg); color: var(--proof-ink); }
.client-proof-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid color-mix(in srgb, var(--proof-ink) 22%, transparent); }
.client-proof-head h2 { max-width: 14ch; font-size: clamp(2.3rem, 4.6vw, 4.8rem); line-height: .96; }
.client-proof-head p { max-width: 42ch; color: color-mix(in srgb, var(--proof-ink) 66%, transparent); }
.client-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-block: 1px solid color-mix(in srgb, var(--proof-ink) 20%, transparent); }
.client-review { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 28px; border-right: 1px solid color-mix(in srgb, var(--proof-ink) 20%, transparent); }
.client-review:last-child { border-right: 0; }
.client-review blockquote { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.client-review footer { display: grid; gap: 3px; color: color-mix(in srgb, var(--proof-ink) 68%, transparent); font-size: .82rem; }
.client-review strong { color: var(--proof-ink); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
html[data-skin="nocturne"] .client-proof { background: var(--proof-bg); color: var(--proof-ink); }
html[data-skin="nocturne"] .client-proof-head,
html[data-skin="nocturne"] .client-review-grid,
html[data-skin="nocturne"] .client-review { border-color: color-mix(in srgb, var(--proof-ink) 22%, transparent); }
html[data-skin="nocturne"] .client-proof-head p,
html[data-skin="nocturne"] .client-review footer { color: color-mix(in srgb, var(--proof-ink) 68%, transparent); }
html[data-skin="nocturne"] .client-review strong { color: var(--proof-ink); }
@keyframes hero-media-resolve { 0% { opacity: .3; filter: blur(5px) grayscale(.2); transform: scale(.52); } 72% { opacity: 1; filter: none; transform: scale(1.025); } 100% { opacity: 1; filter: none; transform: scale(1); } }
@keyframes industry-run { to { transform: translateX(-50%); } }
@media (max-width: 860px) {
.hero { padding-top: 30px; }
.hero-grid { grid-template-rows: auto auto; }
.hero-showcase-wrap { margin-top: 2px; }
.hero-scene { padding-top: 68px; }
.hero-meta, .hero-utility { top: 0; }
.hero-product-stage { top: auto; width: min(100%, 650px); }
.hero-media-visual { inset: -3% -5% 0; }
.hero-play { top: 29%; }
.hero-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-mode { inset: auto; }
.hero-mode:last-child { grid-column: auto; }
.hero-video-frame::before { left: 12%; top: 15%; }
.hero-scene[data-mode="ugc"] .hero-video-frame::before,
.hero-scene[data-mode="ar"] .hero-video-frame::before { left: 21%; }
.hero-configurator-controls { bottom: 2%; }
.hero-roulette-loader { top: 37%; }
.client-proof-head { display: grid; }
.client-review-grid { grid-template-columns: 1fr; }
.client-review { min-height: 210px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
.client-review:last-child { border-bottom: 0; }
}
@media (min-width: 861px) and (max-height: 820px) {
.hero { padding-block: 14px 20px; }
.hero-grid { min-height: calc(100svh - var(--header) - 34px); grid-template-rows: auto minmax(0, 1fr); }
.hero h1 { font-size: clamp(3.25rem, 8.1vh, 4.75rem); }
.hero-intro { margin-top: 7px; }
.hero-showcase-wrap { min-height: 0; margin-top: -10px; }
.hero-showcase { min-height: 0; }
.hero-product-stage { width: min(55vw, 700px); }
.hero-haze { width: min(68vw, 850px); }
.hero-orbit { width: min(50vw, 640px); }
.hero-meta, .hero-utility { top: 2%; }
.hero-mode { min-height: 62px; }
.hero-mode svg { width: 30px; height: 30px; }
.hero .hero-actions { bottom: 2px; }
}
@media (min-width: 861px) and (max-height: 700px) {
.hero h1 { font-size: clamp(3rem, 7.8vh, 4rem); }
.hero-product-stage { width: min(50vw, 620px); }
.hero-mode { min-height: 56px; }
.hero-mode svg { width: 27px; height: 27px; }
.hero-configurator-controls { bottom: 8%; }
}
@media (max-width: 560px) {
.hero { padding-top: 24px; }
.hero-intro { margin-top: 10px; font-size: .62rem; letter-spacing: .08em; }
.hero-scene { padding-top: 64px; }
.hero-meta { max-width: 43%; padding-inline: 9px; font-size: .53rem; }
.hero-utility { gap: 6px; }
.hero-input-toggle { padding-inline: 9px; font-size: .53rem; }
.hero-sound-toggle { width: 42px; height: 42px; flex-basis: 42px; }
.hero-product-stage { aspect-ratio: 1.34; }
.hero-scene[data-mode="ugc"] .hero-video-frame video,
.hero-scene[data-mode="ar"] .hero-video-frame video { width: 50%; }
.hero-video-frame::before { display: none; }
.hero-configurator-controls { gap: 6px; padding: 6px 8px; }
.hero-configurator-controls span { display: none; }
.hero-variant { width: 27px; height: 27px; }
.industry-group span { gap: 24px; padding: 20px 16px; }
.client-review { padding: 24px 0; }
}
@media (min-width: 861px) {
.hero-product-stage { top: 50%; width: min(58vw, 730px); }
.hero::after { background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 8%, transparent), transparent 68%); }
.hero-haze { width: min(68vw, 820px); background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 84%, transparent) 0 22%, color-mix(in srgb, var(--lime) 8%, transparent) 44%, transparent 72%); }
.hero-orbit { width: min(53vw, 700px); opacity: .56; }
.hero-orbit::after { border-color: color-mix(in srgb, var(--lime) 38%, transparent); }
.hero-mode { width: 220px; min-height: 88px; gap: 8px; font-size: var(--type-meta); letter-spacing: .105em; transform: translateY(var(--rail-shift, 0)); }
.hero-mode svg { width: 46px; height: 46px; padding: 5px; stroke-width: 1.25; }
.hero-mode[aria-checked="true"] { transform: translateY(var(--rail-shift, 0)) scale(1.06); }
.hero-mode::before { width: 7px; height: 7px; opacity: .14; border-radius: 50%; background: color-mix(in srgb, var(--muted) 55%, transparent); transform: translateY(-50%); }
.hero-mode[aria-checked="true"]::before { opacity: .2; background: color-mix(in srgb, var(--cta-hover, #133cb8) 36%, transparent); box-shadow: none; }
.hero-mode--ugc::before,
.hero-mode--configurator::before { opacity: .1; }
.hero-mode--ugc[aria-checked="true"]::before,
.hero-mode--configurator[aria-checked="true"]::before { opacity: .14; }
.hero-mode::after { display: none !important; }
.hero-mode--video { left: 0; top: 17%; --rail-shift: -10px; }
.hero-mode--ugc { left: 1%; top: 45%; --rail-shift: 7px; }
.hero-mode--imagery { left: 0; top: 73%; --rail-shift: -4px; }
.hero-mode--3d { right: 0; top: 20%; --rail-shift: 9px; }
.hero-mode--configurator { right: 1%; top: 48%; --rail-shift: -8px; }
.hero-mode--ar { right: 0; top: 75%; --rail-shift: 5px; }
.hero-video-frame::before { top: 2%; }
.hero-scene[data-mode="ugc"] .hero-video-frame::before { left: 30%; }
.hero-scene[data-mode="ar"] .hero-video-frame::before { left: 31%; }
}
@media (min-width: 861px) and (max-height: 820px) {
.hero-product-stage { top: 47%; width: min(55vw, 690px); }
}
@media (min-width: 861px) and (max-height: 700px) {
.hero-product-stage { top: 46%; width: min(50vw, 600px); }
}
@media (max-width: 860px) {
.hero::after { background: radial-gradient(ellipse, color-mix(in srgb, var(--lime) 7%, transparent), transparent 68%); }
.hero-haze { background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 86%, transparent) 0 22%, color-mix(in srgb, var(--lime) 7%, transparent) 45%, transparent 74%); }
.hero-orbit { opacity: .5; }
.hero-mode svg { width: 38px; height: 38px; padding: 4px; }
}
.credibility { padding-block: clamp(58px, 7vw, 104px); }
.credibility-layout { display: grid; grid-template-columns: minmax(230px, .56fr) minmax(0, 1.44fr); gap: clamp(42px, 8vw, 132px); align-items: start; }
.credibility-intro h2 { max-width: 8ch; margin-top: 18px; font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .9; }
.credibility-intro > p:not(.eyebrow) { max-width: 31ch; margin-top: 22px; color: var(--muted); }
.credibility-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.credibility-note::before { width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); content: ""; }
.credibility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.credibility-item { position: relative; min-height: 222px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; transition: background-color 180ms ease; }
.credibility-item:hover { background: color-mix(in srgb, var(--surface) 66%, var(--paper)); }
.credibility-item-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.credibility-index, .credibility-status { color: var(--muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
.credibility-index { color: var(--lime); }
.credibility-item strong { display: block; margin-top: 54px; font-family: var(--display); font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -.04em; line-height: 1; }
.credibility-item > div:last-child { max-width: 31ch; }
.credibility-item > div:last-child > span { display: block; margin-top: 10px; color: var(--muted); font-size: .88rem; }
.credibility-item::after { position: absolute; right: 24px; bottom: 20px; left: 24px; height: 1px; background: linear-gradient(90deg, var(--line) 0 82%, var(--lime) 82% 100%); content: ""; }
@keyframes hero-media-resolve { 0% { opacity: .42; filter: blur(3px) grayscale(.12); transform: translateY(7px) scale(.95); } 100% { opacity: 1; filter: none; transform: translateY(0) scale(1); } }
@keyframes hero-roulette-land { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 0%, transparent); transform: translateY(0) scale(1); } 52% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--lime) 11%, transparent); transform: translateY(-1px) scale(1.04); } }
.hero-scene:not(.is-roulette):not(.is-switching):not(.is-revealing) .hero-media-visual { animation: none; }
@media (min-width: 861px) {
.hero-scene[data-mode="ar"] .hero-video-frame::before { top: 24%; left: 36%; }
}
@media (max-width: 860px) {
.credibility-layout { grid-template-columns: 1fr; gap: 34px; }
.credibility-intro h2 { max-width: 11ch; }
.credibility-intro > p:not(.eyebrow) { max-width: 52ch; }
.credibility-grid { grid-template-columns: 1fr; border-left: 0; }
.credibility-item { min-height: 190px; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-scene:not(.is-roulette):not(.is-switching):not(.is-revealing) .hero-media-visual { animation: none; }
}
.work-card { overflow: visible; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.work-card-media { border-radius: 28px 28px 96px 28px; }
.work-card-copy { padding: 20px 0 0; }
.work-card-copy li { border-radius: 999px; }
.outcome-card {
border: 1px solid rgba(244,240,231,.18);
border-radius: 24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 20px 48px rgba(0,0,0,.36);
}
.outcome-card::before { display: none; }
.outcome-card .outcome-card-label {
border-radius: 0;
box-shadow: none;
background: transparent;
color: var(--accent, #3d84ff);
}
.outcome-card-body li { border-radius: 0; }
.pack-grid { gap: 0; border-block: 1px solid var(--line); }
.pack { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; padding: 28px clamp(18px, 2vw, 30px); }
.pack:first-child { border-left: 1px solid var(--line); }
.pack--primary { border: 0; border-top: 4px solid var(--lime); border-right: 1px solid var(--line); box-shadow: none; background: color-mix(in srgb, var(--surface) 62%, transparent); }
.pack--primary:first-child { border-left: 1px solid var(--line); }
.pack-policy { border: 0; border-left: 4px solid var(--lime); background: transparent; }
.workflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 0; border-top: 1px solid var(--dark-line); }
.workflow-step { min-height: 0; padding: 28px 26px 12px 0; border: 0; border-right: 1px solid var(--dark-line); }
.workflow-step + .workflow-step { padding-left: 26px; }
.workflow-step:last-child { border-right: 0; }
.workflow-step span { display: flex; align-items: center; gap: 10px; }
.workflow-step span::before { width: 24px; height: 1px; background: var(--lime); content: ""; }
.workflow-step h3 { margin-top: 58px; max-width: 9ch; }
.workflow-step p { max-width: 27ch; }
@media (max-width: 860px) {
.workflow-grid { grid-template-columns: 1fr; }
.workflow-step, .workflow-step + .workflow-step { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--dark-line); }
.workflow-step:last-child { border-bottom: 0; }
.workflow-step h3 { margin-top: 28px; max-width: 14ch; }
.workflow-step p { max-width: 48ch; }
.pack { border-right: 0; border-bottom: 1px solid var(--line); }
.pack:first-child, .pack--primary:first-child { border-left: 0; }
.pack:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
.outcome-card { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.industry-track { width: auto; overflow-x: auto; animation: none; }
.industry-group[aria-hidden="true"] { display: none; }
.hero-scene.is-roulette .hero-media-visual,
.hero-scene.is-switching .hero-media-visual { transform: none; }
}
.hero {
min-height: 100svh;
padding-top: calc(var(--header) + clamp(34px, 4.2vw, 64px));
background:
linear-gradient(180deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 68%, var(--paper)) 7%, color-mix(in srgb, var(--dark) 12%, var(--paper)) 14%, var(--paper) 22%, var(--paper) 100%),
var(--paper);
}
.site-header {
position: fixed;
right: 0;
left: 0;
width: 100%;
border-bottom: 0;
background: transparent;
color: var(--paper);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-header .brand-mark { background: #0a0a0a; }
.site-header .menu-button { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 28%, transparent); }
.site-header .site-nav a:not(.nav-contact):hover { color: var(--lime); }
.site-header.is-scrolled {
background: color-mix(in srgb, var(--paper) 90%, transparent);
color: var(--ink);
box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.08);
backdrop-filter: blur(18px) saturate(1.08);
}
.site-header.is-scrolled .brand-mark { background: #0a0a0a; }
.site-header.is-scrolled .menu-button { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
html[data-skin="nocturne"] .hero {
min-height: 100svh;
background:
radial-gradient(ellipse 72% 52% at 50% 84%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
radial-gradient(ellipse 110% 72% at 50% 108%, color-mix(in srgb, #1d4ed8 12%, transparent), transparent 48%),
var(--paper);
}
html[data-skin="nocturne"] .site-header { background: transparent; color: var(--ink); }
html[data-skin="nocturne"] .site-header .brand-mark { background: #f4f0e7; }
html[data-skin="nocturne"] .site-header .menu-button { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
html[data-skin="nocturne"] .site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink); }
.button--lime,
.site-nav .nav-contact,
.skip-link { color: var(--accent-ink, var(--ink)); }
.placeholder-label,
.hero-meta,
.hero-input-toggle,
.hero-sound-toggle,
.hero-interaction-hint,
.hero-configurator-controls {
border-radius: 999px;
box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 10%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.08);
backdrop-filter: blur(16px) saturate(1.08);
}
.hero-source-overlay {
background-color: color-mix(in srgb, var(--surface) 34%, transparent);
-webkit-backdrop-filter: blur(12px) saturate(1.06);
backdrop-filter: blur(12px) saturate(1.06);
}
.filter-bar { gap: 22px; margin-top: 34px; border-bottom: 1px solid var(--line); }
.filter-button {
min-height: 46px;
padding: 8px 0 13px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--muted);
font-weight: 600;
transition: color 180ms ease, border-color 180ms ease;
}
.filter-button:hover { color: var(--ink); }
.filter-button[aria-pressed="true"] { border-color: var(--lime); background: transparent; color: var(--ink); }
.work-grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(18px, 2.2vw, 34px);
row-gap: clamp(34px, 5vw, 72px);
align-items: start;
}
.work-card:nth-child(1) { grid-column: 1 / span 5; margin-top: 34px; }
.work-card:nth-child(2) { grid-column: 6 / span 4; margin-top: 0; }
.work-card:nth-child(3) { grid-column: 10 / span 3; margin-top: 104px; }
.work-card-media { border-radius: 30px 30px 112px 30px; box-shadow: 0 24px 56px color-mix(in srgb, var(--ink) 12%, transparent); }
.work-card:nth-child(2) .work-card-media { border-radius: 112px 30px 30px 30px; }
.work-card:nth-child(3) .work-card-media { border-radius: 30px 112px 30px 30px; }
.work-card-media img { transform: translate3d(0, var(--work-image-shift, 0px), 0); }
.work-card:hover .work-card-media img,
.work-card:focus-within .work-card-media img { transform: translate3d(0, var(--work-image-shift, 0px), 0) scale(1.045); }
.placeholder-label { border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); background: color-mix(in srgb, var(--paper) 78%, transparent); }
.work-note { padding-inline: 0; border-block: 1px solid var(--line); border-left: 0; background: transparent; }
.studio-image-stack img {
transform: translate3d(0, var(--parallax-y, 0px), 0);
transition: transform 700ms var(--motion-ease), filter 360ms ease;
will-change: transform;
}
.studio-image-stack figure:hover img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.018); filter: saturate(1.04); }
@media (max-width: 1100px) and (min-width: 861px) {
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3) { grid-column: span 4; margin-top: 0; }
.work-card:nth-child(1) { margin-top: 26px; }
.work-card:nth-child(3) { margin-top: 72px; }
}
html.js .reveal-item {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition: opacity 620ms var(--motion-ease), transform 760ms var(--motion-ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
html.js .reveal-item[data-reveal="soft"] { transform: translate3d(0, 10px, 0); }
html.js .reveal-item[data-reveal="title"],
html.js .title-reveal {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition:
opacity 720ms var(--motion-ease),
transform 820ms var(--motion-ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
html.js .reveal-item.is-visible { opacity: 1; transform: none; }
html.js .scan-reveal { position: relative; }
html.js .scan-reveal::after { position: absolute; z-index: 2; top: 18px; left: 0; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-accent) 72%, var(--paper)), transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--hero-accent) 28%, transparent); content: ""; opacity: 0; pointer-events: none; transform: translate3d(-140%, 0, 0); }
html.js .scan-reveal.is-visible::after { animation: card-scan 1050ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms) both; }
@keyframes card-scan {
0% { opacity: 0; transform: translate3d(-140%, 0, 0); }
18% { opacity: .7; }
76% { opacity: .38; }
100% { opacity: 0; transform: translate3d(340%, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
html.js .scan-reveal:hover::after,
html.js .scan-reveal:focus-within::after { animation: card-scan 1050ms cubic-bezier(.22,.61,.36,1) both; }
}
@media (prefers-reduced-motion: reduce) {
html.js .scan-reveal::after { display: none; animation: none; }
}
@media (max-width: 860px) {
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 20px; }
.work-card,
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3) { grid-column: span 1; margin-top: 0; }
.work-card:nth-child(1) { grid-column: 1 / -1; }
.work-card-media,
.work-card:nth-child(2) .work-card-media,
.work-card:nth-child(3) .work-card-media { aspect-ratio: 1.12 / 1; border-radius: 26px 26px 78px 26px; }
.filter-bar { gap: 18px; }
}
@media (max-width: 560px) {
.work-grid { grid-template-columns: 1fr; }
.work-card,
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3) { grid-column: 1 / -1; }
.work-card-media,
.work-card:nth-child(2) .work-card-media,
.work-card:nth-child(3) .work-card-media { aspect-ratio: 1.18 / 1; border-radius: 24px 24px 64px 24px; }
}
@media (max-width: 860px) {
.hero { min-height: 100svh; padding-top: calc(var(--header) + 30px); }
}
@media (prefers-reduced-motion: reduce) {
html.js .reveal-item,
html.js .title-reveal {
opacity: 1;
transform: none;
transition: none;
}
.studio-image-stack img,
.studio-image-stack figure:hover img { transform: none; transition: none; }
}
.hero { background: var(--paper); }
.hero::before { opacity: .055; }
.site-header { color: var(--ink); }
.site-header .brand-mark { background: #0a0a0a; overflow: visible; border-radius: 0; }
.site-header .menu-button { color: var(--ink); }
html[data-skin="nocturne"] .site-header { color: var(--ink); }
html[data-skin="nocturne"] .hero { background: var(--paper); }
.hero::before { z-index: 0; }
.hero-grid { z-index: 2; }
.hero-particles { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: .56; mix-blend-mode: multiply; pointer-events: none; transition: opacity 480ms ease; }
html[data-skin="nocturne"] .hero-particles { opacity: .72; mix-blend-mode: screen; }
.section--dark#studio { position: relative; isolation: isolate; overflow: clip; }
.section--dark#studio::before,
.section--dark#studio::after { position: absolute; inset: -18% -10%; content: ""; pointer-events: none; }
.section--dark#studio::before {
z-index: -2;
background:
radial-gradient(ellipse at 18% 32%, color-mix(in srgb, var(--lime) 25%, transparent), transparent 42%),
radial-gradient(ellipse at 78% 62%, color-mix(in srgb, var(--surface) 66%, transparent), transparent 48%),
radial-gradient(ellipse at 52% 110%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 42%);
filter: blur(34px) saturate(1.12);
opacity: .64;
transform: translate3d(-2%, 1%, 0) scale(1.06);
animation: studio-shader-drift 18s ease-in-out infinite alternate;
}
.section--dark#studio::after {
z-index: -1;
inset: 4% -12% 6%;
background: conic-gradient(from 205deg at 48% 50%, transparent 0 22%, color-mix(in srgb, var(--lime) 18%, transparent) 31%, transparent 42% 66%, color-mix(in srgb, var(--surface) 34%, transparent) 73%, transparent 84% 100%);
filter: blur(24px);
opacity: .34;
mix-blend-mode: screen;
mask-image: radial-gradient(ellipse at center, #000 0 42%, rgba(0,0,0,.7) 60%, transparent 86%);
animation: studio-shader-turn 26s linear infinite;
}
.section--dark#studio > .container { position: relative; z-index: 1; }
@keyframes studio-shader-drift { from { transform: translate3d(-2%, 1%, 0) scale(1.06); } to { transform: translate3d(2%, -2%, 0) scale(1.12); } }
@keyframes studio-shader-turn { to { transform: rotate(360deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
.section--dark#studio::before,
.section--dark#studio::after { animation: none; }
}
@media (min-width: 861px) {
.hero .hero-actions { bottom: 24px; }
.hero-meta { left: 11%; top: 4%; }
.hero-utility { right: 11%; top: 4%; }
.hero-mode { width: clamp(126px, 12vw, 176px); min-height: 86px; color: color-mix(in srgb, var(--hero-accent) 62%, var(--muted)); transform: rotate(var(--hero-tilt, 0deg)); }
.hero-mode svg { width: 42px; height: 42px; padding: 5px; border: 1px solid color-mix(in srgb, var(--hero-accent) 42%, transparent); color: var(--hero-accent); }
.hero-mode::after { display: none; }
.hero-mode::before { width: 7px; height: 7px; background: var(--hero-accent); }
.hero-mode:hover,
.hero-mode:focus-visible,
.hero-mode[aria-checked="true"] { color: var(--ink); transform: rotate(var(--hero-tilt, 0deg)); }
.hero-mode:hover svg { transform: scale(1.03); }
.hero-mode[aria-checked="true"] svg { border-color: var(--hero-accent); transform: scale(1.08); }
.hero-mode--video { left: 14%; top: 18%; --hero-tilt: -5deg; }
.hero-mode--ugc { left: 7%; top: 47%; --hero-tilt: -2deg; }
.hero-mode--imagery { left: 17%; top: 75%; --hero-tilt: 5deg; }
.hero-mode--3d { right: 14%; top: 18%; --hero-tilt: 5deg; }
.hero-mode--configurator { right: 7%; top: 47%; --hero-tilt: 2deg; }
.hero-mode--ar { right: 17%; top: 75%; --hero-tilt: -5deg; }
.hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: rotate(var(--hero-tilt, 0deg)) scale(1.055); }
}
@media (max-width: 860px) {
.hero-meta { left: 0; top: 0; }
.hero-utility { right: 0; top: 0; }
.hero-mode svg { width: 34px; height: 34px; color: var(--hero-accent); }
.hero-mode::after { display: none; }
}
@media (min-width: 861px) {
.hero-product-stage { width: min(52vw, 660px); }
.hero-viewfinder { width: min(27vw, 330px); }
.hero-mode {
width: clamp(118px, 11vw, 150px);
min-height: 76px;
color: #171717;
transform: none;
}
.hero-mode svg {
width: 38px;
height: 38px;
color: #171717;
border-color: color-mix(in srgb, #171717 38%, transparent);
}
.hero-mode::before { background: #171717; }
.hero-mode::after { display: none !important; }
.hero-mode:hover,
.hero-mode:focus-visible,
.hero-mode[aria-checked="true"] { color: #171717; transform: none; }
.hero-mode:hover svg { transform: translateY(-1px) scale(1.04); }
.hero-mode[aria-checked="true"] svg { transform: scale(1.08); }
.hero-mode[aria-checked="true"]::before {
background: color-mix(in srgb, var(--accent) 62%, #8a919b);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: scale(1.035); }
.hero-mode--video,
.hero-mode--ugc,
.hero-mode--imagery { left: 1.5%; }
.hero-mode--video { top: 18%; }
.hero-mode--ugc { top: 48%; }
.hero-mode--imagery { top: 78%; }
.hero-mode--3d,
.hero-mode--configurator,
.hero-mode--ar { right: 1.5%; }
.hero-mode--3d { top: 18%; }
.hero-mode--configurator { top: 48%; }
.hero-mode--ar { top: 78%; }
}
@media (min-width: 861px) {
html[data-skin="nocturne"] .hero-mode,
html[data-skin="nocturne"] .hero-mode:hover,
html[data-skin="nocturne"] .hero-mode:focus-visible,
html[data-skin="nocturne"] .hero-mode[aria-checked="true"] { color: var(--ink); }
html[data-skin="nocturne"] .hero-mode svg { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 36%, transparent); }
html[data-skin="nocturne"] .hero-mode::before { background: var(--ink); }
html[data-skin="nocturne"] .hero-mode[aria-checked="true"]::before {
background: #f8fafc;
box-shadow: 0 0 0 4px color-mix(in srgb, #f8fafc 28%, transparent);
}
.hero-mode:focus-visible svg { outline-color: color-mix(in srgb, currentColor 72%, transparent); }
}
@media (max-width: 860px) {
.hero-product-stage { width: min(96%, 620px); }
}
.hero-video-frame video {
-webkit-mask-image: none;
mask-image: none;
}
.hero-scene[data-mode="ugc"] .hero-video-frame video,
.hero-scene[data-mode="ar"] .hero-video-frame video {
border: 0;
border-radius: 0;
-webkit-mask-image: none;
mask-image: none;
}
.hero-mode:focus-visible { outline: 0; }
.hero-mode:focus { outline: 0; box-shadow: none; }
.hero-mode:focus-visible svg { outline: 2px solid color-mix(in srgb, var(--hero-accent) 72%, transparent); outline-offset: 5px; }
.theme-control { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.theme-control > span { margin-right: 4px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.theme-control button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font-family: var(--mono); font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
.theme-control button:hover,
.theme-control button:focus-visible { border-color: var(--ink); }
.theme-control button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
html[data-skin="nocturne"] .theme-control button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 700px) {
.theme-control { width: 100%; margin-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
}
.hero-copy {
opacity: var(--hero-copy-opacity, 1);
filter: blur(var(--hero-copy-blur, 0px));
transform: translate3d(0, var(--hero-copy-y, 0px), 0);
will-change: opacity, filter, transform;
}
.hero-scene.is-resolving .hero-product-stage { opacity: .22; filter: blur(6px) grayscale(.16); }
.hero-scene.is-switching .hero-media-visual { opacity: .34; filter: blur(3px) saturate(.76); transform: scale(.92); }
.hero-scene.is-resolving .hero-media-visual {
opacity: .08;
filter: blur(7px) grayscale(.16);
transform: translateY(9px) scale(.54);
transition-duration: 220ms, 420ms, 420ms;
}
.hero-scene.is-resolving .hero-roulette-loader { opacity: .22; transform: translate(-50%, -50%) scale(.94); }
.hero-scene.is-resolving .hero-roulette-loader-label { opacity: 0; transition: opacity 180ms ease; }
.hero-scene.is-revealing .hero-media-visual { animation: hero-media-resolve 920ms cubic-bezier(.16,1,.3,1) both; }
@keyframes hero-media-resolve {
0% { opacity: .08; filter: blur(7px) grayscale(.16); transform: translateY(9px) scale(.54); }
62% { opacity: .92; filter: blur(1.6px) grayscale(.035); transform: translateY(-2px) scale(1.018); }
100% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}
.credibility,
.client-proof,
#work,
#packs,
#process { position: relative; isolation: isolate; overflow: clip; }
.credibility > .container,
.client-proof > .container,
#work > .container,
#packs > .container,
#process > .container { position: relative; z-index: 1; }
.credibility .section-shader { opacity: .12; mix-blend-mode: multiply; }
.client-proof .section-shader { opacity: .16; mix-blend-mode: screen; }
#work .section-shader,
#packs .section-shader { opacity: .1; }
#process .section-shader { opacity: .2; mix-blend-mode: screen; }
.client-proof-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(42px, 8vw, 128px); align-items: center; }
.client-proof-head { display: block; padding: 0; border: 0; }
.client-proof-head h2 { max-width: 12ch; margin-top: 18px; }
.client-proof-head > p { margin-top: 20px; }
.client-review-stage { position: relative; min-height: 172px; margin-top: 38px; }
.client-review { position: absolute; inset: 0; min-height: 0; display: flex; padding: 0; border: 0; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 600ms ease, transform 760ms var(--motion-ease); pointer-events: none; }
.client-review.is-active { opacity: 1; transform: none; pointer-events: auto; }
html.js .client-review.reveal-item:not(.is-active) { opacity: 0; transform: translate3d(0, 18px, 0); }
html.js .client-review.reveal-item.is-active { opacity: 1; transform: none; }
.client-review blockquote { max-width: 22ch; font-size: clamp(1.35rem, 2.25vw, 2rem); }
.client-review footer { margin-top: auto; }
.client-review-controls { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.client-review-status { display: flex; min-width: 112px; align-items: center; gap: 9px; margin: 0; color: color-mix(in srgb, var(--paper) 64%, transparent); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.client-review-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); content: ""; }
.client-review-control { display: inline-grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent); border-radius: 50%; background: transparent; color: var(--paper); font-size: .9rem; line-height: 1; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.client-review-control:hover,
.client-review-control:focus-visible { background: var(--paper); color: var(--dark); }
.client-review-control:active { transform: scale(.94); }
.client-logo-rail { min-width: 0; display: grid; gap: 12px; }
.client-logo-rail-label { color: color-mix(in srgb, var(--paper) 62%, transparent); font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.client-logo-row { position: relative; overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--paper) 19%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.client-logo-track { display: flex; width: max-content; align-items: center; animation: client-logo-run 30s linear infinite; }
.client-logo-track--reverse { animation-direction: reverse; animation-duration: 34s; }
.client-logo-pill { display: inline-flex; min-height: 70px; align-items: center; padding: 0 26px; color: color-mix(in srgb, var(--paper) 88%, transparent); font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.85rem); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.client-logo-pill::after { width: 7px; height: 7px; margin-left: 26px; border-radius: 50%; background: var(--lime); content: ""; }
@keyframes client-logo-run { to { transform: translateX(-50%); } }
.site-footer { padding-block: clamp(28px, 5vw, 64px); background: var(--paper); }
.footer-shell { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 70px); border-radius: 32px; background: var(--dark); color: var(--paper); box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 12%, transparent); }
.footer-grid { position: relative; z-index: 1; grid-template-columns: minmax(190px, .78fr) minmax(220px, 1.25fr) repeat(3, minmax(100px, .48fr)); gap: clamp(22px, 4vw, 64px); padding-bottom: 52px; border-bottom: 1px solid var(--dark-line); }
.footer-intro .brand { color: var(--paper); }
.footer-intro .brand-mark { background: var(--paper); }
.footer-intro .brand-mark::after { background: var(--lime); }
.footer-intro h2 { max-width: 13ch; margin-top: clamp(70px, 10vw, 170px); color: var(--paper); font-size: clamp(2rem, 3.1vw, 3.35rem); }
.footer-intro p { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.footer-simulation { position: relative; min-height: 270px; overflow: hidden; border-radius: 26px; background: color-mix(in srgb, var(--dark-2) 74%, transparent); }
.footer-simulation .section-shader { opacity: .9; mix-blend-mode: screen; }
.footer-simulation::before { position: absolute; z-index: 1; left: 22px; top: 20px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--paper) 72%, transparent); content: "Motion field"; font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
.footer-simulation::after { position: absolute; z-index: 1; right: 22px; bottom: 20px; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); border-radius: 50%; box-shadow: 0 0 0 9px color-mix(in srgb, var(--paper) 6%, transparent); content: ""; }
.footer-shell .footer-col h3 { color: color-mix(in srgb, var(--paper) 76%, transparent); }
.footer-shell .footer-col ul { color: color-mix(in srgb, var(--paper) 66%, transparent); }
.footer-shell .footer-col a:hover { color: var(--paper); }
.footer-bottom { position: relative; z-index: 1; border: 0; color: color-mix(in srgb, var(--paper) 58%, transparent); }
.footer-shell .theme-control > span { color: color-mix(in srgb, var(--paper) 58%, transparent); }
.footer-shell .theme-control button { border-color: color-mix(in srgb, var(--paper) 24%, transparent); }
.footer-shell .theme-control button:hover,
.footer-shell .theme-control button:focus-visible { border-color: var(--paper); }
.pack-grid { gap: clamp(14px, 1.8vw, 24px); border: 0; }
.pack {
position: relative;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 26px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: blur(16px);
box-shadow: 0 18px 42px -8px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms ease;
}
.pack:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
box-shadow: 0 28px 60px -12px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.pack:first-child,
.pack--primary:first-child { border-left: 1px solid var(--line); }
.pack--primary {
border-color: var(--accent);
border-top-width: 3px;
box-shadow: 0 24px 60px -10px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pack--primary::before {
position: absolute;
top: 0;
right: 24px;
padding: 4px 10px;
border-radius: 0 0 10px 10px;
background: var(--accent);
color: #ffffff;
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
content: "Popular";
}
.credibility-item { border-radius: 22px; }
.button,
.filter-button { border-radius: 999px; }
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.footer-intro,
.footer-simulation { grid-column: 1 / -1; }
.footer-intro h2 { margin-top: 48px; }
}
@media (max-width: 860px) {
.client-proof-layout { grid-template-columns: 1fr; gap: 44px; }
.client-review-stage { min-height: 156px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-simulation { min-height: 230px; }
}
@media (max-width: 560px) {
.footer-shell { padding: 24px 20px; border-radius: 24px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }
.footer-intro,
.footer-simulation { grid-column: auto; }
.footer-intro h2 { margin-top: 44px; }
.footer-bottom { display: grid; }
.client-logo-pill { min-height: 58px; padding-inline: 18px; font-size: 1.12rem; }
.client-logo-pill::after { margin-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.client-logo-track { animation: none; }
.hero-roulette-loader::before { animation: none; }
.hero-copy { filter: none; transform: none; transition: none; }
.hero-scene.is-resolving .hero-media-visual,
.hero-scene.is-revealing .hero-media-visual { animation: none; transition: none; }
}
.site-header {
height: calc(var(--header) + 16px);
padding-top: 8px;
pointer-events: none;
}
.header-inner {
position: relative;
isolation: isolate;
width: calc(100% - 2 * var(--gutter));
max-width: calc(var(--max) + 2 * var(--gutter));
margin-inline: auto;
height: 56px;
padding-inline: 12px 10px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 999px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--paper) 66%, transparent), color-mix(in srgb, var(--surface) 30%, transparent)),
color-mix(in srgb, var(--paper) 38%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--paper) 40%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
0 16px 40px color-mix(in srgb, var(--ink) 8%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.24);
backdrop-filter: blur(22px) saturate(1.24);
pointer-events: auto;
transition: background 260ms var(--motion-ease), border-color 260ms var(--motion-ease), box-shadow 260ms var(--motion-ease);
}
.header-inner::before,
.header-inner::after {
position: absolute;
inset: 0;
border-radius: inherit;
content: "";
pointer-events: none;
}
.header-inner::before {
z-index: -1;
background:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--paper) 52%, transparent), transparent 35%),
linear-gradient(90deg, color-mix(in srgb, var(--paper) 12%, transparent), transparent 44%, color-mix(in srgb, var(--paper) 10%, transparent));
}
.header-inner::after {
inset: 1px;
border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.site-header.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }
.site-header.is-scrolled .header-inner {
border-color: color-mix(in srgb, var(--ink) 18%, transparent);
background:
linear-gradient(135deg, color-mix(in srgb, var(--paper) 68%, transparent), color-mix(in srgb, var(--surface) 38%, transparent)),
color-mix(in srgb, var(--paper) 54%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--paper) 42%, transparent),
0 14px 36px color-mix(in srgb, var(--ink) 12%, transparent);
-webkit-backdrop-filter: blur(24px) saturate(1.16);
backdrop-filter: blur(24px) saturate(1.16);
}
.site-header .brand,
.site-header .site-nav,
.site-header .menu-button { position: relative; z-index: 1; }
.site-header .brand-mark { overflow: visible; border-radius: 0; }
.site-header .site-nav a {
border-radius: 999px;
transition: background-color 220ms var(--motion-ease), color 220ms var(--motion-ease), transform 220ms var(--motion-ease);
}
.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible,
.site-header .site-nav a[aria-current="location"] {
background: color-mix(in srgb, var(--paper) 30%, transparent);
text-decoration: none;
}
.site-header .site-nav .nav-contact {
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 28%, transparent);
}
.site-header .menu-button { border-radius: 999px; transition: background-color 220ms var(--motion-ease), transform 220ms var(--motion-ease); }
.site-header .menu-button:hover,
.site-header .menu-button:focus-visible { background: color-mix(in srgb, var(--paper) 26%, transparent); }
.site-header .site-nav a:active,
.site-header .menu-button:active { transform: translateY(1px) scale(.985); }
.spotlight-surface {
position: relative;
isolation: isolate;
transition: transform 320ms var(--motion-ease), background-color 260ms var(--motion-ease), box-shadow 320ms var(--motion-ease);
}
.spotlight-surface::before {
position: absolute;
z-index: 0;
inset: 0;
border-radius: inherit;
background: radial-gradient(210px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), color-mix(in srgb, var(--paper) 22%, transparent), transparent 72%);
content: "";
opacity: 0;
pointer-events: none;
transition: opacity 260ms ease;
}
.spotlight-surface > * { position: relative; z-index: 1; }
.spotlight-surface:hover::before,
.spotlight-surface:focus-within::before { opacity: .72; }
.credibility-item:hover,
.pack:hover,
.work-card:hover { transform: translateY(-5px); }
.credibility-item:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--ink) 9%, transparent); }
.pack:hover { box-shadow: 0 22px 46px color-mix(in srgb, var(--ink) 11%, transparent); }
.work-card:hover .work-card-media { box-shadow: 0 30px 68px color-mix(in srgb, var(--ink) 16%, transparent); }
.workflow-step,
.studio-service { border-radius: 20px; transition: transform 320ms var(--motion-ease), background-color 260ms var(--motion-ease), box-shadow 320ms var(--motion-ease); }
.workflow-step:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--paper) 6%, transparent); box-shadow: 0 18px 38px color-mix(in srgb, var(--paper) 6%, transparent); }
.studio-service:hover { transform: translateX(8px); background: color-mix(in srgb, var(--paper) 7%, transparent); }
.studio-service {
width: 100%;
padding: 17px 16px;
border: 0;
border-bottom: 1px solid var(--dark-line);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
}
.studio-service[aria-pressed="true"] {
background: color-mix(in srgb, var(--paper) 8%, transparent);
box-shadow: inset 3px 0 0 var(--lime);
}
.studio-service[aria-pressed="true"] strong { color: var(--lime); }
.studio-service-status {
max-width: 42ch;
margin-top: 14px;
padding-inline: 16px;
color: color-mix(in srgb, var(--paper) 62%, transparent);
font-family: var(--mono);
font-size: .61rem;
letter-spacing: .08em;
line-height: 1.6;
text-transform: uppercase;
}
.studio-variants { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 18px 16px 0; color: color-mix(in srgb, var(--paper) 58%, transparent); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.studio-variant { width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--paper) 32%, transparent); border-radius: 50%; background: var(--variant); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dark) 24%, transparent); transition: transform 180ms ease, box-shadow 180ms ease; }
.studio-variant:hover,
.studio-variant:focus-visible { transform: scale(1.12); }
.studio-variant[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--dark), 0 0 0 4px var(--lime); }
.studio-image-stack figure[data-studio-visual] {
opacity: .62;
transition: opacity 360ms var(--motion-ease), transform 420ms var(--motion-ease), filter 360ms ease;
}
.studio-image-stack figure[data-studio-visual].is-service-focus {
opacity: 1;
filter: saturate(1.04);
transform: translateY(-4px);
}
.studio-image-stack figure[data-studio-visual="master"] { min-height: 100%; }
.studio-model-viewer { position: absolute; z-index: 1; inset: 4% 3% 5%; width: 94%; height: 91%; opacity: 0; border-radius: 26px 26px 112px 26px; background: transparent; --poster-color: transparent; pointer-events: none; transition: opacity 720ms var(--motion-ease); }
.studio-image-stack figure[data-studio-visual="master"].is-model-ready .studio-model-viewer { opacity: 1; pointer-events: auto; }
.studio-image-stack figure[data-studio-visual="master"].is-model-ready > img { opacity: .18; filter: blur(2px); }
.studio-image-stack figure[data-studio-visual="master"].is-model-ready figcaption { z-index: 2; }
.studio-model-viewer::part(default-progress-bar) { background: var(--lime); }
.client-review[aria-hidden="true"] { visibility: hidden; }
.site-nav .nav-contact,
.skip-link,
.pack .button { border-color: var(--action); background: var(--action); color: var(--action-ink); }
.site-nav .nav-contact:hover,
.site-nav .nav-contact:focus-visible {
border-color: var(--cta-hover, #3357d7);
background: var(--cta-hover, #3357d7);
color: var(--action-ink);
box-shadow: none;
filter: none;
}
.pack .button:hover,
.pack .button:focus-visible { border-color: var(--action-hover); background: var(--action-hover); color: var(--action-ink); }
.hero-mode { color: var(--ink); }
.hero-mode svg { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.hero-mode::before { background: var(--ink); }
.hero-mode:hover svg,
.hero-mode:focus-visible svg { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--ink); }
.hero-mode[aria-checked="true"] { background: transparent; color: var(--ink); }
.hero-mode[aria-checked="true"] svg { border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); }
.hero-mode[aria-checked="true"]::before { background: color-mix(in srgb, var(--accent) 62%, #8a919b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
.filter-button[aria-pressed="true"] { border-color: var(--action); color: var(--action); }
.outcome-jump[aria-current="step"] {
background: transparent;
color: var(--dark-ink, var(--paper));
}
.outcome-jump[aria-current="step"] strong {
box-shadow: inset 0 -2px 0 var(--accent, var(--lime));
}
.outcome-card .outcome-card-label {
border: 0;
border-radius: 0;
background: transparent;
color: var(--accent, #3d84ff);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.studio-service[aria-pressed="true"] { background: color-mix(in srgb, var(--action) 18%, transparent); box-shadow: inset 3px 0 0 var(--action); }
.studio-service[aria-pressed="true"] strong { color: var(--action); }
.studio-variant[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--dark), 0 0 0 4px var(--action); }
.theme-control button[aria-pressed="true"] { border-color: var(--action); background: var(--action); color: var(--action-ink); }
@media (min-width: 861px) and (max-height: 820px) {
.hero-product-stage { top: 48%; width: min(50vw, 620px); }
}
.button:active,
.filter-button:active,
.hero-mode:active { transform: translateY(1px) scale(.985); }
.outcome-tour,
.section--dark { color: var(--dark-ink); }
.section--dark .eyebrow,
.section--dark .muted { color: color-mix(in srgb, var(--dark-ink) 68%, transparent); }
.studio-image-stack figcaption { color: var(--dark-ink); }
.client-review-status { color: color-mix(in srgb, var(--proof-ink) 64%, transparent); }
.client-review-control { border-color: color-mix(in srgb, var(--proof-ink) 26%, transparent); color: var(--proof-ink); }
.client-review-control:hover,
.client-review-control:focus-visible { background: var(--proof-ink); color: var(--proof-bg); }
.footer-shell { color: var(--dark-ink); }
.footer-intro .brand,
.footer-intro h2 { color: var(--dark-ink); }
.footer-intro .brand-mark { background: var(--dark-ink); }
.footer-intro p { color: color-mix(in srgb, var(--dark-ink) 62%, transparent); }
.footer-simulation::before { border-color: color-mix(in srgb, var(--dark-ink) 22%, transparent); color: color-mix(in srgb, var(--dark-ink) 72%, transparent); }
.footer-simulation::after { border-color: color-mix(in srgb, var(--dark-ink) 30%, transparent); box-shadow: 0 0 0 9px color-mix(in srgb, var(--dark-ink) 6%, transparent); }
.footer-shell .footer-col h3 { color: color-mix(in srgb, var(--dark-ink) 76%, transparent); }
.footer-shell .footer-col ul { color: color-mix(in srgb, var(--dark-ink) 66%, transparent); }
.footer-shell .footer-col a:hover { color: var(--dark-ink); }
.footer-bottom,
.footer-shell .theme-control > span { color: color-mix(in srgb, var(--dark-ink) 58%, transparent); }
.footer-shell .theme-control button { border-color: color-mix(in srgb, var(--dark-ink) 24%, transparent); }
.footer-shell .theme-control button:hover,
.footer-shell .theme-control button:focus-visible { border-color: var(--dark-ink); }
.hero-particles { opacity: .64; mix-blend-mode: normal; }
.global-shader-field { opacity: .24; mix-blend-mode: soft-light; }
.credibility-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; border: 0; padding: 12px 14px 18px; }
.credibility-grid::before { position: absolute; z-index: 0; inset: 32px 13% 30px; border: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%; content: ""; pointer-events: none; }
.credibility-grid::after { position: absolute; z-index: 0; top: 19%; bottom: 17%; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 30%, transparent) 0 3px, transparent 3px 9px); content: ""; opacity: .6; pointer-events: none; }
.credibility-item { z-index: 1; min-height: 238px; gap: 18px; padding: 20px 20px 22px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 24px 24px 54px 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 84%, transparent), color-mix(in srgb, var(--paper) 58%, transparent)); box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 62%, transparent); transition: transform 320ms var(--motion-ease), box-shadow 320ms var(--motion-ease), background-color 260ms ease; }
.credibility-item:nth-of-type(2) { margin-top: 42px; }
.credibility-item:nth-of-type(3) { margin-top: 8px; }
.credibility-item:nth-of-type(4) { margin-top: 54px; }
.credibility-item:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--paper) 72%, transparent)); box-shadow: 0 24px 54px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, transparent); transform: translateY(-5px); }
.credibility-item:nth-of-type(2):hover { transform: translateY(37px); }
.credibility-item:nth-of-type(3):hover { transform: translateY(3px); }
.credibility-item:nth-of-type(4):hover { transform: translateY(49px); }
.credibility-item::before { position: absolute; z-index: 3; left: -10px; top: 50%; width: 18px; height: 18px; border: 1px solid var(--action); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--action) 15%, transparent); content: attr(data-node); transform: translateY(-50%); }
.credibility-item::after { right: 20px; bottom: 18px; left: 20px; background: linear-gradient(90deg, color-mix(in srgb, var(--line) 72%, transparent) 0 72%, var(--action) 72% 100%); }
.credibility-item-head { position: relative; z-index: 2; }
.credibility-index { color: var(--action); }
.credibility-item-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; align-items: end; max-width: none !important; min-height: 128px; }
.credibility-item strong { margin-top: 0; font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.02; }
.credibility-item-content > div:first-child > span { display: block; margin-top: 9px; color: var(--muted); font-size: .82rem; line-height: 1.42; }
.standard-media { position: relative; min-width: 0; aspect-ratio: 1.08; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 18px 18px 38px 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 56%, transparent); }
.standard-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.98); transition: transform 600ms var(--motion-ease), filter 360ms ease; }
.credibility-item:hover .standard-media img { filter: saturate(1) contrast(1.02); transform: scale(1.045); }
.standard-media--product img { object-position: 58% 56%; }
.standard-media--industrial img { object-position: 50% 50%; }
.standard-media--cad img { object-position: 54% 45%; }
.standard-media-tag { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink); font-family: var(--mono); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }
.standard-media--files { display: grid; align-content: center; gap: 9px; padding: 12px; }
.standard-file-line { display: flex; align-items: center; gap: 6px; }
.standard-file-line i { width: 9px; height: 11px; border: 1px solid var(--action); border-radius: 2px; background: color-mix(in srgb, var(--action) 12%, transparent); }
.standard-file-line b { display: block; width: 60%; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.standard-file-line:nth-child(2) b { width: 80%; }
.standard-file-line:nth-child(3) b { width: 52%; }
.standard-file-line:nth-child(4) b { width: 68%; }
@media (max-width: 860px) {
.credibility-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 0 4px 12px; }
.credibility-grid::before { inset: 24px 9% 24px 4%; border-radius: 50%; }
.credibility-grid::after { top: 8%; bottom: 8%; left: 3px; }
.credibility-item,
.credibility-item:nth-of-type(2),
.credibility-item:nth-of-type(3),
.credibility-item:nth-of-type(4) { margin-top: 0; }
.credibility-item:hover,
.credibility-item:nth-of-type(2):hover,
.credibility-item:nth-of-type(3):hover,
.credibility-item:nth-of-type(4):hover { transform: translateY(-3px); }
.credibility-item::before { left: -18px; }
}
@media (max-width: 560px) {
.credibility-item { min-height: 212px; padding: 18px 16px 20px; border-radius: 20px 20px 42px 20px; }
.credibility-item-content { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; min-height: 116px; }
.credibility-item-content > div:first-child > span { font-size: .78rem; }
.standard-media { border-radius: 14px 14px 30px 14px; }
.credibility-grid::before { inset: 18px 5% 18px 2%; }
}
.client-proof-shell { position: relative; z-index: 1; }
.client-proof-shell > .client-logo-rail { gap: 10px; margin-bottom: clamp(26px, 4vw, 48px); }
.client-logo-rail-label { color: color-mix(in srgb, var(--proof-ink) 62%, transparent); }
.client-logo-row { border-color: color-mix(in srgb, var(--proof-ink) 19%, transparent); }
.client-logo-pill { color: color-mix(in srgb, var(--proof-ink) 88%, transparent); }
.client-review-showcase { position: relative; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); min-height: 448px; padding: clamp(18px, 2vw, 26px); border: 1px solid color-mix(in srgb, var(--proof-ink) 18%, transparent); border-radius: 32px 32px 120px 32px; background: linear-gradient(135deg, color-mix(in srgb, var(--proof-surface) 92%, transparent), color-mix(in srgb, var(--proof-bg) 82%, transparent)); box-shadow: 0 26px 70px color-mix(in srgb, var(--proof-ink) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--proof-ink) 16%, transparent); overflow: hidden; }
.client-review-showcase::before { position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 12% 25%, color-mix(in srgb, var(--hero-accent) 19%, transparent), transparent 34%), linear-gradient(115deg, transparent 0 48%, color-mix(in srgb, var(--proof-ink) 4%, transparent) 49%, transparent 50%); content: ""; pointer-events: none; }
.client-review-visual { position: relative; z-index: 1; min-height: 400px; overflow: hidden; border-radius: 24px 24px 88px 24px; background: color-mix(in srgb, var(--proof-surface) 80%, transparent); }
.client-review-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--proof-bg) 76%, transparent) 100%); content: ""; pointer-events: none; }
.client-review-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.04); opacity: .88; transform: scale(1.02); transition: transform 900ms var(--motion-ease), filter 500ms ease; }
.client-review-showcase:hover .client-review-visual img { filter: saturate(.92) contrast(1.06); transform: scale(1.055); }
.client-review-visual span { position: absolute; z-index: 2; left: 22px; bottom: 20px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--proof-ink) 22%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--proof-ink) 78%, transparent); font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
.client-review-showcase .client-proof-copy { position: relative; z-index: 1; align-self: center; padding: clamp(12px, 2vw, 26px) clamp(8px, 2vw, 22px) clamp(22px, 3vw, 40px) 0; }
.client-review-showcase .client-proof-head { align-items: start; border-bottom: 0; padding-bottom: 0; }
.client-review-showcase .client-proof-head h2 { max-width: 12ch; margin-top: 16px; font-size: clamp(2.25rem, 4.2vw, 4.6rem); line-height: .93; }
.client-review-showcase .client-proof-head > p:last-child { max-width: 36ch; margin-top: 18px; color: color-mix(in srgb, var(--proof-ink) 66%, transparent); }
.client-review-showcase .client-review-stage { min-height: 166px; margin-top: 34px; }
.client-review-showcase .client-review blockquote { max-width: 22ch; font-size: clamp(1.5rem, 2.6vw, 2.45rem); line-height: 1.04; }
.client-review-showcase .client-review footer { color: color-mix(in srgb, var(--proof-ink) 66%, transparent); }
.client-review-showcase .client-review strong { color: var(--proof-ink); }
.client-review-showcase .client-review-controls { margin-top: 16px; }
.client-review-showcase .client-review-control { width: 36px; height: 36px; }
.client-review-showcase .client-review-status { color: color-mix(in srgb, var(--proof-ink) 62%, transparent); }
@media (max-width: 860px) {
.client-review-showcase { grid-template-columns: 1fr; gap: 22px; min-height: 0; border-radius: 26px 26px 82px 26px; }
.client-review-visual { min-height: 260px; max-height: 360px; border-radius: 20px 20px 66px 20px; }
.client-review-showcase .client-proof-copy { padding: 10px 8px 24px; }
.client-review-showcase .client-proof-head h2 { max-width: 14ch; }
}
@media (max-width: 560px) {
.client-proof-shell > .client-logo-rail { margin-bottom: 22px; }
.client-logo-pill { min-height: 54px; padding-inline: 18px; font-size: 1.05rem; }
.client-logo-pill::after { width: 6px; height: 6px; margin-left: 18px; }
.client-review-showcase { padding: 12px; }
.client-review-visual { min-height: 224px; }
.client-review-showcase .client-proof-head h2 { font-size: clamp(2.15rem, 11vw, 3.15rem); }
.client-review-showcase .client-review-stage { min-height: 194px; margin-top: 28px; }
}
.work-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
padding-top: clamp(24px, 3.5vw, 44px);
margin-bottom: clamp(20px, 3vw, 36px);
border-top: 0;
}
.work-head-title h2 {
max-width: 28ch;
margin-top: 12px;
font-size: clamp(2.4rem, 4.8vw, 4.4rem);
line-height: 1.04;
letter-spacing: -0.04em;
}
.work-head-side {
display: flex;
align-items: flex-end;
padding-bottom: 4px;
}
.work-head-side .filter-bar {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 90%, transparent);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
margin-top: 0;
}
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(158px, 1fr); gap: 14px; margin-top: clamp(30px, 4vw, 48px); }
.work-card,
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3),
.work-card:nth-child(4),
.work-card:nth-child(5),
.work-card:nth-child(6) { position: relative; min-width: 0; min-height: 176px; grid-column: auto; grid-row: auto; margin-top: 0; overflow: hidden; border: 0; border-radius: 26px 26px 72px 26px; background: var(--dark); box-shadow: 0 20px 46px color-mix(in srgb, var(--ink) 10%, transparent); transition: transform 320ms var(--motion-ease), box-shadow 320ms var(--motion-ease); }
.work-card:nth-child(1) { grid-column: 1; grid-row: span 2; min-height: 348px; }
.work-card:nth-child(2) { grid-column: 2; grid-row: span 1; }
.work-card:nth-child(3) { grid-column: 3 / span 2; grid-row: span 1; }
.work-card:nth-child(4) { grid-column: 2; grid-row: span 1; }
.work-card:nth-child(5) { grid-column: 3; grid-row: span 1; }
.work-card:nth-child(6) { grid-column: 4; grid-row: span 1; }
.work-card::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--dark) 10%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--dark) 86%, transparent) 100%); content: ""; pointer-events: none; }
.work-card-media,
.work-card:nth-child(2) .work-card-media,
.work-card:nth-child(3) .work-card-media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: inherit; background: var(--dark); box-shadow: none; }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04); transition: transform 700ms var(--motion-ease), filter 420ms ease; }
.work-card:hover,
.work-card:focus-within { transform: translateY(-5px); box-shadow: 0 28px 60px color-mix(in srgb, var(--ink) 16%, transparent); }
.work-card:hover .work-card-media img,
.work-card:focus-within .work-card-media img { filter: saturate(1) contrast(1.06); transform: scale(1.045); }
.work-card-copy { position: absolute; z-index: 2; right: 16px; bottom: 16px; left: 16px; padding: 0; color: var(--dark-ink); }
.work-card-copy h3 { max-width: 15ch; color: var(--dark-ink); font-size: clamp(1.15rem, 1.8vw, 1.7rem); line-height: 1; }
.work-card-copy p { max-height: 0; margin: 0; overflow: hidden; color: color-mix(in srgb, var(--dark-ink) 74%, transparent); opacity: 0; font-size: .82rem; transition: max-height 340ms ease, opacity 260ms ease, margin 340ms ease; }
.work-card:hover .work-card-copy p,
.work-card:focus-within .work-card-copy p { max-height: 4em; margin-top: 8px; opacity: 1; }
.work-card-copy ul { max-height: 0; margin: 0; overflow: hidden; opacity: 0; }
.work-card .placeholder-label { top: 14px; right: auto; bottom: auto; left: 14px; z-index: 3; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--dark-ink) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--dark) 72%, transparent); color: color-mix(in srgb, var(--dark-ink) 86%, transparent); backdrop-filter: blur(12px); }
.work-card-arrow { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--dark-ink) 34%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--dark) 56%, transparent); color: var(--dark-ink); backdrop-filter: blur(12px); }
.work-note { margin-top: 22px; padding: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 0; border-left: 0; background: transparent; }
@media (max-width: 1100px) {
.work-head { grid-template-columns: 1fr; gap: 20px; }
.work-head-side .filter-bar { justify-content: flex-start; }
}
@media (max-width: 860px) {
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(164px, 1fr); }
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3),
.work-card:nth-child(4),
.work-card:nth-child(5),
.work-card:nth-child(6) { grid-column: auto; grid-row: auto; min-height: 210px; }
.work-card:nth-child(1),
.work-card:nth-child(3) { grid-column: span 2; }
}
@media (max-width: 560px) {
.work-head-title h2 { font-size: clamp(2.55rem, 12vw, 4rem); }
.work-head-side .filter-bar { gap: 16px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.work-grid { grid-template-columns: 1fr; gap: 12px; }
.work-card:nth-child(1),
.work-card:nth-child(2),
.work-card:nth-child(3),
.work-card:nth-child(4),
.work-card:nth-child(5),
.work-card:nth-child(6) { grid-column: auto; min-height: 235px; }
}
@media (max-width: 860px) {
.site-header { height: calc(var(--header) + 12px); padding-top: 8px; }
.header-inner { height: 56px; padding-inline: 12px 8px; }
.site-header .site-nav {
position: absolute;
top: calc(100% + 12px);
right: 0;
left: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 22px;
background: color-mix(in srgb, var(--paper) 92%, transparent);
box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 36%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
backdrop-filter: blur(22px) saturate(1.2);
}
.site-nav a { border-radius: var(--ui-radius); }
}
@media (prefers-reduced-transparency: reduce) {
.header-inner,
.site-nav {
background: color-mix(in srgb, var(--paper) 96%, transparent);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.site-header .site-nav a,
.site-header .menu-button,
.spotlight-surface,
.workflow-step,
.studio-service { transition: none; }
.spotlight-surface::before { display: none; }
.credibility-item:hover,
.pack:hover,
.work-card:hover,
.workflow-step:hover,
.studio-service:hover,
.studio-image-stack figure[data-studio-visual].is-service-focus { transform: none; box-shadow: none; }
.studio-image-stack figure[data-studio-visual] { opacity: 1; filter: none; transition: none; }
.studio-model-viewer { transition: none; }
}
.filter-button {
min-height: 34px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-family: var(--body);
font-size: .8rem;
font-weight: 500;
letter-spacing: .01em;
cursor: pointer;
transition: all 180ms cubic-bezier(.16, 1, .3, 1);
}
.filter-button:hover,
.filter-button:focus-visible {
color: var(--ink);
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.filter-button:active {
transform: scale(.97);
}
.filter-button[aria-pressed="true"] {
border: 0;
background: var(--ink);
color: var(--paper);
font-weight: 600;
box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 25%, transparent);
}
html[data-skin="nocturne"] .work-head-side .filter-bar {
border-color: color-mix(in srgb, var(--dark-ink) 14%, transparent);
background: color-mix(in srgb, var(--dark-2) 65%, transparent);
}
html[data-skin="nocturne"] .filter-button {
color: color-mix(in srgb, var(--dark-ink) 65%, transparent);
}
html[data-skin="nocturne"] .filter-button:hover,
html[data-skin="nocturne"] .filter-button:focus-visible {
color: var(--dark-ink);
background: color-mix(in srgb, var(--dark-ink) 10%, transparent);
}
html[data-skin="nocturne"] .filter-button[aria-pressed="true"] {
background: var(--dark-ink);
color: var(--dark);
box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
}
.work-grid,
.work-grid.is-filtered { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.work-grid.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-grid .work-card,
.work-grid .work-card:nth-child(1),
.work-grid .work-card:nth-child(2),
.work-grid .work-card:nth-child(3),
.work-grid .work-card:nth-child(4),
.work-grid .work-card:nth-child(5),
.work-grid .work-card:nth-child(6) {
display: flex;
min-height: 0;
grid-column: auto;
grid-row: auto;
margin: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 22px;
background: var(--surface);
box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 10%, transparent);
}
.work-card { flex-direction: column; }
.work-card::after { display: none; }
.work-grid .work-card:nth-child(n) .work-card-media {
position: relative;
inset: auto;
height: auto;
aspect-ratio: 1.42 / 1;
border-radius: 0;
background: var(--dark);
box-shadow: none;
}
.work-card-media img { filter: saturate(.82) contrast(1.04); transition: filter 420ms ease, transform 650ms var(--motion-ease); }
.work-card:hover .work-card-media img,
.work-card:focus-within .work-card-media img { filter: saturate(1) contrast(1.06); transform: scale(1.035); }
.work-card-copy {
position: static;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 18px 18px 20px;
color: var(--ink);
}
.work-card-copy h3 { max-width: 18ch; color: var(--ink); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.02; }
.work-card-copy p { max-height: none; margin-top: 9px; color: var(--muted); opacity: 1; font-size: .86rem; line-height: 1.45; }
.work-card-copy ul { display: flex; max-height: none; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; opacity: 1; }
.work-card-copy li { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.work-card .placeholder-label { top: 12px; right: auto; bottom: auto; left: 12px; z-index: 3; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--dark-ink) 28%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--dark) 78%, transparent); color: color-mix(in srgb, var(--dark-ink) 88%, transparent); backdrop-filter: blur(12px); }
.work-card-arrow { top: 12px; right: 12px; }
.work-card:hover,
.work-card:focus-within { transform: translateY(-4px); box-shadow: 0 24px 54px color-mix(in srgb, var(--ink) 15%, transparent); }
#work { padding-top: clamp(74px, 7vw, 96px); }
.client-review-showcase .client-review-control { width: 44px; height: 44px; }
.hero-variant { min-width: 40px; min-height: 40px; }
.studio-variant { width: 40px; height: 40px; }
@media (max-width: 980px) {
.work-grid,
.work-grid.is-filtered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.work-head-side .filter-bar { gap: 8px; }
.filter-button { min-height: 42px; height: 42px; max-height: 42px; padding-inline: 11px; font-size: .7rem; white-space: nowrap; }
.work-grid,
.work-grid.is-filtered { grid-template-columns: 1fr; gap: 14px; }
.work-grid .work-card:nth-child(n) .work-card-media { aspect-ratio: 1.32 / 1; }
.work-card-copy { padding: 16px 16px 18px; }
}
.work-stage-wrap {
position: relative;
margin-top: 0;
padding-top: 0;
padding-bottom: 28px;
}
.work-mosaic {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(10px, 1.3vw, 18px);
align-items: start;
}
.work-col {
display: flex;
flex-direction: column;
gap: clamp(10px, 1.3vw, 18px);
}
[hidden],
.work-tile[hidden],
.work-card[hidden] {
display: none !important;
}
.work-tile {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: var(--dark);
box-shadow: 0 14px 34px -6px color-mix(in srgb, var(--ink) 10%, transparent);
transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), border-color 380ms ease, opacity 280ms ease;
}
.work-tile:hover {
transform: scale(1.025) translateY(-4px);
z-index: 5;
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow: 0 24px 50px -8px color-mix(in srgb, var(--ink) 20%, transparent);
}
.work-tile-media {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--dark);
}
.work-tile-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.88) contrast(1.03);
transition: transform 700ms var(--ease-out), filter 400ms ease;
}
.work-tile:hover .work-tile-media img {
filter: saturate(1.02) contrast(1.06);
transform: scale(1.045);
}
.work-tile--tall { aspect-ratio: 3 / 4.2; }
.work-tile--square { aspect-ratio: 1 / 1; }
.work-tile--wide { aspect-ratio: 16 / 9.5; }
.work-tile--hero-tall { aspect-ratio: 3 / 3.8; }
.work-tile--banner { aspect-ratio: 16 / 7.5; }
.work-tile--centerpiece { aspect-ratio: 1 / 1.18; }
.work-tile--banner-caption { aspect-ratio: 16 / 9; }
.work-tile--portrait { aspect-ratio: 3 / 4; }
.tile-caption {
position: absolute;
left: 14px;
bottom: 14px;
right: 14px;
color: #ffffff;
font-family: var(--display);
font-size: clamp(0.95rem, 1.2vw, 1.25rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
z-index: 2;
pointer-events: none;
}
.tile-caption--bold {
font-size: clamp(1.3rem, 1.8vw, 1.85rem);
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.04em;
}
.tile-caption--subtle {
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.9;
}
.work-tile .placeholder-label {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
padding: 5px 8px;
border: 1px solid rgba(255,255,255,0.22);
border-radius: 999px;
background: rgba(11,23,52,0.65);
color: #ffffff;
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background-color 200ms ease, border-color 200ms ease;
}
.work-tile:hover .placeholder-label {
background: var(--accent);
border-color: var(--accent);
color: #ffffff;
}
@media (max-width: 1024px) {
.work-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-col--4, .work-col--5 { display: none; }
.work-col--2, .work-col--3 { transform: none; }
}
@media (max-width: 640px) {
.work-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.work-col--3 { display: none; }
.work-col--1, .work-col--2 { transform: none; }
.work-stage-wrap { padding-block: 16px; }
}
#process { position: relative; isolation: isolate; overflow: clip; }
#process .pipeline-section { position: relative; z-index: 3; }
.pipeline-heading {
display: block;
padding-top: 22px;
margin-bottom: clamp(24px, 3.5vw, 40px);
border-top: 1px solid var(--dark-line);
}
.pipeline-heading h2 {
max-width: 32ch;
margin-top: 12px;
font-size: clamp(2.4rem, 4.8vw, 4.4rem);
line-height: 1.04;
letter-spacing: -0.04em;
}
#process .workflow-pipeline {
position: relative;
display: grid;
gap: clamp(22px, 2.4vw, 34px);
margin-top: clamp(36px, 4vw, 64px);
}
#process .workflow-grid {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 0;
border: 0;
}
#process .workflow-gate {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
column-gap: clamp(16px, 2.4vw, 28px);
row-gap: 6px;
margin: 0;
padding: 14px 0 4px;
border-top: 1px solid color-mix(in srgb, var(--hero-accent) 55%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent);
color: color-mix(in srgb, var(--dark-ink) 72%, transparent);
font-size: .84rem;
line-height: 1.4;
}
#process .workflow-gate-label {
color: var(--hero-accent);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .14em;
text-transform: uppercase;
}
#process .workflow-gate-copy { max-width: 54ch; }
#process .workflow-route { display: none; }
#process .workflow-step,
#process .workflow-step:nth-child(n) { position: relative; z-index: 1; min-height: 0; padding: 0 22px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--dark-ink); transform: none; transition: transform 320ms var(--ease-out); }
#process .workflow-step + .workflow-step { padding-left: 26px; }
#process .workflow-step--offset { padding-top: 24px; }
#process .workflow-step-top { position: relative; min-height: 54px; display: flex; align-items: flex-start; }
#process .workflow-step-number { position: absolute; top: -22px; left: -4px; color: color-mix(in srgb, var(--dark-ink) 13%, transparent); font-family: var(--display); font-size: clamp(4.5rem, 7vw, 7.5rem); font-weight: 500; letter-spacing: -.08em; line-height: 1; transition: color 300ms ease; }
#process .workflow-step-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 30px; color: color-mix(in srgb, var(--dark-ink) 72%, transparent); font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; transition: color 300ms ease; }
#process .workflow-step-kicker::before { width: 6px; height: 6px; margin-right: 9px; border: 1px solid var(--hero-accent); border-radius: 50%; background: var(--dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-accent) 16%, transparent); content: ""; }
#process .workflow-step h3 { max-width: 14ch; margin-top: 36px; color: var(--dark-ink); font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.05; transition: color 300ms ease; }
#process .workflow-step p { max-width: 30ch; margin-top: 10px; color: color-mix(in srgb, var(--dark-ink) 66%, transparent); font-size: .88rem; line-height: 1.48; }
#process .workflow-step::after { position: absolute; left: 0; bottom: -8px; width: 65%; height: 2px; background: var(--hero-accent); box-shadow: 0 0 10px var(--hero-accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out); }
#process .workflow-step:hover { transform: translateY(-4px); }
#process .workflow-step:hover::after { transform: scaleX(1); }
#process .workflow-step:hover h3 { color: #ffffff; }
#process .workflow-step:hover .workflow-step-kicker { color: var(--hero-accent); }
#process .workflow-step:hover .workflow-step-number { color: color-mix(in srgb, var(--hero-accent) 26%, transparent); }
#process .workflow-visual { position: relative; width: calc(100% - 12px); min-height: 154px; margin-top: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--dark-ink) 17%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--dark-2) 54%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dark-ink) 13%, transparent), 0 18px 38px color-mix(in srgb, #000 25%, transparent); }
#process .workflow-visual::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--dark-ink) 7%, transparent), transparent 42%); content: ""; pointer-events: none; }
.workflow-visual--signal,
.workflow-visual--intake,
.workflow-visual--direction,
.workflow-visual--pipeline,
.workflow-visual--judge,
.workflow-visual--iterate { display: grid; align-content: center; gap: 7px; padding: 14px; }
.workflow-visual--intake { grid-template-columns: 1fr; gap: 8px; }
.intake-chip,
.direction-line,
.judge-row,
.iterate-row,
.pipeline-status {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--dark) 42%, transparent);
color: color-mix(in srgb, var(--dark-ink) 78%, transparent);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.intake-chip--soft { opacity: .72; }
.direction-line small,
.iterate-row small { color: color-mix(in srgb, var(--dark-ink) 52%, transparent); font-size: .56rem; letter-spacing: .04em; text-transform: none; }
.direction-line--approve strong,
.iterate-row--ready strong,
.pipeline-status strong { color: var(--hero-accent); }
.pipeline-bars {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
min-height: 28px;
align-items: end;
}
.pipeline-bars i {
display: block;
height: 10px;
border-radius: 3px;
background: color-mix(in srgb, var(--hero-accent) 55%, transparent);
}
.pipeline-bars i:nth-child(2) { height: 18px; }
.pipeline-bars i:nth-child(3) { height: 14px; }
.pipeline-bars i:nth-child(4) { height: 22px; opacity: .7; }
.workflow-visual--pipeline small {
position: relative;
z-index: 1;
color: color-mix(in srgb, var(--dark-ink) 55%, transparent);
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.judge-row strong { color: color-mix(in srgb, var(--dark-ink) 88%, transparent); }
.judge-row:last-child strong { color: var(--hero-accent); }
.signal-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 35px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--dark-ink) 14%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--dark) 36%, transparent); color: color-mix(in srgb, var(--dark-ink) 86%, transparent); font-size: .61rem; }
.signal-row strong { color: var(--hero-accent); font-family: var(--mono); font-size: .58rem; }
.signal-row small { max-width: 17ch; color: color-mix(in srgb, var(--dark-ink) 66%, transparent); font-size: .56rem; text-align: right; }
.signal-row b { color: var(--hero-accent); font-size: .85rem; }
.signal-spark { grid-column: 1 / -1; display: block; height: 12px; margin-top: 3px; border-bottom: 1px solid var(--hero-accent); clip-path: polygon(0 82%, 8% 62%, 15% 72%, 25% 36%, 34% 54%, 43% 18%, 51% 60%, 61% 42%, 70% 70%, 80% 27%, 88% 48%, 100% 8%, 100% 100%, 0 100%); background: color-mix(in srgb, var(--hero-accent) 38%, transparent); opacity: .82; }
.workflow-visual--method { display: flex; flex-direction: column; justify-content: space-between; padding: 13px; }
.method-pills { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.method-pills span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--dark-ink) 16%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--dark-ink) 58%, transparent); font-family: var(--mono); font-size: .48rem; letter-spacing: .06em; }
.method-pills .is-selected { border-color: var(--hero-accent); background: var(--hero-accent); color: var(--dark); }
.workflow-visual--method img { width: 86%; height: 104px; align-self: center; object-fit: cover; border-radius: 12px; opacity: .84; filter: saturate(.72) contrast(1.05); }
.workflow-visual--range { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; }
.range-tile { position: relative; min-width: 0; overflow: hidden; border-radius: 9px; background: var(--dark); }
.range-tile--tall { grid-row: span 2; }
.range-tile--wide { grid-column: 2; }
.range-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .82; filter: saturate(.68) contrast(1.04); }
.range-tile span { position: absolute; right: 6px; bottom: 5px; left: 6px; color: var(--dark-ink); font-family: var(--mono); font-size: .45rem; letter-spacing: .06em; text-transform: uppercase; }
.workflow-visual--review { min-height: 154px; }
.workflow-visual--review img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: saturate(.58) contrast(1.08); }
.review-badge { position: absolute; z-index: 2; right: 10px; bottom: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--hero-accent) 58%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--dark) 72%, transparent); color: color-mix(in srgb, var(--dark-ink) 88%, transparent); font-family: var(--mono); font-size: .48rem; letter-spacing: .05em; }
.review-badge span { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: var(--hero-accent); color: var(--dark); font-weight: 800; }
.workflow-visual--review small { position: absolute; z-index: 2; right: 10px; bottom: 9px; left: 10px; color: color-mix(in srgb, var(--dark-ink) 64%, transparent); font-size: .58rem; }
#process.section { padding-top: clamp(60px, 6vw, 90px); padding-bottom: clamp(44px, 4.5vw, 64px); }
#partnership { overflow: clip; padding-block: clamp(48px, 5vw, 76px); }
#partnership .partnership { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 7vw, 108px); align-items: center; padding-block: 0; padding-inline: var(--gutter); border: 0; }
#partnership .partnership-copy { position: relative; z-index: 3; align-self: center; }
#partnership .partnership-copy h2 { max-width: 10ch; margin-top: 20px; font-size: clamp(3rem, 5.3vw, 6.4rem); line-height: .91; }
#partnership .partnership-copy > p:not(.eyebrow) { max-width: 40ch; margin-top: 22px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.48; }
#partnership .partnership-actions { margin-top: 30px; }
.partnership-visual { position: relative; min-height: 650px; padding-bottom: 58px; }
.partnership-month { position: absolute; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--surface) 83%, transparent); box-shadow: 0 24px 55px color-mix(in srgb, var(--ink) 11%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent); }
.partnership-month--back { z-index: 1; top: 96px; right: -10%; width: 64%; height: 510px; padding: 24px; opacity: .46; transform: translateX(12px); }
.partnership-month--middle { z-index: 2; top: 72px; right: -4%; width: 71%; height: 535px; padding: 24px; opacity: .7; }
.partnership-month--back strong,
.partnership-month--middle strong { display: block; color: var(--muted); font-family: var(--display); font-size: 1.5rem; }
.partnership-month--back span,
.partnership-month--middle span { display: block; margin-top: 11px; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; }
.partnership-month--front { z-index: 3; top: 30px; right: 6%; width: 82%; min-height: 555px; }
.partnership-month--front header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.partnership-month--front header strong { color: var(--ink); font-family: var(--display); font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.04em; }
.partnership-month--front header span { color: var(--action); font-family: var(--mono); font-size: .54rem; letter-spacing: .06em; white-space: nowrap; }
.partnership-month--front header i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--hero-accent); }
.partnership-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 24px 17px; border-bottom: 1px solid var(--line); }
.partnership-track::after { position: absolute; right: 24px; bottom: 9px; left: 24px; height: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); content: ""; }
.partnership-track span { position: relative; z-index: 1; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-align: center; }
.partnership-track span::after { position: absolute; bottom: -19px; left: 50%; width: 6px; height: 6px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 50%; background: var(--surface); content: ""; transform: translateX(-50%); }
.partnership-weeks { display: grid; grid-template-columns: 72px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 78px); gap: 10px; padding: 22px 22px 24px; }
.week-label { align-self: center; color: var(--muted); font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; }
.calendar-piece { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 11px; background: var(--dark); box-shadow: 0 10px 22px color-mix(in srgb, var(--ink) 11%, transparent); }
.calendar-piece img { width: 100%; height: 100%; object-fit: cover; opacity: .87; filter: saturate(.78) contrast(1.05); }
.calendar-piece b { position: absolute; z-index: 1; right: 10px; bottom: 9px; left: 10px; color: var(--dark-ink); font-size: clamp(.8rem, 1.3vw, 1.2rem); line-height: .96; }
.calendar-piece--square { grid-column: 2; grid-row: 1 / span 2; }
.calendar-piece--portrait { grid-column: 3; grid-row: 1 / span 2; }
.calendar-piece--landscape { grid-column: 4 / span 2; grid-row: 2; }
.calendar-piece--product { grid-column: 2 / span 2; grid-row: 3 / span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--surface); }
.calendar-piece--product img { mix-blend-mode: multiply; opacity: .72; }
.calendar-piece--product div { padding: 10px; color: var(--ink); }
.calendar-piece--product strong { display: block; font-size: .78rem; }
.calendar-piece--product small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; }
.partnership-metrics { position: absolute; right: 2%; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.partnership-metrics span { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: .83rem; }
.metric-icon { position: relative; display: inline-block; width: 25px; height: 25px; border: 2px solid var(--hero-accent); border-radius: 6px; }
.metric-icon--calendar::before { position: absolute; top: 6px; right: 3px; left: 3px; height: 2px; background: var(--hero-accent); box-shadow: 0 5px 0 color-mix(in srgb, var(--hero-accent) 72%, transparent); content: ""; }
.metric-icon--calendar::after { position: absolute; top: -5px; left: 5px; width: 2px; height: 6px; background: var(--hero-accent); box-shadow: 10px 0 0 var(--hero-accent); content: ""; }
.metric-icon--range { border: 0; border-radius: 0; background: linear-gradient(90deg, var(--hero-accent) 0 36%, transparent 36% 64%, var(--hero-accent) 64%), linear-gradient(90deg, var(--hero-accent) 0 36%, transparent 36% 64%, var(--hero-accent) 64%); background-position: top, bottom; background-size: 100% 36%; background-repeat: no-repeat; }
.metric-icon--human { border-radius: 50% 50% 8px 8px; }
.metric-icon--human::before { position: absolute; top: 4px; left: 50%; width: 7px; height: 7px; border: 2px solid var(--hero-accent); border-radius: 50%; content: ""; transform: translateX(-50%); }
.metric-icon--human::after { position: absolute; right: 3px; bottom: 3px; left: 3px; height: 8px; border: 2px solid var(--hero-accent); border-bottom: 0; border-radius: 10px 10px 0 0; content: ""; }
@media (max-width: 1100px) {
.pipeline-heading { gap: 42px; }
#process .workflow-step,
#process .workflow-step + .workflow-step { padding-inline: 14px; }
.partnership-visual { min-height: 610px; }
.partnership-month--front { right: 2%; width: 87%; }
}
@media (max-width: 860px) {
.pipeline-heading { grid-template-columns: 1fr; gap: 20px; }
.pipeline-heading p { padding-top: 0; }
#process .workflow-pipeline { gap: 28px; margin-top: 42px; }
#process .workflow-grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
#process .workflow-gate {
grid-template-columns: 1fr;
padding: 18px 0 8px;
}
#process .workflow-route { display: none; }
#process .workflow-step,
#process .workflow-step + .workflow-step,
#process .workflow-step--offset { padding: 0 0 34px 34px; border-left: 1px solid color-mix(in srgb, var(--hero-accent) 60%, transparent); }
#process .workflow-step::before { position: absolute; top: 13px; left: -5px; width: 8px; height: 8px; border: 2px solid var(--hero-accent); border-radius: 50%; background: var(--dark); content: ""; }
#process .workflow-grid .workflow-step:last-child { padding-bottom: 0; border-left-color: transparent; }
#process .workflow-step--gate {
border-left-color: var(--hero-accent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-accent) 28%, transparent);
border-radius: 0 12px 12px 0;
padding-right: 14px;
}
#process .workflow-step-number { top: -15px; }
#process .workflow-step h3 { margin-top: 34px; }
#process .workflow-visual { width: 100%; max-width: 430px; }
#partnership .partnership { grid-template-columns: 1fr; gap: 40px; align-items: start; }
#partnership .partnership-copy { max-width: 560px; }
#partnership .partnership-copy h2 { max-width: 12ch; }
.partnership-visual { min-height: 610px; width: 100%; }
.partnership-month--front { right: 0; width: 88%; }
.partnership-metrics { right: 0; }
}
@media (max-width: 560px) {
#process .pipeline-heading h2 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
#process .workflow-step h3 { max-width: 13ch; }
#process .workflow-step p { max-width: 34ch; }
#partnership .partnership { padding-block: 0; }
#partnership .partnership-copy h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
.partnership-visual { min-height: 690px; margin-inline: -4px; }
.partnership-month--back { display: none; }
.partnership-month--middle { top: 38px; right: 5%; width: 88%; height: 570px; opacity: .48; }
.partnership-month--front { top: 0; right: 0; width: 96%; min-height: 590px; }
.partnership-month--front header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 18px 16px 14px; }
.partnership-track { padding-inline: 14px; }
.partnership-track::after { right: 14px; left: 14px; }
.partnership-track span { font-size: .45rem; }
.partnership-weeks { grid-template-columns: 54px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 84px); gap: 7px; padding: 18px 14px; }
.week-label { font-size: .47rem; }
.calendar-piece b { right: 7px; bottom: 7px; left: 7px; font-size: .78rem; }
.calendar-piece--product div { padding: 6px; }
.calendar-piece--product strong { font-size: .66rem; }
.partnership-metrics { position: absolute; right: 0; bottom: -2px; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; }
.partnership-metrics span { gap: 8px; font-size: .72rem; }
.metric-icon { width: 22px; height: 22px; }
.partnership-metrics span:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
#process .workflow-step:hover,
#partnership .partnership-month,
#partnership .calendar-piece,
#process .workflow-visual img { transition: none; }
}
#faq.studio-panel-tour { overflow: visible; }
#faq:not(.studio-panel-tour) { overflow: clip; }
.faq-lab-layout { display: grid; grid-template-columns: minmax(170px, .48fr) minmax(300px, .82fr) minmax(360px, 1.2fr); gap: clamp(28px, 5vw, 78px); align-items: center; }
.faq-index { align-self: center; }
.faq-index ol { display: grid; gap: 3px; margin-top: 28px; padding: 0; list-style: none; }
.faq-index li { min-width: 0; }
.faq-index button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; width: 100%; min-height: 44px; padding: 8px 10px 8px 0; border: 0; border-left: 4px solid transparent; background: transparent; color: color-mix(in srgb, var(--ink) 64%, transparent); font-size: .78rem; text-align: left; transition: border-color 200ms ease, color 200ms ease, padding-left 200ms ease; }
.faq-index button span { font-family: var(--mono); font-size: .62rem; }
.faq-index button strong { font-weight: 600; }
.faq-index button:hover,
.faq-index button:focus-visible { color: var(--ink); }
.faq-index button[aria-selected="true"] { border-left-color: var(--hero-accent); color: var(--action); padding-left: 12px; }
.faq-lab-main { align-self: center; }
.faq-lab-main > .eyebrow { gap: 12px; }
.faq-count { color: var(--muted); }
.faq-lab-main h2 { max-width: 11ch; margin-top: 22px; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .92; }
.faq-answer-current { max-width: 38ch; margin-top: 24px; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.48; }
.faq-controls { display: flex; align-items: center; gap: 24px; margin-top: 38px; color: var(--muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; }
.faq-control { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.3rem; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.faq-control:hover,
.faq-control:focus-visible { border-color: var(--action); background: var(--action); color: var(--action-ink); }
.faq-control:active { transform: scale(.95); }
.faq-lab-visual { position: relative; align-self: stretch; min-height: 500px; padding-top: 4px; }
.faq-lab-visual-head { position: absolute; z-index: 4; top: 0; right: 4px; left: 4px; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: .55rem; letter-spacing: .13em; }
.faq-visual-stage { position: relative; min-height: 458px; margin-top: 30px; }
.faq-visual-card { position: absolute; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 24px; background: var(--surface); box-shadow: 0 24px 50px color-mix(in srgb, var(--ink) 12%, transparent); }
.faq-visual-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.03); }
.faq-visual-card--reference { top: 54px; left: 0; width: 62%; height: 340px; opacity: .76; }
.faq-visual-card--checked { top: 0; right: 0; width: 64%; height: 388px; mix-blend-mode: normal; }
.faq-visual-card--checked::after { position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--paper) 8%, transparent), transparent 50%, color-mix(in srgb, var(--hero-accent) 10%, transparent)); content: ""; pointer-events: none; }
.faq-visual-divider { position: absolute; z-index: 3; top: 18px; right: 30%; bottom: 44px; width: 1px; background: var(--hero-accent); box-shadow: 0 0 22px color-mix(in srgb, var(--hero-accent) 68%, transparent); }
.faq-visual-divider span { position: absolute; top: 50%; left: 50%; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--hero-accent); color: var(--action-ink); font-size: 1rem; transform: translate(-50%, -50%); }
.faq-visual-scan { position: absolute; z-index: 4; top: 4%; right: 14%; bottom: 10%; width: 2px; background: linear-gradient(to bottom, transparent, var(--hero-accent), transparent); opacity: 0; pointer-events: none; }
.faq-lab.is-changing .faq-visual-scan { animation: faq-scan 850ms var(--motion-ease) both; }
@keyframes faq-scan { 0% { opacity: 0; transform: translateX(-80px); } 18% { opacity: .85; } 100% { opacity: 0; transform: translateX(42px); } }
.faq-visual-note { position: absolute; right: 2%; bottom: 0; left: 14%; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.faq-visual-note-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--hero-accent); border-radius: 50%; background: color-mix(in srgb, var(--hero-accent) 18%, transparent); color: var(--action); font-weight: 800; }
.faq-visual-note strong { display: block; color: var(--ink); font-size: .82rem; }
.faq-visual-note small { display: block; margin-top: 3px; color: var(--muted); font-family: var(--mono); font-size: .53rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1100px) {
.faq-lab-layout { grid-template-columns: minmax(150px, .42fr) minmax(260px, .8fr) minmax(300px, 1fr); gap: 30px; }
.faq-lab-main h2 { font-size: clamp(2.7rem, 5vw, 4.7rem); }
.faq-visual-card--reference { width: 66%; }
.faq-visual-card--checked { width: 68%; }
}
@media (max-width: 860px) {
.faq-lab-layout { grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr); gap: 40px; align-items: start; }
.faq-lab-visual { grid-column: 1 / -1; min-height: 460px; max-width: 720px; width: 100%; margin-inline: auto; }
}
@media (max-width: 560px) {
.faq-lab-layout { grid-template-columns: 1fr; gap: 46px; }
.faq-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; margin-top: 18px; }
.faq-index button { grid-template-columns: 25px minmax(0, 1fr); padding-right: 2px; font-size: .72rem; }
.faq-index button[aria-selected="true"] { padding-left: 8px; }
.faq-lab-main h2 { max-width: 12ch; font-size: clamp(2.8rem, 13vw, 4.2rem); }
.faq-answer-current { margin-top: 18px; font-size: .98rem; }
.faq-controls { margin-top: 28px; }
.faq-lab-visual { min-height: 390px; }
.faq-visual-stage { min-height: 350px; }
.faq-visual-card--reference { top: 46px; width: 68%; height: 260px; }
.faq-visual-card--checked { width: 70%; height: 300px; }
.faq-visual-divider { right: 28%; bottom: 36px; }
.faq-visual-note { right: 0; left: 8%; }
}
@media (prefers-reduced-motion: reduce) {
.faq-index button,
.faq-control { transition: none; }
.faq-lab.is-changing .faq-visual-scan { animation: none; opacity: 0; }
}
.site-footer {
padding-top: clamp(20px, 2.5vw, 36px);
padding-bottom: 0;
margin-bottom: 0;
background: var(--paper);
}
.site-footer > .container {
max-width: 100%;
padding-inline: clamp(12px, 2vw, 28px);
padding-bottom: 0;
}
.footer-shell {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(16px, 2.2vw, 28px) clamp(18px, 2.8vw, 38px) 14px;
border-radius: clamp(22px, 2.5vw, 32px) clamp(22px, 2.5vw, 32px) 0 0;
border: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 0;
background: linear-gradient(170deg, #0c162c 0%, #060b17 100%);
box-shadow: 0 -12px 40px rgba(5, 9, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
color: #f4f0e7;
margin-bottom: 0;
}
.footer-shell::before {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: clamp(240px, 45vw, 520px);
height: 160px;
background: radial-gradient(ellipse at center, rgba(83, 103, 238, 0.18), transparent 70%);
filter: blur(40px);
content: "";
pointer-events: none;
}
.footer-stars {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
border-radius: inherit;
}
.footer-topline {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr);
align-items: center;
gap: clamp(14px, 2vw, 28px);
padding-bottom: clamp(12px, 1.5vw, 18px);
border-bottom: 0;
}
.footer-intro .eyebrow { color: rgba(244, 240, 231, 0.6); letter-spacing: 0.16em; font-size: 0.62rem; margin: 0; }
.footer-intro h2 { margin-top: 4px; margin-bottom: 0; color: #ffffff; font-size: clamp(1.35rem, 2vw, 1.95rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; }
.footer-wordmark-wrap {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 0;
padding-block: 0;
}
.footer-wordmark-display {
font-family: var(--display);
font-weight: 800;
font-size: clamp(1.75rem, 3.2vw, 3.2rem);
line-height: 0.9;
letter-spacing: -0.04em;
text-transform: uppercase;
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.65) 60%, rgba(154, 184, 255, 0.28) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
user-select: none;
filter: drop-shadow(0 2px 14px rgba(83, 103, 238, 0.15));
}
.footer-wordmark-kicker {
color: rgba(244, 240, 231, 0.48);
font-family: var(--mono);
font-size: 0.52rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 3px;
margin-bottom: 0;
white-space: nowrap;
}
.footer-cta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.footer-cta-button {
min-height: 38px;
padding: 8px 18px;
border-radius: 999px;
background: var(--action);
color: var(--action-ink);
font-weight: 700;
font-size: 0.85rem;
border: 1px solid var(--action);
box-shadow: none;
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease, box-shadow 200ms ease;
}
.footer-cta-button:hover,
.footer-cta-button:focus-visible {
transform: translateY(-2px);
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
box-shadow: none;
filter: none;
color: var(--action-ink);
}
.footer-cta-button .button-copy { display: inline-flex; align-items: center; gap: 8px; }
.footer-email { color: rgba(244, 240, 231, 0.62); font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.02em; transition: color 180ms ease; }
.footer-email:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.footer-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0;
margin-top: 14px;
padding-top: 6px;
padding-bottom: 6px;
border-top: 0;
border-bottom: 0;
}
.footer-shell .footer-col {
padding-inline: clamp(14px, 2vw, 24px);
position: relative;
}
.footer-shell .footer-col:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-shell .footer-col h3 {
color: rgba(244, 240, 231, 0.48);
font-family: var(--mono);
font-size: 0.56rem;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 6px;
text-align: center;
}
.footer-shell .footer-col ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3px clamp(8px, 1.4vw, 16px);
font-size: 0.78rem;
color: rgba(244, 240, 231, 0.72);
}
.footer-shell .footer-col a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
padding-top: 6px;
color: rgba(244, 240, 231, 0.42);
font-family: var(--mono);
font-size: 0.54rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[data-skin="nocturne"] .nav-contact,
html[data-skin="nocturne"] .footer-cta-button,
html[data-skin="nocturne"] [data-liquid-button] {
background: linear-gradient(180deg, #3b73e9 0%, #2961db 45%, #2250b4 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
box-shadow: inset 0 1px 0 rgb(204 230 255 / .18), inset 0 -1px 0 rgb(6 16 38 / .18) !important;
}
html[data-skin="nocturne"] .nav-contact .button-copy,
html[data-skin="nocturne"] .footer-cta-button .button-copy,
html[data-skin="nocturne"] [data-liquid-button] .button-copy {
color: #061026 !important;
font-weight: 700 !important;
text-shadow: none !important;
}
html[data-skin="nocturne"] .nav-contact:hover,
html[data-skin="nocturne"] .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;
}
html[data-skin="nocturne"] [data-liquid-button]:hover,
html[data-skin="nocturne"] [data-liquid-button]:focus-visible {
background: linear-gradient(180deg, #589bf9 0%, #4087f7 45%, #356fcc 100%) !important;
box-shadow: inset 0 1px 0 rgb(204 230 255 / .22), inset 0 -1px 0 rgb(6 16 38 / .18) !important;
}
@media (max-width: 860px) {
.footer-topline {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 16px;
}
.footer-cta { align-items: center; }
.footer-intro h2 { text-align: center; }
.footer-grid { grid-template-columns: 1fr !important; gap: 12px; }
.footer-shell .footer-col { padding-inline: 0; }
.footer-shell .footer-col:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; }
.footer-shell .footer-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-media-visual,
.hero-still-stack,
.hero-video-frame,
.hero-model-frame { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 861px) {
.hero .hero-mode::after,
.hero .hero-mode--right::after { display: none !important; }
}
.hero-mode[aria-checked="true"] { background: transparent !important; box-shadow: none !important; color: var(--ink) !important; font-weight: 700; text-shadow: none; }
.hero-mode[aria-checked="true"]::before { background: color-mix(in srgb, var(--accent) 62%, #8a919b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
html[data-skin="nocturne"] .hero-mode[aria-checked="true"]::before {
background: #f8fafc;
box-shadow: 0 0 0 4px color-mix(in srgb, #f8fafc 28%, transparent);
}
.hero-scene.is-roulette .hero-mode[aria-checked="true"] { background: transparent !important; box-shadow: none !important; color: var(--muted) !important; text-shadow: none; }
.hero-scene.is-roulette .hero-mode[aria-checked="true"]::before { box-shadow: none; }
@media (max-width: 700px) {
.footer-topline { align-items: flex-start; flex-direction: column; gap: 24px; }
.footer-cta { align-items: flex-start; }
.footer-wordmark-wrap { margin-top: 36px; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 18px; }
.footer-col:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.footer-wordmark-wrap::after { opacity: .7; }
.hero-media-visual,
.hero-still-stack,
.hero-video-frame,
.hero-model-frame { transition: none; }
}
#process .workflow-route { display: none; }
#process .workflow-step h3 { margin-top: 48px; }
#process .workflow-step.workflow-step--offset { padding-top: 40px; }
@media (max-width: 860px) {
#process .workflow-step.workflow-step--offset { padding-top: 0; }
#process .workflow-step h3 { margin-top: 34px; }
}
html { overscroll-behavior-x: none; }
.site-stars {
position: fixed;
z-index: 1 !important;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
pointer-events: none;
}
.global-shader-field,
[data-hero-particles] {
position: fixed;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
pointer-events: none;
}
main { position: relative; z-index: auto; }
.site-header { position: sticky; z-index: 100; }
.hero-model-frame model-viewer { touch-action: pan-y; }
.hero-model-frame::after { content: "Drag to rotate"; }
@media (min-width: 861px) {
.hero {
min-height: calc(100svh - var(--header));
padding-top: clamp(8px, 1.2vw, 18px);
padding-bottom: clamp(18px, 2.8vw, 34px);
}
.hero-grid {
min-height: calc(100svh - var(--header) - clamp(8px, 1.2vw, 18px) - clamp(18px, 2.8vw, 34px));
grid-template-rows: auto minmax(0, 1fr);
}
.hero-showcase-wrap {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
margin-top: 0;
}
.hero-showcase {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
.hero .hero-actions {
position: relative;
left: auto;
bottom: auto;
flex: 0 0 auto;
align-self: center;
margin-top: 12px;
transform: none;
}
}
@media (min-width: 861px) and (max-height: 760px) {
.hero {
padding-top: 8px;
padding-bottom: 14px;
}
.hero-grid { min-height: calc(100svh - var(--header) - 22px); }
.hero h1 { font-size: var(--hero-title-size); }
.hero-intro { margin-top: 8px; }
.hero-product-stage { width: min(50vw, 620px); }
.hero .hero-actions { margin-top: 8px; }
}
.site-header { height: var(--header); padding-top: 8px; }
#partnership .partnership { min-width: 0; padding-inline: var(--gutter); }
.hero-actions { display: flex; width: 100%; justify-content: center; }
.hero-actions .button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 22px;
white-space: nowrap;
}
@media (min-width: 861px) {
.outcome-sticky { min-height: 0; }
}
@media (max-width: 860px) {
.site-header { height: var(--header); padding-top: 8px; }
.hero-showcase-wrap { display: block; height: auto; min-height: 0; }
.hero-showcase { height: auto; min-height: 0; }
.hero .hero-actions { position: relative; left: auto; bottom: auto; margin-top: 18px; transform: none; }
}
.section-shader {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
pointer-events: none;
}
.hero-showcase-wrap { display: flex; flex-direction: column; }
.hero-showcase-wrap > .hero-showcase { flex: 1 1 auto; min-height: 0; }
.hero-intro { max-width: none; white-space: nowrap; text-wrap: nowrap; }
@media (min-width: 861px) {
.hero {
padding-top: calc(var(--header) + clamp(8px, 1.6vh, 18px));
padding-bottom: clamp(16px, 2.4vh, 28px);
}
.hero-grid {
min-height: calc(100svh - var(--header) - clamp(8px, 1.6vh, 18px) - clamp(16px, 2.4vh, 28px));
}
.hero-showcase-wrap { margin-top: clamp(8px, 1.6vh, 18px); }
.hero-showcase-wrap > .hero-actions { margin-top: clamp(14px, 1.8vh, 22px); }
.outcome-sticky { height: calc(100svh - var(--header)); min-height: 0; }
.outcome-shell {
padding-block: clamp(10px, 1.6vh, 18px) clamp(10px, 1.6vh, 16px);
gap: clamp(8px, 1.2vh, 14px);
}
.outcome-head,
.outcome-experience { width: min(100%, 1120px); margin-inline: auto; }
.outcome-experience {
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: none;
gap: clamp(8px, 1.2vh, 14px);
}
.outcome-deck {
position: relative;
min-height: 0;
height: 100%;
max-width: min(1120px, 100%);
margin-inline: auto;
overflow: hidden;
}
.outcome-card {
width: min(100%, 1080px);
height: min(66vh, 560px);
min-height: 0;
max-height: 100%;
padding: clamp(28px, 4.2vh, 52px) clamp(28px, 4vw, 56px);
}
.outcome-card-body {
max-width: min(52ch, 100%);
}
.outcome-card-body h3 {
max-width: 16ch;
font-size: clamp(2.15rem, 4.2vw, 3.45rem);
line-height: 1.02;
}
}
@media (min-width: 861px) and (max-height: 760px) {
.outcome-shell { padding-block: 8px 8px; gap: 8px; }
.outcome-head h2 { font-size: clamp(1.35rem, 3.8vh, 1.85rem); }
.outcome-card { height: min(62vh, 460px); padding: 22px 28px; }
.outcome-card-body { gap: 8px; }
.outcome-card-body h3 { font-size: clamp(1.7rem, 3.8vh, 2.35rem); }
.outcome-card-body ul { margin-top: 8px; gap: 8px; }
}
@media (max-width: 860px) {
.hero-showcase-wrap { display: block; }
.hero-showcase-wrap > .hero-actions { margin-top: 18px; }
}
.menu-button {
display: none;
width: 44px;
height: 44px;
flex: 0 0 44px;
align-items: center;
justify-content: center;
margin-left: auto;
padding: 0;
border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 999px;
appearance: none;
background: transparent;
color: var(--ink);
}
.menu-button-icon {
position: relative;
display: block;
width: 16px;
height: 12px;
border-top: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
}
.menu-button-icon::after {
position: absolute;
top: 4px;
right: 0;
left: 0;
height: 1.5px;
background: currentColor;
content: "";
}
.menu-button[aria-expanded="true"] .menu-button-icon { border-color: transparent; }
.menu-button[aria-expanded="true"] .menu-button-icon::before,
.menu-button[aria-expanded="true"] .menu-button-icon::after {
top: 4px;
transform: rotate(45deg);
}
.menu-button[aria-expanded="true"] .menu-button-icon::after { transform: rotate(-45deg); }
.menu-button[aria-expanded="true"] .menu-button-icon span { display: none; }
:where(h1, h2, h3)[id] { scroll-margin-top: calc(var(--header) + 24px); }
@media (min-width: 861px) {
#packs.section { padding-block: clamp(64px, 6.5vw, 96px); }
#process.section { padding-top: clamp(64px, 6.5vw, 96px); padding-bottom: clamp(40px, 4vw, 60px); }
#partnership.section { padding-block: clamp(44px, 4.5vw, 68px); }
#process .pipeline-heading h2 { max-width: 16ch; font-size: clamp(3rem, 5vw, 5.8rem); }
#process .workflow-grid { margin-top: clamp(40px, 3.8vw, 56px); }
}
@media (max-width: 860px) {
.menu-button { display: inline-flex; }
.site-nav {
top: calc(var(--header) + 10px);
right: 0;
left: 0;
z-index: 4;
gap: 4px;
margin: 0;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
border-radius: 24px;
background: color-mix(in srgb, var(--paper) 94%, transparent);
box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 15%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.1);
backdrop-filter: blur(22px) saturate(1.1);
}
.site-nav a {
display: flex;
min-height: 44px;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
}
.site-nav a:not(.nav-contact):hover,
.site-nav a:not(.nav-contact):focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-nav .nav-contact { margin: 4px 0 0; justify-content: center; border-radius: 999px; }
}
@media (max-width: 700px) {
.site-footer > .container { padding-inline: 12px; }
.footer-shell { padding: 20px 16px 16px; border-radius: 24px 24px 0 0; }
.footer-topline { gap: 14px; }
.footer-wordmark-display { font-size: clamp(2.4rem, 13vw, 4.8rem); }
.footer-grid { gap: 16px 12px; padding-block: 10px; }
}
.hero-mode:not([aria-checked="true"]) svg { color: #1a2f55; }
.hero-mode:not([aria-checked="true"]):hover svg,
.hero-mode:not([aria-checked="true"]):focus-visible svg { color: #1a2f55; }
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;
}
#work .work-tile[data-work-kind="interactive"]:hover .work-tile-media img {
filter: none;
}
.theme-toggle {
--fab-size: 48px;
--fab-edge: max(16px, calc(env(safe-area-inset-right) + 12px));
--fab-bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
position: fixed;
z-index: 180;
right: var(--fab-edge);
bottom: var(--fab-bottom);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.theme-toggle-button {
box-sizing: border-box;
display: inline-flex;
width: var(--fab-size) !important;
height: var(--fab-size) !important;
min-width: var(--fab-size) !important;
min-height: var(--fab-size) !important;
max-width: var(--fab-size) !important;
max-height: var(--fab-size) !important;
align-items: center;
justify-content: center;
padding: 0 !important;
margin: 0;
border: 1px solid transparent;
border-radius: 999px;
-webkit-backdrop-filter: blur(18px) saturate(1.15);
backdrop-filter: blur(18px) saturate(1.15);
box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent);
pointer-events: auto;
cursor: pointer;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
position: relative;
}
.theme-toggle-button:active { transform: scale(.96); }
.theme-toggle-button::before,
.theme-toggle-button::after { content: none !important; display: none !important; }
.theme-toggle-button [data-theme-toggle-label] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.theme-toggle-button .theme-icon {
display: none;
width: 22px;
height: 22px;
flex: 0 0 auto;
stroke: currentColor;
}
html[data-skin="kage"] .theme-toggle-button {
background: #ffffff;
border-color: color-mix(in srgb, #0a0a0a 14%, transparent);
color: #0a0a0a;
box-shadow: 0 12px 28px color-mix(in srgb, #0a0a0a 14%, transparent);
}
html[data-skin="kage"] .theme-toggle-button .theme-icon--sun { display: block; }
html[data-skin="nocturne"] .theme-toggle-button {
background: #0a0a0a;
border-color: color-mix(in srgb, #ffffff 18%, transparent);
color: #ffffff;
box-shadow: 0 12px 28px color-mix(in srgb, #000000 45%, transparent);
}
html[data-skin="nocturne"] .theme-toggle-button .theme-icon--moon { display: block; }
html[data-theme-mode="auto"] .theme-toggle-button .theme-icon--sun,
html[data-theme-mode="auto"] .theme-toggle-button .theme-icon--moon { display: none !important; }
html[data-theme-mode="auto"] .theme-toggle-button .theme-icon--auto { display: block; }
html[data-theme-mode="auto"][data-skin="kage"] .theme-toggle-button {
background: #ffffff;
color: #0a0a0a;
}
html[data-theme-mode="auto"][data-skin="nocturne"] .theme-toggle-button {
background: #0a0a0a;
color: #ffffff;
}
.theme-toggle-button:hover,
.theme-toggle-button:focus-visible {
border-color: var(--action);
}
@media (max-width: 560px) {
.theme-toggle {
--fab-edge: max(12px, calc(env(safe-area-inset-right) + 8px));
--fab-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
right: var(--fab-edge);
bottom: var(--fab-bottom);
}
}
@media (prefers-reduced-transparency: reduce) {
.theme-toggle-button {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
html {
background-color: var(--paper);
}
html.cloud-entry-active:not(.cloud-entry-revealing), html.cloud-entry-active:not(.cloud-entry-revealing) body { overflow: hidden; overscroll-behavior: none; }
#cloud-entry { --entry-progress: 0; position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; background: #d6e0ea; transition: opacity 260ms ease; touch-action: none; }
#cloud-entry.is-nocturne { background: #101d30; color: #e5edf5; }
#cloud-entry.is-armed { background: transparent; }
#cloud-entry.is-exit { opacity: 0; pointer-events: none; }
.cloud-flight-sky, .cloud-flight-bank, .cloud-flight-mist, .cloud-flight-volume { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cloud-flight-sky { background: radial-gradient(ellipse at 50% 52%,#e9bd9210,transparent 48%),linear-gradient(#d1deec,#f3f3f2); }
.is-nocturne .cloud-flight-sky { background: linear-gradient(#101d30,#17263a); }
.cloud-flight-bank { background: center / cover; mask-image: radial-gradient(ellipse at center, #000 15%, transparent 65%); transform-origin: center; }
#cloud-entry.is-armed:not(.has-volume) .cloud-flight-bank { background-image: url('assets/hero/sky-near.webp?v=20260903-veil9'); }
#cloud-entry.is-armed.is-nocturne:not(.has-volume) .cloud-flight-bank { background-image: url('assets/hero/sky-near-night.webp?v=20260903-veil9'); }
.cloud-flight-mist { background: #e7ecf2; opacity: 0; }
.is-nocturne .cloud-flight-mist { background: #30465f; }
.cloud-flight-sky { z-index: 0; }
.cloud-entry-stars { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; display: none; }
#cloud-entry.is-nocturne .cloud-entry-stars { display: block; }
.cloud-flight-bank { z-index: 1; }
.cloud-sky-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; mask-image: linear-gradient(#000 38%, #0003 78%, transparent); }
.is-nocturne .cloud-sky-plate { mask-image: none; }
.cloud-flight-volume { image-rendering: auto; z-index: 1; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); will-change: transform; animation: cloud-idle-drift 7.2s linear infinite; }
.has-volume .cloud-flight-bank, .has-volume .cloud-flight-mist { display: none; }
.cloud-entry-prompt, .cloud-entry-skip { z-index: 3; }
@keyframes cloud-idle-drift {
0%,100% { transform: translate3d(0,calc(var(--entry-rest,1) * -6.5px),0); }
12.5% { transform: translate3d(calc(var(--entry-rest,1) * 4.6px),calc(var(--entry-rest,1) * -4.6px),0); }
25% { transform: translate3d(calc(var(--entry-rest,1) * 6.5px),0,0); }
37.5% { transform: translate3d(calc(var(--entry-rest,1) * 4.6px),calc(var(--entry-rest,1) * 4.6px),0); }
50% { transform: translate3d(0,calc(var(--entry-rest,1) * 6.5px),0); }
62.5% { transform: translate3d(calc(var(--entry-rest,1) * -4.6px),calc(var(--entry-rest,1) * 4.6px),0); }
75% { transform: translate3d(calc(var(--entry-rest,1) * -6.5px),0,0); }
87.5% { transform: translate3d(calc(var(--entry-rest,1) * -4.6px),calc(var(--entry-rest,1) * -4.6px),0); }
}
#hero-title[tabindex="-1"]:focus { outline: none; }
.cloud-entry-prompt { position: absolute; inset: auto 20px 10%; display: grid; justify-items: center; gap: 12px; color: #14283f; --prompt-fade: clamp(0, 1 - var(--entry-progress, 0) * 7, 1); opacity: calc(var(--prompt-fade) * var(--prompt-fade)); transform: translateY(calc(var(--entry-progress, 0) * -18px)) scale(calc(1 - var(--entry-progress, 0) * .45)); transform-origin: 50% 40%; will-change: opacity, transform; }
.cloud-entry-prompt > span { font: 11px var(--mono, monospace); letter-spacing: .2em; }
.cloud-entry-prompt p { margin: 0; font: 13px var(--body, sans-serif); opacity: .7; }
.cloud-entry-enter, .cloud-entry-skip { padding: 12px 20px; border: 1px solid #62768e33; border-radius: 28px; background: #f6f9fc99; color: #14283f; font: 14px var(--body, sans-serif); cursor: pointer; }
.cloud-entry-enter { position:relative;padding:3px 12px 17px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:14px;letter-spacing:.025em;box-shadow:none; }
.cloud-entry-progress {width:160px;height:2px;background:#62768e26;overflow:hidden;border-radius:2px;}
.cloud-entry-progress > span {display:block;width:100%;height:100%;background:currentColor;opacity:.65;transform:scaleX(var(--loading-progress,0));transform-origin:left;}
.cloud-entry-enter span { display: inline-block; margin-left: 16px; transition: transform 200ms ease; }
.cloud-entry-enter:hover span { transform: translateY(3px); }
.cloud-entry-skip { position: absolute; right: 22px; top: 22px; padding: 10px 16px; background: transparent; font-size: 12px; }
.is-nocturne .cloud-entry-prompt, .is-nocturne .cloud-entry-skip { color: #e5edf5; }
#cloud-entry button:focus-visible { outline: 2px solid #3468ac; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { #cloud-entry { display: none; } }
.cloud-entry-stars {z-index:0;}
.hero h1 {
font-weight: 640;
letter-spacing: -0.025em;
line-height: 1.05;
text-wrap: nowrap;
white-space: nowrap;
}
.hero h1 span {
display: inline;
color: var(--ink);
}
.hero h1 span:last-child {
margin-left: .3em;
color: var(--ink);
-webkit-text-stroke: 0;
}
.hero .hero-intro {
margin-top: clamp(12px, 1.4vw, 20px);
color: var(--ink);
font-family: var(--body);
font-size: var(--type-body);
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.85;
text-transform: none;
white-space: normal;
}
:root { --hero-shadow: 120 105 85; }
html[data-skin="nocturne"] { --hero-shadow: 0 0 0; }
.hero-product-stage::after {
position: absolute;
z-index: 0;
left: 50%;
bottom: 6%;
width: 58%;
height: 7%;
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgb(var(--hero-shadow) / .10) 0%,
rgb(var(--hero-shadow) / .04) 50%,
transparent 76%);
filter: blur(18px);
transform: translateX(-50%);
pointer-events: none;
content: "";
}
.hero-product-image {
filter:
drop-shadow(0 18px 16px rgb(var(--hero-shadow) / .08))
drop-shadow(0 6px 6px rgb(var(--hero-shadow) / .04));
}
.hero-product-stage { z-index: 4; }
.hero-scene:not(.is-roulette):not(.is-switching):not(.is-revealing) .hero-media-visual {
animation: none;
}
@media (min-width: 861px) {
.hero-product-stage {
transform: translate(-50%, -50%);
}
}
.hero-orbit,
.hero-orbit::before,
.hero-orbit::after {
display: none !important;
content: none !important;
opacity: 0 !important;
border: 0 !important;
}
.hero-utility { opacity: .5; transition: opacity 220ms cubic-bezier(.16,1,.3,1); }
.hero-utility:hover,
.hero-utility:focus-within { opacity: 1; }
.hero-meta { opacity: .78; }
.hero-mode {
color: color-mix(in srgb, var(--ink) 62%, transparent);
font-size: var(--type-meta);
letter-spacing: .07em;
}
.hero-mode:hover,
.hero-mode:focus-visible { color: var(--ink); }
.hero-mode[aria-checked="true"] {
color: var(--ink);
font-weight: 600 !important;
}
.hero-mode[aria-checked="true"] span {
display: inline-block;
transform: none !important;
color: var(--ink);
font-size: inherit !important;
font-weight: 600 !important;
letter-spacing: inherit;
}
.hero-scene[data-mode="imagery"] .hero-product-image {
transform: none !important;
}
@media (min-width: 861px) {
.hero h1 {
max-width: none;
margin-inline: auto;
font-size: var(--hero-title-size);
}
.hero .hero-intro { max-width: 46ch; margin-inline: auto; }
.hero-services { inset: 0 calc(clamp(10px, 5vw, 92px) - 12px); }
.hero-mode { width: 150px; }
.hero-mode svg { width: 38px; height: 38px; stroke-width: 1.25; }
@media (prefers-reduced-motion: no-preference) {
.hero-meta,
.hero-utility {
animation: hero-ui-in 480ms both cubic-bezier(.16, 1, .3, 1);
}
.hero .hero-services { animation: none; }
.hero-mode--left {
animation: hero-cat-left 520ms both cubic-bezier(.16, 1, .3, 1);
}
.hero-mode--right {
animation: hero-cat-right 520ms both cubic-bezier(.16, 1, .3, 1);
}
.hero-mode--ugc,
.hero-mode--configurator { animation-delay: 45ms; }
.hero-mode--imagery,
.hero-mode--ar { animation-delay: 80ms; }
.hero-connectors {
animation: hero-rail-in 400ms 40ms both ease;
}
}
.hero-orbit,
.hero-orbit::before,
.hero-orbit::after { display: none !important; }
.hero-haze { width: min(62vw, 800px); }
.hero.has-sky-fallback .hero-haze { width: min(34vw, 420px); }
.hero .hero-actions { margin-top: clamp(6px, 1vw, 18px); }
}
@media (max-width: 860px) {
.hero h1 { font-size: var(--hero-title-size); white-space: normal; text-wrap: balance; }
.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: 0; }
.hero .hero-intro { max-width: 40ch; margin-inline: auto; }
.hero {
min-height: 0;
padding-top: 6px;
padding-bottom: 20px;
}
.hero-showcase-wrap { margin-top: 8px; }
.hero-scene { padding-top: 44px; }
.hero-group {
position: relative;
top: auto;
left: auto;
right: auto;
width: auto;
padding: 10px 4px 2px;
font-size: .5rem;
letter-spacing: .14em;
text-align: center;
}
.hero-group--left { grid-column: 1; }
.hero-group--right { grid-column: 2; }
.hero-mode {
min-height: 48px;
padding: 8px 6px;
font-size: .58rem;
letter-spacing: .06em;
}
.hero-mode svg { width: 26px; height: 26px; }
.hero-readout {
position: relative;
left: auto;
bottom: auto;
width: 100%;
max-width: none;
grid-column: 1 / -1;
margin: 10px 0 0;
padding: 0 8px;
transform: none;
text-align: center;
}
.hero-readout-desc {
white-space: normal;
min-height: calc(1.4em * 2);
}
}
.ribbon-stack {
position: relative;
z-index: 2;
margin-top: 0;
border-top: 1px solid var(--line);
border-bottom: 0;
background: var(--surface);
}
.ribbon {
overflow: hidden;
position: relative;
}
.ribbon + .ribbon { border-top: 1px solid var(--line); }
.ribbon::before,
.ribbon::after {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
width: clamp(40px, 8vw, 130px);
pointer-events: none;
content: "";
}
.ribbon::before { left: 0;  background: linear-gradient(90deg, var(--surface), transparent); }
.ribbon::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.ribbon-track {
display: flex;
width: max-content;
animation: ribbon-run 115s linear infinite;
animation-delay: 0s;
}
.ribbon-track--reverse { animation-direction: reverse; animation-duration: 140s; }
@media (hover: hover) and (pointer: fine) {
.ribbon:hover .ribbon-track,
.ribbon:focus-within .ribbon-track { animation-play-state: paused; }
}
.ribbon.is-ribbon-held .ribbon-track { animation-play-state: paused; }
.ribbon-group { display: flex; flex: none; align-items: center; }
.ribbon-group span,
.ribbon-group .ribbon-item {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-family: var(--display);
letter-spacing: -0.025em;
}
.ribbon-group span::after,
.ribbon-group .ribbon-item::after {
width: 6px;
height: 6px;
margin-inline: clamp(18px, 2.4vw, 40px);
border-radius: 50%;
background: var(--accent);
opacity: .55;
content: "";
}
.ribbon--clients .ribbon-group span,
.ribbon--clients .ribbon-group .ribbon-item {
padding-block: clamp(16px, 1.7vw, 26px);
color: var(--ink);
font-size: clamp(1.35rem, 2.35vw, 2.15rem);
font-weight: 600;
}
.ribbon--industries .ribbon-group span {
padding-block: clamp(11px, 1.2vw, 18px);
color: var(--muted);
font-size: clamp(.92rem, 1.45vw, 1.32rem);
font-weight: 500;
}
.ribbon--industries .ribbon-group span::after {
width: 4px;
height: 4px;
opacity: .4;
}
@keyframes ribbon-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.ribbon-track { animation: none; }
.ribbon { overflow-x: auto; }
.ribbon-group[aria-hidden="true"] { display: none; }
}
.scroll-fade-edge { display: none; }
.site-header {
border-bottom: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header::before {
position: absolute;
z-index: 0;
inset: -8px 0 auto;
height: 16px;
opacity: 1;
background: color-mix(in srgb, var(--paper) 46%, transparent);
-webkit-backdrop-filter: blur(26px) saturate(1.28);
backdrop-filter: blur(26px) saturate(1.28);
-webkit-mask-image: none;
mask-image: none;
pointer-events: none;
content: "";
}
.site-header .header-inner,
.site-header.is-scrolled .header-inner {
border-color: color-mix(in srgb, var(--ink) 13%, transparent);
background: color-mix(in srgb, var(--paper) 46%, transparent) !important;
box-shadow: none;
-webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
backdrop-filter: blur(22px) saturate(1.2) !important;
}
.site-header .header-inner::before { opacity: 0; }
.site-header .header-inner::after { opacity: .55; }
@media (min-width: 861px) {
.hero { padding-top: 9px; }
}
.ribbon--clients .ribbon-group .ribbon-item {
height: auto;
min-height: clamp(48px, 5vw, 64px);
align-items: center;
padding-block: clamp(14px, 1.6vw, 22px);
line-height: 1;
}
.ribbon-logo {
--logo-scale: 1;
display: block;
height: calc(clamp(22px, 2.4vw, 32px) * var(--logo-scale));
width: auto;
max-width: none;
object-fit: contain;
opacity: 1;
filter: grayscale(1) brightness(0) invert(0.52);
}
html[data-skin="nocturne"] .ribbon-logo {
filter: grayscale(1) brightness(0) invert(0.58);
}
.ribbon-logo--dewalt { --logo-scale: 1; }
.ribbon-logo--black-decker { --logo-scale: 1.02; }
.ribbon-logo--emr { --logo-scale: 0.88; }
.ribbon-logo--cubitts { --logo-scale: 0.92; }
.ribbon-logo--kaminos { --logo-scale: 1.3; }
.ribbon-logo--hoffmann { --logo-scale: 1.58; }
.ribbon-logo--mercer { --logo-scale: 1.28; }
.ribbon-logo--hreysti { --logo-scale: 0.945; }
.pipeline-standard {
margin-top: clamp(44px, 5vw, 84px);
padding-top: clamp(26px, 3vw, 44px);
border-top: 1px solid color-mix(in srgb, var(--dark-ink) 20%, transparent);
}
.pipeline-standard-label {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: clamp(20px, 2.4vw, 34px);
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .13em;
text-transform: uppercase;
color: color-mix(in srgb, var(--dark-ink) 66%, transparent);
}
.pipeline-standard-count { color: color-mix(in srgb, var(--dark-ink) 46%, transparent); }
.pipeline-standard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(22px, 3vw, 52px);
}
.standard-point strong {
display: block;
margin-bottom: 8px;
color: var(--dark-ink);
font-family: var(--display);
font-size: clamp(1.02rem, 1.35vw, 1.22rem);
font-weight: 600;
letter-spacing: -0.02em;
}
.standard-point strong em {
font-style: normal;
color: var(--lime);
}
.standard-point span {
display: block;
max-width: 34ch;
color: color-mix(in srgb, var(--dark-ink) 70%, transparent);
font-size: clamp(.88rem, 1.1vw, .96rem);
line-height: 1.55;
}
.button[data-liquid-button].has-liquid {
background: transparent;
border-color: transparent;
box-shadow: none;
transition: none;
}
.button[data-liquid-button].has-liquid:hover,
.button[data-liquid-button].has-liquid:focus-visible {
background: transparent;
border-color: transparent;
box-shadow: none;
transform: none;
}
.button[data-liquid-button] { overflow: visible; isolation: isolate; }
.button[data-liquid-button] .liquid-surface {
position: absolute;
inset: -26px;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.liquid-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.button[data-liquid-button] .button-copy {
position: relative;
z-index: 2;
color: var(--action-ink);
}
[data-hero-particles] { opacity: 0 !important; }
.site-stars {
position: fixed;
inset: 0;
z-index: 1 !important;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 1;
}
html {
overflow-x: clip;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body {
overflow-x: clip;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
background: transparent !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
background: transparent !important;
border: 0 !important;
width: 0 !important;
}
:root {
--cloud-rain-on: 1;
--cloud-rain-intensity: 2;
--cloud-rain-frequency: 2.20;
--cloud-rain-speed: 1.30;
--cloud-rain-color-paper: #264b54;
--cloud-rain-color-night: #c0ced4;
--cloud-rain-color: var(--cloud-rain-color-paper);
--cloud-rain-opacity: 0.75;
--cloud-rain-shape: drop;
--cloud-rain-trail: 0.42;
--cloud-rain-length: 20px;
--cloud-rain-thick: 0.95px;
--cloud-rain-glow: 0.55;
--cloud-rain-spread: 1vw;
--cloud-rain-angle: 1deg;
--cloud-rain-start: -54px;
}
html[data-skin="nocturne"] {
--cloud-rain-color: var(--cloud-rain-color-night);
}
.cloud-rain {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.cloud-rain-canvas {
display: block;
width: 100%;
height: 100%;
}
html[data-cloud-rain="off"] .cloud-rain { display: none; }
@media (prefers-reduced-motion: reduce) {
.cloud-rain { display: none; }
}
.site-header { z-index: 100; }
:root { --surface-alt: #F2F4F7; }
html[data-skin="nocturne"] { --surface-alt: #0a0f1a; }
main > section { position: relative; }
#packs { background: var(--surface-alt); }
#packs.packs-outcomes { background: var(--paper); }
.ribbon-stack + section::after {
position: absolute;
z-index: 1;
top: 0;
left: var(--gutter);
right: var(--gutter);
height: 1px;
background: var(--line);
content: "";
}
main { counter-reset: sec; }
main > section:not(.hero):not(.ribbon-stack) { counter-increment: sec; }
@media (min-width: 1180px) {
main > section:not(.hero):not(.ribbon-stack) > .container { position: relative; }
main > section:not(.hero):not(.ribbon-stack) > .container::before {
position: absolute;
top: 2px;
left: -46px;
content: counter(sec, decimal-leading-zero);
color: color-mix(in srgb, var(--ink) 30%, transparent);
font-family: var(--mono);
font-size: .68rem;
letter-spacing: .14em;
font-variant-numeric: tabular-nums;
}
.section--dark > .container::before,
.outcome-tour .container::before {
color: color-mix(in srgb, var(--dark-ink) 34%, transparent) !important;
}
}
.hero-scene.is-idle .hero-product-stage,
.hero-scene.is-idle .hero-still-stack,
.hero-scene.is-idle .hero-product-image,
.hero-scene.is-idle .hero-product-ghost {
opacity: 0 !important;
filter: none !important;
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
}
.hero-scene.is-spinning .hero-product-stage,
.hero-scene.is-landed .hero-product-stage,
.hero-scene.is-ready:not(.is-idle) .hero-product-stage,
.hero-scene.is-spinning .hero-still-stack,
.hero-scene.is-landed .hero-still-stack,
.hero-scene.is-ready:not(.is-idle) .hero-still-stack,
.hero-scene.is-spinning .hero-product-image,
.hero-scene.is-landed .hero-product-image,
.hero-scene.is-ready:not(.is-idle) .hero-product-image,
.hero-scene.is-spinning .hero-product-ghost,
.hero-scene.is-landed .hero-product-ghost,
.hero-scene.is-ready:not(.is-idle) .hero-product-ghost {
visibility: visible !important;
}
.hero-scene.is-spinning .hero-product-stage {
opacity: calc(0.34 + 0.5 * var(--spin, 0));
filter:
blur(calc((1 - var(--spin, 0)) * 7px))
saturate(calc(0.32 + 0.68 * var(--spin, 0)))
contrast(calc(0.72 + 0.28 * var(--spin, 0)));
pointer-events: none;
transition: opacity 120ms linear, filter 120ms linear;
}
.hero-scene.is-landed .hero-product-stage {
opacity: 1;
filter: none;
transition: opacity 520ms var(--ease-out), filter 520ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.hero-scene.is-idle .hero-product-stage,
.hero-scene.is-idle .hero-still-stack,
.hero-scene.is-idle .hero-product-image,
.hero-scene.is-idle .hero-product-ghost {
opacity: 1 !important;
filter: none !important;
visibility: visible !important;
}
}
.hero-scene.is-spinning .hero-media-visual { transition: opacity 90ms linear; }
.hero-scene.is-idle .hero-mode[aria-checked="true"] {
color: color-mix(in srgb, var(--ink) 62%, transparent);
font-weight: 400 !important;
}
.hero-scene.is-spinning .hero-mode[aria-checked="true"] svg {
transition-duration: 90ms;
animation: none !important;
}
.hero-scene.is-landed .hero-meta {
animation: hero-meta-pop 520ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes hero-meta-pop {
0% { transform: translateY(4px); opacity: .3; }
100% { transform: none; opacity: .78; }
}
.hero-respin {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 50% !important;
background: color-mix(in srgb, var(--surface) 80%, transparent);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--ink);
cursor: pointer;
opacity: 1 !important;
transform: none !important;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.hero-scene:not(.is-spinning) .hero-respin { opacity: 1 !important; transform: none !important; }
.hero-respin:hover:not(:disabled),
.hero-respin:focus-visible:not(:disabled) {
background: color-mix(in srgb, var(--surface) 95%, transparent);
border-color: color-mix(in srgb, var(--ink) 35%, transparent);
color: var(--ink);
transform: none !important;
}
.hero-respin span {
display: inline-block;
font-size: 1.05rem;
line-height: 1;
transform: none !important;
}
@media (max-width: 860px) {
.hero-respin { position: static !important; margin-top: 0 !important; transform: none !important; }
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 14px 24px;
border-radius: 999px;
font-size: .92rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.pack .button { width: 100%; margin-top: 22px; }
.partnership-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
justify-content: center;
}
.hero-actions .hero-readout {
position: relative;
left: auto;
bottom: auto;
width: min(46ch, 92%);
margin: 0;
transform: none;
text-align: center;
z-index: 2;
}
.hero-actions .hero-readout.is-in {
opacity: 1;
transform: none;
}
.hero-scene.is-ready:not(.is-idle):not(.is-spinning) ~ .hero-actions .hero-readout.is-in,
.hero-showcase .hero-scene.is-ready:not(.is-idle):not(.is-spinning) ~ .hero-actions .hero-readout.is-in,
.hero-actions .hero-readout.is-in {
opacity: 1;
}
.hero-scene.is-idle ~ .hero-actions .hero-readout,
.hero-scene.is-spinning ~ .hero-actions .hero-readout {
opacity: 0 !important;
visibility: hidden;
pointer-events: none;
}
.footer-cta { display: grid; gap: 14px; justify-items: end; }
@media (max-width: 900px) { .footer-cta { justify-items: start; } }
.footer-cta-button { --liquid-base: var(--accent); }
.footer-cta-button.has-liquid .button-copy,
[data-liquid-button].has-liquid .button-copy { position: relative; z-index: 2; }
html.is-over-dark .site-header::before {
background: color-mix(in srgb, var(--dark) 54%, transparent);
-webkit-backdrop-filter: blur(26px) saturate(1.18) brightness(0.92);
backdrop-filter: blur(26px) saturate(1.18) brightness(0.92);
}
html.is-over-dark .site-header .brand,
html.is-over-dark .site-header .site-nav a:not(.nav-contact) {
color: var(--dark-ink);
}
html.is-over-dark .site-header .menu-button {
color: var(--dark-ink);
border-color: color-mix(in srgb, var(--dark-ink) 26%, transparent);
}
html.is-over-dark .site-header .header-inner,
html.is-over-dark .site-header.is-scrolled .header-inner {
border-color: color-mix(in srgb, var(--dark-ink) 17%, transparent);
}
html.is-over-dark .site-header .header-inner::after {
opacity: .3;
}
.site-header .brand,
.site-header .site-nav a,
.site-header .brand-mark,
.site-header::before {
transition: color 240ms var(--ease-out), background 240ms var(--ease-out),
border-color 240ms var(--ease-out), opacity 260ms ease;
}
.hero-hint {
position: absolute;
z-index: 7;
left: 50%;
bottom: 2%;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 8px 14px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: var(--ui-radius);
background: color-mix(in srgb, var(--surface) 72%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--muted);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, 8px);
transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
pointer-events: none;
}
.hero-scene.show-hint .hero-hint { opacity: 1; transform: translate(-50%, 0); }
.hero-scene .hero-hint.is-out { opacity: 0; transform: translate(-50%, -6px); }
.hero-hint span { color: var(--accent); font-size: .7rem; line-height: 1; }
@media (max-width: 860px) { .hero-hint { bottom: auto; top: 2%; } }
.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible,
.site-header .site-nav a[aria-current="location"] {
background: none;
text-decoration: none;
}
.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible { color: var(--ink); }
.site-header .site-nav a[aria-current="location"] { color: var(--accent); }
html.is-over-dark .site-header .site-nav a:not(.nav-contact):hover,
html.is-over-dark .site-header .site-nav a:not(.nav-contact):focus-visible { color: var(--dark-ink); }
html.is-over-dark .site-header .site-nav a[aria-current="location"] { color: var(--accent); }
.site-header .site-nav a:active { transform: none; }
@media (min-width: 1024px) {
#process { padding-block: clamp(44px, 4.6vw, 72px); }
#process .pipeline-heading h2 {
max-width: 18ch;
font-size: clamp(1.9rem, 2.9vw, 3.1rem);
line-height: 1.02;
}
#process .pipeline-heading p { padding-top: 4px; font-size: clamp(.94rem, 1.05vw, 1.02rem); }
#process .workflow-pipeline { margin-top: clamp(28px, 3.2vw, 48px); }
#process .workflow-grid { margin-top: 0; }
#process .workflow-step { padding-top: 22px; }
#process .workflow-step--offset { padding-top: 36px; }
#process .workflow-step h3 { font-size: clamp(1.12rem, 1.45vw, 1.45rem); line-height: 1.08; }
#process .workflow-step > p { font-size: .86rem; line-height: 1.45; }
#process .workflow-step-number { top: -16px; font-size: clamp(2.8rem, 4vw, 4.2rem); }
#process .workflow-visual { min-height: 0; height: clamp(112px, 12vh, 150px); margin-top: 16px; }
#process .workflow-visual--signal { gap: 5px; padding: 10px; }
#process .workflow-visual--intake,
#process .workflow-visual--direction,
#process .workflow-visual--pipeline,
#process .workflow-visual--judge,
#process .workflow-visual--iterate { gap: 6px; padding: 10px; }
#process .pipeline-standard { margin-top: clamp(26px, 2.8vw, 44px); padding-top: clamp(18px, 2vw, 28px); }
#process .pipeline-standard-label { margin-bottom: clamp(12px, 1.4vw, 20px); }
#process .pipeline-standard-grid { gap: clamp(18px, 2.4vw, 40px); }
#process .standard-point strong { margin-bottom: 5px; font-size: clamp(.96rem, 1.12vw, 1.06rem); }
#process .standard-point span { font-size: .82rem; line-height: 1.45; }
}
.hero-meta { display: none !important; }
.hero-respin {
position: absolute;
z-index: 6;
left: clamp(10px, 5vw, 92px);
top: 4%;
}
@media (max-width: 860px) { .hero-respin { position: static; margin-top: 10px; } }
.hero-group {
position: absolute;
z-index: 6;
top: 3%;
margin: 0;
color: color-mix(in srgb, var(--ink) 42%, transparent);
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .18em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}
.hero-group--left { left: 0; }
.hero-group--right { right: 0; text-align: right; }
.hero-readout {
position: absolute;
z-index: 6;
left: 50%;
bottom: 1%;
width: min(46ch, 78%);
text-align: center;
transform: translate(-50%, 8px);
opacity: 0;
transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
pointer-events: none;
}
.hero-readout.is-in { opacity: 1; }
.hero-readout-name {
margin: 0 0 5px;
color: var(--ink);
font-family: var(--display);
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
font-weight: 600;
letter-spacing: -0.02em;
}
.hero-readout-desc {
margin: 0;
color: var(--muted);
font-size: clamp(.86rem, 1.02vw, .98rem);
line-height: 1.45;
}
.hero-mode svg {
--orb-highlight: radial-gradient(circle at 30% 26%,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.42) 18%,
transparent 46%);
--orb-body: radial-gradient(circle at 50% 58%,
#f3f5f9 0%,
#dce1e9 48%,
#b4bcc8 78%,
#8791a0 100%);
--orb-rim: inset 0 -2px 5px color-mix(in srgb, var(--ink) 18%, transparent),
inset 0 2px 3px rgba(255, 255, 255, 0.65),
inset -1px -1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
--orb-cast: 0 3px 8px color-mix(in srgb, var(--ink) 12%, transparent),
0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
background: var(--orb-highlight), var(--orb-body);
box-shadow: var(--orb-rim), var(--orb-cast);
color: #1a2f55;
filter: saturate(0.96);
}
.hero-mode:hover svg,
.hero-mode:focus-visible svg {
--orb-body: radial-gradient(circle at 50% 56%,
#f7f9fc 0%,
color-mix(in srgb, var(--accent) 16%, #e2e6ee) 42%,
color-mix(in srgb, var(--accent) 24%, #a8b0be) 100%);
border-color: color-mix(in srgb, var(--accent) 38%, transparent);
color: #1a2f55;
box-shadow:
var(--orb-rim),
0 5px 14px color-mix(in srgb, var(--ink) 14%, transparent),
0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
transform: translateY(-1px) scale(1.06);
filter: none;
}
.hero-mode[aria-checked="true"] svg {
--orb-highlight: radial-gradient(circle at 28% 24%,
rgba(255, 255, 255, 0.55) 0%,
transparent 40%);
--orb-body: radial-gradient(circle at 48% 52%,
color-mix(in srgb, var(--cta-hover, #3357d7) 22%, #fff) 0%,
var(--cta-hover, #3357d7) 46%,
color-mix(in srgb, var(--cta-hover, #3357d7) 88%, #1a3a9a) 100%);
--orb-rim: inset 0 -2px 5px color-mix(in srgb, #1a3a9a 16%, transparent),
inset 0 1px 2px rgba(255, 255, 255, 0.45),
inset -1px -2px 3px color-mix(in srgb, #1a3a9a 10%, transparent);
border-color: color-mix(in srgb, var(--cta-hover, #3357d7) 48%, transparent);
background: var(--orb-highlight), var(--orb-body);
color: var(--action-ink);
box-shadow:
var(--orb-rim),
0 4px 12px color-mix(in srgb, var(--cta-hover, #3357d7) 22%, transparent),
0 0 0 1px color-mix(in srgb, var(--cta-hover, #3357d7) 36%, transparent);
transform: scale(1.12);
filter: none;
}
.hero-mode[aria-checked="true"] span {
display: inline-block;
transform: none;
color: var(--ink);
font-size: inherit;
font-weight: 600;
}
.hero-connectors {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
color: #7a8490;
--hero-rail-active: #8a96a4;
pointer-events: none;
}
.hero-connectors__path {
transition: stroke-width 180ms ease;
}
.hero-connectors__path.is-active {
filter: none;
}
.hero-scene.is-roulette .hero-connectors { opacity: .28; }
html[data-skin="nocturne"] .hero-connectors {
color: #d5deea;
--hero-rail-active: #f4f7fb;
}
@media (min-width: 861px) {
.hero .hero-mode::after {
display: none !important;
}
.hero .hero-mode::before {
width: 7px;
height: 7px;
opacity: 0.42;
background: color-mix(in srgb, var(--muted) 70%, transparent);
}
.hero .hero-mode[aria-checked="true"]::before {
opacity: 0.55;
background: color-mix(in srgb, var(--cta-hover, #3357d7) 55%, transparent);
box-shadow: none;
}
.hero .hero-mode--ugc::before,
.hero .hero-mode--configurator::before {
opacity: 0.34;
}
.hero .hero-mode--ugc[aria-checked="true"]::before,
.hero .hero-mode--configurator[aria-checked="true"]::before {
opacity: 0.42;
}
}
@media (max-width: 860px) {
.hero-connectors { display: none; }
}
.hero-mode svg,
.hero-mode span {
transition: transform 260ms var(--ease-out), color 200ms ease,
border-color 200ms ease, box-shadow 260ms var(--ease-out),
filter 200ms ease;
}
.hero-scene.is-idle .hero-mode[aria-checked="true"] svg,
.hero-scene.is-revealing.is-idle .hero-mode[aria-checked="true"] svg {
--orb-highlight: radial-gradient(circle at 30% 26%,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.42) 18%,
transparent 46%);
--orb-body: radial-gradient(circle at 50% 58%,
#f3f5f9 0%,
#dce1e9 48%,
#b4bcc8 78%,
#8791a0 100%);
--orb-rim: inset 0 -2px 5px color-mix(in srgb, var(--ink) 18%, transparent),
inset 0 2px 3px rgba(255, 255, 255, 0.65),
inset -1px -1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
--orb-cast: 0 3px 8px color-mix(in srgb, var(--ink) 12%, transparent),
0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
border-color: color-mix(in srgb, var(--ink) 14%, transparent) !important;
background: var(--orb-highlight), var(--orb-body) !important;
color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
box-shadow: var(--orb-rim), var(--orb-cast) !important;
transform: none !important;
filter: saturate(0.96);
animation: none !important;
transition-duration: 90ms;
}
.hero-scene.is-spinning .hero-mode[aria-checked="true"] svg,
.hero-scene.is-revealing.is-spinning .hero-mode[aria-checked="true"] svg,
.hero-scene.is-roulette .hero-mode[aria-checked="true"] svg {
animation: none !important;
transition-duration: 90ms;
}
.hero-scene.is-idle .hero-mode[aria-checked="true"] span {
color: inherit;
font-weight: 400 !important;
transform: none !important;
}
.hero-scene.is-idle .hero-mode[aria-checked="true"]::before {
opacity: 0 !important;
}
.hero-scene.is-roulette .hero-mode:not([aria-checked="true"]) svg {
filter: saturate(0.7) brightness(0.97);
opacity: 0.9;
}
.hero-mode.is-landing svg { animation: hero-land 620ms cubic-bezier(.2, 1.4, .35, 1) both; }
@keyframes hero-land {
0%   { transform: scale(1.26); box-shadow: inset 0 -3px 7px color-mix(in srgb, var(--ink) 28%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent); }
55%  { transform: scale(0.97); }
100% { transform: scale(1.14); box-shadow: inset 0 -3px 7px color-mix(in srgb, var(--ink) 32%, transparent), inset 0 2px 4px rgba(255, 255, 255, 0.4), 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
}
html[data-skin="nocturne"] .hero-mode svg {
--orb-highlight: radial-gradient(circle at 30% 26%,
rgba(255, 255, 255, 0.42) 0%,
rgba(255, 255, 255, 0.12) 22%,
transparent 48%);
--orb-body: radial-gradient(circle at 50% 58%,
#6a7a90 0%,
#4e5d72 48%,
#3a4860 100%);
border-color: color-mix(in srgb, #d7dee8 28%, transparent);
color: #d7dee8;
box-shadow:
inset 0 -2px 5px rgba(0, 0, 0, 0.28),
inset 0 2px 3px rgba(255, 255, 255, 0.14),
0 3px 8px rgba(0, 0, 0, 0.22);
filter: none;
}
html[data-skin="nocturne"] .hero-mode:hover svg,
html[data-skin="nocturne"] .hero-mode:focus-visible svg {
--orb-body: radial-gradient(circle at 50% 56%,
#7a8aa0 0%,
#5a6b82 48%,
#44546c 100%);
border-color: color-mix(in srgb, #f1f5f9 36%, transparent);
color: #f1f5f9;
box-shadow:
inset 0 -2px 5px rgba(0, 0, 0, 0.24),
inset 0 2px 3px rgba(255, 255, 255, 0.18),
0 0 0 5px color-mix(in srgb, #f8fafc 16%, transparent);
}
html[data-skin="nocturne"] .hero-mode[aria-checked="true"] svg {
--orb-highlight: radial-gradient(circle at 28% 24%,
rgba(255, 255, 255, 0.42) 0%,
transparent 42%);
--orb-body: radial-gradient(circle at 48% 55%,
color-mix(in srgb, var(--cta-hover, #4087f7) 40%, #1a2740) 0%,
var(--cta-hover, #4087f7) 50%,
color-mix(in srgb, var(--cta-hover, #4087f7) 78%, #0b1734) 100%);
border-color: color-mix(in srgb, var(--cta-hover, #4087f7) 50%, #f8fafc);
color: #f8fafc;
box-shadow:
inset 0 -2px 5px rgba(12, 18, 32, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 0.18),
0 0 0 1px color-mix(in srgb, var(--cta-hover, #4087f7) 45%, transparent);
}
html[data-skin="nocturne"] .hero-scene.is-idle .hero-mode[aria-checked="true"] svg {
--orb-highlight: radial-gradient(circle at 30% 26%,
rgba(255, 255, 255, 0.42) 0%,
rgba(255, 255, 255, 0.12) 22%,
transparent 48%);
--orb-body: radial-gradient(circle at 50% 58%,
#6a7a90 0%,
#4e5d72 48%,
#3a4860 100%);
border-color: color-mix(in srgb, #d7dee8 28%, transparent);
color: #d7dee8;
box-shadow:
inset 0 -2px 5px rgba(0, 0, 0, 0.28),
inset 0 2px 3px rgba(255, 255, 255, 0.14),
0 3px 8px rgba(0, 0, 0, 0.22);
transform: none;
}
html[data-skin="nocturne"] .hero-mode[aria-checked="true"] span {
color: #f8fafc;
}
html[data-skin="nocturne"] .hero-mode[aria-checked="true"]::before {
background: #f8fafc;
box-shadow: 0 0 0 4px color-mix(in srgb, #f8fafc 28%, transparent);
}
html[data-skin="nocturne"] .hero-mode svg,
html[data-skin="nocturne"] .hero-mode span {
transition-duration: 420ms, 380ms, 380ms, 420ms, 380ms;
}
@media (prefers-reduced-motion: reduce) {
.hero-mode:hover svg,
.hero-mode:focus-visible svg,
.hero-mode[aria-checked="true"] svg,
.hero-mode[aria-checked="true"] span,
.hero-scene.is-roulette .hero-mode[aria-checked="true"] svg,
.hero-scene.is-spinning .hero-mode[aria-checked="true"] svg {
transform: none;
}
.hero-mode.is-landing svg { animation: none; }
}
@media (max-width: 860px) {
.hero-mode[aria-checked="true"] {
background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
box-shadow: inset 3px 0 0 var(--accent) !important;
color: var(--ink) !important;
}
.hero-mode[aria-checked="true"] svg { transform: scale(1.08); }
.hero-mode[aria-checked="true"] span { transform: scale(1.06); }
.hero-scene.is-idle .hero-mode[aria-checked="true"] {
background: transparent !important;
box-shadow: none !important;
color: color-mix(in srgb, var(--ink) 62%, transparent) !important;
font-weight: 400 !important;
}
.hero-scene.is-idle .hero-mode[aria-checked="true"] svg {
transform: none;
}
}
#work .work-stage-wrap {
position: relative;
width: 100%;
margin-inline: 0;
overflow: hidden;
border-radius: var(--radius-lg, 24px);
}
#work .work-mosaic { width: 100%; }
#work .work-stage-wrap::before,
#work .work-stage-wrap::after {
position: absolute;
z-index: 3;
top: -1px;
bottom: -1px;
width: clamp(38px, 7vw, 132px);
pointer-events: none;
content: "";
}
#work .work-stage-wrap::before {
left: -1px;
background: linear-gradient(90deg, var(--paper) 8%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent 100%);
}
#work .work-stage-wrap::after {
right: -1px;
background: linear-gradient(270deg, var(--paper) 8%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent 100%);
}
html { scroll-padding-top: 0; }
main > section[id] { scroll-margin-top: calc(var(--header) + 18px); }
#packs, #work { scroll-margin-top: calc(var(--header) + 4px); }
.nav-contact[data-liquid-button] { position: relative; isolation: isolate; overflow: visible; }
.nav-contact[data-liquid-button] .liquid-surface { inset: -14px; }
.nav-contact[data-liquid-button].has-liquid {
background: transparent;
border-color: transparent;
box-shadow: none;
transition: none;
}
.nav-contact[data-liquid-button] > * { position: relative; z-index: 2; }
html.is-over-dark .nav-contact[data-liquid-button] { --liquid-base: var(--accent); }
@media (min-width: 861px) {
.hero .hero-intro { max-width: min(102ch, 100%); }
.hero-showcase-wrap { margin-top: 3px; }
.hero .hero-intro { margin-top: 0; }
}
.hero-actions {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
}
.hero-actions .hero-readout,
.hero .hero-actions .hero-readout {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: min(90ch, 96%) !important;
margin: 0 0 2px !important;
z-index: 2;
text-align: center;
pointer-events: none;
}
.hero-scene .hero-readout { display: none !important; }
.hero-readout-name { display: none; }
.hero-readout {
width: min(90ch, 96%);
bottom: clamp(10px, 1.8vh, 22px);
}
.hero-readout-desc {
font-size: clamp(.88rem, 1.04vw, 1rem);
line-height: 1.3;
}
@media (min-width: 861px) { .hero-readout-desc { white-space: nowrap; } }
.hero-actions .hero-readout {
opacity: 0;
transform: none;
transition: opacity 380ms var(--ease-out, ease);
}
.hero-actions .hero-readout.is-in {
opacity: 1;
transform: none;
}
.hero-scene.is-idle .hero-meta,
.hero-scene.is-spinning .hero-meta {
opacity: 0;
}
.hero-actions .button {
min-height: 58px;
padding: 17px 34px;
font-size: 1.02rem;
letter-spacing: -0.005em;
}
.hero .hero-actions .button[data-liquid-button] {
box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--ink) 10%, transparent);
}
.hero .hero-actions .button[data-liquid-button]:hover,
.hero .hero-actions .button[data-liquid-button]:focus-visible {
box-shadow: 0 8px 18px -8px rgba(61, 132, 255, 0.16);
}
.hero-respin {
position: static;
width: 44px;
min-width: 44px;
padding: 0;
gap: 0;
justify-content: center;
border-radius: 999px;
font-size: 0;
letter-spacing: 0;
}
.hero-respin span { font-size: 1.05rem; line-height: 1; }
@media (max-width: 860px) { .hero-respin { position: static; margin-top: 0; } }
.nav-contact[data-liquid-button] .liquid-surface {
position: absolute;
inset: -14px;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.nav-contact[data-liquid-button] .button-copy {
position: relative;
z-index: 2;
color: inherit;
}
@media (min-width: 861px) {
.hero-utility {
top: 48px;
left: auto;
bottom: auto;
right: calc(clamp(10px, 5vw, 92px) - 12px + 1.5% + 150px + 26px);
gap: 7px;
z-index: 12;
}
.hero-respin { width: 26px; min-width: 26px; min-height: 26px; }
.hero-respin span { font-size: .78rem; }
.hero-input-toggle { min-height: 26px; padding: 4px 9px; font-size: .46rem; }
}
@media (min-width: 861px) {
.hero-group {
top: 13%;
width: 150px;
text-align: center;
}
.hero-group--left  { left: 1.5%; right: auto; }
.hero-group--right { right: 1.5%; left: auto; text-align: center; }
}
@media (min-width: 861px) {
.hero-viewfinder { width: min(21vw, 262px); }
.hero-scene[data-mode="ar"] .hero-video-frame video { width: 22%; height: 62%; }
}
.hero-utility { opacity: 1; }
.hero-respin,
.hero-input-toggle {
opacity: 1;
color: var(--muted);
transition: color 160ms ease, border-color 160ms ease,
background-color 160ms ease;
}
.hero-respin:hover,
.hero-respin:focus-visible,
.hero-input-toggle:hover,
.hero-input-toggle:focus-visible {
color: var(--ink);
border-color: color-mix(in srgb, var(--ink) 34%, transparent);
background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.hero-source-overlay::before {
display: none !important;
content: none !important;
background: none !important;
}
.hero-scene.is-source-visible .hero-utility {
z-index: 14;
opacity: 1;
}
.hero-input-viewport {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
width: 54%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hero-input-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.hero-input-photo.is-active { opacity: 1; }
.hero-input-arrow {
position: absolute;
top: 50%;
z-index: 3;
width: 36px;
height: 36px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: transparent;
color: #fff;
transform: translateY(-50%);
cursor: pointer;
}
.hero-input-arrow--prev { left: 7%; }
.hero-input-arrow--next { right: 7%; }
.hero-input-arrow svg {
width: 20px;
height: 20px;
display: block;
overflow: visible;
}
.hero-input-arrow:focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
html:not([data-skin="nocturne"]) .hero-input-arrow { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.hero-input-photo { transition: none; }
}
@media (min-width: 861px) {
.hero.has-sky .hero-actions,
.hero.has-sky-fallback .hero-actions {
position: relative;
left: auto;
bottom: auto;
transform: none;
margin-top: 8px;
}
.hero-actions .hero-readout {
margin-bottom: 2px;
}
}
.hero-scene .hero-services,
.hero-scene .hero-group,
.hero-scene .hero-readout,
.hero-scene .hero-respin {
transition: opacity 260ms var(--ease-out);
}
.hero-scene.is-source-visible .hero-services,
.hero-scene.is-source-visible .hero-group,
.hero-scene.is-source-visible .hero-readout.is-in {
opacity: .25;
pointer-events: none;
}
.hero-scene.is-spinning .hero-respin,
.hero-scene.is-source-visible .hero-respin {
opacity: .3;
pointer-events: none;
cursor: default;
}
.hero-scene.is-spinning .hero-respin:hover,
.hero-scene.is-source-visible .hero-respin:hover {
color: var(--muted);
background: color-mix(in srgb, var(--surface) 68%, transparent);
border-color: color-mix(in srgb, var(--ink) 14%, transparent);
transform: none;
}
.site-header,
.site-header.is-scrolled {
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-header::before {
opacity: 1;
transition: opacity 240ms var(--ease-out), background 240ms var(--ease-out);
}
.site-header,
.site-header.is-scrolled {
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html:not(.is-past-hero) .site-header::before {
background: color-mix(in srgb, var(--paper) 30%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
backdrop-filter: blur(22px) saturate(1.2);
}
.work-note { border-left: 0; padding-left: 0; }
.pack-policy { border-left: 0; padding-left: 0; }
#work .work-row {
display: flex;
flex-direction: row;
gap: clamp(10px, 1.3vw, 18px);
align-items: stretch;
}
#work .work-row .work-tile {
flex: var(--ar) 1 0;
aspect-ratio: var(--ar);
min-width: 0;
}
@supports (grid-template-rows: minmax(0, 1fr)) {
#work .work-mosaic { align-items: stretch; }
}
#work .work-row .work-tile--tall           { --ar: 0.714; }
#work .work-row .work-tile--square         { --ar: 1; }
#work .work-row .work-tile--wide           { --ar: 1.684; }
#work .work-row .work-tile--hero-tall      { --ar: 0.789; }
#work .work-row .work-tile--banner         { --ar: 2.133; }
#work .work-row .work-tile--centerpiece    { --ar: 0.847; }
#work .work-row .work-tile--banner-caption { --ar: 1.778; }
#work .work-row .work-tile--portrait       { --ar: 0.75; }
#work .work-mosaic {
display: flex;
flex-direction: column;
gap: clamp(10px, 1.3vw, 18px);
align-items: stretch;
}
#work .work-row .work-tile:hover { transform: translateY(-4px); }
@media (max-width: 860px) {
#work .work-row { flex-wrap: wrap; }
#work .work-row .work-tile { flex: var(--ar) 1 34%; }
}
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--section-space: clamp(64px, 7.5vw, 104px);
}
#grain { z-index: 5; opacity: .32; }
html[data-skin="nocturne"] #grain {
opacity: .07;
mix-blend-mode: soft-light;
}
#vignette { z-index: 5; opacity: .72; }
html[data-skin="kage"] #vignette { opacity: .45; }
html[data-skin="kage"] .hero #vignette,
html[data-skin="kage"].has-hero #vignette { opacity: .35; }
.site-stars { z-index: 1 !important; }
.button[data-liquid-button].has-liquid:focus-visible,
.nav-contact[data-liquid-button].has-liquid:focus-visible {
outline: 3px solid var(--lime) !important;
outline-offset: 4px;
box-shadow: 0 0 0 6px var(--ink) !important;
}
.site-header .brand {
font-family: var(--body), "DM Sans", system-ui, sans-serif;
font-size: .92rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.site-header .brand > span:not(.brand-mark),
.footer-brand > span:not(.brand-mark) {
font-family: var(--body), "DM Sans", system-ui, sans-serif;
}
.site-header .brand-mark {
overflow: visible;
border-radius: 0 !important;
background: #0a0a0a !important;
background-image: none !important;
box-shadow: none !important;
-webkit-mask: url("assets/brand/logo.png") center / contain no-repeat;
mask: url("assets/brand/logo.png") center / contain no-repeat;
}
html[data-skin="nocturne"] .site-header .brand-mark,
html.is-over-dark .site-header .brand-mark,
.site-header.is-scrolled html[data-skin="nocturne"] .brand-mark {
background: #F2F4F7 !important;
background-image: none !important;
}
html[data-skin="nocturne"] .site-header.is-scrolled .brand-mark,
html.is-over-dark .site-header.is-scrolled .brand-mark {
background: #F2F4F7 !important;
}
.eyebrow::before {
box-shadow: none;
width: 5px;
height: 5px;
opacity: .7;
}
.ribbon-stack + section::after { display: none; }
.packs-head,
.section-heading {
border-top: 0;
padding-top: 0;
margin-bottom: clamp(20px, 3vw, 36px);
}
@media (min-width: 1180px) {
main > section:not(.hero):not(.ribbon-stack) > .container::before { content: none; }
}
.ribbon-stack {
background: var(--surface);
}
.ribbon--clients {
background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.ribbon--industries {
opacity: 1;
background: color-mix(in srgb, var(--surface) 38%, transparent);
}
.ribbon--industries .ribbon-group span {
padding-block: clamp(8px, .8vw, 12px);
color: color-mix(in srgb, var(--muted) 72%, transparent);
font-size: var(--type-meta);
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
}
.ribbon--industries .ribbon-group span::after {
width: 3px;
height: 3px;
background: currentColor;
opacity: .22;
}
.work-head-title h2,
.packs-head h2,
.outcome-head h2,
.pipeline-heading h2,
#process .pipeline-heading h2 {
font-size: var(--section-display-size);
line-height: 1.06;
letter-spacing: -.03em;
}
#partnership .partnership-copy h2 {
max-width: 12ch;
font-size: clamp(2rem, 3.4vw, 3.2rem);
line-height: 1.04;
}
.client-proof-head h2,
.client-review-showcase .client-proof-head h2 {
font-size: clamp(1.85rem, 3vw, 2.8rem);
line-height: 1.08;
}
.faq-index ol { margin-top: 0; }
.faq-lab-main h2,
.faq-lab-main h2[data-faq-question-current] {
max-width: 22ch;
font-size: clamp(1.55rem, 2.5vw, 2.35rem);
line-height: 1.2;
letter-spacing: -.028em;
}
@media (max-width: 560px) {
.faq-lab-main h2 { max-width: 20ch; font-size: clamp(1.5rem, 7vw, 2.1rem); }
.work-head-title h2 { font-size: 40px; }
}
@media (pointer: fine) {
.spotlight-surface {
transform: perspective(980px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transform-style: preserve-3d;
transition: transform 420ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms ease;
}
.spotlight-surface:hover { will-change: transform; }
.pack.spotlight-surface:hover {
transform: perspective(980px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px);
}
#work .work-mosaic {
perspective: 1600px;
}
#work .work-row {
transform-style: preserve-3d;
}
#work .work-row .work-tile.spotlight-surface:hover {
z-index: 2;
transform: perspective(980px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}
.faq-visual-card.spotlight-surface,
.partnership-month--front.spotlight-surface,
.client-review-visual.spotlight-surface {
transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.client-review-visual.spotlight-surface:hover {
box-shadow: 0 28px 56px color-mix(in srgb, var(--ink) 16%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.spotlight-surface,
.pack.spotlight-surface:hover,
#work .work-row .work-tile.spotlight-surface:hover,
.partnership-month--back,
.partnership-month--middle {
transform: none;
will-change: auto;
}
}
.faq-visual-stage { perspective: 1200px; }
.partnership-visual { perspective: 1600px; }
@media (min-width: 861px) {
.partnership-month--back {
transform: translateX(16px) rotateY(-7deg);
transform-origin: 85% 40%;
}
.partnership-month--middle {
transform: translateX(6px) rotateY(-3.5deg);
transform-origin: 85% 40%;
}
}
.work-tile .placeholder-label {
opacity: .78;
background: color-mix(in srgb, var(--dark) 48%, transparent);
}
.work-tile:hover .placeholder-label {
background: color-mix(in srgb, var(--dark) 62%, transparent);
border-color: color-mix(in srgb, var(--dark-ink) 28%, transparent);
color: var(--dark-ink);
}
.workflow-step,
.pack,
.faq-visual-card,
.client-review-showcase {
background-clip: padding-box;
}
html[data-skin="nocturne"] .ribbon-stack {
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
html[data-skin="nocturne"] .ribbon--industries {
opacity: 1;
background: color-mix(in srgb, var(--surface) 28%, transparent);
}
html[data-skin="nocturne"] .ribbon--industries .ribbon-group span {
color: color-mix(in srgb, var(--muted) 80%, transparent);
}
body.nav-open { overflow: hidden; }
@media (max-width: 860px) {
body.nav-open::before {
position: fixed;
z-index: 360;
inset: 0;
background: var(--paper);
content: "";
pointer-events: none;
}
body.nav-open .site-header {
z-index: 500;
overflow: visible;
}
body.nav-open .design-lab-root,
body.nav-open .theme-toggle {
visibility: hidden;
pointer-events: none;
}
body.nav-open .site-header .header-inner {
overflow: visible;
isolation: auto;
transform: none;
filter: none;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.site-header .brand,
.site-header .menu-button {
position: relative;
z-index: 420;
}
.site-header .site-nav.is-open {
position: fixed;
inset: 0;
z-index: 410;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 2px;
width: auto;
height: auto;
max-height: none;
margin: 0;
padding: calc(var(--header) + 28px) 20px max(28px, env(safe-area-inset-bottom));
overflow-x: hidden;
overflow-y: auto;
border: 0;
border-radius: 0;
background: var(--paper);
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.site-header .site-nav.is-open a,
.site-header .site-nav.is-open a span,
.site-header .site-nav.is-open a .button-copy {
position: relative;
display: flex;
min-height: 48px;
align-items: center;
letter-spacing: 0.01em;
text-transform: none;
text-shadow: none;
-webkit-text-stroke: 0;
-webkit-text-fill-color: currentColor;
transform: none;
}
.site-header .site-nav.is-open a,
html.is-over-dark .site-header .site-nav.is-open a:not(.nav-contact) {
width: 100%;
padding: 10px 12px;
border-radius: 14px;
background: none;
color: var(--ink);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.2;
}
.site-header .site-nav.is-open a::before,
.site-header .site-nav.is-open a::after,
.site-header .site-nav.is-open .alt {
display: none !important;
content: none !important;
}
.site-header .site-nav.is-open a:not(.nav-contact):hover,
.site-header .site-nav.is-open a:not(.nav-contact):focus-visible,
.site-header .site-nav.is-open a[aria-current="location"] {
background: color-mix(in srgb, var(--ink) 6%, transparent);
text-decoration: none;
transform: none;
}
.site-header .site-nav.is-open a[aria-current="location"] { color: var(--accent); }
.site-header .site-nav.is-open .nav-contact {
margin-top: 12px;
justify-content: center;
border-radius: 999px;
background: var(--action);
color: var(--action-ink);
transform: none;
box-shadow: none;
}
.site-header .site-nav.is-open .nav-contact:hover,
.site-header .site-nav.is-open .nav-contact:focus-visible {
background: var(--cta-hover, #3357d7);
border-color: var(--cta-hover, #3357d7);
color: var(--action-ink);
box-shadow: none;
filter: none;
transform: none;
}
}
.workflow-step--weighted {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
background: color-mix(in srgb, var(--paper) 6%, transparent);
}
#process .workflow-step--weighted .workflow-step-kicker,
#process .workflow-step--gate .workflow-step-kicker {
color: var(--accent);
font-weight: 600;
}
#process .workflow-step--weighted h3,
#process .workflow-step--gate h3 {
letter-spacing: -.03em;
}
#process .workflow-gate {
color: color-mix(in srgb, var(--dark-ink) 70%, transparent);
}
html[data-skin="nocturne"] #process .workflow-gate {
border-top-color: color-mix(in srgb, var(--accent) 48%, transparent);
border-bottom-color: color-mix(in srgb, var(--dark-ink) 16%, transparent);
}
.pack-policy {
max-width: none;
width: 100%;
margin-top: 22px;
padding: 16px 0 0;
font-size: 0.86rem;
line-height: 1.45;
}
@media (min-width: 1024px) {
.pack-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.pack-policy {
text-wrap: pretty;
}
}
html[data-skin="nocturne"] .site-header.is-scrolled::before {
background: color-mix(in srgb, var(--paper) 90%, transparent);
}
.hero-copy {
filter: none;
will-change: opacity, transform;
}
.pack,
.hero-meta,
.hero-input-toggle,
.hero-play,
.hero-configurator-controls {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (pointer: coarse) {
.global-shader-field { opacity: .72; }
}
@media (max-width: 860px) {
.hero {
min-height: 0;
padding-top: 6px;
padding-bottom: 18px;
}
.hero-showcase-wrap { margin-top: 6px; }
.hero-scene { padding-top: 42px; }
.hero-scene { overflow: hidden; }
.hero-utility {
display: flex !important;
top: 6px;
right: 8px;
left: auto;
z-index: 14;
}
.hero-input-toggle {
display: inline-flex !important;
min-height: 28px;
padding: 4px 10px;
font-size: .5rem;
}
.hero-source-overlay {
left: 50%;
right: auto;
top: 36%;
width: min(78vw, 320px);
max-width: calc(100vw - 24px);
aspect-ratio: 1.3;
transform: translate(-50%, -50%) scale(.92);
}
.hero-scene.is-source-visible .hero-source-overlay {
transform: translate(-50%, -50%) scale(1) !important;
}
.hero-input-viewport { width: 50%; }
.hero-source-overlay::after { width: 52%; }
.hero-input-arrow--prev { left: 4%; }
.hero-input-arrow--next { right: 4%; }
.hero-group {
position: relative;
top: auto;
left: auto;
right: auto;
width: auto;
padding: 10px 4px 0;
font-size: .5rem;
letter-spacing: .14em;
text-align: center;
}
.hero-group--left { grid-column: 1; }
.hero-group--right { grid-column: 2; }
.hero-mode {
min-height: 48px;
padding: 8px 6px;
font-size: .58rem;
}
.hero-mode svg { width: 26px; height: 26px; }
.hero-readout,
.hero-readout.is-in,
.hero-scene.is-ready .hero-readout.is-in {
position: relative;
left: auto;
bottom: auto;
width: 100%;
grid-column: 1 / -1;
margin: 10px 0 0;
padding: 0 10px;
transform: none;
text-align: center;
}
.hero-readout-desc {
white-space: normal;
min-height: calc(1.4em * 2);
}
}
html[data-skin="nocturne"] {
--paper: #020617;
--surface: #030712;
--surface-alt: #0a0f1a;
--dark: #010409;
--dark-2: #0f172a;
--proof-bg: #030712;
--proof-surface: #0f172a;
--line: rgba(148, 163, 184, 0.11);
--dark-line: rgba(59, 130, 246, 0.13);
}
html[data-skin="nocturne"] body { background: var(--paper); }
html[data-skin="nocturne"] .hero,
html[data-skin="nocturne"] #work {
background: var(--paper);
}
html[data-skin="nocturne"] .ribbon-stack {
background: #030712;
border-top-color: color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-skin="nocturne"] .ribbon--industries {
background: color-mix(in srgb, var(--surface) 40%, transparent);
}
html[data-skin="nocturne"] .pack {
background: color-mix(in srgb, var(--dark-2) 55%, var(--surface-alt));
border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-skin="nocturne"] .client-review-showcase {
background: color-mix(in srgb, var(--proof-surface) 82%, var(--proof-bg));
border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-skin="nocturne"] .workflow-step {
background: color-mix(in srgb, var(--paper) 18%, transparent);
}
html[data-skin="nocturne"] .faq-index,
html[data-skin="nocturne"] .faq-lab-main {
border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-skin="nocturne"] main > section,
html[data-skin="nocturne"] .site-footer {
--blend-size: clamp(104px, 13vw, 176px);
--blend-from: var(--paper);
--section-bg: var(--paper);
}
html[data-skin="nocturne"] .hero,
html[data-skin="nocturne"] #work {
--section-bg: var(--paper);
}
html[data-skin="nocturne"] #packs {
--blend-from: var(--paper);
--section-bg: var(--surface-alt);
}
html[data-skin="nocturne"] #process {
--blend-from: var(--surface-alt);
--section-bg: var(--dark);
}
html[data-skin="nocturne"] #partnership {
--blend-from: var(--dark);
--section-bg: var(--paper);
}
html[data-skin="nocturne"] #faq {
--blend-from: var(--dark);
--section-bg: var(--dark);
}
html[data-skin="nocturne"] .site-footer {
--blend-from: var(--dark);
--section-bg: var(--dark);
}
html[data-skin="nocturne"] #packs,
html[data-skin="nocturne"] #process,
html[data-skin="nocturne"] #partnership,
html[data-skin="nocturne"] #faq,
html[data-skin="nocturne"] .site-footer {
background:
linear-gradient(
to bottom,
var(--blend-from) 0,
color-mix(in srgb, var(--blend-from) 82%, var(--section-bg)) 28px,
color-mix(in srgb, var(--blend-from) 48%, var(--section-bg)) 72px,
color-mix(in srgb, var(--blend-from) 16%, var(--section-bg)) calc(var(--blend-size) - 36px),
var(--section-bg) var(--blend-size),
var(--section-bg) 100%
);
}
html[data-skin="nocturne"] #packs::before,
html[data-skin="nocturne"] #process::before,
html[data-skin="nocturne"] #partnership::before,
html[data-skin="nocturne"] #faq::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 72px;
z-index: 0;
pointer-events: none;
background: var(--blend-from);
opacity: .38;
filter: blur(36px);
}
html[data-skin="nocturne"] #packs.section,
html[data-skin="nocturne"] #process.section,
html[data-skin="nocturne"] #partnership.section,
html[data-skin="nocturne"] #faq.section {
padding-top: calc(var(--section-space, 88px) + clamp(8px, 1.4vw, 20px));
}
html[data-skin="nocturne"] #work,
html[data-skin="nocturne"] #packs,
html[data-skin="nocturne"] #partnership,
html[data-skin="nocturne"] #faq {
box-shadow: none;
}
#packs .packs-head h2 {
max-width: none;
margin: 0;
}
.packs-title-line {
display: block;
max-width: 18ch;
}
#packs .packs-head > p {
max-width: 52ch;
margin-top: 16px;
color: var(--muted);
font-size: clamp(0.95rem, 1.15vw, 1.05rem);
line-height: 1.45;
}
#packs .pack-grid {
margin-top: clamp(28px, 3vw, 48px);
}
#packs .pack-price small {
display: block;
margin-top: 6px;
}
#packs .catalogue-program { display: none !important; }
#process.process-desk,
#process {
background: #F7F8FA !important;
}
html[data-skin="nocturne"] #process.process-desk,
html[data-skin="nocturne"] #process {
background: var(--paper, #0a0f1a) !important;
}
#process.process-desk::before,
#process::before {
content: none !important;
background: none !important;
}
#faq.studio-panel-band,
html[data-skin="nocturne"] #faq.studio-panel-band {
position: relative;
background: #F7F8FA;
color: var(--ink, #0b1734);
padding: clamp(56px, 7vw, 96px) 0;
border: 0;
box-shadow: none;
overflow: visible;
}
html[data-skin="nocturne"] #faq.studio-panel-band {
background: var(--paper, #0a0f1a);
}
html[data-skin="nocturne"] #faq.studio-panel-band::before { display: none; }
.studio-panel-alias {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
pointer-events: none;
}
#faq .studio-panel-container,
.studio-panel-container {
width: min(1600px, calc(100% - clamp(32px, 7vw, 112px)));
max-width: none;
margin-inline: auto;
padding: 0;
}
.studio-panel-frame {
--studio-h: clamp(560px, 70vh, 700px);
position: relative;
display: grid;
height: var(--studio-h);
min-height: var(--studio-h);
max-height: var(--studio-h);
padding: clamp(28px, 3vw, 44px) clamp(28px, 3.2vw, 48px) clamp(22px, 2.4vw, 32px);
border: 0;
border-radius: 28px;
background:
radial-gradient(ellipse 95% 65% at 14% -14%, color-mix(in srgb, #6f8fac 42%, transparent), transparent 56%),
radial-gradient(ellipse 75% 55% at 90% -4%, color-mix(in srgb, #9ED0FF 26%, transparent), transparent 50%),
radial-gradient(ellipse 60% 48% at 50% 112%, color-mix(in srgb, #4A6588 58%, transparent), transparent 60%),
linear-gradient(158deg,
#2a3a5c 0%,
#1c2c4a 22%,
#142038 48%,
#0c162a 74%,
#020617 100%);
box-shadow:
0 40px 80px color-mix(in srgb, #020617 22%, transparent),
0 12px 28px color-mix(in srgb, #0b1734 14%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
color: #F7F8FA;
overflow: hidden;
}
.studio-panel-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(168px, 0.24fr);
gap: clamp(24px, 3.5vw, 48px);
align-items: stretch;
height: 100%;
min-height: 0;
}
.studio-panel-main {
position: relative;
min-width: 0;
min-height: 0;
height: 100%;
overflow: hidden;
}
.studio-panel-view {
display: none;
position: absolute;
inset: 0;
min-width: 0;
grid-template-rows: auto minmax(0, 1fr);
gap: clamp(18px, 2.2vw, 28px);
align-content: start;
overflow: hidden;
}
.studio-panel-view.is-active {
display: grid;
animation: studio-panel-in 380ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes studio-panel-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.studio-panel-view.is-active { animation: none; }
}
.studio-panel-head {
display: grid;
gap: 10px;
max-width: min(36ch, 100%);
}
.studio-panel-kicker {
margin: 0;
color: color-mix(in srgb, #9dbbdc 78%, #F7F8FA);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .16em;
text-transform: uppercase;
}
.studio-panel-head h2 {
margin: 0;
color: #F7F8FA;
font-family: var(--display);
font-size: clamp(1.85rem, 3.2vw, 2.85rem);
font-weight: 400;
line-height: 1.04;
letter-spacing: -.035em;
}
.studio-panel-proof {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 18px;
min-height: 0;
height: 100%;
}
.client-review-stage {
position: relative;
min-height: 0;
height: 100%;
}
.client-review {
position: absolute;
inset: 0;
display: grid;
gap: clamp(22px, 3vw, 36px);
align-content: center;
justify-items: start;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 280ms ease;
}
.client-review.is-active {
position: relative;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.client-review-identity {
display: flex;
align-items: center;
gap: 14px;
}
.client-review-avatar {
display: block;
width: 48px;
height: 48px;
flex: 0 0 auto;
overflow: hidden;
border-radius: 50%;
border: 1px solid color-mix(in srgb, #9dbbdc 36%, transparent);
background: color-mix(in srgb, #1a2744 88%, #3468ac);
object-fit: cover;
}
.client-review-identity strong {
display: block;
color: #F7F8FA;
font-size: .95rem;
font-weight: 600;
letter-spacing: -.01em;
}
.client-review-identity span {
display: block;
margin-top: 2px;
color: color-mix(in srgb, #F7F8FA 55%, transparent);
font-size: .8rem;
line-height: 1.35;
}
.client-review blockquote {
margin: 0;
max-width: min(22ch, 100%);
color: #F7F8FA;
font-family: var(--display);
font-size: clamp(1.7rem, 3vw, 2.55rem);
font-weight: 400;
letter-spacing: -.035em;
line-height: 1.1;
}
.studio-panel-nav {
display: grid;
grid-template-columns: 40px auto minmax(0, 1fr) 40px;
gap: 12px;
align-items: center;
margin: 0;
padding: 0;
border: 0;
}
.studio-panel-nav[hidden] { display: none !important; }
.studio-panel-nav-btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 1px solid color-mix(in srgb, #F7F8FA 16%, transparent);
border-radius: 50%;
background: transparent;
color: color-mix(in srgb, #F7F8FA 70%, transparent);
cursor: pointer;
transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.studio-panel-nav-btn:hover,
.studio-panel-nav-btn:focus-visible {
color: #F7F8FA;
border-color: color-mix(in srgb, #9dbbdc 45%, transparent);
background: color-mix(in srgb, #3468ac 14%, transparent);
outline: none;
}
.studio-panel-nav-status {
margin: 0;
color: color-mix(in srgb, #F7F8FA 55%, transparent);
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .12em;
}
.studio-panel-progress {
display: block;
height: 1px;
background: color-mix(in srgb, #F7F8FA 14%, transparent);
overflow: hidden;
}
.studio-panel-progress i {
display: block;
width: 34%;
height: 100%;
background: color-mix(in srgb, #3468ac 80%, #fff);
box-shadow: 0 0 8px color-mix(in srgb, #3468ac 40%, transparent);
transition: width 280ms ease;
}
#faq .faq-split {
display: grid;
grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
gap: clamp(22px, 3.2vw, 44px);
align-items: start;
min-height: 0;
height: 100%;
overflow: hidden;
}
#faq .faq-index {
display: grid;
gap: 0;
min-height: 0;
overflow: auto;
border-top: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
scrollbar-width: none;
}
#faq .faq-index::-webkit-scrollbar { display: none; }
#faq .faq-index button {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: center;
width: 100%;
min-height: 44px;
padding: 10px 0;
border: 0;
border-bottom: 1px solid color-mix(in srgb, #F7F8FA 10%, transparent);
background: transparent;
color: color-mix(in srgb, #F7F8FA 48%, transparent);
text-align: left;
cursor: pointer;
transition: color 160ms ease;
}
#faq .faq-index button span {
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .12em;
color: inherit;
}
#faq .faq-index button strong {
font-size: .9rem;
font-weight: 600;
color: inherit;
}
#faq .faq-index button:hover,
#faq .faq-index button:focus-visible {
color: color-mix(in srgb, #F7F8FA 88%, transparent);
outline: none;
}
#faq .faq-index button[aria-selected="true"] {
color: #F7F8FA;
}
#faq .faq-index button[aria-selected="true"] strong {
box-shadow: inset 0 -1px 0 #3468ac;
}
#faq .faq-answer-pane {
min-width: 0;
padding-top: 4px;
}
#faq .faq-count {
margin: 0 0 12px;
color: color-mix(in srgb, #9dbbdc 70%, #F7F8FA);
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .14em;
text-transform: uppercase;
}
#faq .faq-answer-pane h3 {
margin: 0;
max-width: 22ch;
color: #F7F8FA;
font-family: var(--display);
font-size: clamp(1.3rem, 2.2vw, 1.85rem);
font-weight: 400;
line-height: 1.14;
letter-spacing: -.03em;
}
#faq .faq-answer-current {
margin: 16px 0 0;
max-width: 42ch;
color: color-mix(in srgb, #F7F8FA 72%, transparent);
font-size: 1rem;
line-height: 1.58;
}
#faq.is-changing .faq-answer-pane h3,
#faq.is-changing .faq-answer-current {
animation: faq-in 380ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes faq-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.studio-proof-layout {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(20px, 3vw, 40px);
align-items: stretch;
min-height: 0;
height: 100%;
}
.studio-proof-visual {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 16px;
border: 1px solid color-mix(in srgb, #fff 12%, transparent);
background: linear-gradient(145deg, #2a3a58, #152033);
min-height: 0;
}
.studio-proof-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .9;
}
.studio-proof-visual span {
position: absolute;
left: 12px;
bottom: 10px;
color: color-mix(in srgb, #F7F8FA 62%, transparent);
font-family: var(--mono);
font-size: .52rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.studio-proof-metrics {
display: grid;
gap: 0;
align-content: start;
min-height: 0;
overflow: auto;
scrollbar-width: none;
}
.studio-proof-metrics::-webkit-scrollbar { display: none; }
.studio-proof-metric {
display: grid;
grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
gap: clamp(14px, 2vw, 24px);
align-items: baseline;
padding: clamp(16px, 2vw, 22px) 0;
border-bottom: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
}
.studio-proof-metric:first-child { border-top: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent); }
.studio-proof-value {
margin: 0;
color: #F7F8FA;
font-family: var(--display);
font-size: clamp(2.4rem, 4.2vw, 3.6rem);
font-weight: 400;
letter-spacing: -.04em;
line-height: .92;
}
.studio-proof-label {
margin: 0;
color: #F7F8FA;
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
letter-spacing: -.02em;
}
.studio-proof-note {
margin: 6px 0 0;
max-width: 36ch;
color: color-mix(in srgb, #F7F8FA 55%, transparent);
font-size: .9rem;
line-height: 1.45;
}
.studio-panel-side {
display: grid;
align-content: start;
gap: 16px;
padding: 4px 0 0 clamp(8px, 1vw, 16px);
border-left: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
min-height: 0;
}
.studio-panel-modes {
display: grid;
gap: 8px;
width: 100%;
padding: 0;
border: 0;
background: transparent;
}
.studio-panel-mode {
appearance: none;
display: inline-flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
width: 100%;
height: 44px;
min-height: 44px;
max-height: 44px;
margin: 0;
padding: 0 14px;
border: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
border-radius: 999px;
background: transparent;
color: color-mix(in srgb, #F7F8FA 55%, transparent);
font: inherit;
font-size: .9rem;
font-weight: 500;
line-height: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
outline: none;
transform: none;
box-shadow: none;
transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.studio-panel-mode-dot {
width: 7px;
height: 7px;
flex: 0 0 auto;
border-radius: 50%;
border: 1px solid color-mix(in srgb, #F7F8FA 30%, transparent);
background: transparent;
}
.studio-panel-mode:hover,
.studio-panel-mode:focus-visible {
color: #F7F8FA;
border-color: color-mix(in srgb, #F7F8FA 28%, transparent);
background: color-mix(in srgb, #F7F8FA 6%, transparent);
}
.studio-panel-mode[aria-selected="true"] {
color: #F7F8FA;
border-color: color-mix(in srgb, #3468ac 50%, transparent);
background: color-mix(in srgb, #3468ac 22%, transparent);
font-weight: 500;
}
.studio-panel-mode[aria-selected="true"] .studio-panel-mode-dot {
border-color: #3468ac;
background: #3468ac;
}
.studio-panel-jump,
.studio-panel-jump-link { display: none !important; }
@media (max-width: 860px) {
#faq.studio-panel-band { padding: clamp(40px, 8vw, 64px) 0; }
.studio-panel-container {
width: min(100%, calc(100% - 24px));
}
.studio-panel-frame {
--studio-h: clamp(560px, 78svh, 720px);
height: var(--studio-h);
min-height: var(--studio-h);
max-height: var(--studio-h);
padding: clamp(20px, 4.5vw, 26px) clamp(16px, 4vw, 22px) clamp(16px, 4vw, 22px);
border-radius: 22px;
}
.studio-panel-grid {
grid-template-columns: 1fr;
gap: 18px;
height: 100%;
min-height: 0;
}
.studio-panel-main {
position: relative;
height: 100%;
min-height: 0;
overflow: hidden;
}
.studio-panel-view {
position: absolute;
inset: 0;
height: auto;
overflow: auto;
scrollbar-width: none;
}
.studio-panel-view::-webkit-scrollbar { display: none; }
.studio-panel-view:not(.is-active) { display: none; }
.studio-panel-side {
order: -1;
padding: 0 0 14px;
border-left: 0;
border-bottom: 1px solid color-mix(in srgb, #F7F8FA 12%, transparent);
}
.studio-panel-modes {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 4px;
border: 1px solid color-mix(in srgb, #F7F8FA 14%, transparent);
border-radius: 14px;
background: color-mix(in srgb, #0b1734 18%, transparent);
}
.studio-panel-mode {
justify-content: center;
height: 40px;
min-height: 40px;
max-height: 40px;
padding: 0 6px;
border-radius: 10px;
border-color: transparent;
font-size: .76rem;
}
.studio-panel-mode-dot { display: none; }
#faq .faq-split {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
gap: 12px;
height: 100%;
min-height: 0;
overflow: hidden;
}
#faq .studio-panel-view[data-panel-view="faq"] .faq-index,
#faq .faq-index {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 0 !important;
padding: 0 0 10px !important;
-webkit-overflow-scrolling: touch;
max-height: none !important;
}
#faq .faq-index button {
display: inline-flex !important;
flex: 0 0 auto !important;
grid-template-columns: none !important;
align-items: center !important;
gap: 0 !important;
width: auto !important;
min-height: 34px !important;
padding: 0 12px !important;
border: 1px solid color-mix(in srgb, #F7F8FA 14%, transparent) !important;
border-radius: 999px !important;
white-space: nowrap !important;
}
#faq .faq-index button strong { display: none !important; }
#faq .faq-index button span {
font-size: .62rem;
letter-spacing: .1em;
}
#faq .faq-index button[aria-selected="true"] {
border-color: color-mix(in srgb, #3468ac 55%, transparent);
background: color-mix(in srgb, #3468ac 22%, transparent);
color: #F7F8FA;
}
#faq .faq-index button[aria-selected="true"] strong { box-shadow: none; }
#faq .faq-answer-pane {
min-height: 0;
overflow: auto;
padding-top: 0;
}
#faq .faq-answer-pane h3 {
font-size: clamp(1.15rem, 5vw, 1.45rem);
max-width: 100%;
}
#faq .faq-answer-current {
margin-top: 12px;
font-size: .92rem;
max-width: 100%;
}
.studio-proof-layout {
grid-template-columns: 1fr;
gap: 14px;
height: 100%;
min-height: 0;
overflow: auto;
}
.studio-proof-visual {
aspect-ratio: 16 / 10;
max-height: 160px;
}
.studio-panel-head { max-width: 100%; }
.studio-panel-head h2 {
font-size: clamp(1.45rem, 6.5vw, 1.85rem);
}
.client-review blockquote {
max-width: 100%;
font-size: clamp(1.35rem, 5.5vw, 1.75rem);
}
.studio-panel-nav {
grid-template-columns: 40px auto minmax(0, 1fr) 40px;
}
}
.site-footer,
html[data-skin="nocturne"] .site-footer {
--footer-night: #020617;
position: relative;
z-index: auto;
isolation: auto;
background: transparent !important;
color: var(--dark-ink, #f4f0e7);
padding: 0;
border: 0;
box-shadow: none;
overflow: hidden;
}
.site-footer::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: var(--footer-night);
}
.site-footer::before,
.site-footer::after,
.footer-stage,
.footer-stage-canvas {
border-top: 0 !important;
outline: 0 !important;
}
.site-footer > .footer-stars {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.footer-main {
position: relative;
z-index: 6;
display: grid;
grid-template-columns: minmax(240px, .95fr) minmax(0, 1.55fr);
gap: clamp(32px, 5vw, 72px);
padding: 48px 32px;
border-top: 0;
background: transparent;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 14px;
color: inherit;
font-family: var(--body);
font-size: clamp(1.55rem, 2.4vw, 2.15rem);
font-weight: 700;
letter-spacing: .06em;
text-decoration: none;
line-height: 1;
}
.footer-brand .brand-mark {
width: 36px;
height: 36px;
background: #F2F4F7 !important;
background-image: none !important;
-webkit-mask: url("assets/brand/logo.png") center / contain no-repeat;
mask: url("assets/brand/logo.png") center / contain no-repeat;
}
.footer-about {
margin: 24px 0 0;
max-width: 34ch;
color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 68%, transparent);
font-size: var(--type-body);
line-height: 1.85;
}
.footer-copy {
margin: 24px 0 0;
color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 42%, transparent);
font-family: var(--mono);
font-size: var(--type-meta);
letter-spacing: .1em;
text-transform: uppercase;
}
.site-footer .footer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(180px, .95fr);
gap: 24px;
padding: 0;
border: 0;
align-items: start;
}
.site-footer .footer-col h3 {
margin: 0 0 16px;
color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 48%, transparent);
font-family: var(--mono);
font-size: var(--type-meta);
letter-spacing: .14em;
text-transform: uppercase;
}
.site-footer .footer-col ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer .footer-col a {
color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 82%, transparent);
font-size: var(--type-meta);
text-decoration: none;
}
.site-footer .footer-col a:hover { color: #fff; }
.footer-col--end {
justify-self: end;
text-align: left;
width: min(100%, 240px);
}
.footer-cta-stack {
display: grid;
gap: 12px;
justify-items: start;
margin-top: 28px;
}
.footer-cta-stack .footer-email {
color: color-mix(in srgb, var(--dark-ink, #f4f0e7) 62%, transparent);
font-size: .86rem;
text-decoration: none;
}
.footer-cta-stack .footer-email:hover { color: #fff; }
.footer-stage {
position: relative;
z-index: 5;
height: clamp(280px, 42vw, 460px);
min-height: clamp(280px, 42vw, 460px);
max-height: clamp(280px, 42vw, 460px);
margin-top: -72px;
overflow: hidden;
contain: size layout;
pointer-events: auto;
touch-action: pan-y;
background: transparent;
}
.footer-stage.is-dragging { cursor: grabbing; }
.footer-stage::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
height: 120px;
pointer-events: none;
background: linear-gradient(180deg, var(--footer-night, #020617) 0%, rgba(2, 6, 23, 0) 100%);
}
.footer-meteors { display: none !important; }
.footer-stage-canvas {
position: absolute !important;
z-index: 1;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
max-height: 100%;
background: transparent;
pointer-events: none;
}
.footer-stage.is-static {
background:
linear-gradient(180deg, transparent 48%, rgba(90, 120, 160, .05) 78%, transparent 100%),
linear-gradient(90deg,
transparent 0%,
rgba(142, 171, 216, .07) 14%,
transparent 22%,
rgba(142, 171, 216, .08) 40%,
transparent 50%,
rgba(100, 140, 190, .06) 62%,
transparent 72%,
rgba(142, 171, 216, .08) 86%,
transparent 100%);
}
@media (max-width: 720px) {
.footer-stage {
height: 320px !important;
min-height: 320px !important;
max-height: 320px !important;
margin-top: -24px;
}
.footer-stage::before {
height: 64px;
}
}
@media (max-width: 900px) {
.footer-main { grid-template-columns: 1fr; }
.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
.footer-col--end {
grid-column: 1 / -1;
justify-self: start;
width: auto;
}
.footer-brand { font-size: clamp(1.4rem, 6vw, 1.85rem); }
}
@media (max-width: 560px) {
.site-footer .footer-grid { grid-template-columns: 1fr; }
}
.pack-controls {
display: grid;
gap: 12px;
margin-top: 18px;
}
.pack-slider {
display: grid;
gap: 8px;
color: var(--ink);
font-size: 0.88rem;
}
.pack-slider span {
display: flex;
justify-content: space-between;
gap: 12px;
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pack-slider strong {
font-family: var(--display);
font-size: 0.95rem;
letter-spacing: -0.03em;
text-transform: none;
}
.pack-slider input[type="range"] {
width: 100%;
accent-color: var(--action, var(--ink));
cursor: pointer;
}
.pack-addon-hint {
margin: 0;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.4;
}
.pack--scoped .pack-summary { margin-bottom: 8px; }
#partnership { display: none !important; }
#cases.cases {
padding-block: clamp(56px, 6vw, 92px);
}
.cases-shell {
display: grid;
gap: clamp(28px, 3.2vw, 44px);
}
.cases-head {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
gap: clamp(20px, 3vw, 48px);
align-items: end;
}
.cases-head-main h2 {
max-width: 14ch;
margin: 10px 0 0;
font-family: var(--display);
font-size: clamp(2.7rem, 5vw, 4.4rem);
font-weight: var(--heading-weight, 400);
letter-spacing: -0.045em;
line-height: 0.94;
}
.cases-head-main h2 em {
font-style: italic;
font-weight: inherit;
}
.cases-head-main > p {
max-width: 46ch;
margin: 16px 0 0;
color: var(--muted);
font-size: clamp(0.95rem, 1.15vw, 1.05rem);
line-height: 1.5;
}
.cases-led {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: start;
max-width: 34ch;
justify-self: end;
}
.cases-led-mark {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: var(--accent, #5367ee);
}
.cases-led-mark svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.4;
}
.cases-led p {
margin: 0;
color: color-mix(in srgb, var(--ink) 78%, transparent);
font-size: 0.9rem;
line-height: 1.45;
}
.cases-led strong {
display: block;
margin-bottom: 3px;
color: var(--ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.case-study-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.case-study {
display: grid;
grid-template-rows: auto 1fr;
min-width: 0;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: clamp(18px, 1.8vw, 24px);
background: color-mix(in srgb, var(--surface-alt, var(--surface)) 55%, var(--paper));
box-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 6%, transparent);
}
.case-study--industrial {
background: var(--ink);
border-color: color-mix(in srgb, var(--ink) 88%, #000);
}
.case-study-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: color-mix(in srgb, var(--surface-alt, var(--surface)) 72%, var(--paper));
}
.case-study--industrial .case-study-media {
background: color-mix(in srgb, var(--ink) 88%, #000);
}
.case-study-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}
.case-study--consumer .case-study-media img { object-position: 50% 54%; }
.case-study--industrial .case-study-media img { object-position: 48% 54%; }
.case-study:hover .case-study-media img { transform: scale(1.03); }
.case-study-chip {
position: absolute;
top: 14px;
left: 14px;
padding: 6px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--paper, #F7F8FA) 88%, transparent);
color: var(--ink);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.56rem;
letter-spacing: 0.12em;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.case-study--industrial .case-study-chip {
background: color-mix(in srgb, var(--ink) 72%, transparent);
color: color-mix(in srgb, var(--paper) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.case-study-body {
display: grid;
align-content: start;
gap: 0;
padding: clamp(18px, 2vw, 24px);
}
.case-study-title {
margin: 0 0 14px;
color: var(--ink);
font-family: var(--display);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.08;
}
.case-study--industrial .case-study-title {
color: var(--paper);
}
.case-study-meta {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.case-study--industrial .case-study-meta {
border-top-color: color-mix(in srgb, var(--paper) 14%, transparent);
}
.case-study-meta > div {
display: grid;
grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr);
gap: 12px 16px;
align-items: baseline;
padding: 11px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.case-study--industrial .case-study-meta > div {
border-bottom-color: color-mix(in srgb, var(--paper) 12%, transparent);
}
.case-study-meta dt {
color: var(--muted);
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.56rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.case-study--industrial .case-study-meta dt {
color: color-mix(in srgb, var(--paper) 58%, transparent);
}
.case-study-meta dd {
margin: 0;
color: color-mix(in srgb, var(--ink) 82%, transparent);
font-size: clamp(0.78rem, 0.92vw, 0.86rem);
line-height: 1.35;
}
.case-study--industrial .case-study-meta dd {
color: color-mix(in srgb, var(--paper) 86%, transparent);
}
.case-study-link {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: var(--ink);
font-size: 0.86rem;
font-weight: 650;
text-decoration: none;
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.case-study--industrial .case-study-link {
color: color-mix(in srgb, var(--paper) 92%, transparent);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.case-study-link:hover {
color: var(--action, var(--accent));
}
.cases-bar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
list-style: none;
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
border-radius: clamp(14px, 1.4vw, 18px);
background: color-mix(in srgb, var(--surface-alt, #F2F4F7) 88%, transparent);
}
.cases-bar li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 0 clamp(16px, 2vw, 24px);
border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.cases-bar li:first-child { padding-left: 0; }
.cases-bar li:last-child {
padding-right: 0;
border-right: 0;
}
.cases-bar-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: var(--accent, #5367ee);
}
.cases-bar-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.4;
}
.cases-bar strong {
display: block;
font-family: var(--mono, "IBM Plex Mono", monospace);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cases-bar p {
margin: 4px 0 0;
color: color-mix(in srgb, var(--ink) 72%, transparent);
font-size: 0.84rem;
line-height: 1.4;
}
html[data-skin="nocturne"] .case-study--consumer {
background: color-mix(in srgb, var(--surface) 92%, var(--paper));
}
html[data-skin="nocturne"] .cases-bar {
border-color: color-mix(in srgb, var(--ink) 14%, transparent);
background: color-mix(in srgb, var(--surface) 88%, var(--paper));
}
@media (max-width: 980px) {
.cases-head,
.case-study-grid {
grid-template-columns: 1fr;
}
.cases-led {
justify-self: start;
}
.cases-bar {
grid-template-columns: 1fr;
gap: 18px;
}
.cases-bar li {
padding: 0;
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
padding-bottom: 18px;
}
.cases-bar li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
}
@media (max-width: 720px) {
.case-study-meta > div {
grid-template-columns: 1fr;
gap: 4px;
}
}
.hero {
--hero-sky-fallback: #F7F8FA;
}
html[data-skin="nocturne"] .hero {
--hero-sky-fallback: #0f1420;
}
.hero.has-sky,
.hero.has-sky-fallback {
margin-top: calc(var(--header, 72px) * -1);
min-height: 100svh;
padding-top: var(--header, 72px);
padding-bottom: clamp(28px, 4vh, 48px);
background:
radial-gradient(ellipse 26% 20% at 50% 34%, rgba(255, 220, 175, 0.28) 0%, transparent 68%),
linear-gradient(180deg, #cbd8eb 0%, #e6eaf1 42%, #f0f3f7 72%, #f5f7fa 100%);
}
html[data-skin="nocturne"] .hero.has-sky,
html[data-skin="nocturne"] .hero.has-sky-fallback {
background:
radial-gradient(ellipse 26% 20% at 50% 48%, rgba(160, 190, 255, 0.28) 0%, transparent 72%),
linear-gradient(180deg, #060912 0%, #0c1220 40%, #141c2c 100%);
}
@media (max-width: 860px) {
.hero.has-sky,
.hero.has-sky-fallback {
padding-top: calc(var(--header, 72px) + clamp(8px, 1.6vh, 18px));
}
}
.hero.has-sky::before,
.hero.has-sky::after,
.hero.has-sky-fallback::before,
.hero.has-sky-fallback::after {
opacity: 0 !important;
}
.hero-sky {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.hero-sky-layer {
position: absolute;
inset: -8% -12% -4%;
width: 124%;
height: 116%;
margin: 0;
object-fit: cover;
object-position: center 72%;
opacity: 0.86;
transform: translate3d(0, 0, 0) scale(1.12);
transform-origin: center bottom;
will-change: transform;
pointer-events: none;
user-select: none;
}
.hero-sky-layer--far { opacity: 0.48; }
.hero-sky-layer--night { display: none; }
html[data-skin="nocturne"] .hero-sky-layer--day { display: none; }
html[data-skin="nocturne"] .hero-sky-layer--night { display: block; }
html[data-skin="nocturne"] .hero-sky-layer--far { opacity: 0.67; }
html[data-skin="nocturne"] .hero-sky { background: #0a1220; }
.hero-sky-layer--far {
z-index: 0;
-webkit-mask-image: linear-gradient(
to bottom,
#fff 0%,
#fff 38%,
rgba(255, 255, 255, 0.7) 56%,
rgba(255, 255, 255, 0.22) 78%,
rgba(255, 255, 255, 0.06) 100%
);
mask-image: linear-gradient(
to bottom,
#fff 0%,
#fff 38%,
rgba(255, 255, 255, 0.7) 56%,
rgba(255, 255, 255, 0.22) 78%,
rgba(255, 255, 255, 0.06) 100%
);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
html[data-skin="nocturne"] .hero-sky-layer--far {
-webkit-mask-image: none;
mask-image: none;
}
.hero-sky-near-mask {
position: absolute;
left: -5%;
right: -5%;
top: 18%;
bottom: -1px;
z-index: 2;
pointer-events: none;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 255, 255, 0.45) 12%,
rgba(255, 255, 255, 0.88) 24%,
#fff 36%,
#fff 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(255, 255, 255, 0.45) 12%,
rgba(255, 255, 255, 0.88) 24%,
#fff 36%,
#fff 100%
);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hero-sky-layer--near {
z-index: 2;
inset: -6% -8% -2%;
width: 116%;
height: 112%;
object-fit: cover;
object-position: center bottom;
opacity: 0.88;
filter: blur(0.35px);
}
.hero-sky-layer--near-boost,
.hero-sky-layer--near-weight {
z-index: 3;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
filter: none;
-webkit-mask-image: radial-gradient(
ellipse 88% 72% at 50% 88%,
#fff 0%,
rgba(255, 255, 255, 0.92) 38%,
rgba(255, 255, 255, 0.42) 72%,
transparent 100%
);
mask-image: radial-gradient(
ellipse 88% 72% at 50% 88%,
#fff 0%,
rgba(255, 255, 255, 0.92) 38%,
rgba(255, 255, 255, 0.42) 72%,
transparent 100%
);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.hero-sky-layer--near-boost {
opacity: 0.32;
}
.hero-sky-layer--near-weight {
opacity: 0.16;
mix-blend-mode: multiply;
}
html[data-skin="nocturne"] .hero-sky-near-mask {
-webkit-mask-image: none;
mask-image: none;
}
html[data-skin="nocturne"] .hero-sky-near-mask::after {
content: none;
}
html[data-skin="nocturne"] .hero-sky-layer--near-boost,
html[data-skin="nocturne"] .hero-sky-layer--near-weight {
display: none;
}
html[data-skin="nocturne"] .hero-sky-layer--near {
opacity: 0.67;
filter: blur(0.55px);
}
.hero.has-sky .hero-sky { opacity: 1; }
.hero.has-sky-fallback .hero-sky-layer,
.hero.has-sky-fallback .hero-sky-near-mask { display: none; }
.hero.has-sky .container,
.hero.has-sky .hero-grid,
.hero.has-sky-fallback .container,
.hero.has-sky-fallback .hero-grid {
position: relative;
z-index: 2;
}
.hero.has-sky .hero-haze {
top: 34%;
width: min(42vw, 520px);
aspect-ratio: 1.25;
background:
radial-gradient(ellipse at 50% 48%,
rgba(247, 248, 250, 0.55) 0%,
rgba(210, 220, 240, 0.18) 36%,
transparent 72%);
filter: blur(34px);
opacity: 0.42;
mix-blend-mode: normal;
}
.hero.has-sky-fallback .hero-haze {
top: 48%;
width: min(34vw, 420px);
aspect-ratio: 1.15;
background:
radial-gradient(ellipse at 50% 46%,
rgba(255, 236, 190, 0.7) 0%,
rgba(255, 200, 120, 0.28) 28%,
rgba(255, 180, 90, 0.1) 48%,
transparent 72%);
filter: blur(32px) saturate(1.08);
opacity: 0.72;
mix-blend-mode: screen;
}
html[data-skin="nocturne"] .hero.has-sky .hero-haze {
top: 44%;
width: min(42vw, 520px);
aspect-ratio: 1.05;
background:
radial-gradient(ellipse 80% 70% at 50% 58%,
rgba(210, 225, 255, 0.55) 0%,
rgba(160, 190, 255, 0.28) 28%,
rgba(100, 140, 210, 0.12) 52%,
transparent 74%),
radial-gradient(ellipse 110% 80% at 50% 72%,
rgba(180, 205, 255, 0.32) 0%,
rgba(120, 160, 230, 0.12) 40%,
transparent 70%);
filter: blur(34px) saturate(1.08);
mix-blend-mode: screen;
opacity: 0.78;
}
html[data-skin="nocturne"] .hero.has-sky-fallback .hero-haze {
background:
radial-gradient(ellipse at 50% 46%,
rgba(200, 220, 255, 0.55) 0%,
rgba(140, 170, 255, 0.22) 32%,
rgba(100, 130, 210, 0.08) 52%,
transparent 74%);
filter: blur(34px) saturate(1.05);
opacity: 0.78;
mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
.hero-sky-layer {
will-change: auto;
transform: none;
}
}
@media (max-width: 860px) {
.hero.has-sky-fallback .hero-haze {
top: 42%;
width: min(58vw, 360px);
filter: blur(26px);
}
}
@keyframes hero-cat-left {
from { opacity: 0; transform: translateX(-32px); }
to { opacity: 1; transform: none; }
}
@keyframes hero-cat-right {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: none; }
}
@keyframes hero-rail-in {
from { opacity: 0; }
to { opacity: 1; }
}
#faq .client-review-stage,
#faq .client-review-stage[data-client-reviews] {
position: relative !important;
display: block !important;
min-height: 0 !important;
height: 100% !important;
margin: 0 !important;
overflow: hidden !important;
}
#faq .client-review {
position: absolute !important;
inset: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: clamp(22px, 3vw, 36px) !important;
align-content: center !important;
justify-items: start !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
}
#faq .client-review.is-active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
#faq .client-review blockquote {
max-width: min(22ch, 100%) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: #F7F8FA !important;
font-family: var(--display) !important;
font-size: clamp(1.7rem, 3vw, 2.55rem) !important;
font-weight: 400 !important;
letter-spacing: -.035em !important;
line-height: 1.1 !important;
}
#faq .client-review footer,
#faq .client-review-identity {
margin: 0 !important;
color: inherit !important;
}
html, body, .hero, .hero-sky, .hero-sky-layer, .hero-sky-near-mask {
border: 0 !important;
border-right: 0 !important;
outline: 0 !important;
}
.hero-sky {
left: -4vw !important;
right: -4vw !important;
width: auto !important;
}
.hero-sky-layer {
left: -8% !important;
right: -8% !important;
width: 116% !important;
max-width: none !important;
}
.site-footer .footer-main {
padding: 48px 32px;
}
.site-footer .footer-bottom,
.footer-bottom {
font-size: var(--type-meta);
}
@media (max-width: 860px) {
html .hero.has-sky,
html .hero.has-sky-fallback {
min-height: 100svh;
height: 100svh;
padding-bottom: 16px;
box-sizing: border-box;
}
html .hero.has-sky .hero-grid,
html .hero.has-sky-fallback .hero-grid {
display: block;
min-height: 0;
}
html .hero.has-sky .hero-showcase-wrap,
html .hero.has-sky-fallback .hero-showcase-wrap {
margin-top: 2px;
}
html .hero.has-sky .hero-scene {
padding-top: 8px;
}
html .hero.has-sky {
--hero-stage-h: min(52svh, 420px);
}
html .hero.has-sky .hero-product-stage {
width: min(92%, 420px);
height: var(--hero-stage-h);
max-height: var(--hero-stage-h);
margin-inline: auto;
}
html .hero.has-sky .hero-actions,
html .hero.has-sky-fallback .hero-actions {
margin-top: 6px;
}
html .hero .hero-readout-desc {
min-height: calc(1.4em * 2);
}
}
.hero-input-close {
position: absolute;
z-index: 12;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: rgb(18 22 28 / .42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
}
.hero-input-close svg {
width: 17px;
height: 17px;
display: block;
}
.hero-input-close:focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
.hero-scene:not(.is-source-visible) .hero-input-close {
opacity: 0;
pointer-events: none;
}