@font-face {
font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-display: swap;
src: url("../fonts/mona-sans/mona-sans-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
src: url("../fonts/newsreader/newsreader-r21-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Mona Sans Fallback"; font-style: normal; font-weight: 200 900; font-display: swap;
src: local("Arial"), local("ArialMT"), local("Roboto"), local("Liberation Sans"), local("DejaVu Sans"),
url("../fonts/mona-sans/mona-sans-latin-wght-normal.woff2") format("woff2");
size-adjust: 102.45%; ascent-override: 106.40%; descent-override: 31.24%; line-gap-override: 0%;
}
@font-face {
font-family: "Newsreader Fallback"; font-style: italic; font-weight: 200 800; font-display: swap;
src: local("Georgia Italic"), local("Georgia-Italic"), local("Noto Serif Italic"), local("NotoSerif-Italic"),
local("Droid Serif Italic"), local("Liberation Serif Italic"), local("DejaVu Serif Italic"),
url("../fonts/newsreader/newsreader-r21-italic.woff2") format("woff2");
size-adjust: 82.45%; ascent-override: 89.14%; descent-override: 32.14%; line-gap-override: 0%;
}
:root {
--font-sans: "Mona Sans", "Mona Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
}
.save-data { --font-serif: "Newsreader Fallback", Georgia, "Times New Roman", serif; }
:root {
--dark-bg: #152218; --dark-text: #E6ECE2; --dark-muted: #AEBBAB;
--dark-hairline: #304034; --dark-edge: #6E7D6F; --dark-accent: #E6ECE2; --dark-accent-on: #152218; --dark-focus: #E6ECE2;
--light-bg: #F0F2EA; --light-surface: #E4E8DD; --light-text: #14201A; --light-muted: #3F4A40;
--light-hairline: #C1C7BA; --light-edge: #7F877C; --light-accent: #14201A; --light-accent-on: #F0F2EA; --light-focus: #14201A;
--dark-accent-hover: #C0C8BE; --light-accent-hover: #323D36;
--brand-ink: #14201A; --brand-paper: #E6ECE2;
--dev-body: #09120B; --dev-rim: #313D34; --dev-shade: 2 6 3;
--dev-base-1: #4D574F; --dev-base-2: #333F36; --dev-base-3: #212D24; --dev-base-4: #111C13; --dev-slot: #1E2B21;
--glass-rgb: 21 34 24;
}
:root {
--cap-bg: #FFFFFF; --cap-ink: #111111; --beat-ink: #FFF6E8; --beat-shade: rgb(30 16 6 / 0.5);
--k-paper: #FBF6EE; --k-ink: #2B1A0F; --k-ink-2: #5A4232; --k-line: #E6DACA; --k-btn: #3A2414; --k-btn-ink: #FBF6EE;
--fs-xl: clamp(2.875rem, 1.343rem + 6.286vw, 7rem);
--fs-l: clamp(2.5rem, 1.479rem + 4.19vw, 5.25rem);
--fs-m: clamp(2.5rem, 1.85rem + 2.667vw, 4.25rem);
--fs-fig: clamp(3.25rem, 2.41rem + 3.43vw, 5.5rem);
--fs-num: clamp(2.75rem, 2.1rem + 2.667vw, 4.5rem);
--fs-ch: clamp(2.25rem, 1.8rem + 1.9vw, 3.5rem);
--fs-title: clamp(1.625rem, 1.346rem + 1.143vw, 2.375rem);
--fs-lead: clamp(1.3125rem, 1.15rem + 0.667vw, 1.75rem);
--fs-body: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);
--fs-small: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
--fs-label: 1rem;
--fs-slate: clamp(0.875rem, 0.84rem + 0.143vw, 0.9375rem);
--gutter: clamp(1.25rem, 0.6rem + 2.667vw, 3rem);
--col-gap: clamp(1rem, 0.814rem + 0.762vw, 1.5rem);
--section: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
--scene: clamp(3rem, 2.1rem + 3.6vw, 5.25rem);
--head-gap: clamp(1.75rem, 1.29rem + 1.9vw, 3rem);
--nav-h: 56px;
--hero-fh: clamp(400px, calc(100svh - var(--nav-h) - 128px), 800px);
--tile-max: clamp(420px, calc(100svh - var(--nav-h) - 76px), 860px);
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-film: cubic-bezier(0.16, 1, 0.3, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--t-press: 140ms; --t-hover: 200ms; --t-ui: 240ms; --t-swap: 280ms;
--t-fade: 400ms; --t-reveal: 600ms; --t-line: 900ms;
--stagger: 80ms;
--travel: 16px;
interpolate-size: allow-keywords;
}
@media (min-width: 901px) { :root { --nav-h: 64px; } }
[data-scene="dark"] {
--bg: var(--dark-bg); --text: var(--dark-text); --muted: var(--dark-muted);
--hairline: var(--dark-hairline); --edge: var(--dark-edge); --accent: var(--dark-accent); --accent-on: var(--dark-accent-on); --focus: var(--dark-focus);
--accent-hover: var(--dark-accent-hover);
--scrim: color-mix(in srgb, var(--dark-bg) 78%, transparent);
color-scheme: dark; background-color: var(--bg); color: var(--text);
font-weight: 430; line-height: 1.62; letter-spacing: 0.004em;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[data-scene="light"] {
--bg: var(--light-bg); --surface: var(--light-surface); --text: var(--light-text); --muted: var(--light-muted);
--hairline: var(--light-hairline); --edge: var(--light-edge); --accent: var(--light-accent); --accent-on: var(--light-accent-on); --focus: var(--light-focus);
--accent-hover: var(--light-accent-hover);
--scrim: color-mix(in srgb, var(--dark-bg) 78%, transparent);
color-scheme: light; background-color: var(--bg); color: var(--text);
font-weight: 400; line-height: 1.58; letter-spacing: -0.003em;
}
@media (prefers-contrast: more) {
[data-scene] { --hairline: var(--muted); --muted: var(--text); --edge: var(--text); }
}
*, *::before, *::after { box-sizing: border-box; }
html {
background-color: var(--dark-bg);
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
font-synthesis: none;
}
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
margin: 0; min-width: 320px;
background-color: var(--dark-bg); color: var(--dark-text);
font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.58;
font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, dl, dd, ol, ul, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 560; }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[data-scene] { caret-color: var(--text); }
p, li, dd { text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(1440px + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.h-section {
font-size: var(--fs-m); font-weight: 480; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
}
.title { font-size: var(--fs-title); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.01em; max-width: 48ch; text-wrap: pretty; }
[data-scene="dark"] .lead { font-weight: 430; }
.small { font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0; font-weight: 400; }
[data-scene="dark"] .small { font-weight: 430; }
.muted { color: var(--muted); }
.accent { font-family: var(--font-serif); font-style: italic; font-size: 1.08em; font-weight: 300; letter-spacing: 0; font-variant-ligatures: common-ligatures; line-height: 0; }
.tlink {
color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
text-decoration-color: var(--hairline); transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .tlink:hover { text-decoration-color: var(--text); } }
.btn {
display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
border: 1px solid transparent; border-radius: 2px; cursor: pointer;
font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 560; line-height: 1; letter-spacing: -0.005em;
white-space: nowrap; text-decoration: none;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.btn-primary { background-color: var(--accent); color: var(--accent-on); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { background-color: var(--accent-hover); }
}
.btn-nav {
display: inline-flex; align-items: center; height: 44px; flex: none; text-decoration: none; border-radius: 2px;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: opacity var(--t-ui) var(--ease-out), visibility 0s linear 0s;
}
.hero-cta-in .btn-nav, .call-in .btn-nav {
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.btn-face {
display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 2px;
background-color: var(--accent); color: var(--accent-on);
font-size: var(--fs-label); font-weight: 560; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
transition: background-color var(--t-hover) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.btn-nav:active .btn-face { transform: scale(0.97); }
.btn-nav:focus-visible { outline: none; }
.btn-nav:focus-visible .btn-face { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
.btn-nav:hover .btn-face { background-color: var(--accent-hover); }
}
.skip {
position: fixed; left: calc(16px + env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top)); z-index: 50;
display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 2px;
background: var(--dark-accent); color: var(--dark-accent-on); font-size: var(--fs-label); font-weight: 560; text-decoration: none;
transform: translateY(calc(-100% - 40px));
}
.skip:focus, .skip:focus-visible { transform: none; outline: 2px solid var(--dark-text); outline-offset: 2px; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
padding-top: env(safe-area-inset-top);
background-color: transparent; border-bottom: 1px solid transparent;
transition: border-color var(--t-ui) ease, color var(--t-ui) ease;
}
.nav::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-color: transparent; transition: background-color var(--t-ui) ease;
}
.scrolled .nav { border-bottom-color: var(--hairline); }
.scrolled .nav::before {
background-color: color-mix(in srgb, var(--bg) 76%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
@media (prefers-reduced-transparency: reduce) {
.scrolled .nav::before { background-color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav-in { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }
.wordmark {
display: inline-flex; align-items: center; height: 44px; margin-right: auto; flex: none;
font-size: 19px; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; text-decoration: none; color: var(--text);
}
.lockup { display: block; height: 26px; width: auto; aspect-ratio: 997.69 / 161.66; overflow: visible; }
.lockup .lk-mark { color: var(--text); transition: color var(--t-ui) ease; }
.lockup .lk-type { fill: var(--brand-paper); transition: fill var(--t-ui) ease; }
.nav[data-scene="light"] .lockup .lk-type { fill: var(--brand-ink); }
@keyframes cfDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js.motion-ok .lockup .dr { stroke-dasharray: 1 2; animation: cfDraw var(--dur) var(--ease) var(--del) both; }
.lockup .d1 { --dur: 820ms; --del: 160ms; --ease: cubic-bezier(0.65, 0, 0.35, 1); }
.lockup .d2 { --dur: 220ms; --del: 940ms; --ease: var(--ease-out); }
.wm-a { font-weight: 620; letter-spacing: -0.03em; }
.wordmark .wm-b { margin-left: 0.24em; }
.wm-b { font-family: var(--font-serif); font-style: italic; font-size: 1.08em; font-weight: 400; letter-spacing: -0.005em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
font-size: var(--fs-label); font-weight: 500; letter-spacing: -0.005em; line-height: 1; color: var(--muted); text-decoration: none;
padding-block: 14px; transition: color var(--t-hover) ease;
}
.nav-links a[aria-current="true"] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--text); } }
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-in { gap: 8px; }
.lockup { height: 24px; }
}
@media (max-width: 420px) {
.btn-face { padding: 0 12px; font-size: 15px; }
}
@media (max-width: 359px) {
.nav-in { gap: 2px; }
.lockup { height: 17px; }
.btn-face { padding: 0 8px; font-size: 13px; }
}
.gate { position: relative; background-color: var(--dark-bg); container-type: inline-size; }
.gate > video, .gate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gate::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
background-size: 160px;
}
.crop {
--c: color-mix(in srgb, var(--text) 72%, transparent); --a: 18px;
position: absolute; inset: -12px; pointer-events: none; z-index: 0;
background:
linear-gradient(var(--c), var(--c)) top left / var(--a) 1px no-repeat,  linear-gradient(var(--c), var(--c)) top left / 1px var(--a) no-repeat,
linear-gradient(var(--c), var(--c)) top right / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--a) no-repeat,
linear-gradient(var(--c), var(--c)) bottom left / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--a) no-repeat,
linear-gradient(var(--c), var(--c)) bottom right / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--a) no-repeat;
}
@media (max-width: 900px) { .crop { --a: 12px; inset: -8px; } }
.beats { position: absolute; left: 7%; right: 7%; top: 13%; z-index: 1; pointer-events: none; }
.beat {
display: none; margin: 0; font-family: var(--font-sans); font-size: 10.6cqw; font-weight: 700; line-height: 0.98; letter-spacing: -0.005em;
text-transform: uppercase; color: var(--beat-ink); text-shadow: 0 2px 16px var(--beat-shade);
}
.gate.is-live .beat.on { display: block; }
.motion-ok .beat.on { animation: beatIn 500ms var(--ease-out) both; }
@keyframes beatIn { from { opacity: 0; transform: translateY(0.3em); } }
.hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(1.5rem, 1rem + 2vw, 2.5rem)); padding-bottom: var(--scene); overflow-x: clip; }
.hero-h { font-size: var(--fs-xl); font-weight: 480; line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance; max-width: 11.5em; }
.hero-h .l2 { display: block; }
.hero-meta { display: block; margin-top: 24px; }
.hero-lead { font-size: var(--fs-lead); font-weight: 430; line-height: 1.45; letter-spacing: -0.01em; color: var(--muted); max-width: 34ch; }
.hero-act { display: flex; align-items: center; justify-content: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; }
.need-link { display: none; font-size: var(--fs-label); font-weight: 500; }
[data-need="ad"] .need-link[data-need-link="ad"],
[data-need="site"] .need-link[data-need-link="site"],
[data-need="reel"] .need-link[data-need-link="reel"] { display: inline-flex; align-items: center; min-height: 44px; }
.via-market[data-need] .via-only { display: none; }
.via-market[data-need] .need-link {
height: 48px; padding: 0 22px; border-radius: 2px; background-color: var(--accent); color: var(--accent-on);
text-decoration: none; justify-content: center; font-weight: 560;
}
.via-only { display: none; }
.via-market .via-only { display: inline-flex; }
.via-market [data-call] { display: none !important; }
.via-market [data-via-note] { display: block; }
.vn { display: none; }
[data-via="fiverr"] .vn-fiverr, [data-via="upwork"] .vn-upwork, [data-via="marketplace"] .vn-marketplace { display: inline; }
.via-note p { max-width: 46ch; }
.hero-via { margin-top: 20px; max-width: 46ch; }
.hero-via p { font-size: var(--fs-body); color: var(--muted); }
.hero-fig { margin: 36px 0 0; }
.hero-frame { position: relative; aspect-ratio: 4 / 5; background-color: var(--dark-bg); }
.shot { position: absolute; inset: 0; overflow: clip; visibility: hidden; }
.shot.is-live { visibility: visible; }
.hero-frame .shot > video { object-position: 50% 18%; }
.hero-frame .shot-al > video { object-position: 50% 52%; }
.hero-frame .shot-film > video { object-position: 50% 52%; }
.hero-play {
position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-start;
margin: 0; padding: 14px; border: 0; border-radius: 0; background: none; color: var(--dark-text); cursor: pointer;
touch-action: manipulation; -webkit-user-select: none; user-select: none; text-align: left;
-webkit-touch-callout: none;
}
.hp-cue {
display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px;
background-color: rgb(var(--glass-rgb) / 0.7); color: var(--dark-text);
-webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
font-family: var(--font-sans); font-size: 14px; font-weight: 560; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.hp-cue svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
@media (max-width: 600px) { .hp-long { display: none; } }
.hero-play:active .hp-cue { transform: scale(0.97); }
.hero-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 0; }
.hero-play:focus-visible .hp-cue { background-color: var(--dark-text); color: var(--dark-bg); }
@media (hover: hover) and (pointer: fine) { .hero-play:hover .hp-cue { background-color: var(--dark-text); color: var(--dark-bg); } }
.hero-frame { transition: transform 200ms var(--ease-out); }
.hero-frame:has(.hero-play:active) { transform: scale(0.985); transition-duration: 140ms; }
@media (hover: hover) and (pointer: fine) {
.hero-frame .shot > video { transition: transform 400ms var(--ease-out); }
.hero-frame:has(.hero-play:hover) .shot > video { transform: scale(1.025); transition: transform 700ms var(--ease-film); }
.hero-frame:has(.hero-play:active) { transform: scale(0.99); }
}
@media (prefers-reduced-transparency: reduce) { .hp-cue { background-color: rgb(var(--glass-rgb) / 0.82); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (min-width: 901px) {
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2.5rem, 0.5rem + 4.5vw, 6rem); align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 0; padding-block: 0 2px; }
.hero-meta { margin-top: clamp(28px, 4.2svh, 44px); }
.hero-copy { container-type: inline-size; }
.hero-h { font-size: min(10.5rem, 11vw, calc((100svh - var(--nav-h)) * 0.19), 25cqi); max-width: none; margin-top: -0.06em; }
.hero-fig { width: calc(var(--hero-fh) * 0.8); margin: 0; }
}
@media (min-width: 901px) and (max-height: 820px) {
.hero-frame { aspect-ratio: 1 / 1; }
.hero-fig { width: var(--hero-fh); }
.hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 20px); }
.hero-act { margin-top: 24px; }
}
@media (min-width: 901px) and (max-height: 520px) { :root { --hero-fh: 400px; } }
@media (max-width: 900px) {
.hero-meta { margin-top: 20px; }
.hero-act { margin-top: 24px; }
.hero-fig { margin-top: 32px; width: min(100%, 30rem); }
}
@media (min-width: 601px) and (max-width: 900px) {
.hero-fig { width: clamp(min(100%, 20rem), calc((100svh - var(--nav-h) - 360px) * 0.8), 100%); margin-inline: auto; }
}
@media (max-width: 600px) {
.hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 32px); }
.hero-h { font-size: clamp(3.25rem, 16.5vw, 4.75rem); line-height: 0.94; letter-spacing: -0.04em; }
.btn-wide { width: 100%; height: 52px; }
.hero-act { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: start; }
.hero-fig { width: 100%; }
.hero-frame { aspect-ratio: 9 / 16; }
.hero-play { padding: 10px; }
}
.pick { display: none; align-items: center; margin-right: 16px; color: var(--text); font-weight: 560; }
.pick::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background-color: currentColor; }
[data-need="ad"] [data-need-target~="ad"] .pick,
[data-need="site"] [data-need-target~="site"] .pick,
[data-need="reel"] [data-need-target~="reel"] .pick { display: inline-flex; }
.services { padding-block: var(--section); }
.svc-h { max-width: 16em; }
.ix-fig { display: inline-flex; align-items: baseline; white-space: nowrap; }
.ix-n { font-weight: 330; letter-spacing: -0.03em; line-height: 0.82; font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.ix-to { font-size: max(0.28em, 0.8125rem); font-weight: 430; letter-spacing: 0; color: var(--muted); margin: 0 0.32em; vertical-align: 0.2em; }
.ix-u { margin-left: 0.4em; font-size: var(--fs-lead); font-weight: 430; letter-spacing: -0.01em; color: var(--muted); }
.ix-pick {
display: none; align-items: center; margin-left: 14px;
font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 560; line-height: 1; letter-spacing: 0;
white-space: nowrap; color: var(--text);
}
.ix-pick::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background-color: currentColor; }
[data-need="site"] [data-need-target="site"] .ix-pick,
[data-need="ad"] [data-need-target="ad"] .ix-pick,
[data-need="reel"] [data-need-target="reel"] .ix-pick { display: inline-flex; }
.ix-row .ix-pick { position: absolute; left: 0; top: 14px; margin: 0; vertical-align: 0; }
[data-need="site"] .ix-row[data-need-target="site"], [data-need="ad"] .ix-row[data-need-target="ad"], [data-need="reel"] .ix-row[data-need-target="reel"] { padding-top: calc(clamp(22px, 0.6rem + 1.6vw, 40px) + 34px); }
.ix-line { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-out); }
.ix-line > div { min-height: 0; overflow: hidden; }
.ix-line p { opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms; }
.ix-line.is-open { grid-template-rows: 1fr; }
.ix-line.is-open p { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ix-list { margin-top: var(--head-gap); border-bottom: 1px solid var(--hairline); }
.ix-row {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem) minmax(0, auto); column-gap: clamp(24px, 3vw, 56px);
align-items: center; padding-block: clamp(22px, 0.6rem + 1.6vw, 40px); border-top: 1px solid var(--hairline);
}
.ix-row::before {
content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background-color: var(--text);
transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-film);
}
.ix-name { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5.5rem); font-weight: 480; line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.ix-btn {
display: inline-block; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit;
line-height: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ix-btn::after { content: ""; position: absolute; inset: 0; }
.ix-btn:focus-visible { outline: none; }
.ix-row:has(.ix-btn:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.ix-row .ix-line { grid-column: 2; grid-row: 1; align-self: center; }
.ix-line p { max-width: 34ch; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.ix-turn { grid-column: 3; grid-row: 1; margin: 0; justify-self: end; color: var(--text); }
.ix-turn .ix-n { font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5.5rem); }
.ix-plus { display: none; }
.also { margin-top: clamp(28px, 1.2rem + 1.4vw, 44px); color: var(--muted); font-size: var(--fs-small); }
.also span { margin-right: 8px; color: var(--text); font-weight: 560; }
@media (min-width: 901px) {
.ix-row .ix-line { grid-template-rows: 1fr; transition: none; }
@media (hover: hover) and (pointer: fine) {
.ix-list:hover .ix-row:not(:hover) { opacity: 0.32; }
.ix-row:hover::before { transform: none; }
.ix-row:hover .ix-line p { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
}
.ix-row:focus-within::before, .ix-row.is-open::before { transform: none; }
.ix-row:focus-within .ix-line p { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
}
@media (max-width: 900px) {
.ix-row { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 10px; align-items: start; padding-block: 24px 26px; }
.ix-name { grid-column: 1; grid-row: 1; font-size: clamp(2.375rem, 1.6rem + 3.6vw, 3.5rem); }
.ix-turn { grid-column: 1; grid-row: 2; justify-self: start; }
.ix-turn .ix-n { font-size: clamp(2.125rem, 1.5rem + 3vw, 3rem); }
.ix-turn .ix-u { font-size: 1.0625rem; }
.ix-row .ix-line { grid-column: 1 / -1; grid-row: 3; }
.ix-line p { max-width: 36ch; padding-top: 4px; }
.ix-plus {
display: block; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; position: relative; width: 44px; height: 44px; margin-top: -4px;
border: 1px solid var(--edge); border-radius: 50%; transition: transform 240ms var(--ease-out), border-color 200ms ease;
}
.ix-plus::before, .ix-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background-color: var(--text); }
.ix-plus::after { transform: rotate(90deg); }
.ix-row.is-open .ix-plus { transform: rotate(45deg); border-color: var(--text); }
.ix-row.is-open::before { transform: none; }
.ix-row:active .ix-plus { transform: scale(0.92); border-color: var(--text); transition-duration: 120ms, 120ms; }
.ix-row.is-open:active .ix-plus { transform: rotate(45deg) scale(0.92); }
}
@media (max-width: 359px) { .ix-name { font-size: 2.125rem; } }
.js.motion-ok .ix-list[data-arrive] .ix-row { opacity: 0; transform: translateY(16px); }
.ix-list .ix-row { transition: opacity 400ms var(--ease-out) calc(var(--i, 0) * 80ms), transform 600ms var(--ease-film) calc(var(--i, 0) * 80ms); }
.ix-list.is-arrived .ix-row { transition: opacity 200ms ease, transform 600ms var(--ease-film); }
.how { padding-block: var(--section); }
.how-h { max-width: 15em; }
.tl-line { position: relative; margin-top: clamp(40px, 1.6rem + 2.6vw, 72px); }
.tl-track { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background-color: var(--hairline); }
.tl-fill { position: absolute; inset: 0; background-color: var(--text); transform-origin: 0 50%; transition: transform 900ms var(--ease-film) 60ms; }
.tl-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.tl-stop { position: relative; padding-top: 34px; }
.tl-dot {
position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--text); background-color: var(--text);
transition: background-color 240ms ease calc(var(--i) * 200ms + 150ms), transform 300ms var(--ease-out) calc(var(--i) * 200ms + 150ms);
}
.tl-end .tl-dot { width: 21px; height: 21px; top: -4px; left: -4px; box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--text); }
.tl-n { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 1.375rem; line-height: 1; color: var(--muted); }
.tl-t { margin: 10px 0 0; font-size: clamp(2rem, 1.1rem + 2.7vw, 3.5rem); font-weight: 480; line-height: 1; letter-spacing: -0.02em; }
.tl-s { margin-top: 14px; max-width: 18ch; color: var(--muted); font-size: var(--fs-body); font-weight: 400; line-height: 1.35; letter-spacing: -0.005em; }
.tl-end .tl-s { color: var(--text); font-weight: 560; }
.tl-stop > :not(.tl-dot) { transition: opacity 400ms var(--ease-out) calc(var(--i) * 120ms + 80ms), transform 600ms var(--ease-film) calc(var(--i) * 120ms + 80ms); }
.js.motion-ok .tl-line[data-arrive] .tl-fill { transform: scaleX(0); }
.js.motion-ok .tl-line[data-arrive] .tl-dot { background-color: var(--bg); transform: scale(0.7); }
.js.motion-ok .tl-line[data-arrive] .tl-stop > :not(.tl-dot) { opacity: 0; transform: translateY(12px); }
@media (max-width: 900px) {
.tl-line { margin-top: var(--head-gap); padding-left: 40px; }
.tl-track { left: 6px; right: auto; top: 8px; bottom: 40px; width: 1px; height: auto; }
.tl-fill { transform-origin: 50% 0; }
.js.motion-ok .tl-line[data-arrive] .tl-fill { transform: scaleY(0); }
.tl-stops { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.tl-stop { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-top: 0; }
.tl-dot { left: -40px; top: 2px; }
.tl-end .tl-dot { left: -44px; top: -2px; }
.tl-n { grid-column: 1; grid-row: 1; font-size: 1.25rem; min-width: 1.6em; }
.tl-t { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem); }
.tl-s { grid-column: 2; grid-row: 2; margin-top: 6px; max-width: none; }
}
.faq { padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.faq-h { grid-column: 1 / 6; max-width: 8em; }
@media (min-width: 901px) { .faq-h { position: sticky; top: calc(var(--nav-h) + 48px); } }
.faq-list { grid-column: 7 / 13; border-bottom: 1px solid var(--hairline); }
.faq-list details { border-top: 1px solid var(--hairline); }
.faq-list summary {
display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 24px; min-height: 44px;
list-style: none; cursor: pointer; touch-action: manipulation;
font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; text-wrap: pretty;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
.faq-icon { flex: none; width: 18px; height: 18px; color: var(--text); }
.faq-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.faq-icon .v { transform-origin: center; transition: transform 200ms var(--ease-out); }
.faq-icon { transition: transform var(--t-press) var(--ease-out); }
.faq-list summary:active .faq-icon { transform: scale(0.86); }
details[open] .faq-icon .v { transform: scaleY(0); }
.faq-a { padding: 0 48px 28px 0; }
.faq-a p { color: var(--muted); max-width: 44ch; }
details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-ui) var(--ease-drawer), content-visibility var(--t-ui) allow-discrete; }
details[open]::details-content { block-size: auto; }
.faq-a { transition: opacity 120ms var(--ease-out); }
details:not([open]) .faq-a { opacity: 0; }
details[open] .faq-a { opacity: 1; transition: opacity 200ms var(--ease-out) 60ms; }
@starting-style { details[open] .faq-a { opacity: 0; } }
:root {
--cal-brand: #14201A;
--cl-pt: clamp(64px, 1.6rem + 6vw, 152px);
--cl-pb: clamp(88px, 2rem + 7vw, 168px);
--cl-hfs: max(var(--fs-xl), clamp(3.25rem, 1.1rem + 9.6vw, 5.5rem));
}
#call.cl { position: relative; padding-top: var(--cl-pt); padding-bottom: var(--cl-pb); }
.cl-stage {
display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
grid-template-areas: "h" "need" "act" "promise" "mail";
}
.cl-h {
grid-area: h; max-width: 9.5em; margin: 0;
font-size: var(--cl-hfs); font-weight: 480; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
padding-bottom: 0.06em;
}
.cl-h .accent { padding-right: 0.03em; }
.cl-need { grid-area: need; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 18px; margin-top: clamp(36px, 1.6rem + 1.6vw, 52px); }
.cl-q { font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--muted); }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip {
position: relative; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
border: 1px solid var(--edge); border-radius: 999px; background-color: transparent; color: var(--text);
font-size: var(--fs-small); font-weight: 500; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform var(--t-press) var(--ease-out);
}
.cl-chip input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; border-radius: 999px; }
.cl-chip:has(input:checked) { background-color: var(--text); border-color: var(--text); color: var(--bg); }
.cl-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.cl-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cl-chip:not(:has(input:checked)):hover { border-color: var(--text); } }
.cl-act { grid-area: act; display: flex; margin-top: 28px; }
.cl-btn { height: 56px; padding: 0 32px; font-size: 1.0625rem; }
.cl-promise { grid-area: promise; margin-top: 28px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.cl-sep { white-space: pre; }
.cl-mail {
grid-area: mail; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 8px; margin-top: 4px;
font-size: var(--fs-small); line-height: 1.45; color: var(--muted);
}
.cl-pre { color: var(--text); font-weight: 500; }
.cl-pair { display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.cl-addr { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.cl-via { text-align: center; }
.cl-vh { margin: 0 auto; max-width: 14em; font-size: var(--fs-m); font-weight: 480; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.cl-vs { max-width: 40ch; margin: 20px auto 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.via-market .cl-via { display: block; }
.cl-stage { transition: opacity 320ms var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.js.motion-ok #call[data-co-armed] .cl-stage { opacity: 0; transform: translateY(var(--travel)); }
.reveal-fail #call[data-co-armed] .cl-stage { opacity: 1; transform: none; }
@media (max-width: 720px) {
.cl-act { justify-self: stretch; }
.cl-btn { width: 100%; }
.cl-need { display: grid; justify-items: center; gap: 14px; }
.cl-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-chip { padding: 0 12px; }
.cl-pi { display: block; }
.cl-sep { display: none; }
.cl-promise { line-height: 1.6; }
.cl-mail { margin-top: 14px; }
}
@media (forced-colors: active) {
.cl-chip:has(input:checked) { forced-color-adjust: none; background-color: Highlight; color: HighlightText; border-color: Highlight; }
}
.copy {
display: inline-flex; align-items: center; height: 44px; padding: 0 10px; margin: 0 0 0 -2px;
background: none; border: 0; border-radius: 2px; color: var(--muted); cursor: pointer;
font-family: var(--font-sans); font-size: inherit; font-weight: 500; line-height: 1; letter-spacing: 0;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.copy::before { content: ""; display: block; width: 1px; height: 10px; margin-right: 12px; background-color: var(--hairline); }
@media (hover: hover) and (pointer: fine) { .copy:hover { color: var(--text); } }
.copy:active { transform: scale(0.97); }
.co-foot { background-color: var(--bg); color: var(--text); padding-bottom: calc(clamp(36px, 1.6rem + 2vw, 56px) + env(safe-area-inset-bottom)); }
.cf-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 40px; padding-top: clamp(32px, 1.4rem + 1.8vw, 52px); border-top: 1px solid var(--hairline); }
.cf-lockup { display: flex; align-items: center; margin: 0; }
.cf-lockup .lockup { height: clamp(36px, 1.9rem + 0.6vw, 44px); }
.co-foot .lockup .lk-type { fill: var(--brand-ink); }
.cf-links { display: flex; flex-wrap: wrap; column-gap: 28px; margin-right: -2px; }
.cf-links a {
display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
font-size: var(--fs-small); font-weight: 500; color: var(--muted); text-decoration: none;
text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .cf-links a:hover { color: var(--text); text-decoration: underline; } }
.cf-bottom { margin-top: clamp(20px, 1rem + 1vw, 32px); font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 720px) {
.cf-top { flex-direction: column; align-items: flex-start; }
.cf-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 28px; margin-left: -2px; }
}
@media (max-width: 600px) {
.cf-bottom { font-size: 14px; }
}
html.reel-open { overflow: hidden; }
.reel-dialog {
width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
background-color: rgb(var(--glass-rgb) / 0.94); color: var(--text);
}
.reel-dialog::backdrop { background-color: rgb(21 34 24 / 0.55); }
.reel-in {
display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%;
padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.reel-bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 64px; }
.reel-close {
display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0;
background: none; border: 0; border-radius: 2px; color: var(--text); cursor: pointer; touch-action: manipulation;
}
.reel-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.reel-close:active svg { transform: scale(0.9); }
.reel-stage { display: grid; place-items: center; min-height: 0; }
.reel-video {
display: block; width: min(100%, calc((100svh - 64px - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 9 / 16));
height: auto; aspect-ratio: 9 / 16; background-color: #000; object-fit: contain;
}
.reel-dialog { background-color: transparent; }
.reel-dialog::backdrop { background-color: transparent; }
.reel-scrim { position: absolute; inset: 0; z-index: 0; background-color: rgb(var(--glass-rgb) / 0.97); }
.reel-in { position: relative; z-index: 1; }
.reel-fly { position: relative; display: block; width: min(100%, calc((100svh - 64px - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 9 / 16));
aspect-ratio: 9 / 16; transform-origin: 50% 50%; }
.reel-fly .reel-video { width: 100%; }
.reel-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.js.motion-ok [data-reveal] {
transition: transform var(--t-reveal) var(--ease-film), opacity var(--t-fade) var(--ease-out);
}
.js.motion-ok [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--travel)); }
.js.motion-ok [data-reveal].is-instant { transition: none; }
.reveal-fail [data-reveal] { opacity: 1 !important; transform: none !important; }
.reveal-fail .btn-nav { opacity: 1; visibility: visible; pointer-events: auto; }
.hero-h .l1 { display: block; }
@keyframes heroDraft {
0%   { opacity: 0.42; filter: blur(0.02em); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
36%  { opacity: 0.78; filter: blur(0.02em); animation-timing-function: linear; }
56%  { opacity: 0.78; filter: blur(0.02em); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
100% { opacity: 1; filter: blur(0); }
}
@keyframes heroFinish {
0%   { opacity: 0.12; filter: blur(0.05em); transform: translateY(0.08em); }
70%  { filter: blur(0); }
100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes heroRise { from { transform: translateY(10px); } }
@keyframes heroFade { from { opacity: 0; } }
.js.motion-ok .hero-h .l1 { animation: heroDraft 1150ms linear backwards; }
.js.motion-ok .hero-h .l2 { animation: heroFinish 560ms cubic-bezier(0.23, 1, 0.32, 1) 380ms backwards; }
.js.motion-ok .hero-lead { animation: heroRise 400ms var(--ease-out) 420ms backwards, heroFade 400ms var(--ease-out) 420ms backwards; }
.js.motion-ok .hero-act { animation: heroRise 400ms var(--ease-out) 480ms backwards, heroFade 400ms var(--ease-out) 480ms backwards; }
.js.motion-ok .hero-via { animation: heroRise 400ms var(--ease-out) 480ms backwards, heroFade 400ms var(--ease-out) 480ms backwards; }
@media (min-width: 901px) {
.js.motion-ok .hero-frame .crop { animation: heroFade 400ms var(--ease-out) 450ms backwards; }
.js.motion-ok .hero-frame .shot { animation: heroFade 600ms var(--ease-out) 500ms backwards; }
.js.motion-ok .hp-cue { animation: heroFade 400ms var(--ease-out) 700ms backwards; }
}
main > [data-scene="light"]:not([data-band]) + [data-scene="light"]:not([data-band]) { padding-top: calc(var(--section) * 0.5); }
main > .how + .ab > .ab-in::before {
content: ""; display: block; align-self: stretch; height: 1px; margin-bottom: var(--section); background-color: var(--hairline);
}
@media (max-width: 900px) {
.faq-h, .faq-list { grid-column: 1 / -1; }
.faq-list { margin-top: var(--head-gap); }
}
@media (max-width: 600px) {
.faq-a { padding-right: 0; }
.via-market[data-need] .need-link { width: 100%; height: 52px; }
}
@media (min-width: 1441px) { .hero-h { max-width: none; } }
@media (forced-colors: active) {
.btn, .btn-face, .copy, .hp-cue { border: 1px solid transparent; }
.lockup .lk-mark { color: CanvasText; } .lockup .lk-type { fill: CanvasText; }
.crop, .gate::after { display: none; }
}
.ab { padding-block: var(--section); }
.ab-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-mark { width: clamp(92px, 4.4rem + 3.4vw, 124px); height: auto; color: var(--text); overflow: visible; }
.ab-mark .dr { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.ab-mark .d1 { transition: stroke-dashoffset 900ms cubic-bezier(0.33, 1, 0.68, 1) 0ms; }
.ab-mark .d2 { transition: stroke-dashoffset 240ms var(--ease-out) 700ms; }
.js.motion-ok [data-motion="about"][data-arrive] .ab-mark .dr { stroke-dashoffset: 1; transition: none; }
.ab-h { margin-top: clamp(1.75rem, 1.1rem + 1.8vw, 3rem); font-size: var(--fs-xl); font-weight: 480; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.ab-l { display: block; }
.ab-it { font-weight: 300; letter-spacing: 0; }
.ab-w { opacity: var(--o, 1); }
.ab-facts {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 1rem + 3vw, 72px);
width: min(100%, 50rem); margin-top: clamp(2.5rem, 1.6rem + 2.8vw, 4.5rem);    padding-top: clamp(22px, 1rem + 0.8vw, 32px);
border-top: 1px solid var(--hairline); text-align: center;
}
.ab-facts dt { color: var(--muted); font-size: var(--fs-small); line-height: 1.3; }
.ab-facts dd { margin: 8px 0 0; color: var(--text); font-size: clamp(1.375rem, 1.05rem + 0.7vw, 1.75rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
.ab-fact { transition: opacity var(--t-fade) var(--ease-out) calc(700ms + var(--i, 0) * var(--stagger)), transform var(--t-reveal) var(--ease-film) calc(700ms + var(--i, 0) * var(--stagger)); }
.js.motion-ok [data-motion="about"][data-arrive] .ab-fact { opacity: 0; transform: translateY(var(--travel)); transition: none; }
.reveal-fail [data-motion="about"] .ab-fact { opacity: 1 !important; transform: none !important; }
.reveal-fail [data-motion="about"] .dr { stroke-dashoffset: 0 !important; }
@media (max-width: 760px) {
.ab-facts { grid-template-columns: minmax(0, 1fr); row-gap: 22px; max-width: 22rem; text-align: center; }
.ab-facts dd { margin-top: 6px; font-size: 1.375rem; }
}
.ix-row .ix-plus, .ix-row .ix-turn, .ix-row .ix-pick { pointer-events: none; }
.ix-btn::after { z-index: 1; }
@media (max-width: 600px) { .hero-play { align-items: flex-start; } }
.hp-cue { transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out), opacity 240ms var(--ease-out); }
main > section[id] { scroll-margin-top: max(0px, calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px - var(--section))); }
#demos { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); }
@media (min-width: 901px) {
.nav-links { transition: none; }
.hero-cta-in .nav-links, .call-in .nav-links { transform: translateX(var(--nav-shift, 178px)); }
.hero-cta-in .btn-nav, .call-in .btn-nav { transform: translateX(10px); }
.nav-ready .nav-links { transition: transform 360ms var(--ease-out) 0ms; }
.hero-cta-in .nav-ready .nav-links, .call-in .nav-ready .nav-links { transition-delay: 90ms; }
.nav-ready .btn-nav { transition: opacity 200ms var(--ease-out) 120ms, transform 360ms var(--ease-out) 0ms, visibility 0s linear 0s; }
.hero-cta-in .nav-ready .btn-nav, .call-in .nav-ready .btn-nav { transition: opacity 140ms var(--ease-out) 0ms, transform 360ms var(--ease-out) 0ms, visibility 0s linear 140ms; }
}
.js.motion-ok .ab-h.ab-live .ab-w { transition: opacity 200ms var(--ease-out); }
.work { padding-block: clamp(0.5rem, 0.2rem + 1vw, 1rem) var(--section); overflow-x: clip; scroll-margin-top: var(--nav-h); }
.work + .services { padding-top: 0; }
.work + .services > .wrap::before { content: ""; display: block; height: 1px; margin-bottom: var(--section); background-color: var(--hairline); }
.wx-svc { color: var(--muted); }
.wx-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; scroll-margin-top: var(--nav-h); }
.wx .pick { font-size: var(--fs-small); }
.wx .gate > .wx-v { object-position: 50% 50%; }
.wx .gate > .wx-v-phone { display: none; }
@media (max-width: 900px), (max-height: 520px) {
.wx .gate > .wx-v-desk { display: none; }
.wx .gate > .wx-v-phone { display: block; object-position: 50% 0; }
}
.wx .gate > video { transition: opacity 500ms var(--ease-out); }
.wx .gate { -webkit-touch-callout: none; }
.wx-pill {
position: absolute; z-index: 3; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 9px;
min-height: 44px; margin: 0; padding: 0 16px 0 14px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 999px;
background-color: rgb(var(--glass-rgb) / 0.7); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
color: var(--dark-text); font-family: var(--font-sans); font-size: 14px; font-weight: 560; line-height: 1; letter-spacing: -0.005em;
text-decoration: none; white-space: nowrap; cursor: pointer;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-out);
}
.wx-pill:active { transform: scale(0.97); }
.wx-pill .ext { width: 11px; height: 11px; flex: none; }
.wx-pill:focus-visible { outline: 2px solid var(--dark-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wx-pill:hover { background-color: rgb(var(--glass-rgb) / 0.8); border-color: rgb(255 255 255 / 0.28); } }
.wx-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; }
.wx-eq i { display: block; width: 2px; height: 100%; border-radius: 1px; background-color: currentColor; transform-origin: 50% 100%; transform: scaleY(0.34); }
.wx-eq i:nth-child(2) { transform: scaleY(0.6); }
.wx-eq i:nth-child(3) { transform: scaleY(0.44); }
.wx-sound[aria-pressed="true"] { background-color: var(--dark-text); border-color: var(--dark-text); color: var(--dark-bg); }
.wx-sound[aria-pressed="true"] .wx-eq i { animation: wxEq 900ms ease-in-out infinite alternate; }
.wx-sound[aria-pressed="true"] .wx-eq i:nth-child(2) { animation-duration: 700ms; animation-delay: -300ms; }
.wx-sound[aria-pressed="true"] .wx-eq i:nth-child(3) { animation-duration: 820ms; animation-delay: -520ms; }
@keyframes wxEq { 0% { transform: scaleY(0.25); } 100% { transform: scaleY(1); } }
@media (hover: hover) and (pointer: fine) { .wx-sound[aria-pressed="true"]:hover { background-color: #FFFFFF; } }
.wx-body {
background-color: var(--dev-body);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(var(--dev-shade) / 0.7), 0 50px 80px -44px rgb(var(--dev-shade) / 0.95);
}
.reveal-fail [data-wx-armed] * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
.wxa { --wxa-t: 900ms; }
.wxa-track { position: relative; }
.wxa-in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
.wxa-stage {
--bz: 7px;
--DH: clamp(440px, calc(100svh - var(--nav-h) - 200px), 640px);
position: relative; grid-row: 2; height: var(--DH); container-type: size;
}
.wxa-device {
--PW: calc((100cqh - 2 * var(--bz)) * 390 / 844 + 2 * var(--bz)); --PH: 100cqh;
--UW: var(--PW); --UH: var(--PH);
--sx: 0px; --st: 0px; --sb: 0px; --r1: 36px; --r2: 36px;
--bt: var(--bz); --bs: var(--bz); --bb: var(--bz); --sr: 29px;
position: absolute; left: 50%; top: 50%; z-index: 1; margin: 0;
width: var(--UW); height: var(--UH); transform: translate(-50%, -50%);
}
.wxa-device > .wxa-ln, .wxa-device > .wxa-rim, .wxa-device > .wxa-body { position: absolute; inset: 0; pointer-events: none;
transition: clip-path var(--wxa-t) var(--ease-in-out); }
.wxa-ln { background-color: rgb(var(--dev-shade) / 0.7);
clip-path: inset(var(--st) var(--sx) var(--sb) var(--sx) round var(--r1) var(--r1) var(--r2) var(--r2)); }
.wxa-rim { background-color: var(--dev-rim);
clip-path: inset(calc(var(--st) + 1px) calc(var(--sx) + 1px) calc(var(--sb) + 1px) calc(var(--sx) + 1px) round calc(var(--r1) - 1px) calc(var(--r1) - 1px) calc(var(--r2) - 1px) calc(var(--r2) - 1px)); }
.wxa-body { background-color: var(--dev-body);
clip-path: inset(calc(var(--st) + 2px) calc(var(--sx) + 2px) calc(var(--sb) + 2px) calc(var(--sx) + 2px) round calc(var(--r1) - 2px) calc(var(--r1) - 2px) calc(var(--r2) - 2px) calc(var(--r2) - 2px)); }
.wxa-sh { position: absolute; left: 50%; top: 50%; pointer-events: none; transform: translate(-50%, -50%);
box-shadow: 0 50px 80px -44px rgb(var(--dev-shade) / 0.95); transition: opacity var(--wxa-t) var(--ease-in-out); }
.wxa-sh-p { width: var(--PW); height: var(--PH); border-radius: var(--r1); }
.wxa-sh-l { display: none; }
.wxa-screen {
position: absolute; inset: 0; isolation: isolate; background-color: #000;
clip-path: inset(calc(var(--st) + var(--bt)) calc(var(--sx) + var(--bs)) calc(var(--sb) + var(--bb)) calc(var(--sx) + var(--bs)) round var(--sr));
transition: clip-path var(--wxa-t) var(--ease-in-out);
}
.wxa-m {
position: absolute; left: 50%; top: 50%; margin: 0; overflow: hidden;
width: calc((100cqh - 2 * var(--bz)) * 390 / 844); height: calc(100cqh - 2 * var(--bz));
opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(1.02);
transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.wxa-m.is-on {
opacity: 1; visibility: visible; transform: translate(-50%, -50%);
transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s;
}
.wxa-m2 > video { object-position: 50% 50%; }
.wxa-base { display: none; }
.wxa-glow { position: absolute; inset: -6% -10%; z-index: 0; pointer-events: none;
-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.wxa-glow img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(56px) saturate(1.2); opacity: 0; transform: translateZ(0); transition: opacity 1200ms ease; }
.wxa-glow img.is-on { opacity: 0.32; }
.wxa-glow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(120 150 110 / 0.16), transparent); }
.wxa-m0 .wx-link { left: auto; right: 12px; }
.wxa-index { grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; }
.wxa-item { position: relative; display: flex; flex-direction: column; min-width: 0; }
.wxa-go {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 60px;
margin: 0; padding: 14px 0 6px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--muted);
touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: color 300ms ease;
}
.wxa-go .wx-svc { font-size: 1.125rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; color: inherit; }
.wxa-go .wx-brand { font-size: var(--fs-small); font-weight: 430; line-height: 1.25; color: var(--muted); }
.wxa-go[aria-current="true"] { color: var(--text); }
.wxa-go:active { transform: scale(0.98); }
.wxa-rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background-color: var(--hairline); overflow: hidden; }
.wxa-fill { position: absolute; inset: 0; background-color: var(--text); transform-origin: 0 50%; transform: scaleX(0); }
.wxa-rail { height: 2px; }
@media (hover: hover) and (pointer: fine) { .wxa-go:hover { color: var(--text); } }
.wxa-item .pick { margin: 2px 0 0; font-size: 13px; }
@media (min-width: 901px) and (min-height: 521px) {
.js .wxa-track { height: 280svh; }
.wxa-z0 { top: calc((180svh + var(--nav-h)) * 0.12); }
.wxa-z1 { top: calc((180svh + var(--nav-h)) * 0.5); }
.wxa-z2 { top: calc((180svh + var(--nav-h)) * 0.88); }
.js .wxa-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
.wxa-in {
height: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr);
column-gap: var(--col-gap); row-gap: 0; padding-block: clamp(8px, 1.5vh, 20px) clamp(20px, 4vh, 40px);
}
.wxa-index { grid-column: 1 / 5; grid-row: 2; align-self: center; display: flex; flex-direction: column; gap: clamp(22px, 3.6vh, 36px); padding-bottom: 6vh; }
.wxa-stage { grid-column: 5 / 13; grid-row: 1 / 3; height: auto; min-height: 0; --bz: 10px; --lbz: clamp(8px, 0.7vw, 11px); }
.wxa-go { flex-direction: column; gap: 6px; min-height: 0; padding: 4px 0 4px 26px; }
.wxa-go { gap: 8px; }
.wxa-go .wx-svc { font-size: clamp(2.25rem, 1rem + 2.8vw, 3.5rem); font-weight: 480; line-height: 1; letter-spacing: -0.02em; }
.wxa-go .wx-brand { font-size: var(--fs-small); }
.wxa-rail { left: 0; top: 2px; bottom: 2px; right: auto; width: 2px; height: auto; }
.wxa-fill { transform-origin: 50% 0; transform: scaleY(0); }
.wxa-item .pick { margin: 10px 0 0 26px; }
.wxa-device {
--PW: calc((100cqh - 24px - 2 * var(--bz)) * 390 / 844 + 2 * var(--bz)); --PH: calc(100cqh - 24px);
--OWl: calc(var(--LW) + 2 * var(--lbz)); --OHl: calc(var(--LW) * 9 / 16 + var(--lbz) * 2.35);
--UW: max(var(--OWl), var(--PW)); --UH: max(calc(var(--OHl) + 20px), var(--PH));
--sx: calc((var(--UW) - var(--PW)) / 2); --st: calc((var(--UH) - var(--PH)) / 2); --sb: var(--st); --r1: 46px; --r2: 46px;
--bt: var(--bz); --bs: var(--bz); --bb: var(--bz); --sr: 37px;
}
.wxa-m { width: calc((100cqh - 24px - 2 * var(--bz)) * 390 / 844); height: calc(100cqh - 24px - 2 * var(--bz)); }
.wxa-stage { --LW: min(calc(100cqw - 16px), calc((100cqh - 120px) * 16 / 9), 1040px); }
.wxa-device[data-state="0"] {
--sx: calc((var(--UW) - var(--OWl)) / 2); --st: calc((var(--UH) - var(--OHl)) / 2 - 10px); --sb: calc((var(--UH) - var(--OHl)) / 2 + 10px);
--r1: clamp(10px, 1vw, 16px); --r2: 4px;
--bt: var(--lbz); --bs: var(--lbz); --bb: calc(var(--lbz) * 1.35); --sr: 3px;
}
.wxa-m0 { width: var(--LW); height: calc(var(--LW) * 9 / 16); top: calc(50% - 10px - var(--lbz) * 0.175); }
.wxa-sh-l { display: block; width: var(--OWl); height: var(--OHl); margin-top: -10px; border-radius: clamp(10px, 1vw, 16px) clamp(10px, 1vw, 16px) 4px 4px; opacity: 0; }
.wxa-sh-p { border-radius: 46px; }
.wxa-device[data-state="0"] .wxa-sh-l { opacity: 1; }
.wxa-device[data-state="0"] .wxa-sh-p { opacity: 0; }
.wxa-base {
display: block; position: absolute; z-index: 2; left: 50%; top: calc(50% - 10px + (var(--LW) * 9 / 16 + var(--lbz) * 2.35) / 2);
width: calc((var(--LW) + 2 * var(--lbz)) * 1.034); height: clamp(9px, 0.9vw, 14px);
border-radius: 1px 1px 50% 50% / 1px 1px 100% 100%;
background: linear-gradient(var(--dev-base-1), var(--dev-base-2) 30%, var(--dev-base-3) 75%, var(--dev-base-4));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 18px 28px -14px rgb(var(--dev-shade) / 0.85);
transform: translateX(-50%); transform-origin: 50% 0;
transition: opacity 360ms var(--ease-out) 540ms, transform 640ms var(--ease-film) 480ms;
}
.wxa-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 11%; height: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background-color: var(--dev-slot); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06); }
.wxa-stage:not([data-state="0"]) .wxa-base { opacity: 0; transform: translateX(-50%) scaleX(0.6); transition: opacity 200ms var(--ease-out), transform 300ms var(--ease-out); }
.wxa-stage .wx-pill { left: 16px; bottom: 16px; }
.wxa-stage .wxa-m0 .wx-link { left: auto; right: 16px; }
}
.wxa[data-wx-armed] .wxa-stage { opacity: 0; transform: translateY(24px); }
.wxa[data-wx-armed] .wxa-item { opacity: 0; transform: translateY(24px); }
.wxa .wxa-stage, .wxa .wxa-item { transition: opacity 400ms var(--ease-out) calc(var(--i, 0) * 80ms + 120ms), transform 800ms var(--ease-film) calc(var(--i, 0) * 80ms + 120ms); }
.wxa .wxa-stage { transition-delay: 0ms; }
.via-market .nav-links { transform: none !important; }
.via-market .faq-market { display: none; }
main > .how + #about { padding-top: 0; }
main > #about + #faq { padding-top: var(--section); }
.cl-pre-s { display: none; }
.cl-reply { color: var(--muted); margin-left: -12px; }
@media (max-width: 720px) {
.cl-pre-l { display: none; }
.cl-pre-s { display: inline; }
.cl-reply { flex-basis: 100%; margin-left: 0; text-align: center; }
.cl-btn { padding: 0 16px; }
}
@media (max-width: 359px) {
.cl-pre { display: none; }
.cl-btn { font-size: 1rem; }
}
@media (min-width: 901px) { .tl-track { right: calc(25% - var(--col-gap) * 0.75 - 6.5px); } }
.copy:focus-visible { outline-offset: -2px; }
@media (min-width: 901px) and (min-height: 521px) {
.wxa-item { align-items: flex-start; }
.wxa-go { width: auto; }
.wxa-go:focus-visible { outline-offset: 6px; }
}