@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans-var.woff2") format("woff2-variations"), url("/assets/fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mona Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}
:root { color-scheme: light; --bg: #ffffff; --bg-alt: #f5f5f7; --surface: #ffffff; --surface-2: #ebebef; --text: #1d1d1f; --text-2: #6e6e73; --line: rgba(0, 0, 0, .09); --line-2: rgba(0, 0, 0, .17); --flare-a: #f26522; --flare-b: #f9a51f; --flare: linear-gradient(100deg, #f26522 0%, #f7862a 55%, #f9a51f 100%); --flare-rev: linear-gradient(100deg, #f9a51f 0%, #f7862a 45%, #f26522 100%); --on-flare: #1a0b00; --accent-text: #b8470c; --accent-soft: rgba(242, 101, 34, .12); --glass: rgba(255, 255, 255, .72); --glass-strong: rgba(255, 255, 255, .9); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 20px -10px rgba(0, 0, 0, .12); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .05), 0 34px 70px -24px rgba(0, 0, 0, .28); --scrim: rgba(0, 0, 0, .45); --danger: #d93036; --sans: "Mona Sans", "Mona Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --gutter: clamp(20px, 5vw, 56px); --section-y: clamp(80px, 12vw, 160px); --nav-h: 64px; --radius-lg: 28px; --radius-md: 20px; --ease-out: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.22, 1, .36, 1); --spring-bounce: cubic-bezier(.34, 1.4, .64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
:root { --spring: linear(0, .06 4.2%, .186 8.3%, .329 12.5%, .466 16.7%, .584 20.8%, .682 25%, .821 33.3%, .903 41.7%, .949 50%, .973 58.3%, .986 66.7%, .997 83.3%, 1); --spring-bounce: linear(0, .062 4.2%, .202 8.3%, .366 12.5%, .526 16.7%, .664 20.8%, .776 25%, .861 29.2%, .922 33.3%, .964 37.5%, .99 41.7%, 1.005 45.8%, 1.013 50%, 1.015 54.2%, 1.013 62.5%, 1.006 75%, 1); }
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { color-scheme: dark; --bg: #000000; --bg-alt: #161617; --surface: #1c1c1e; --surface-2: #2c2c2e; --text: #f5f5f7; --text-2: #a1a1a6; --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .2); --accent-text: #ff9a4d; --accent-soft: rgba(242, 101, 34, .18); --glass: rgba(22, 22, 23, .7); --glass-strong: rgba(28, 28, 30, .9); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6); --shadow-lg: 0 34px 80px -24px rgba(0, 0, 0, .9); --scrim: rgba(0, 0, 0, .66); --danger: #ff6369; }
}
:root[data-theme="dark"] { color-scheme: dark; --accent-text: #ff9a4d; --accent-soft: rgba(242, 101, 34, .18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6); --shadow-lg: 0 34px 80px -24px rgba(0, 0, 0, .9); --scrim: rgba(0, 0, 0, .66); --danger: #ff6369; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; font-weight: 420; font-stretch: 100%; line-height: 1.55; letter-spacing: -.004em; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
svg { flex: none; }
strong { font-weight: 640; color: var(--text); }
::selection { background: rgba(242, 101, 34, .3); }
:focus-visible { outline: 2px solid var(--flare-a); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; transition: top .3s var(--spring); }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight-top { padding-top: 0; }
.section-head { max-width: 860px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head--split > div { max-width: 760px; }
.section-head .lead { margin-top: 20px; }
.eyebrow { margin-bottom: 14px; font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); font-weight: 600; font-stretch: 100%; letter-spacing: -.01em; color: var(--accent-text); }
.display, .h1, .h2 { font-stretch: 112%; text-wrap: balance; font-optical-sizing: auto; }
.display { font-size: clamp(2.875rem, .9rem + 7.4vw, 7.25rem); font-weight: 780; line-height: .9; letter-spacing: -.048em; }
.h1 { font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5.5rem); font-weight: 760; line-height: .94; letter-spacing: -.044em; }
.h2 { font-size: clamp(2.125rem, 1.1rem + 4.2vw, 4.5rem); font-weight: 740; line-height: .98; letter-spacing: -.04em; }
.h3 { font-size: clamp(1.25rem, 1.12rem + .55vw, 1.625rem); font-weight: 650; font-stretch: 104%; line-height: 1.15; letter-spacing: -.022em; }
.lead { max-width: 38em; font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem); font-weight: 400; line-height: 1.45; letter-spacing: -.012em; color: var(--text-2); text-wrap: pretty; }
.muted { color: var(--text-2); }
.btn { --h: 52px; --icon: 40px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: var(--h); padding: 0 26px; border: 0; border-radius: 999px; font-size: 1rem; font-weight: 640; font-stretch: 106%; letter-spacing: -.012em; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; translate: var(--mx, 0) var(--my, 0); transition: translate .6s var(--spring), scale .5s var(--spring), box-shadow .45s var(--ease-out), background-color .3s, color .3s; }
.btn:has(.btn__icon) { padding: 0 6px 0 24px; }
.btn:active { scale: .96; transition-duration: .6s, .12s, .45s, .3s, .3s; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .85; }
.btn__roll { position: relative; display: block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.btn__roll > span { display: block; transition: translate .6s var(--spring); }
.btn__roll > span + span { position: absolute; inset: 100% 0 auto 0; }
.btn__icon { display: grid; place-items: center; width: var(--icon); height: var(--icon); border-radius: 50%; transition: scale .6s var(--spring-bounce), background-color .3s, color .3s; }
.btn__icon svg { width: 18px; height: 18px; transition: rotate .6s var(--spring), translate .6s var(--spring); }
.btn-primary { background: var(--flare-a); color: var(--on-flare); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 12px 28px -14px rgba(242, 101, 34, .9); }
.btn-primary::before, .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.btn-primary::before { background: var(--flare-rev); opacity: 0; transition: opacity .5s var(--ease-out); }
.btn-primary::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); translate: -110% 0; transition: translate .9s var(--ease-out); }
.btn-primary .btn__icon { background: var(--on-flare); color: #ffb067; }
.btn-secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-secondary::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--text); translate: -50% -50%; scale: 0; transition: scale .6s var(--ease-out); }
.btn-secondary .btn__icon { background: var(--surface-2); color: var(--text); }
@media (hover: hover) {
.btn:hover .btn__roll > span { translate: 0 -100%; }
.btn:hover .btn__icon { scale: 1.1; }
.btn:hover .btn__icon svg { rotate: -12deg; }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 20px 44px -14px rgba(242, 101, 34, 1); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover::after { translate: 110% 0; }
.btn-secondary:hover { color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text); }
.btn-secondary:hover::before { scale: 1; }
.btn-secondary:hover .btn__icon { background: var(--bg); color: var(--text); }
}
.btn-sm { --h: 40px; --icon: 30px; padding: 0 16px; font-size: .9375rem; gap: 10px; }
.btn-sm:has(.btn__icon) { padding: 0 5px 0 16px; }
.btn-sm .btn__icon svg { width: 15px; height: 15px; }
.btn-sm::after { inset: 0; }
.btn-lg { --h: 62px; --icon: 50px; padding: 0 32px; font-size: 1.0625rem; }
.btn-lg:has(.btn__icon) { padding: 0 6px 0 30px; }
.btn-block { width: 100%; }
.icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; transition: background-color .25s, scale .5s var(--spring), opacity .2s, color .25s; }
.icon-btn:active { scale: .88; transition-duration: .25s, .1s, .2s, .25s; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn--bordered { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.icon-btn:disabled { opacity: .3; cursor: default; }
@media (hover: hover) {
.icon-btn:not(:disabled):hover { background: var(--surface-2); }
.icon-btn--bordered:not(:disabled):hover { background: var(--text); color: var(--bg); }
}
.pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); font-size: .875rem; font-weight: 520; color: var(--text); }
.hero { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(24px, 4vw, 56px); }
.hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -30%; right: -30%; width: min(1100px, 150vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(242, 101, 34, .22), rgba(249, 165, 31, .06) 60%, transparent); }
.hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: end; }
.badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; margin-bottom: 26px; border-radius: 999px; font-size: .875rem; font-weight: 560; color: var(--text); }
.badge__dot { position: relative; border-radius: 50%; }
.badge__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: ping 2.6s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.hero__who { display: block; margin-bottom: 20px; font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); font-weight: 560; font-stretch: 100%; line-height: 1.3; letter-spacing: -.012em; color: var(--text-2); }
.hero__line { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__line > span { display: block; }
.swap { position: relative; display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.swap__word { display: inline-block; white-space: nowrap; font-stretch: var(--fit, 112%); }
.hero .lead { margin-top: 26px; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 520px) {
.hero__cta .btn { flex: 1 1 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: no-preference) {
.js .hero__line > span { animation: cut-in .9s var(--spring) both; }
.js .hero__line:nth-child(2) > span { animation-delay: .08s; }
.js .hero__line:nth-child(3) > span { animation-delay: .16s; }
.js .viewer { animation: rise 1.1s var(--spring) .15s both; }
.js .clip { animation: lay-clip .8s var(--spring) both; animation-delay: calc(.35s + var(--i, 0) * .07s); }
}
@keyframes cut-in { from { translate: 0 105%; } }
@keyframes rise { from { opacity: 0; translate: 0 32px; scale: .97; } }
@keyframes lay-clip { from { opacity: 0; scale: .6 1; } }
.hero__visual { justify-self: center; width: min(100%, 460px); }
.viewer { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #111; }
.viewer__layer { position: absolute; inset: 0; opacity: 0; scale: 1.04; transition: opacity .5s var(--ease-out), scale .9s var(--spring); }
.viewer__layer.is-active { opacity: 1; scale: 1; }
.viewer__layer img { width: 100%; height: 100%; object-fit: cover; }
.viewer__layer--portrait img { object-position: 50% 28%; }
.viewer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 22%, transparent 55%, rgba(0, 0, 0, .7)); }
.viewer__tag { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #fff; font-size: .8125rem; font-weight: 600; }
.viewer__tag i { width: 7px; height: 7px; border-radius: 50%; background: #ff453a; }
.viewer__foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: #fff; }
.viewer__title { font-size: 1.125rem; font-weight: 680; font-stretch: 106%; letter-spacing: -.02em; line-height: 1.2; }
.viewer__meta { margin-top: 2px; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.viewer__play { flex: none; }
.viewer__play[hidden] { display: none; }
.scrub { margin-top: clamp(32px, 4.5vw, 56px); }
.scrub__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: .9375rem; color: var(--text-2); }
.scrub__tc { font-variant-numeric: tabular-nums; font-weight: 640; font-stretch: 100%; letter-spacing: .02em; color: var(--text); }
.scrub__track { position: relative; display: flex; gap: 5px; height: 72px; padding: 6px; border-radius: 20px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.scrub__track.is-dragging { cursor: grabbing; }
.clip { --i: 0; position: relative; overflow: hidden; flex: var(--w, 1) 1 0; min-width: 0; display: flex; align-items: flex-end; padding: 0 12px 9px; border: 0; border-radius: 14px; color: var(--text-2); font-size: .875rem; font-weight: 620; font-stretch: 100%; letter-spacing: -.01em; text-align: left; white-space: nowrap; cursor: inherit; transform-origin: left center; transition: color .3s, box-shadow .35s var(--ease-out); }
.clip::before { content: ""; position: absolute; inset: 0; background: var(--strip) left center / auto 100% repeat-x; opacity: .45; transition: opacity .35s; }
.clip::after { content: ""; position: absolute; inset: 0; }
.clip span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.clip.is-active { color: var(--text); }
.clip.is-active::before { opacity: .85; }
.playhead { position: absolute; z-index: 3; top: -8px; bottom: -8px; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, var(--flare-b), var(--flare-a)); translate: var(--px, 0px) 0; pointer-events: none; will-change: translate; }
.playhead::before { content: ""; position: absolute; left: 50%; top: -6px; width: 18px; height: 20px; translate: -50% 0; border-radius: 5px 5px 9px 9px; background: var(--flare-a); box-shadow: 0 0 0 3px var(--bg-alt), 0 6px 16px rgba(242, 101, 34, .55); transition: scale .4s var(--spring-bounce); }
.scrub__track.is-dragging .playhead::before { scale: 1.2; }
@media (max-width: 600px) {
.scrub__track { height: 64px; }
.scrub__hint { display: none; }
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
.stat { padding: clamp(22px, 3.5vw, 36px) 0 0; }
.stat + .stat { padding-left: clamp(14px, 3vw, 40px); border-left: 1px solid var(--line); }
.stat__num { font-size: clamp(2.125rem, 1.1rem + 4vw, 4.25rem); font-weight: 760; font-stretch: 118%; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 8px; font-size: clamp(.8125rem, .76rem + .3vw, 1rem); color: var(--text-2); }
.section--clients { padding-block: clamp(56px, 8vw, 104px); }
.section--clients .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.marquee { --gap: clamp(36px, 5vw, 72px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: var(--gap); width: max-content; padding-block: 8px; }
.marquee__group { display: flex; gap: var(--gap); }
.marquee.is-ready .marquee__track { animation: marquee 52s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (hover: hover) {
.marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.client { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.client img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--surface-2); filter: grayscale(1); transition: filter .4s; }
.client__name { font-size: 1.0625rem; font-weight: 660; font-stretch: 108%; letter-spacing: -.02em; }
.client__sub { font-size: .875rem; color: var(--text-2); }
@media (hover: hover) {
.client:hover img { filter: none; }
}
@media (hover: none) {
.client img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
.marquee.is-ready .marquee__track { animation: none; }
.marquee__group[aria-hidden="true"] { display: none; }
}
.rail { grid-auto-flow: column; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))); padding-bottom: 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail.is-dragging * { pointer-events: none; }
.rail-nav { display: none; gap: 10px; }
@media (hover: hover) and (pointer: fine) {
.rail-nav { display: flex; }
}
.rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.rail-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--line-2); transition: width .5s var(--spring), background-color .3s; }
.rail-dots span.is-active { width: 24px; background: var(--flare-a); }
.work-more { margin-top: 32px; text-align: center; font-size: 1rem; color: var(--text-2); }
.work-more a { color: var(--text); font-weight: 620; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .25s; }
@media (hover: hover) {
.work-more a:hover { text-decoration-color: var(--flare-a); }
}
.vcard { display: block; width: 100%; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vcard__media, .vcard__info, .vcard__title, .vcard__meta { display: block; }
.vcard__media { position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius-md); background: var(--surface-2); box-shadow: var(--shadow-sm); transform: translateZ(0); transition: translate .6s var(--spring), scale .5s var(--spring), box-shadow .45s; }
.rail .vcard__media { --ar: 9 / 16; }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.vcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .55)); }
.vcard__play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; translate: -50% -50%; border-radius: 50%; transition: scale .55s var(--spring-bounce), background-color .3s, color .3s, opacity .3s; }
.vcard__play svg { display: block; }
.vcard__time { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; font-size: .75rem; font-weight: 640; color: #fff; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .55); }
.vcard__info { padding: 14px 4px 0; }
.vcard__title { font-size: 1.0625rem; font-weight: 640; font-stretch: 104%; letter-spacing: -.02em; line-height: 1.25; }
.vcard__meta { margin-top: 4px; font-size: .9375rem; color: var(--text-2); }
.vcard:active .vcard__media { scale: .97; }
@media (hover: hover) {
.vcard:hover .vcard__media { translate: 0 -6px; box-shadow: var(--shadow-lg); }
.vcard:hover .vcard__media img { scale: 1.05; }
.vcard:hover .vcard__play { scale: 1.12; background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); }
}
.has-cursor .vcard:hover .vcard__play { opacity: 0; scale: .6; }
.vgrid { --gap: clamp(16px, 2.4vw, 28px); --col: clamp(140px, calc((100vw - 2 * var(--gutter) - var(--gap)) / 2), 280px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(32px, 4vw, 48px) var(--gap); }
.vgrid > .vcard { width: var(--col); }
.vgrid > .vcard.is-landscape { width: min(100%, calc(var(--col) * 2 + var(--gap))); }
.vgrid--portrait { --col: clamp(140px, calc((100vw - 2 * var(--gutter) - var(--gap)) / 2), 300px); }
.vgrid--landscape > .vcard.is-landscape { width: min(100%, 560px); }
@media (min-width: 900px) {
.vgrid--landscape > .vcard.is-landscape:first-child { width: 100%; }
}
@media (max-width: 560px) {
.vgrid .vcard:not(.is-landscape) .vcard__play { width: 48px; height: 48px; }
.vgrid .vcard:not(.is-landscape) .vcard__play svg { width: 18px; height: 18px; }
.vgrid .vcard:not(.is-landscape) .vcard__title { font-size: .9375rem; }
}
.cursor-chip { position: fixed; z-index: 150; left: 0; top: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); font-size: .9375rem; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 12px 30px -8px rgba(242, 101, 34, .8); translate: var(--cx, -200px) var(--cy, -200px); scale: 0; opacity: 0; transition: scale .45s var(--spring-bounce), opacity .2s; }
.cursor-chip.is-on { scale: 1; opacity: 1; }
.player { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: hidden; display: grid; place-items: center; }
.player:not([open]) { display: none; }
.player::backdrop { background: transparent; }
.player__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .35s var(--ease-out); }
.player.is-open .player__scrim { opacity: 1; }
.player__panel { --stage-max: calc((100dvh - 190px) * var(--r, 1.7778)); position: relative; width: min(92vw, 1080px, max(380px, var(--stage-max))); will-change: transform; }
.player__card { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 120px -24px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.94); transition: opacity .3s var(--ease-out), transform .6s var(--spring); }
.player.is-open .player__card { opacity: 1; transform: none; }
.player__grabber { display: none; }
.player__head, .player__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 22px; touch-action: none; }
.player__head { cursor: grab; }
.player__title { font-size: 1.0625rem; font-weight: 660; font-stretch: 104%; letter-spacing: -.018em; line-height: 1.25; }
.player__meta { font-size: .875rem; color: var(--text-2); }
.player__stage { background: #000; }
.player__frame { position: relative; width: min(100%, var(--stage-max)); aspect-ratio: var(--r, 1.7778); margin-inline: auto; background: #000; }
.player__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s var(--ease-out); }
.player__frame.is-loaded iframe { opacity: 1; }
.spinner { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }
.player__frame.is-loaded .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.player__foot p { font-size: .9375rem; color: var(--text-2); }
@media (min-width: 700px) {
.player__scrim { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (max-width: 699px) {
.player { place-items: end center; }
.player__panel { --stage-max: calc((100dvh - 210px) * var(--r, 1.7778)); width: 100%; }
.player__card { border-radius: 26px 26px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); opacity: 1; transform: none; transition: none; }
.player__grabber { display: block; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line-2); }
.player__head { padding-top: 6px; }
}
.nav { position: sticky; top: 0; z-index: 100; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; view-transition-name: site-nav; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__bar { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; font-stretch: 110%; font-size: 1.125rem; letter-spacing: -.03em; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 9px; transition: rotate .7s var(--spring-bounce); }
.brand b { color: var(--flare-a); font-weight: 720; }
@media (hover: hover) {
.brand:hover img { rotate: -8deg; }
}
.nav__links { display: none; position: relative; isolation: isolate; }
.nav__links a { position: relative; display: inline-block; padding: 9px 15px; border-radius: 999px; font-size: .9375rem; font-weight: 520; color: var(--text-2); transition: color .25s; }
.nav__links a[aria-current="page"], .nav__links a:hover { color: var(--text); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--flare-a); }
.nav__pill { position: absolute; z-index: -1; left: 0; top: 50%; height: 38px; margin-top: -19px; width: var(--w, 0px); translate: var(--l, 0px) 0; border-radius: 999px; background: var(--surface-2); opacity: 0; transition: translate .5s var(--spring), width .5s var(--spring), opacity .25s; }
.nav__links.is-hovering .nav__pill { opacity: 1; }
.nav__actions { display: flex; align-items: center; gap: 4px; }
.nav__actions .btn { margin-left: 6px; }
.menu-btn span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.8px; margin: -.9px 0 0 -9px; border-radius: 2px; background: currentColor; transition: transform .5s var(--spring); }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
@media (min-width: 960px) {
.nav__links { display: flex; gap: 2px; }
.menu-btn { display: none; }
}
@media (max-width: 350px) {
.brand__word { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav, .menu, .dock { background: var(--glass-strong); }
}
.menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; display: flex; flex-direction: column; padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--glass-strong); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s var(--ease-out), transform .6s var(--spring), visibility 0s .6s; }
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-out), transform .6s var(--spring), visibility 0s; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 2rem; font-weight: 720; font-stretch: 110%; letter-spacing: -.04em; opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease-out), transform .6s var(--spring); }
.menu__links a svg { width: 22px; height: 22px; color: var(--text-2); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links li:nth-child(2) a { transition-delay: .03s; }
.menu.is-open .menu__links li:nth-child(3) a { transition-delay: .06s; }
.menu.is-open .menu__links li:nth-child(4) a { transition-delay: .09s; }
.menu.is-open .menu__links li:nth-child(5) a { transition-delay: .12s; }
.menu.is-open .menu__links li:nth-child(6) a { transition-delay: .15s; }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.menu__row span { color: var(--text-2); font-size: .9375rem; }
.menu__cta { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; }
.menu__cta .btn { justify-content: space-between; }
@media (min-width: 960px) {
.menu { display: none; }
}
html.is-locked { overflow: hidden; }
.segmented { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.segmented button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-size: .875rem; font-weight: 520; color: var(--text-2); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 640; }
.steps { --p: 0; position: relative; display: grid; }
.steps::before, .steps::after { content: ""; position: absolute; border-radius: 2px; }
.steps::before { background: var(--line-2); }
.steps::after { background: linear-gradient(90deg, var(--flare-a), var(--flare-b)); }
.step { position: relative; padding: 0 0 36px 64px; }
.step__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-alt); box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); transition: background-color .4s, color .4s, box-shadow .4s, scale .6s var(--spring-bounce); }
.step.is-on .step__num { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); box-shadow: none; scale: 1.08; }
.step h3 { padding-top: 7px; margin-bottom: 8px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 680; font-stretch: 106%; letter-spacing: -.024em; }
.step p { color: var(--text-2); max-width: 30em; }
@media (max-width: 899px) {
.steps::before, .steps::after { left: 20px; top: 21px; width: 2px; margin-left: -1px; }
.steps::before { bottom: 57px; }
.steps::after { height: calc((100% - 78px) * var(--p)); }
}
@media (min-width: 900px) {
.steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps::before, .steps::after { top: 20px; height: 2px; left: 21px; }
.steps::before { right: calc(25% - 7px); }
.steps::after { width: calc((75% - 28px) * var(--p)); }
.step { padding: 70px 0 0; }
.step h3 { padding-top: 0; }
}
.why { display: grid; gap: clamp(40px, 6vw, 80px); align-items: start; }
@media (min-width: 960px) {
.why { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.voices__stage { position: relative; }
.voice blockquote p { position: relative; max-width: 24ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.1rem + 3.8vw, 4.25rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.voice blockquote p::before { content: "\201C"; position: absolute; right: 100%; padding-right: .06em; color: var(--flare-a); }
@media (max-width: 700px) {
.voice blockquote p::before { position: static; padding: 0; }
}
.voice figcaption { margin-top: 22px; color: var(--text-2); }
.js .voices__stage { display: grid; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.js .voice { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: calc(var(--dir, 1) * 48px) 0; transition: opacity .4s var(--ease-out), translate .7s var(--spring), visibility 0s .7s; }
.js .voice.is-active { opacity: 1; visibility: visible; translate: var(--drag, 0px) 0; transition: opacity .45s var(--ease-out), translate .7s var(--spring), visibility 0s; }
.js .voices__stage.is-dragging .voice.is-active { transition: none; }
.js .voice figcaption { display: none; }
html:not(.js) .voice + .voice { margin-top: 48px; }
.voices__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(32px, 5vw, 56px); }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .people { display: none; }
.person { display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 4px; border: 0; border-radius: 999px; background: var(--surface-2); cursor: pointer; text-align: left; transition: background-color .3s, gap .6s var(--spring), padding .6s var(--spring), scale .5s var(--spring); }
.person:active { scale: .95; }
.person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(1); transition: filter .3s; }
.person__txt { display: grid; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; line-height: 1.2; transition: max-width .6s var(--spring), opacity .35s; }
.person__txt b { font-size: .9375rem; font-weight: 660; }
.person__txt small { font-size: .8125rem; color: var(--text-2); }
.person[aria-pressed="true"] { gap: 12px; padding-right: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.person[aria-pressed="true"] img { filter: none; }
.person[aria-pressed="true"] .person__txt { max-width: 240px; opacity: 1; }
@media (hover: hover) {
.person:hover img { filter: none; }
}
.voices__nav { display: flex; gap: 10px; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
.faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.faq-aside { position: sticky; top: calc(var(--nav-h) + 40px); }
}
.faq-aside .h2 { margin-bottom: 28px; }
.ask { display: flex; flex-direction: column; gap: 16px; max-width: 380px; padding: 24px; border-radius: 26px; background: var(--surface-2); }
.ask__who { display: flex; align-items: center; gap: 12px; }
.ask__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.ask__who b { display: block; font-weight: 660; }
.ask__who small { font-size: .875rem; color: var(--text-2); }
.ask .btn { justify-content: space-between; }
@media (max-width: 379px) {
.ask { padding: 18px; }
.ask .btn, .ask .btn:has(.btn__icon) { padding: 0 18px; justify-content: center; }
.ask .btn__icon { display: none; }
}
.qa { transition: background-color .4s var(--ease-out), border-color .3s; }
.qa__q { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem); font-weight: 620; font-stretch: 102%; letter-spacing: -.02em; line-height: 1.25; transition: font-stretch .6s var(--spring); }
.qa__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text); transition: rotate .6s var(--spring), background-color .3s, color .3s, scale .5s var(--spring-bounce); }
.qa__icon svg { width: 16px; height: 16px; }
.qa__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--spring); }
.qa__inner { min-height: 0; overflow: hidden; }
.qa__inner p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; transition: opacity .4s var(--ease-out), translate .6s var(--spring); }
.qa__inner a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.js .qa__panel { grid-template-rows: 0fr; }
.js .qa:not(.is-open) .qa__inner p { opacity: 0; translate: 0 -8px; }
.qa.is-open { border-color: transparent; }
.js .qa.is-open .qa__panel { grid-template-rows: 1fr; }
.qa.is-open .qa__q { font-stretch: 108%; }
.qa.is-open .qa__icon { rotate: 135deg; background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); }
.qa__q:active .qa__icon { scale: .88; }
@media (hover: hover) {
.qa:not(.is-open) .qa__q:hover .qa__icon { background: var(--text); color: var(--bg); }
}
.section--alt .qa.is-open, .section--alt .ask { background: var(--surface); }
.cta { position: relative; isolation: isolate; overflow: clip; text-align: center; }
.cta::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -70%; width: min(1200px, 170vw); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(242, 101, 34, .26), rgba(249, 165, 31, .08) 55%, transparent); pointer-events: none; }
.cta__title { max-width: 14ch; margin-inline: auto; font-size: clamp(2.75rem, .9rem + 7vw, 7.5rem); font-weight: 780; font-stretch: 114%; line-height: .9; letter-spacing: -.052em; text-wrap: balance; }
.cta .lead { margin: 26px auto 0; max-width: 32em; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.cta__note { margin-top: 20px; font-size: .9375rem; color: var(--text-2); }
.cta__note a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.page-hero { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(48px, 7vw, 88px); }
.page-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -55%; right: -20%; width: min(1000px, 150vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(242, 101, 34, .16), transparent); }
.page-hero .h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 24px; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 26px; font-size: .9375rem; color: var(--text-2); }
.crumbs svg { width: 14px; height: 14px; }
@media (hover: hover) {
.crumbs a:hover { color: var(--text); }
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.included { display: grid; column-gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--line); }
@media (min-width: 760px) {
.included { grid-template-columns: repeat(2, 1fr); }
}
.included li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.included svg { width: 26px; height: 26px; color: var(--accent-text); }
.included strong { display: block; font-size: 1.1875rem; font-weight: 660; font-stretch: 104%; letter-spacing: -.02em; }
.included span { display: block; margin-top: 4px; color: var(--text-2); }
.request { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
.request { grid-template-columns: .9fr 1.1fr; }
.request__aside { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.next-steps { display: grid; gap: 18px; margin-top: 34px; }
.next-steps li { display: flex; gap: 14px; }
.next-steps .step__num { position: static; flex: none; width: 34px; height: 34px; font-size: .875rem; }
.next-steps strong { display: block; letter-spacing: -.018em; }
.next-steps li > div > span { display: block; color: var(--text-2); font-size: .9375rem; }
.alt-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.form-card { padding: clamp(22px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--bg-alt); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field > label, .field legend { padding: 0; font-size: .9375rem; font-weight: 620; letter-spacing: -.014em; }
.field .opt { font-weight: 400; color: var(--text-2); }
.field__hint { font-size: .875rem; color: var(--text-2); }
.field__error { font-size: .875rem; font-weight: 520; color: var(--danger); }
.input { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg); font-size: 1rem; transition: border-color .2s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: var(--text-2); opacity: .75; }
.input:focus { outline: none; border-color: var(--flare-a); box-shadow: 0 0 0 4px var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
textarea.input { min-height: 136px; resize: vertical; line-height: 1.5; }
fieldset.field { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font-size: .9375rem; font-weight: 540; cursor: pointer; user-select: none; transition: background-color .25s, color .25s, box-shadow .25s, scale .5s var(--spring); }
.choice:active span { scale: .94; }
.choice input:checked + span { background: var(--text); color: var(--bg); box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--flare-a); outline-offset: 2px; }
.form-card .btn-block { justify-content: space-between; }
.form-note { margin-top: 14px; font-size: .875rem; color: var(--text-2); text-align: center; }
.form-status { margin-top: 14px; font-size: .9375rem; color: var(--danger); text-align: center; }
.hp { position: absolute; left: -9999px; }
.success { text-align: center; padding: clamp(24px, 5vw, 48px) 0; }
.success:focus { outline: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success .lead { margin: 12px auto 0; max-width: 440px; }
.footer { padding-block: 64px calc(36px + env(safe-area-inset-bottom)); background: var(--bg-alt); font-size: .9375rem; color: var(--text-2); }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 760px) {
.footer__grid { grid-template-columns: 1.7fr 1fr 1fr; }
}
.footer__about p { max-width: 380px; margin-top: 14px; }
.footer h2 { margin-bottom: 12px; font-size: .9375rem; font-weight: 660; color: var(--text); }
.footer li a { display: inline-block; padding: 5px 0; transition: color .2s; }
@media (hover: hover) {
.footer li a:hover { color: var(--text); }
}
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); transition: background-color .25s, color .25s, scale .5s var(--spring-bounce), translate .5s var(--spring); }
.socials a:active { scale: .88; }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) {
.socials a:hover { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); translate: 0 -3px; }
}
.footer__word { margin-top: 56px; font-size: clamp(3.5rem, 1rem + 12.5vw, 13rem); font-weight: 820; font-stretch: 125%; letter-spacing: -.06em; line-height: .8; white-space: nowrap; user-select: none; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .875rem; }
.dock { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 7px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateY(calc(100% + 32px)); transition: transform .6s var(--spring); }
.dock.is-visible { transform: none; }
.dock .btn { --h: 48px; }
.dock .btn-primary { flex: 1; justify-content: space-between; }
@media (min-width: 960px) {
.dock { display: none; }
}
@media (max-width: 959px) {
.has-dock .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.notfound .cta__actions { margin-top: 34px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
.badge__dot::after { animation: none; }
.btn, .qa__q, .swap__word { transition-duration: .01ms !important; }
.js .voice { translate: 0 0 !important; }
}
@media (prefers-reduced-transparency: reduce) {
.nav, .menu, .dock, .viewer__tag { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
:root { --line: rgba(127, 127, 127, .55); --line-2: rgba(127, 127, 127, .85); }
.nav, .menu, .dock { background: var(--bg); }
}
:root[data-theme="dark"] { --bg: #060403; --bg-alt: #0c0806; --surface: #130d0a; --surface-2: #1f1611; --text: #f7f1ec; --text-2: #b3a79f; --line: rgba(255, 196, 150, .1); --line-2: rgba(255, 196, 150, .2); --glass: rgba(10, 7, 5, .66); --glass-strong: rgba(16, 11, 8, .9); --lit-bg: linear-gradient(180deg, rgba(255, 138, 61, .09), rgba(255, 138, 61, 0) 46%), #0f0a07; }
:root { --lit-bg: linear-gradient(180deg, rgba(242, 101, 34, .07), rgba(242, 101, 34, 0) 50%), #ffffff; }
.lit::after { transition: opacity .45s var(--ease-out); }
@media (hover: hover) {
.lit:hover::after { opacity: 1; }
}
.glow-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #ffd2a8; background: radial-gradient(circle at 50% 120%, rgba(255, 140, 50, .95), rgba(200, 70, 10, .5) 45%, rgba(40, 18, 8, .9) 80%); box-shadow: inset 0 1px 0 rgba(255, 210, 170, .35), 0 0 0 1px rgba(255, 140, 60, .35), 0 10px 30px -8px rgba(255, 110, 30, .65); }
.glow-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(255, 180, 110, .8)); }
.hero { padding-bottom: clamp(56px, 8vw, 110px); }
.hero::before { display: none; }
.hero__horizon { position: absolute; z-index: -1; left: 50%; bottom: 0; width: max(1400px, 180%); height: min(62vh, 620px); translate: -50% 0; pointer-events: none; }
.hero__horizon::after { content: ""; position: absolute; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 220, 180, .9), transparent); box-shadow: 0 0 18px 2px rgba(255, 150, 60, .8); }
.viewer { box-shadow: 0 0 0 1px rgba(255, 150, 70, .28), 0 40px 90px -30px rgba(255, 100, 20, .45), var(--shadow-lg); }
.clip::after { background: linear-gradient(0deg, rgba(10, 6, 4, .92) 10%, transparent 90%); }
:root:not([data-theme="dark"]) .clip::after { background: linear-gradient(0deg, var(--surface) 12%, transparent 85%); }
.clip.is-active { box-shadow: inset 0 0 0 1.5px rgba(255, 150, 70, .9), 0 0 24px -6px rgba(255, 110, 30, .7); }
[data-theme="dark"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 240, 220, .55), inset 0 -1px 0 rgba(90, 30, 0, .35), 0 0 0 1px rgba(255, 150, 70, .55), 0 8px 34px -6px rgba(255, 110, 30, .75); }
@media (hover: hover) {
[data-theme="dark"] .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 240, 220, .6), inset 0 -1px 0 rgba(90, 30, 0, .35), 0 0 0 1px rgba(255, 170, 90, .8), 0 12px 50px -4px rgba(255, 120, 30, .95); }
}
.bento { display: grid; gap: 14px; }
@media (min-width: 720px) {
.bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
.bento { grid-template-columns: repeat(12, 1fr); }
.bento > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
.bento > :nth-child(2) { grid-column: span 5; }
.bento > :nth-child(3) { grid-column: span 5; }
.bento > :nth-child(4) { grid-column: span 6; }
.bento > :nth-child(5) { grid-column: span 6; }
}
.bento__card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); overflow: hidden; }
.bento__card h3 { margin-top: 10px; }
.bento__card p { color: var(--text-2); max-width: 34em; }
.bento__hero { min-height: clamp(360px, 44vw, 520px); }
.bento__hero::after { opacity: 1; background: radial-gradient(420px circle at 70% 30%, rgba(255, 128, 48, .12), transparent 60%); }
.bento__stat { font-size: clamp(4.5rem, 2rem + 8vw, 9rem); font-weight: 820; font-stretch: 125%; letter-spacing: -.065em; line-height: .85; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff4e8, #ffb070 55%, #f26522); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme="dark"]) .bento__stat { background: var(--flare); -webkit-background-clip: text; background-clip: text; }
.bento__hero h3 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 720; font-stretch: 110%; letter-spacing: -.035em; line-height: 1.05; max-width: 16ch; }
.tool-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.steps .step { padding: clamp(24px, 3vw, 32px); padding-top: clamp(24px, 3vw, 32px); }
.steps .step__num { position: relative; left: auto; top: auto; margin-bottom: 26px; width: 46px; height: 46px; background: #140e0a; }
:root:not([data-theme="dark"]) .steps .step__num { background: var(--surface); }
.steps .step.is-on .step__num { box-shadow: 0 0 0 1px rgba(255, 170, 90, .7), 0 0 26px -2px rgba(255, 110, 30, .9); }
.steps .step h3 { padding-top: 0; }
.steps::before, .steps::after { display: none; }
.steps { gap: 14px; }
.step-track { position: relative; height: 2px; margin: 0 0 22px; border-radius: 2px; background: var(--line-2); }
.step-track span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--flare-a), var(--flare-b)); box-shadow: 0 0 14px 1px rgba(255, 120, 30, .8); }
.step-track span::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ffe2c4; box-shadow: 0 0 12px 3px rgba(255, 140, 50, .9); }
@media (min-width: 700px) and (max-width: 899px) {
.steps { grid-template-columns: repeat(2, 1fr); }
}
.voices { padding: clamp(28px, 5vw, 64px); overflow: hidden; }
.voices::after { opacity: 1; background: radial-gradient(60% 80% at 100% 0%, rgba(255, 120, 40, .14), transparent 70%); }
.qa { border-bottom: 0; background: rgba(255, 170, 110, .035); box-shadow: inset 0 0 0 1px var(--line); }
.qa:has(+ .qa.is-open) { border-color: transparent; }
.ask.lit { background: var(--lit-bg); }
.cta::before { display: none; }
.cta__card { padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 64px); overflow: hidden; }
.cta__card::after { background: radial-gradient(40% 55% at 50% 0%, rgba(255, 170, 100, .35), rgba(255, 110, 30, .12) 45%, transparent 75%); }
.cta__beam { position: absolute; z-index: -1; left: 50%; top: 0; width: min(520px, 80%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, #ffd9b0, transparent); box-shadow: 0 0 22px 3px rgba(255, 140, 50, .85); }
.cta__card .glow-icon { margin: 0 auto 28px; width: 64px; height: 64px; border-radius: 20px; }
.footer__slab { position: relative; overflow: hidden; display: grid; gap: 28px; align-items: end; margin-bottom: 56px; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg); background: radial-gradient(120% 140% at 0% 0%, #ffb35c 0%, #f5761f 38%, #c9420b 75%, #7a2505 100%); color: #1a0b00; box-shadow: 0 30px 80px -30px rgba(255, 100, 20, .7), inset 0 1px 0 rgba(255, 240, 220, .6); }
@media (min-width: 760px) {
.footer__slab { grid-template-columns: 1fr auto; }
}
.footer__slab h2 { margin: 0; font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 760; font-stretch: 112%; letter-spacing: -.04em; line-height: 1; color: #1a0b00; max-width: 18ch; }
.footer__slab p { margin-top: 12px; color: rgba(26, 11, 0, .75); max-width: 30em; }
.btn-ink { background: #120802; color: #ffe7d2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px -12px rgba(0, 0, 0, .6); }
.btn-ink .btn__icon { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); }
@media (hover: hover) {
.btn-ink:hover { background: #000; }
}
.footer__word { background: linear-gradient(180deg, rgba(255, 150, 70, .22), transparent 90%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; }
@media (prefers-contrast: more) {
.lit::before { background: var(--line-2); }
}
@property --lx { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --ly { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --heat { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --drift { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --hx { syntax: "<number>"; inherits: true; initial-value: .5; }
@keyframes drift { 0% { --drift: -1; } 100% { --drift: 1; } }
.lit { --heat: .5; --heat-hover: .9; --sq: clamp(30px, 3.4vw, 44px); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--sq); background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(180deg, #1b1a1a 0%, #0e0d0c 42%, #080706 100%); box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    calc((var(--lx) - .5) * 70px) 46px 100px -46px rgba(255, 96, 18, calc(var(--heat) * .95)),
    0 24px 50px -24px rgba(0, 0, 0, .85); transition: --lx 1.1s var(--spring), --ly 1.1s var(--spring), --heat .9s var(--ease-out), translate .7s var(--spring), scale .5s var(--spring); }
@supports (corner-shape: squircle) {
.lit { corner-shape: squircle; border-radius: calc(var(--sq) * 1.9); }
.lit::before, .lit::after, .qa::before { corner-shape: squircle; }
}
.lit::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 35%, rgba(255, 150, 70, .08) 70%, rgba(255, 170, 90, calc(.2 + var(--heat) * .5))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lit::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background:
    radial-gradient(56% 30% at calc((var(--lx) + var(--drift) * .07) * 100%) 106%, rgba(255, 255, 255, .95) 0%, rgba(255, 232, 205, .92) 12%, rgba(255, 150, 60, .88) 32%, rgba(222, 66, 12, .6) 56%, transparent 80%),
    radial-gradient(95% 62% at calc((var(--lx) - var(--drift) * .09) * 100%) 118%, rgba(255, 92, 20, .62), rgba(160, 30, 0, .25) 55%, transparent 78%),
    radial-gradient(40% 40% at calc(var(--lx) * 100%) calc(var(--ly) * 100%), rgba(255, 140, 60, .12), transparent 70%); opacity: var(--heat); /* the drift lives on the glow layer itself, so only this layer restyles each frame */
  animation: drift 9s ease-in-out infinite alternate; }
@media (hover: hover) {
.lit:hover { --heat: var(--heat-hover); }
}
.lit > * { position: relative; z-index: 2; }
.lit > .dial, .lit > .cta__beam { position: absolute; }
.bento__card { --heat: .42; padding-bottom: clamp(88px, 10vw, 120px); }
.bento__hero { --heat: .78; --heat-hover: 1; justify-content: flex-start; padding-bottom: clamp(24px, 3vw, 36px); }
.steps .step { --heat: .22; --heat-hover: .7; padding-bottom: clamp(64px, 7vw, 88px); }
.steps .step.is-on { --heat: .55; }
.voices.lit { --heat: .38; --heat-hover: .5; }
.ask.lit { --heat: .45; }
.cta__card.lit { --heat: .95; --heat-hover: 1; padding-bottom: clamp(96px, 12vw, 150px); }
.cta__card::after { opacity: var(--heat); }
.dial { z-index: 0; left: 50%; top: clamp(90px, 12vw, 130px); width: 130%; aspect-ratio: 1; translate: -50% 0; pointer-events: none; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .34) 0deg .35deg, transparent .35deg 2.4deg); -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89% 95%, transparent 96%), linear-gradient(180deg, #000 0 32%, transparent 48%); -webkit-mask-composite: source-in; mask-composite: intersect; rotate: calc((var(--lx) - .5) * 14deg); transition: rotate 1.1s var(--spring); }
.dial::after { content: ""; position: absolute; left: 50%; top: 2%; width: 1.5px; height: 16%; translate: -50% 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .85)); }
.bento__hero { text-align: center; align-items: center; }
.bento__hero h3 { margin-inline: auto; }
.bento__hero .bento__stat { margin-top: auto; font-size: clamp(6rem, 3rem + 10vw, 12rem); background: linear-gradient(180deg, #ffffff 30%, rgba(255, 244, 232, .55) 78%, rgba(255, 200, 150, .15)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255, 160, 90, .35)); }
:root:not([data-theme="dark"]) .bento__hero .bento__stat { filter: none; }
.bento__hero .muted { margin-bottom: 8px; }
.qa { position: relative; isolation: isolate; border-radius: 26px; }
@supports (corner-shape: squircle) {
.qa { corner-shape: squircle; border-radius: 44px; }
}
.qa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--spin), rgba(255, 120, 40, .15), #ff7a1f 18%, #ffd6ad 26%, #ff7a1f 34%, rgba(255, 120, 40, .15) 52%, rgba(255, 120, 40, .15) 70%, #f26522 86%, rgba(255, 120, 40, .15)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s var(--ease-out); }
.qa.is-open { box-shadow: 0 0 40px -10px rgba(255, 110, 30, .55), 0 0 0 1px transparent; background: radial-gradient(70% 60% at 50% 120%, rgba(255, 110, 30, .2), transparent 70%), var(--surface); }
.qa.is-open::before { opacity: 1; }
.hero { --hx: .5; transition: --hx 1.4s var(--spring); }
.hero:not(.has-fx) .hero__horizon { animation: drift 12s ease-in-out infinite alternate; }
.hero__horizon { background:
    radial-gradient(46% 40% at calc((var(--hx) + var(--drift) * .04) * 100%) 100%, rgba(255, 236, 210, .7), rgba(255, 150, 60, .45) 26%, rgba(214, 72, 10, .22) 58%, transparent 100%),
    radial-gradient(36% 90% at calc((var(--hx) - var(--drift) * .05) * 100%) 100%, rgba(255, 100, 24, .32), transparent 70%); }
.hero__horizon::after { left: calc((var(--hx) - .3) * 100%); right: auto; width: 60%; }
.viewer { border-radius: 34px; }
@supports (corner-shape: squircle) {
.viewer { corner-shape: squircle; border-radius: 64px; }
.scrub__track { corner-shape: squircle; border-radius: 34px; }
}
.btn-primary { background-size: 220% 100%; background-position: calc(var(--bx, .5) * 100%) 50%; transition: translate .6s var(--spring), scale .5s var(--spring), box-shadow .45s var(--ease-out), background-position .8s var(--spring); }
.btn-primary::before { display: none; }
.btn-primary { background-image: linear-gradient(100deg, #e5520f 0%, #f26522 22%, #ff9a3c 48%, #ffc56e 58%, #f7862a 76%, #f26522 100%); }
@media (prefers-reduced-motion: reduce) {
.lit::after, .hero__horizon { animation: none; }
.qa.is-open::before { animation: none; }
.lit, .dial { transition-duration: .01ms; }
}
.hero .display { font-size: clamp(2.875rem, .6rem + 6.4vw, 6rem); }
@media (min-width: 960px) {
.hero .display { font-size: clamp(3.5rem, 1rem + 4.6vw, 6rem); }
.hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.scrub { margin-top: 40px; }
}
.hero__copy { position: relative; z-index: 1; }
.trust { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.avatars { display: flex; flex: none; }
.avatars img { width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; background: var(--surface-2); }
.avatars img:first-child { margin-left: 0; }
.trust p { font-size: .9375rem; line-height: 1.35; color: var(--text-2); }
.viewer__play { width: 54px; height: 54px; background: rgba(255, 255, 255, .92); color: #0b0b0b; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.viewer__play svg { width: 20px; height: 20px; }
@media (hover: hover) {
.viewer__play:hover { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); scale: 1.08; }
}
.section-head .h2 + .lead { margin-top: 20px; }
@media (max-width: 480px) {
.nav__actions .btn-sm:has(.btn__icon) { padding: 0 14px; }
.nav__actions .btn-sm .btn__icon { display: none; }
.brand { font-size: 1.0625rem; gap: 8px; }
.brand img { width: 28px; height: 28px; }
}
@media (max-width: 600px) {
.scrub__track { gap: 4px; padding: 5px; }
.clip { padding: 0 7px 8px; font-size: .75rem; letter-spacing: -.02em; }
}
.voices__stage:focus-visible { outline-offset: 8px; border-radius: 12px; }
.footer .container { container-type: inline-size; }
.footer__word { font-size: 10.4cqi; overflow: visible; text-align: center; padding-bottom: .04em; }
@supports not (font-size: 1cqi) {
.footer__word { font-size: min(9vw, 7.5rem); }
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
:root:not([data-theme="dark"]) { --bg: #fbf8f5; --bg-alt: #f3eee9; --surface: #ffffff; --surface-2: #efe8e1; --text: #1c1917; --text-2: #6d635c; --line: rgba(70, 35, 10, .1); --line-2: rgba(70, 35, 10, .19); --accent-text: #b4400a; --accent-soft: rgba(242, 101, 34, .1); --glass: rgba(251, 248, 245, .72); --glass-strong: rgba(251, 248, 245, .92); --shadow-sm: 0 1px 2px rgba(70, 35, 10, .05), 0 8px 20px -10px rgba(70, 35, 10, .14); --shadow-lg: 0 2px 6px rgba(70, 35, 10, .05), 0 34px 70px -28px rgba(70, 35, 10, .3); }
.hero__fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero__fx.is-on { opacity: 1; }
.hero__horizon { transition: opacity 1.4s var(--ease-out); }
.has-fx .hero__horizon { opacity: 0 !important; }
.badge { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16); }
.badge__dot { width: 9px; height: 9px; background: conic-gradient(from var(--spin), #f26522, #f9a51f, #fff0d9, #ff7a1f, #f26522); box-shadow: 0 0 10px 1px rgba(255, 122, 31, .75); animation: rim-spin 1.8s linear infinite; }
.badge__dot::after { background: radial-gradient(circle, rgba(249, 165, 31, .95), rgba(242, 101, 34, .5) 50%, transparent 72%); }
.scrub__track { background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12); }
.clip { background: rgba(20, 14, 10, .72); }
.viewer::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .1); }
@supports (corner-shape: squircle) {
.viewer::before, .viewer::after, .fmt::after { corner-shape: squircle; }
}
.hero__line { padding: 0 .24em .26em 0; margin: 0 -.24em -.26em 0; }
.swap { padding: .04em .24em .3em .04em; margin: -.04em -.24em -.3em -.04em; }
.accent, .swap__word {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  letter-spacing: -.01em; padding-right: .06em;
  background-image: linear-gradient(100deg, #fff4e4 0%, #ffcf96 16%, #ff9d4d 32%, #f26522 48%, #b73509 62%, #ff7f35 78%, #ffe1ba 100%);
  background-size: 250% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: grade 10s ease-in-out infinite alternate;
}
.swap__word { font-size: calc(1.12em * var(--fit, 1)); line-height: .9; transition: none; }
.accent { font-size: 1.08em; line-height: .85; }
:root:not([data-theme="dark"]) :is(.accent, .swap__word) {
  background-image: linear-gradient(100deg, #6e2708 0%, #b4400a 18%, #f26522 36%, #ff9a45 50%, #e2560f 66%, #8f310a 84%, #c2410c 100%);
}
@keyframes grade { to { background-position: 100% 50%; } }
.formats { display: grid; gap: 18px; }
.formats > li { display: flex; }
@media (min-width: 900px) {
.formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.formats-dots { display: none; }
}
@media (max-width: 899px) {
.formats { grid-auto-flow: column; grid-auto-columns: min(80vw, 360px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scroll-padding-inline: var(--gutter); }
.formats::-webkit-scrollbar { display: none; }
.formats > li { scroll-snap-align: start; }
}
.fmt { --lx: .5; --heat: 0; position: relative; isolation: isolate; container-type: inline-size; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 34px; background: #0c0a09; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -34px rgba(0, 0, 0, .85); transition: translate .7s var(--spring), scale .5s var(--spring), box-shadow .5s var(--ease-out), --lx 1.1s var(--spring), --heat .6s var(--ease-out); }
@supports (corner-shape: squircle) {
.fmt { corner-shape: squircle; border-radius: 62px; }
}
.fmt::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 30% at calc(var(--lx) * 100%) 104%, rgba(255, 140, 60, .55), rgba(242, 101, 34, .18) 45%, transparent 75%); opacity: var(--heat); mix-blend-mode: screen; }
.fmt__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.fmt__media picture { height: 100%; }
.fmt__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--spring); }
.fmt__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: -30%; padding: clamp(84px, 9vw, 104px) 22px 22px; }
.fmt__body::before, .fmt__body::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fmt__body::before { z-index: -2; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.fmt__body::after { z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 9, 0) 0%, rgba(12, 10, 9, .45) 28%, rgba(12, 10, 9, .88) 58%, #0c0a09 100%); }
.fmt__head { display: flex; align-items: center; gap: 10px; }
.fmt__title { font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.125rem); font-weight: 700; font-stretch: 110%; letter-spacing: -.035em; line-height: 1.05; color: #fff; }
.fmt__badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); box-shadow: 0 0 14px rgba(255, 120, 40, .6); }
.fmt__badge svg { width: 13px; height: 13px; stroke-width: 2.4; }
.fmt__desc { max-width: 30ch; font-size: 1rem; line-height: 1.45; color: rgba(255, 255, 255, .74); }
.fmt__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 14px; }
.fmt__stat { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 560; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fmt__stat svg { width: 16px; height: 16px; opacity: .8; }
.fmt__btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 20px; border-radius: 999px; background: #fff; color: #141110; font-size: .9375rem; font-weight: 650; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(0, 0, 0, .08); transition: box-shadow .4s var(--ease-out), scale .5s var(--spring-bounce); }
.fmt__btn svg { width: 16px; height: 16px; transition: rotate .6s var(--spring); }
.fmt:active { scale: .98; }
.fmt:focus-visible { outline-offset: 4px; }
@container (max-width: 330px) {
.fmt__stat--time { display: none; }
}
@media (hover: hover) {
.fmt:hover { --heat: 1; translate: 0 -6px; box-shadow: inset 0 0 0 1px rgba(255, 170, 100, .22), 0 44px 90px -40px rgba(255, 100, 20, .55); }
.fmt:hover .fmt__media img { scale: 1.06; }
.fmt:hover .fmt__btn { box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 12px 30px -10px rgba(0, 0, 0, .6); }
.fmt:hover .fmt__btn svg { rotate: 90deg; }
.fmt:hover .btn__roll > span { translate: 0 -100%; }
}
:root:not([data-theme="dark"]) .hero__horizon { opacity: .8; background: radial-gradient(50% 42% at 50% 100%, rgba(255, 190, 140, .55), rgba(255, 150, 90, .25) 40%, transparent 100%); }
:root:not([data-theme="dark"]) .hero__horizon::after { background: linear-gradient(90deg, transparent, rgba(242, 101, 34, .6), transparent); box-shadow: 0 0 16px 1px rgba(242, 101, 34, .4); }
:root:not([data-theme="dark"]) .badge { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(70, 35, 10, .08), 0 6px 18px -10px rgba(242, 101, 34, .35); }
:root:not([data-theme="dark"]) .scrub__track { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(70, 35, 10, .08), 0 10px 30px -18px rgba(242, 101, 34, .35); }
:root:not([data-theme="dark"]) .clip { background: rgba(255, 255, 255, .88); }
:root:not([data-theme="dark"]) .viewer { box-shadow: 0 0 0 1px rgba(242, 101, 34, .16), 0 44px 90px -40px rgba(242, 101, 34, .55), 0 24px 50px -30px rgba(70, 35, 10, .35); }
:root:not([data-theme="dark"]) .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 245, 230, .6), inset 0 -1px 0 rgba(120, 40, 0, .2), 0 14px 30px -14px rgba(242, 101, 34, .8); }
:root:not([data-theme="dark"]) .btn-secondary { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root:not([data-theme="dark"]) .lit { background: linear-gradient(180deg, #ffffff 0%, #fffaf6 58%, #fff3ea 100%); box-shadow: inset 0 1px 0 #fff, calc((var(--lx) - .5) * 50px) 36px 70px -40px rgba(242, 101, 34, calc(var(--heat) * .5)), 0 18px 44px -30px rgba(70, 35, 10, .28); }
:root:not([data-theme="dark"]) .lit::before { background: linear-gradient(180deg, #ffffff 0%, rgba(70, 35, 10, .07) 28%, rgba(242, 101, 34, .1) 70%, rgba(242, 101, 34, calc(.22 + var(--heat) * .45)) 100%); }
:root:not([data-theme="dark"]) .lit::after { opacity: 1; background:
    radial-gradient(58% 32% at calc((var(--lx) + var(--drift) * .07) * 100%) 104%, rgba(255, 140, 70, calc(var(--heat) * .7)) 0%, rgba(255, 176, 120, calc(var(--heat) * .42)) 40%, transparent 76%),
    radial-gradient(95% 60% at calc((var(--lx) - var(--drift) * .09) * 100%) 118%, rgba(255, 205, 165, calc(var(--heat) * .65)), transparent 72%); }
:root:not([data-theme="dark"]) .glow-icon { color: #b4400a; background: radial-gradient(circle at 50% 125%, #ff8a45 0%, #ffc7a1 42%, #fff6f0 78%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(242, 101, 34, .22), 0 12px 26px -12px rgba(242, 101, 34, .6); }
:root:not([data-theme="dark"]) .glow-icon svg { filter: none; }
:root:not([data-theme="dark"]) .bento__hero .bento__stat { background: linear-gradient(180deg, #1c1917 30%, #5a2a10 70%, #f26522 100%); -webkit-background-clip: text; background-clip: text; }
:root:not([data-theme="dark"]) .dial { background: repeating-conic-gradient(from 0deg, rgba(70, 35, 10, .3) 0deg .35deg, transparent .35deg 2.4deg); }
:root:not([data-theme="dark"]) .dial::after { background: linear-gradient(180deg, transparent, rgba(70, 35, 10, .7)); }
:root:not([data-theme="dark"]) .qa { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) .qa.is-open { background: radial-gradient(70% 70% at 50% 130%, rgba(255, 150, 90, .22), transparent 70%), #fff; box-shadow: 0 24px 50px -30px rgba(242, 101, 34, .6); }
:root:not([data-theme="dark"]) .cta__beam { background: linear-gradient(90deg, transparent, #f26522, transparent); box-shadow: 0 0 22px 2px rgba(242, 101, 34, .45); }
:root:not([data-theme="dark"]) .footer__word { background: linear-gradient(180deg, rgba(242, 101, 34, .2), transparent 90%); -webkit-background-clip: text; background-clip: text; }
:root:not([data-theme="dark"]) .fmt { background: #fbf8f5; color: var(--text); box-shadow: inset 0 0 0 1px rgba(70, 35, 10, .08), 0 30px 60px -36px rgba(70, 35, 10, .35); }
:root:not([data-theme="dark"]) .fmt__body::after { background: linear-gradient(180deg, rgba(251, 248, 245, 0) 0%, rgba(251, 248, 245, .55) 28%, rgba(251, 248, 245, .92) 58%, #fbf8f5 100%); }
:root:not([data-theme="dark"]) .fmt__title { color: var(--text); }
:root:not([data-theme="dark"]) .fmt__desc, :root:not([data-theme="dark"]) .fmt__stat { color: var(--text-2); }
:root:not([data-theme="dark"]) .fmt__btn { background: #1c1917; color: #fff; box-shadow: 0 10px 24px -12px rgba(28, 25, 23, .6); }
:root:not([data-theme="dark"]) .fmt::after { mix-blend-mode: multiply; background: radial-gradient(70% 30% at calc(var(--lx) * 100%) 104%, rgba(255, 160, 100, .45), transparent 75%); }
@media (hover: hover) {
:root:not([data-theme="dark"]) .fmt:hover { box-shadow: inset 0 0 0 1px rgba(242, 101, 34, .2), 0 40px 80px -40px rgba(242, 101, 34, .5); }
:root:not([data-theme="dark"]) .fmt:hover .fmt__btn { box-shadow: 0 0 0 5px rgba(28, 25, 23, .08), 0 12px 30px -12px rgba(28, 25, 23, .6); }
}
[data-theme="dark"] .btn-secondary { background: rgba(12, 8, 6, .42); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
[data-theme="dark"] .trust p { text-shadow: 0 1px 14px rgba(0, 0, 0, .85); }
@keyframes rim-spin { to { --spin: 360deg; } }
.qa.is-open::before { animation: rim-spin 7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.accent, .swap__word, .badge__dot, .qa.is-open::before { animation: none; }
.hero__fx { transition: none; }
.fmt, .fmt__media img { transition-duration: .01ms; }
}
@media (prefers-reduced-transparency: reduce) {
.badge, .scrub__track, .fmt__body::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hero__line:has(.swap), .swap { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
.js .hero__line:has(.swap) > span { animation-name: rise-soft; }
}
@keyframes rise-soft { from { opacity: 0; translate: 0 .3em; filter: blur(8px); } }
.vcard__media, .rail .vcard__media { aspect-ratio: var(--r, 1.7778); }
.rail { --rail-h: clamp(380px, 30vw + 270px, 520px); display: flex; align-items: flex-start; grid-auto-columns: unset; }
.rail > .vcard { flex: none; width: min(86vw, calc(var(--rail-h) * var(--r, .5625))); }
.vcard.is-pending .vcard__media { background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
[data-am-list]:empty::before { content: "Videos for this section will appear here."; color: var(--text-2); }
.vcard__play { width: 64px; height: 64px; background: rgba(255, 255, 255, .94); color: #140b06; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 14px 34px -8px rgba(0, 0, 0, .5); }
.vcard__play svg { width: 26px; height: 26px; }
.vcard__play::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); opacity: 0; scale: .8; transition: opacity .35s var(--ease-out), scale .6s var(--spring); }
@media (hover: hover) {
.vcard:hover .vcard__play::before { opacity: 1; scale: 1; }
}
.viewer__play svg, .cursor-chip svg { width: 22px; height: 22px; }
.cursor-chip svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
.vgrid .vcard:not(.is-landscape) .vcard__play, .rail .vcard__play { width: 52px; height: 52px; }
.vgrid .vcard:not(.is-landscape) .vcard__play svg, .rail .vcard__play svg { width: 22px; height: 22px; }
}
.i-wa { fill: url(#am-flare); }
.cta__note a .i-wa { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .3em; }
.qa + .qa { margin-top: 12px; }
.qa__q { padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px); gap: 20px; }
.qa__inner p { max-width: 62ch; padding: 0 clamp(20px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px); }
@media (max-width: 480px) {
.qa__q { font-size: 1.0625rem; }
.qa__icon { width: 36px; height: 36px; }
}
.lit > .dial { position: absolute; z-index: 0; left: 50%; top: clamp(100px, 11vw, 128px); width: min(112%, 580px); height: auto; aspect-ratio: 400 / 210; translate: -50% 0; background: none; -webkit-mask: none; mask: none; rotate: none; border-radius: 0; overflow: visible; color: var(--text); pointer-events: none; }
.lit > .dial::after { display: none; }
.dial__tick { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .28; transition: stroke .35s var(--ease-out); }
.dial__tick--major { stroke-width: 2.2; }
.dial__tick.is-hot { stroke: #ffa25a; }
.dial__needle { transform-box: view-box; transform-origin: 200px 205px; }
.dial__needle line { stroke: #ff8a3a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 120, 40, .9)); }
.dial__needle circle { fill: #ffe2c4; filter: drop-shadow(0 0 6px rgba(255, 130, 50, 1)); }
:root:not([data-theme="dark"]) .lit > .dial { background: none; }
:root:not([data-theme="dark"]) .dial__tick.is-hot { stroke: #d4430c; }
:root:not([data-theme="dark"]) .dial__needle line { stroke: #e2560f; filter: none; }
:root:not([data-theme="dark"]) .dial__needle circle { fill: #f26522; filter: none; }
.form-card.lit { --heat: .3; --heat-hover: .4; padding: clamp(22px, 4vw, 44px); padding-bottom: clamp(40px, 6vw, 64px); }
.form-card.is-wrapped { --heat: .95; --heat-hover: 1; }
.stepper__meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: .875rem; color: var(--text-2); }
.stepper__meta [data-step-label] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.stepper__track { --p: 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 6px; margin-bottom: clamp(28px, 4vw, 40px); }
.stepper__seg { position: relative; overflow: hidden; border-radius: 3px; background: var(--line-2); }
.stepper__seg::after { content: ""; position: absolute; inset: 0; background: var(--flare); transform-origin: left center; scale: 0 1; transition: scale .6s var(--spring); }
.stepper__seg.is-done::after { scale: 1 1; }
.stepper__track::after { content: ""; position: absolute; top: 50%; left: calc(var(--p) * (100% - 14px)); width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #ffe2c4; box-shadow: 0 0 0 3px #f26522, 0 0 14px 2px rgba(255, 120, 30, .8); transition: left .7s var(--spring-bounce); }
html:not(.js) .stepper__meta, html:not(.js) .stepper__track, html:not(.js) .stage__nav, html:not(.js) .summary { display: none; }
.stepper__nojs { display: none; margin-top: 28px; }
html:not(.js) .stepper__nojs { display: block; }
html:not(.js) .stage + .stage { margin-top: 40px; }
.stage { min-width: 0; margin: 0; padding: 0; border: 0; }
.stage.is-entering { animation: stage-in .6s var(--spring) both; }
@keyframes stage-in { from { opacity: 0; translate: calc(var(--dir, 1) * 36px) 0; filter: blur(4px); } }
.stage.is-shaking { animation: shake .42s var(--ease-out); }
@keyframes shake { 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
.stage__q { display: block; margin-bottom: 10px; padding: 0; outline: none; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem); font-weight: 740; font-stretch: 110%; letter-spacing: -.035em; line-height: 1.05; }
.stage__hint { margin-bottom: 22px; color: var(--text-2); }
.stage .field { margin-bottom: 18px; }
.stage .input { min-height: 60px; border-radius: 18px; font-size: 1.125rem; background: rgba(255, 255, 255, .03); }
:root:not([data-theme="dark"]) .stage .input { background: #fff; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: box-shadow .3s, background-color .3s, translate .5s var(--spring), scale .4s var(--spring); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); color: var(--text); transition: background-color .3s, color .3s, rotate .6s var(--spring-bounce); }
.tile__icon svg { width: 22px; height: 22px; }
.tile__label { font-size: 1.0625rem; font-weight: 660; letter-spacing: -.02em; }
.tile__sub { font-size: .875rem; line-height: 1.35; color: var(--text-2); }
.tile__check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); scale: 0; transition: scale .5s var(--spring-bounce); }
.tile__check svg { width: 14px; height: 14px; }
.tile:has(input:checked) { background: radial-gradient(90% 80% at 50% 120%, rgba(255, 120, 40, .24), transparent 70%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 70, .9), 0 0 30px -10px rgba(255, 110, 30, .8); }
.tile:has(input:checked) .tile__check { scale: 1; }
.tile:has(input:checked) .tile__icon { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); rotate: -8deg; }
.tile:has(input:focus-visible) { outline: 2px solid var(--flare-a); outline-offset: 3px; }
.tile.is-picked { animation: pick .5s var(--spring-bounce); }
@keyframes pick { 40% { scale: .95; } }
@media (hover: hover) {
.tile:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(255, 170, 100, .5); }
}
:root:not([data-theme="dark"]) .tile { background: #fff; }
:root:not([data-theme="dark"]) .tile:has(input:checked) { background: radial-gradient(90% 80% at 50% 120%, rgba(255, 150, 90, .22), transparent 70%), #fff; box-shadow: inset 0 0 0 1.5px #f26522, 0 18px 36px -22px rgba(242, 101, 34, .7); }
.stage__greet { min-height: 1.5em; margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--accent-text); opacity: 0; translate: 0 6px; transition: opacity .4s var(--ease-out), translate .6s var(--spring); }
.stage__greet.is-on { opacity: 1; translate: 0 0; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 140px; }
.detect { position: absolute; top: 50%; right: 10px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--surface-2); font-size: .8125rem; font-weight: 620; pointer-events: none; translate: 0 -50%; opacity: 0; scale: .8; transition: opacity .3s var(--ease-out), scale .5s var(--spring-bounce); }
.detect.is-on { opacity: 1; scale: 1; }
.detect svg { width: 18px; height: 18px; fill: url(#am-flare); }
.detect svg[data-platform="email"] { fill: none; stroke: url(#am-flare); }
.counter { margin-top: 6px; text-align: right; font-size: .8125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.stage__nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.stage__nav .btn { margin-left: auto; }
.link-back { display: inline-flex; align-items: center; gap: 6px; padding: 12px 4px; border: 0; background: none; font-weight: 600; color: var(--text-2); cursor: pointer; transition: color .25s; }
.link-back svg { width: 16px; height: 16px; transition: translate .5s var(--spring); }
@media (hover: hover) {
.link-back:hover { color: var(--text); }
.link-back:hover svg { translate: -3px 0; }
}
.summary { margin: 22px 0 0; padding: 6px 20px; border-radius: 20px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.summary > div { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { font-size: .875rem; color: var(--text-2); }
.summary dd { margin: 0; font-weight: 560; overflow-wrap: break-word; min-width: 0; }
.summary__edit { padding: 4px; border: 0; background: none; font-size: .875rem; font-weight: 600; color: var(--accent-text); cursor: pointer; }
:root:not([data-theme="dark"]) .summary { background: #fff; }
@media (max-width: 480px) {
.tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { padding: 14px; }
.tile__sub { display: none; }
.input-wrap .input { padding-right: 16px; }
.detect { position: static; translate: none; margin-top: 8px; }
}
.wrap { text-align: center; padding: clamp(4px, 2vw, 20px) 0; }
.wrap:focus { outline: none; }
.clapper { display: block; width: min(230px, 62%); margin: 0 auto 20px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.clapper svg { display: block; width: 100%; height: auto; overflow: visible; }
.clapper__top { transform-box: fill-box; transform-origin: 3% 100%; rotate: -22deg; }
.clapper.is-clap .clapper__top { animation: clap .85s var(--spring-bounce) both; }
.clapper.is-clap .clapper__board { animation: thud .85s var(--ease-out); }
@keyframes clap { 0% { rotate: -22deg; } 34% { rotate: 0deg; } 52% { rotate: -5deg; } 100% { rotate: 0deg; } }
@keyframes thud { 34% { translate: 0 0; } 42% { translate: 0 5px; } 70% { translate: 0 0; } }
.clapper__text { font-family: var(--sans); font-weight: 700; font-stretch: 110%; fill: #f7f1ec; letter-spacing: .02em; }
.clapper__label { font-family: var(--sans); font-weight: 600; fill: #a1968e; font-size: 9px; letter-spacing: .08em; }
.wrap__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); font-weight: 760; font-stretch: 112%; letter-spacing: -.042em; line-height: 1; }
.wrap .lead { max-width: 30em; margin: 14px auto 0; }
.wrap__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.wrap__follow { margin-top: 32px; font-size: .9375rem; color: var(--text-2); }
.wrap__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.bubble { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, color .3s, translate .6s var(--spring-bounce), scale .5s var(--spring-bounce), box-shadow .3s; }
.bubble svg { width: 21px; height: 21px; fill: currentColor; }
.bubble:active { scale: .9; }
@media (hover: hover) {
.bubble:hover { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); translate: 0 -5px; box-shadow: 0 14px 30px -10px rgba(255, 110, 30, .8); }
}
@media (prefers-reduced-motion: no-preference) {
.wrap.is-live .clapper { animation: rise-soft .7s var(--spring) both; }
.wrap.is-live .wrap__title { animation: rise-soft .8s var(--spring) .2s both; }
.wrap.is-live .lead { animation: rise-soft .8s var(--spring) .3s both; }
.wrap.is-live .wrap__actions { animation: rise-soft .8s var(--spring) .4s both; }
.wrap.is-live .wrap__follow { animation: rise-soft .8s var(--spring) .5s both; }
.wrap.is-live .bubble { animation: bubble-in .7s var(--spring-bounce) both; animation-delay: calc(.55s + var(--i, 0) * .07s); }
}
@keyframes bubble-in { from { opacity: 0; scale: .3; translate: 0 18px; } }
@media (max-width: 520px) {
.wrap__actions .btn { flex: 1 1 100%; justify-content: space-between; }
.summary { padding: 4px 16px; }
.summary > div { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
.summary dd { overflow-wrap: break-word; }
}
.confetti { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100vh; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.stage.is-entering, .stage.is-shaking, .tile.is-picked, .clapper.is-clap .clapper__top, .clapper.is-clap .clapper__board, .vcard.is-pending .vcard__media { animation: none; }
.clapper__top { rotate: 0deg; }
}
.swap__word { padding: .1em .16em .32em .08em; margin: -.1em -.16em -.32em -.08em; }
.accent { padding: .12em .14em .34em .06em; margin: 0 -.14em 0 -.06em; }
.theme-btn { box-shadow: inset 0 0 0 1px var(--line); }
.theme-ico { width: 20px; height: 20px; overflow: visible; }
.theme-ico__core { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--spring-bounce); }
.theme-ico__cut { transition: transform .7s var(--spring); }
.theme-ico__rays { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--spring), opacity .35s var(--ease-out); }
[data-theme="dark"] .theme-ico__core { transform: scale(1.5); }
[data-theme="dark"] .theme-ico__cut { transform: translate(0, 0); }
[data-theme="dark"] .theme-ico__rays { transform: rotate(-60deg) scale(.5); opacity: 0; }
[data-theme="light"] .theme-ico__cut { transform: translate(10px, -10px); }
[data-theme="light"] .theme-ico__rays { transform: none; opacity: 1; }
@media (hover: hover) {
.theme-btn:hover .theme-ico__rays { transform: rotate(30deg); }
[data-theme="dark"] .theme-btn:hover .theme-ico__core { transform: scale(1.5) rotate(-18deg); }
}
.theme-btn:active .theme-ico { scale: .86; }
.theme-ico { transition: scale .3s var(--spring); }
@media (max-width: 420px) {
.nav__bar { gap: 6px; }
.brand { font-size: 1rem; gap: 7px; letter-spacing: -.035em; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav__actions { gap: 3px; }
.nav__actions .icon-btn { width: 38px; height: 38px; }
.nav__actions .btn-sm { --h: 36px; margin-left: 2px; padding: 0 12px; font-size: .875rem; }
.nav__actions .btn-sm:has(.btn__icon) { padding: 0 12px; }
}
@media (max-width: 359px) {
.brand__word { display: none; }
}
.budget-exact { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
.theme-ico, .theme-ico__core, .theme-ico__cut, .theme-ico__rays { transition-duration: .01ms; }
}
.viewer .viewer__play { position: relative; width: 56px; height: 56px; background: rgba(255, 255, 255, .95); color: #140b06; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(0, 0, 0, .08); transition: scale .55s var(--spring-bounce), background-color .3s, color .3s, box-shadow .4s; }
.viewer .viewer__play svg { width: 22px; height: 22px; }
.viewer .viewer__play::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); animation: play-ring 2.8s var(--ease-out) infinite; }
@keyframes play-ring { 0% { opacity: .9; scale: .88; } 70%, 100% { opacity: 0; scale: 1.4; } }
@media (hover: hover) {
.viewer .viewer__play:not(:disabled):hover { background: #fff; background-image: var(--flare); color: var(--on-flare); scale: 1.1; box-shadow: 0 0 0 6px rgba(255, 140, 60, .22), 0 14px 36px rgba(255, 100, 20, .55); }
}
.viewer .viewer__play:not(:disabled):active { scale: .92; }
.js form[data-stepper]:not(.is-stepping) .stage ~ .stage { display: none; }
form[data-stepper] .stage[hidden] { display: none; }
.btn-wa { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 62px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text); font-size: 1.0625rem; font-weight: 640; font-stretch: 106%; letter-spacing: -.012em; white-space: nowrap; cursor: pointer; translate: var(--mx, 0) var(--my, 0); transition: translate .6s var(--spring), scale .5s var(--spring), box-shadow .4s var(--ease-out), background-color .3s; -webkit-tap-highlight-color: transparent; }
.btn-wa__icon { position: relative; display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffd6a3 0%, #f7862a 45%, #d4430c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -8px rgba(242, 101, 34, .9); transition: rotate .7s var(--spring-bounce), scale .5s var(--spring-bounce); }
.btn-wa__icon::after { content: ""; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: #34d17a; box-shadow: 0 0 0 2px #1a0e08; }
.btn-wa__icon svg { width: 24px; height: 24px; fill: #1a0b00; }
.btn-wa__label { display: block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .6s var(--spring), opacity .3s var(--ease-out), padding .6s var(--spring); }
.btn-wa:hover .btn-wa__label, .btn-wa:focus-visible .btn-wa__label { max-width: 260px; opacity: 1; padding: 0 20px 0 14px; }
.btn-wa:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 170, 100, .6), 0 12px 36px -12px rgba(255, 110, 30, .7); }
.btn-wa:hover .btn-wa__icon { rotate: -14deg; scale: 1.06; }
.btn-wa:active { scale: .95; }
@media (hover: none) {
.btn-wa__label { max-width: 260px; opacity: 1; padding: 0 20px 0 12px; }
}
.menu__cta .btn-wa { width: 100%; }
.menu__cta .btn-wa__label { max-width: none; opacity: 1; padding: 0 20px 0 14px; }
:root:not([data-theme="dark"]) .btn-wa { background: rgba(255, 255, 255, .7); }
:root:not([data-theme="dark"]) .btn-wa__icon::after { box-shadow: 0 0 0 2px #fff; }
@media (prefers-reduced-motion: reduce) {
.viewer .viewer__play::before { animation: none; }
.btn-wa, .btn-wa__icon, .btn-wa__label { transition-duration: .01ms; }
}
@view-transition { navigation: auto; }
html:not(.theme-vt)::view-transition-old(root) { animation: vt-drift-out .42s cubic-bezier(.4, 0, 1, 1) both; }
html:not(.theme-vt)::view-transition-new(root) { animation: vt-focus-in .72s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vt-drift-out { to { opacity: 0; transform: scale(.955); filter: blur(14px); } }
@keyframes vt-focus-in { from { opacity: 0; transform: scale(1.045); filter: blur(18px); } }
::view-transition-group(am-morph) { z-index: 2; animation-duration: .72s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(am-morph) { animation: vt-morph-out .36s ease-in both; }
::view-transition-new(am-morph) { animation: vt-morph-in .62s cubic-bezier(.22, 1, .36, 1) .08s both; }
@keyframes vt-morph-out { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-morph-in { from { opacity: 0; filter: blur(8px); } }
html:not(.theme-vt)::view-transition-group(site-nav) { z-index: 3; animation: none; }
html:not(.theme-vt)::view-transition-old(site-nav) { display: none; }
html:not(.theme-vt)::view-transition-new(site-nav) { animation: none; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation-duration: .45s; }
html.pt-out main, html.pt-out .footer { animation: pt-out .22s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes pt-out { to { opacity: 0; transform: scale(.985); filter: blur(10px); } }
html.pt-in main { animation: pt-in .75s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pt-in { from { opacity: 0; transform: scale(1.02); filter: blur(14px); } }
.nav__actions .btn-secondary { margin-left: 4px; }
@media (hover: hover) {
.nav__actions .btn-secondary:hover .btn__icon svg { animation: nudge .7s var(--spring); }
}
@keyframes nudge { 0% { translate: 0 0; opacity: 1; } 38% { translate: 16px 0; opacity: 0; } 39% { translate: -16px 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@media (max-width: 859px), (min-width: 960px) and (max-width: 1159px) {
.nav__actions .btn-secondary, .nav__actions .btn-secondary:has(.btn__icon) { width: var(--h); padding: 0; gap: 0; }
.nav__actions .btn-secondary .btn__roll { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav__actions .btn-secondary .btn__icon { display: grid; background: transparent; }
.nav__actions .btn-secondary .btn__icon svg { width: 17px; height: 17px; }
}
.brand { flex-shrink: 0; }
@media (max-width: 459px) {
.nav__actions .theme-btn { display: none; }
.nav__actions { gap: 4px; }
}
@media (max-width: 380px) {
.nav__actions { gap: 2px; }
.brand { font-size: .9375rem; gap: 6px; }
.brand img { width: 24px; height: 24px; }
.nav__actions .btn-primary.btn-sm, .nav__actions .btn-primary.btn-sm:has(.btn__icon) { padding: 0 11px; }
.nav__actions .btn-secondary, .nav__actions .btn-secondary:has(.btn__icon), .nav__actions .menu-btn { --h: 34px; width: 34px; height: 34px; min-height: 34px; margin-left: 2px; }
}
@media (prefers-reduced-motion: reduce) {
html:not(.theme-vt)::view-transition-old(root), html:not(.theme-vt)::view-transition-new(root), ::view-transition-group(am-morph), ::view-transition-old(am-morph), ::view-transition-new(am-morph) { animation: none !important; }
html.pt-out main, html.pt-out .footer, html.pt-in main { animation: none; }
.nav__actions .btn-secondary:hover .btn__icon svg { animation: none; }
}
.btn, .btn-wa, .fmt, .lit, .vcard, .tile, .bubble, .socials a, .qa__q, .person, .client, .icon-btn, .brand { -webkit-tap-highlight-color: transparent; }
.btn.is-touched .btn__roll > span { translate: 0 -100%; }
.btn.is-touched .btn__icon { scale: 1.1; }
.btn.is-touched .btn__icon svg { rotate: -12deg; }
.btn-primary.is-touched { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 20px 44px -14px rgba(242, 101, 34, 1); }
[data-theme="dark"] .btn-primary.is-touched { box-shadow: inset 0 1px 0 rgba(255, 240, 220, .6), inset 0 -1px 0 rgba(90, 30, 0, .35), 0 0 0 1px rgba(255, 170, 90, .8), 0 12px 50px -4px rgba(255, 120, 30, .95); }
.btn-primary.is-touched::before { opacity: 1; }
.btn-primary.is-touched::after { translate: 110% 0; }
.btn-secondary.is-touched { color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text); }
.btn-secondary.is-touched::before { scale: 1; }
.btn-secondary.is-touched .btn__icon { background: var(--bg); color: var(--text); }
.btn-ink.is-touched { background: #000; }
.btn-wa.is-touched { box-shadow: inset 0 0 0 1.5px rgba(255, 170, 100, .6), 0 12px 36px -12px rgba(255, 110, 30, .7); }
.btn-wa.is-touched .btn-wa__icon { rotate: -14deg; scale: 1.06; }
.icon-btn.is-touched:not(:disabled) { background: var(--surface-2); }
.viewer .viewer__play.is-touched { background: #fff; background-image: var(--flare); color: var(--on-flare); scale: 1.1; box-shadow: 0 0 0 6px rgba(255, 140, 60, .22), 0 14px 36px rgba(255, 100, 20, .55); }
.brand.is-touched img { rotate: -8deg; }
.lit.is-touched { --heat: var(--heat-hover); }
.lit.is-touched::after { opacity: 1; }
.fmt.is-touched { --heat: 1; translate: 0 -6px; box-shadow: inset 0 0 0 1px rgba(255, 170, 100, .22), 0 44px 90px -40px rgba(255, 100, 20, .55); }
.fmt.is-touched .fmt__media img { scale: 1.06; }
.fmt.is-touched .fmt__btn { box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 12px 30px -10px rgba(0, 0, 0, .6); }
.fmt.is-touched .fmt__btn svg { rotate: 90deg; }
.fmt.is-touched .btn__roll > span { translate: 0 -100%; }
:root:not([data-theme="dark"]) .fmt.is-touched { box-shadow: inset 0 0 0 1px rgba(242, 101, 34, .2), 0 40px 80px -40px rgba(242, 101, 34, .5); }
:root:not([data-theme="dark"]) .fmt.is-touched .fmt__btn { box-shadow: 0 0 0 5px rgba(28, 25, 23, .08), 0 12px 30px -12px rgba(28, 25, 23, .6); }
.vcard.is-touched .vcard__media { translate: 0 -6px; box-shadow: var(--shadow-lg); }
.vcard.is-touched .vcard__media img { scale: 1.05; }
.vcard.is-touched .vcard__play { scale: 1.12; background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); }
.vcard.is-touched .vcard__play::before { opacity: 1; scale: 1; }
.tile.is-touched { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(255, 170, 100, .5); }
.bubble.is-touched { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); translate: 0 -5px; box-shadow: 0 14px 30px -10px rgba(255, 110, 30, .8); }
.socials a.is-touched { background: var(--flare-a); background-image: var(--flare); color: var(--on-flare); translate: 0 -3px; }
.person.is-touched img, .client.is-touched img { filter: none; }
.qa:not(.is-open) .qa__q.is-touched .qa__icon { background: var(--text); color: var(--bg); }
.is-offscreen, .is-offscreen::before, .is-offscreen::after, .is-offscreen .badge__dot, .is-offscreen .badge__dot::after, .is-offscreen .accent, .is-offscreen .swap__word, .is-offscreen .marquee__track, .is-offscreen .viewer__play::before, .lit.is-offscreen::after, .hero.is-offscreen .hero__horizon { animation-play-state: paused; }
.lite .nav, .lite .menu, .lite .dock, .lite .viewer__tag { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .badge, .lite .scrub__track, .lite .fmt__body::before, .lite .player__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite[data-theme="dark"] .btn-secondary { background: rgba(12, 8, 6, .72); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.lite:not([data-theme="dark"]) .btn-secondary { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .lit::after, .lite .hero__horizon, .lite .accent, .lite .swap__word, .lite .badge__dot { animation: none; }