@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/golos-text-400-700.25073a9c11.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+20BD, U+2116, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(/assets/fonts/manrope-400-800.0a29801d61.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+20AC, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Golos Fallback'; font-weight: 400 500; src: local('Arial'), local('ArialMT'); size-adjust: 106.2%; ascent-override: 92.28%; descent-override: 20.72%; line-gap-override: 0%; }
@font-face { font-family: 'Golos Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 99.87%; ascent-override: 98.13%; descent-override: 22.03%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 400 500; src: local('Arial'), local('ArialMT'); size-adjust: 106.2%; ascent-override: 100.38%; descent-override: 28.25%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 98.81%; ascent-override: 107.88%; descent-override: 30.36%; line-gap-override: 0%; }
:root {
--c-anchor: #0E1B2C;
--c-anchor-2: #15263B;
--c-anchor-3: #1D3149;
--c-base: #F9FAFB;
--c-tint: #EDEFF1;
--c-surface: #FFFFFF;
--c-accent: #0B7A72;
--c-accent-strong: #08615B;
--c-accent-on-dark: #4FD1C5;
--c-accent-wash: #E2F2F0;
--slate-1: #FCFCFD; --slate-2: #F9F9FB; --slate-3: #F0F0F3; --slate-4: #E8E8EC;
--slate-5: #E0E1E6; --slate-6: #D9D9E0; --slate-7: #CDCED6; --slate-8: #B9BBC6;
--slate-9: #8B8D98; --slate-10: #80838D; --slate-11: #60646C; --slate-12: #1C2024;
--c-text: #1C2024;
--c-text-2: #4A4F57;
--c-text-3: #60646C;
--c-on-dark: #FFFFFF; --c-on-dark-2: #B9C4D2;  --c-on-dark-3: #8FA3BA;
--c-line-dark: rgba(255, 255, 255, .12);
--navy-ink: var(--c-anchor); --navy-deep: var(--c-anchor); --navy: #13263D;
--navy-700: var(--c-anchor-3); --navy-600: #52607A;
--paper: var(--c-base);  --zebra: #F3F4F6;  --paper-2: var(--c-tint);
--paper-3: var(--slate-3); --sand: var(--c-tint);  --sand-2: var(--slate-4);
--ink: var(--c-text);  --ink-2: var(--c-text-2);
--muted-strong: var(--c-text-3);
--muted: var(--c-text-3);
--rule: var(--slate-9);
--rule-mid: var(--slate-7);
--line-soft: var(--slate-5);
--line-dark: #3A4D66;
--line-dark-soft: var(--c-line-dark);
--accent: var(--c-accent);
--accent-btn: var(--c-accent);
--accent-deep: var(--c-accent-strong);
--accent-wash: var(--c-accent-wash);
--on-dark: var(--c-on-dark); --on-dark-2: var(--c-on-dark-2); --on-dark-3: var(--c-on-dark-3);
--amber: var(--c-accent-on-dark);
--amber-hi: #9BE7DE;
--ok: #17674A; --warn: var(--slate-11); --bad: #9B2226;
--grad-plate: none;
--noise: url(/assets/img/noise.91a7097b6d.svg);
--noise-dark: url(/assets/img/noise-dark.9f64ed3e45.svg);
--grain: url(/assets/img/grain.59030e2e8c.svg);
--ico-check: url(/assets/img/icon-check.54cd158664.svg);
--mesh-dark:
radial-gradient(60% 70% at 85% 10%, rgba(11, 122, 114, .30), transparent 70%),
radial-gradient(50% 60% at 8% 95%, rgba(46, 84, 150, .30), transparent 70%),
radial-gradient(40% 50% at 45% 40%, rgba(29, 49, 73, .9), transparent 80%);
--dots-dark: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .10) 1px, transparent 1.2px);
--font-display: 'Manrope', 'Manrope Fallback', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--font: 'Golos Text', 'Golos Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--fs-h1: clamp(1.875rem, 1.30vw + 1.581rem, 2.75rem);
--fs-h4: clamp(1.0625rem, 0.09vw + 1.044rem, 1.125rem);
--fs-lead: var(--fs-h3);
--fs-body: clamp(1.0625rem, 0.09vw + 1.044rem, 1.125rem);
--fs-small: 1rem;
--fs-meta: 0.9375rem;
--fs-kicker: 0.9375rem;
--fs-num: clamp(0.9375rem, 0.09vw + 0.919rem, 1rem);
--fs-stat: clamp(1.75rem, 0.76vw + 1.5625rem, 2.25rem);
--fs-stat-m: clamp(2rem, 1.11vw + 1.75rem, 2.75rem);
--fs-price: clamp(1.625rem, 0.56vw + 1.5rem, 2rem);
--fs-quote: clamp(1.3125rem, 0.65vw + 1.169rem, 1.75rem);
--lh-display: 1.07; --lh-h2: 1.16; --lh-h3: 1.3; --lh-lead: 1.5; --lh-body: 1.62; --lh-tight: 1.45;
--ls-num: -.02em;
--w-text: 66ch; --w-note: 72ch;
--w-max: 1200px; --w-wide: 1320px;
--gap: 16px; --gutter: 16px;
--bleed-r: calc(max(0px, (100vw - var(--w-max)) / 2) + var(--gutter));
--sp-air: clamp(72px, 7vw, 120px);
--sp-base: clamp(56px, 5.5vw, 96px);
--sp-tight: clamp(40px, 4vw, 64px);
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
--r-xs: 4px; --r-s: 8px; --r-m: 14px; --r-l: 20px;
--r-panel: 20px; --r-ctl: 8px;
--e1: 0 1px 2px rgba(14, 27, 44, .05), 0 8px 24px -12px rgba(14, 27, 44, .14);
--e2: 0 2px 4px rgba(14, 27, 44, .07), 0 20px 48px -20px rgba(14, 27, 44, .26);
--e3: 0 8px 32px rgba(14, 27, 44, .18);
--header-h: 56px; --scroll-pad: 64px;
--dur-fast: 140ms; --dur-base: 200ms; --dur-reveal: 240ms; --dur-mask: 420ms;
--stagger: 60ms;
--ease-out: cubic-bezier(.2, .6, .2, 1);
--ease-io: cubic-bezier(.4, 0, .2, 1);
--fs-base: var(--fs-body);
--lh: var(--lh-body);
--fs-display: clamp(2.375rem, 1.95rem + 2.1vw, 3.75rem);
--fs-h2: clamp(1.875rem, 1.5rem + 1.667vw, 2.5rem);
--fs-h3: clamp(1.3125rem, 1.1875rem + .556vw, 1.5rem);
--fs-stat-l: clamp(2.5rem, 2rem + 2.222vw, 4rem);
--fs-stat-xl: clamp(3rem, 2rem + 4.444vw, 6rem);
--fw-display: 700;
--ls-display: -.035em; --ls-h: -.025em; --ls-h3: -.01em;
--ls-kicker: 0; --ls-sec: 0;
--w-h1: 17ch; --w-h2: 22ch; --w-lead: 50ch;
--wire-c: var(--navy-600);
--wire-dot: var(--accent-btn);
--flow-bg: var(--paper);
--status-c: var(--ink-2);
--status-done: var(--ok);
--link-c: var(--accent);
--dock-h: 64px;
--grad-glow: none;
--e0: none;
--grad-hero: linear-gradient(var(--paper), var(--paper));
--grad-navy: linear-gradient(164deg, #15263B 0%, #0E1B2C 100%);
}
@media (min-width: 768px) { :root { --gap: 20px; --gutter: 24px; --header-h: 64px; --scroll-pad: 72px; } }
@media (min-width: 1024px) { :root { --gap: 24px; --gutter: 32px; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
[id] { scroll-margin-top: var(--scroll-pad); }
html.reduce { scroll-behavior: auto; }
body {
margin: 0;
font-family: var(--font);
font-size: var(--fs-base);
line-height: var(--lh);
color: var(--ink);
background-color: var(--c-base);
overflow-wrap: anywhere;
}
h1, h2, h3, .win dd { overflow-wrap: normal; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(249, 250, 251, .9); border-radius: var(--r-xs); }
:is(.hero, .clients, .section-data, .section-contact, .site-footer, .case-card--feature, .case-hero, .case-cta) :focus-visible { outline-color: var(--c-accent-on-dark); box-shadow: 0 0 0 5px rgba(14, 27, 44, .9); }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); }
h1, h2 { font-family: var(--font-display); font-weight: var(--fw-display); text-wrap: balance; hyphens: none; -webkit-hyphens: none; font-variant-numeric: lining-nums; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: var(--w-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h); max-width: var(--w-h2); margin: 0 0 var(--s4); }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-family: var(--font); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-tight); }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); letter-spacing: var(--ls-h); max-width: none; text-wrap: balance; }
@media (max-width: 767px) {
h2 { hyphens: auto; -webkit-hyphens: auto; }
@supports (hyphenate-limit-chars: 8 4 4) { h2 { hyphenate-limit-chars: 8 4 4; } }
}
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
strong { font-weight: 600; }
.section-intro { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 60ch; margin: 0 0 var(--s7); }
.eyebrow { font-size: var(--fs-kicker); color: var(--muted); font-weight: 600; margin-bottom: .8em; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--w-lead); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--r-s); z-index: 100; }
.skip-link:focus { top: 8px; }
.container { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-base); }
.section-cases, .section-packages { padding-block: var(--sp-air); }
.hero { padding-block: clamp(32px, 4.5vw, 72px) var(--s7); }
.section-contact { padding-block: var(--sp-base) var(--sp-air); }
.section-cases, .section-process, .section-market, .section-faq { background-color: var(--c-tint); }
.section-audience, .section-hours, .section-packages, .section-stack { background-color: var(--c-base); }
.section-cases, .section-process, .section-market, .section-faq { --paper: var(--c-surface); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1em; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
th { font-weight: 600; color: var(--ink); }
thead th { border-bottom: 2px solid var(--rule); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4em;
min-height: 48px; padding: 12px 22px; border-radius: var(--r-ctl);
font: inherit; font-weight: 600; letter-spacing: -.005em; text-decoration: none; cursor: pointer;
border: 1px solid transparent;
transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background-color: var(--c-accent); color: #fff; border-color: var(--c-accent-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(14, 27, 44, .2);
}
.btn-primary:hover { background-color: var(--c-accent-strong); border-color: #064D48; color: #fff; }
.btn-primary:active { background-color: #064D48; border-color: #053F3B; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.btn-secondary, .btn-ghost { background: var(--c-surface); color: var(--c-text); border-color: var(--slate-7); box-shadow: 0 1px 2px rgba(14, 27, 44, .06); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--slate-2); border-color: var(--slate-9); color: var(--c-text); }
.btn-secondary-light, .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }
.btn-secondary-light:hover, .btn-ghost-light:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .36); color: #fff; }
.btn-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link-c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.btn-link:hover { color: var(--link-c); text-decoration-thickness: 2px; }
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: none; border-radius: var(--r-ctl); }
:is(.hero, .clients, .section-data, .section-contact, .site-footer, .case-card--feature, .case-hero, .case-cta) .btn:focus-visible,
:is(.page-home, .page-case) .site-header:not(.is-stuck) .btn:focus-visible { outline-color: var(--c-accent-on-dark); }
.btn-sm { min-height: 44px; padding: 8px 16px; }
.btn-lg { padding: 16px 30px; font-size: var(--fs-h4); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
@media (max-width: 479px) { .cta-row .btn { flex: 1 1 100%; } }
.link-arrow { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; font-weight: 600; color: var(--link-c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.link-arrow:hover { text-decoration-thickness: 2px; color: var(--link-c); }
.status { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-meta); font-weight: 500; line-height: 1.2; color: var(--status-c); white-space: nowrap; }
.status::before { content: ""; flex: 0 0 auto; width: .62em; height: .62em; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.status[data-state="work"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status[data-state="done"] { color: var(--status-done); }
.status[data-state="done"]::before { background: currentColor; }
.wire { display: block; width: 48px; height: 24px; overflow: visible; }
.wire-path { fill: none; stroke: var(--wire-c); stroke-width: 1.5; stroke-dasharray: 3 3; }
.wire-head { fill: none; stroke: var(--wire-c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wire-dot { fill: var(--wire-dot); transform: translate(34px, 12px); }
@supports (offset-path: path("M 0 0 H 10")) {
.wire-dot { transform: none; transform-box: view-box; transform-origin: 0 0; offset-path: path("M2 12 H34"); offset-distance: 100%; offset-rotate: 0deg; }
html.js .is-live .wire-dot { animation: wire-run 1.6s var(--ease-io) 1 both; }
}
@keyframes wire-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }
html.reduce .wire-dot { animation: none; }
.flow { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; display: grid; gap: var(--s3); }
.flow-node { position: relative; min-width: 0; }
.flow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; min-height: 24px; }
.flow-name { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.flow-node::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--wire-c); background: var(--flow-bg); z-index: 1; }
.flow-node[data-state="work"]::before { background: linear-gradient(90deg, var(--wire-c) 50%, var(--flow-bg) 50%); }
.flow-node[data-state="done"]::before { background: var(--wire-dot); border-color: var(--wire-dot); }
.flow-node:not(:last-child)::after {
content: ""; position: absolute; left: -25px; width: 10px; top: 18px; bottom: calc(-1 * var(--s3) - 6px);
background:
radial-gradient(circle closest-side, var(--wire-dot) 0 72%, transparent 78%) 50% 0 / 0 0 no-repeat,
linear-gradient(var(--wire-c), var(--wire-c)) 50% 0 / 1.5px 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
html.js .flow.is-live .flow-node:not(:last-child)::after, html.js .is-live .flow .flow-node:not(:last-child)::after { animation: flow-pulse 3.6s var(--ease-io) infinite; }
html.js .is-live .flow .flow-node:nth-child(2)::after, html.js .flow.is-live .flow-node:nth-child(2)::after { animation-delay: 1.2s; }
html.js .is-live .flow .flow-node:nth-child(3)::after, html.js .flow.is-live .flow-node:nth-child(3)::after { animation-delay: 2.4s; }
}
@keyframes flow-pulse {
0%        { background-size: 8px 8px, 1.5px 100%; background-position: 50% 0%, 50% 0; }
30%       { background-size: 8px 8px, 1.5px 100%; background-position: 50% 100%, 50% 0; }
31%, 100% { background-size: 0 0, 1.5px 100%; background-position: 50% 100%, 50% 0; }
}
html.reduce .flow .flow-node::after { animation: none; }
.ba { display: grid; gap: var(--s3); align-items: start; }
.ba-side { min-width: 0; margin: 0; }
.ba-wire { display: grid; place-items: center; min-height: 48px; }
.ba-wire .wire { rotate: 90deg; }
@media (min-width: 768px) {
.ba { grid-template-columns: minmax(8.5rem, 2fr) 3rem minmax(0, 5fr); column-gap: var(--s2); }
.ba-wire { align-self: start; margin-top: 44px; }
.ba-wire .wire { rotate: none; }
}
.ba-head { margin: 0 0 var(--s2); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.ba-before { padding: var(--s4); border: 1px dashed var(--rule); border-radius: var(--r-m); background: var(--paper-3); }
.ba-was { margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--ink-2); }
.ba-was s { text-decoration-thickness: 2px; text-decoration-color: var(--rule); }
.ba-now { margin: 0 0 var(--s4); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: var(--ls-h); color: var(--navy); }
.fn-mark { margin-left: .15em; color: var(--muted); }
.footnote { margin: var(--s6) 0 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted-strong); max-width: var(--w-note); }
.win { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--e1); font-size: var(--fs-meta); line-height: 1.4; overflow: hidden; }
.win, .win * { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.win-bar { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 12px; background: var(--slate-2); border-bottom: 1px solid var(--line-soft); font-weight: 600; color: var(--muted-strong); }
.win-bar-meta { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.win-bar-navy { background: var(--navy); color: #fff; border-bottom-color: var(--navy); }
.win-meta, .win-fields { margin: 0; padding: 10px 12px; display: grid; gap: 0; }
.win-meta div, .win-fields div { display: grid; grid-template-columns: minmax(88px, 38%) 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--paper-2); align-items: baseline; }
.win-meta div:last-child, .win-fields div:last-child { border-bottom: 0; }
.win-meta dt, .win-fields dt { color: var(--muted-strong); font-weight: 600; }
.win-meta dd, .win-fields dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.win-fields .is-auto dd { background: var(--accent-wash); padding: 2px 6px; border-radius: var(--r-xs); }
.tag-auto { margin-left: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--accent-deep); background: var(--accent-wash); border-radius: var(--r-xs); padding: 0 6px; white-space: nowrap; }
.win-rule { height: 7px; margin: 0 12px 7px; border-radius: var(--r-xs); background: var(--line-soft); }
.win-rule:first-of-type { margin-top: 12px; }
.win-rule.is-short { width: 62%; }
.win-chip { margin: 0 12px 12px; display: block; color: var(--muted-strong); font-weight: 600; }
details.more { border-top: 1px solid var(--line-soft); }
details.more:last-of-type { border-bottom: 1px solid var(--line-soft); }
details.more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 48px; padding-block: var(--s3); cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::marker { content: ""; }
.more-title { min-width: 0; font-weight: 600; color: var(--ink); }
.more-icon { flex: none; position: relative; width: 16px; height: 16px; color: var(--navy); transition: transform var(--dur-base) var(--ease-out); }
.more-icon::before, .more-icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
.more-icon::after { transform: rotate(90deg); }
details.more[open] > summary .more-icon { transform: rotate(45deg); }
details.more > summary:hover .more-title { color: var(--navy); }
.more-body { padding-bottom: var(--s4); }
.more-body > :last-child { margin-bottom: 0; }
html.reduce .more-icon { transition: none; }
@media (prefers-reduced-motion: reduce) { .more-icon { transition: none; } }
.shot { margin: 0; min-width: 0; }
.shot-win { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 0 32px rgba(0, 0, 0, .10); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding: 4px 12px; background: var(--slate-2); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-meta); font-weight: 600; line-height: 1.3; color: var(--muted-strong); }
.shot-bar-meta { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.shot-img, .shot-img img { display: block; width: 100%; }
.shot-img img { height: auto; object-fit: cover; }
.shot--16x10 .shot-img img { aspect-ratio: 16 / 10; }
.shot--4x5 .shot-img img { aspect-ratio: 4 / 5; }
.shot-notes { position: absolute; inset: 32px 0 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.shot-cap { margin-top: var(--s2); font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted-strong); }
.chip { position: absolute; max-width: 62%; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow-wrap: normal; box-shadow: 0 1px 2px rgba(22, 41, 63, .12); }
.chip::after { content: ""; position: absolute; background: inherit; }
.chip--navy { background: var(--navy); color: #fff; }
.chip--accent { background: var(--accent-btn); color: #fff; }
.chip--tl { top: 6%; left: 4%; }
.chip--tr { top: 6%; right: 4%; }
.chip--bl { bottom: 8%; left: 4%; }
.chip--br { bottom: 8%; right: 4%; }
.chip--ml { top: 50%; left: 4%; transform: translateY(-50%); }
.chip--tl::after, .chip--tr::after { top: 100%; width: 1px; height: 24px; }
.chip--bl::after, .chip--br::after { bottom: 100%; width: 1px; height: 24px; }
.chip--tl::after, .chip--bl::after { left: 24px; }
.chip--tr::after, .chip--br::after { right: 24px; }
.chip--ml::after { left: 100%; top: 50%; width: 24px; height: 1px; }
@media (max-width: 767px) {
.shot-notes { position: static; display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3); border-top: 1px solid var(--line-soft); }
.chip { position: static; max-width: 100%; transform: none; white-space: normal; box-shadow: none; }
.chip::after { content: none; }
.chip--opt { display: none; }
}
.bg-grid {
background-image:
linear-gradient(to right, rgba(31, 58, 95, .055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(31, 58, 95, .055) 1px, transparent 1px);
background-size: 24px 24px;
}
@media (min-width: 768px) {
.shot--answer .chip--tl { top: 29%; left: 11%; }
.shot--answer .chip--tl::after { content: none; }
.shot--answer .chip--tr { top: 22%; }
.shot--answer .chip--bl { top: 81%; bottom: auto; left: 42%; }
.shot--answer .chip--bl::after { top: 50%; bottom: auto; left: auto; right: 100%; width: 20px; height: 1px; }
.shot--register .chip--tl { top: 17%; left: 44%; }
.shot--register .chip--tl::after { height: 16px; }
.shot--register .chip--ml { top: 46%; left: 6%; }
.shot--register .chip--ml::after { left: auto; right: 100%; width: 12px; }
.shot--register .chip--br { top: 62%; bottom: auto; right: 10%; }
.shot--register .chip--br::after { right: 32px; height: 20px; }
.shot--mail .chip--ml { top: 57%; left: 4%; transform: none; }
.shot--mail .chip--ml::after { top: 100%; left: auto; right: 24px; width: 1px; height: 24px; }
.shot--mail .chip--tr { top: 80.5%; right: 60%; }
.shot--mail .chip--br { top: 89.5%; bottom: auto; right: 60%; }
.shot--mail .chip--tr::after, .shot--mail .chip--br::after { top: 50%; bottom: auto; left: 100%; right: auto; width: 16px; height: 1px; }
.shot--manual .chip--tl, .shot--manual .chip--tr { top: 10%; }
.shot--manual .chip--tl::after, .shot--manual .chip--tr::after { height: 10px; }
.shot--manual .chip--bl { top: 47%; bottom: auto; left: auto; right: 6%; }
.shot--manual .chip--bl::after { top: 100%; bottom: auto; left: auto; right: 24px; height: 16px; }
.shot--crm .chip--tr { top: 20%; right: 2%; }
.shot--crm .chip--tr::after { top: auto; bottom: 100%; right: auto; left: 22px; height: 8px; }
.shot--crm .chip--ml { display: none; }
.shot--crm .chip--tl { top: 8.5%; left: auto; right: 42%; }
.shot--crm .chip--tl::after { top: 50%; left: 100%; width: 12px; height: 1px; }
}
.header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.site-header {
position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
background: rgba(249, 250, 251, .86);
-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--slate-5);
transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-stuck { background: rgba(249, 250, 251, .86); border-bottom-color: var(--slate-5); box-shadow: 0 1px 0 rgba(14, 27, 44, .02), 0 8px 24px -16px rgba(14, 27, 44, .18); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--c-anchor); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: -.03em; min-width: 0; white-space: nowrap; }
.brand:hover { color: var(--c-anchor); }
.brand-mark { display: block; width: 24px; height: 24px; flex: 0 0 auto; color: currentColor; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark .bm-core { fill: var(--c-accent); }
.nav-toggle {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px;
background: transparent; border: 1px solid var(--slate-6); border-radius: var(--r-ctl); font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
}
.nav-toggle-lines { position: relative; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle-lines::before, .nav-toggle-lines::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle-lines::before { top: -6px; } .nav-toggle-lines::after { top: 6px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; color: var(--c-text-2); text-decoration: none; border-radius: var(--r-ctl); font-weight: 500; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.site-nav a:not(.btn):hover { background: var(--slate-3); color: var(--c-text); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) { background: rgba(14, 27, 44, .55); border-bottom-color: rgba(255, 255, 255, .08); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .brand { color: #fff; }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .brand-mark .bm-core { fill: var(--c-accent-on-dark); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .22); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .nav-toggle-lines,
:is(.page-home, .page-case) .site-header:not(.is-stuck) .nav-toggle-lines::before,
:is(.page-home, .page-case) .site-header:not(.is-stuck) .nav-toggle-lines::after { background: #fff; }
@media (min-width: 1024px) {
:is(.page-home, .page-case) .site-header:not(.is-stuck) .site-nav a:not(.btn) { color: var(--c-on-dark-2); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .site-nav a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, .07); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .site-nav a[aria-current]:not(.btn) { color: #fff; box-shadow: inset 0 -2px 0 var(--c-accent-on-dark); }
}
@media (scripting: none) {
:is(.page-home, .page-case) .site-header:not(.is-stuck) { background: rgba(14, 27, 44, .94); border-bottom-color: rgba(255, 255, 255, .08); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .site-nav a:not(.btn) { color: var(--c-on-dark-2); }
:is(.page-home, .page-case) .site-header:not(.is-stuck) .site-nav a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, .07); }
}
@media (max-width: 1023px) {
.site-nav {
display: none; position: absolute; left: 0; right: 0; top: 100%;
background: var(--c-base); border-bottom: 1px solid var(--line-soft); box-shadow: var(--e2);
padding: 4px var(--gutter) 16px;
max-height: calc(100vh - var(--header-h));
max-height: calc(100dvh - var(--header-h));
overflow-y: auto; overscroll-behavior: contain;
}
.site-nav.is-open { display: block; }
.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav li + li a:not(.btn) { border-top: 1px solid var(--line-soft); }
.site-nav a:not(.btn) { display: flex; min-height: 52px; padding-inline: 0; border-radius: 0; }
.nav-cta { margin-top: 12px; }
.nav-cta .btn { width: 100%; }
}
@media (min-width: 1024px) {
.nav-toggle { display: none; }
.site-nav { display: block; }
.nav-cta { margin-left: 8px; }
}
html.nav-open, body.nav-open { overflow: hidden; overscroll-behavior: none; }
.site-nav a[aria-current]:not(.btn) { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-btn); border-radius: 0; }
@media (max-width: 1023px) {
.site-nav a[aria-current]:not(.btn) { box-shadow: none; font-weight: 600; }
.site-nav a[aria-current]:not(.btn)::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--accent-btn); }
}
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
background: var(--paper); background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: blur(8px); border-top: 1px solid var(--line-soft);
}
.dock .btn { min-height: 48px; }
@media (min-width: 768px) { .dock { display: none; } }
body.nav-open .dock, body:has(.modal[open]) .dock { display: none; }
@media (prefers-reduced-motion: no-preference) { html.js .dock:not([hidden]) { animation: dock-in 280ms var(--ease-out); } }
@keyframes dock-in { from { transform: translateY(100%); } }
@media (max-width: 1023px) {
body.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
body.nav-open { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 1023px) and (scripting: none) {
.nav-toggle { display: none; }
.header-inner { flex-wrap: wrap; row-gap: 0; }
.site-nav { display: block; position: static; width: 100%; max-height: none; padding: 0 0 8px; border: 0; box-shadow: none; background: transparent; }
.site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 4px; }
.site-nav li + li a:not(.btn) { border-top: 0; }
.site-nav a:not(.btn) { min-height: 44px; padding-inline: 8px; }
.nav-cta { display: none; }
}
.dock.is-typing { display: none; }
.hero {
position: relative; isolation: isolate; color: var(--c-on-dark);
background-color: var(--c-anchor);
background-image: var(--grain), var(--mesh-dark);
background-size: 200px 200px, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat;
--ink: #fff; --ink-2: var(--c-on-dark-2); --muted: var(--c-on-dark-3); --muted-strong: var(--c-on-dark-2);
--navy: #fff; --navy-600: var(--c-on-dark-3); --rule: rgba(255, 255, 255, .28); --rule-mid: rgba(255, 255, 255, .14); --line-soft: rgba(255, 255, 255, .10);
--paper-3: rgba(255, 255, 255, .04); --ok: var(--c-accent-on-dark); --link-c: var(--c-accent-on-dark);
}
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: var(--dots-dark); background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 38%, #000 10%, transparent 72%);
mask-image: radial-gradient(ellipse 60% 70% at 72% 38%, #000 10%, transparent 72%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(79, 209, 197, .35) 30%, rgba(255, 255, 255, .12) 70%, transparent); }
.page-home .hero { margin-top: calc(-1 * (var(--header-h) + 1px + env(safe-area-inset-top, 0px))); padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(28px, 4vw, 64px)); padding-bottom: clamp(40px, 5vw, 72px); }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--c-on-dark-2); font-weight: 500; }
@media (max-width: 479px) { .hero .eyebrow { display: flex; padding: 0; border: 0; background: none; } }
.hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent-on-dark); box-shadow: 0 0 0 4px rgba(79, 209, 197, .18); }
.hero-grid { display: grid; row-gap: 0; align-items: start; }
.hero-copy { min-width: 0; }
.hero h1 { margin-bottom: .4em; }
@media (min-width: 1200px) { .hero h1 { max-width: none; } }
.lead-tail { display: none; }
@media (min-width: 768px) { .lead-tail { display: inline; } }
.hero-copy .lead { margin-top: 1em; }
.cta-note { font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted); margin: 12px 0 0; max-width: none; }
.hero .cta-row { align-items: center; column-gap: var(--s5); }
.badges { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: 6px var(--s5); }
.badges li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--ink-2); }
.badges li::before {
content: ""; flex: 0 0 auto; width: 12px; height: 12px; background-color: var(--ok);
-webkit-mask: var(--ico-check) no-repeat center / 12px 12px;
mask: var(--ico-check) no-repeat center / 12px 12px;
}
.facts {
list-style: none; margin: var(--s7) 0 0; padding: var(--s5) 0 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5);
border-top: 1px solid var(--rule-mid);
}
.facts li { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
@media (max-width: 767px) { .facts { margin-top: var(--s6); gap: var(--s4); } .facts li:last-child { grid-column: 1 / -1; } }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
.facts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.facts li { padding-inline: var(--s5); }
.facts li:first-child { padding-left: 0; }
.facts li + li { border-left: 1px solid var(--line-soft); }
}
.fact-value { display: inline-block; min-width: 5ch; font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: var(--ls-num); overflow-wrap: normal; }
.fact-label { font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--ink-2); }
.fact-label--short { display: none; }
@media (max-width: 767px) {
.fact-label--short { display: block; }
.fact-label--full { display: none; }
}
.hero-bg { position: absolute; right: 0; top: calc(var(--header-h) - 1vw); z-index: -2; width: min(78vw, 1400px); aspect-ratio: 16 / 9; pointer-events: none; }
.hero-bg-pic, .hero-bg-pic img { display: block; width: 100%; height: 100%; }
.hero-bg-pic img { object-fit: cover; opacity: .5;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
@media (max-width: 767px) { .hero-bg { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) {
.hero-bg-pic img {
-webkit-mask-image: linear-gradient(90deg, transparent 0 55%, #000 75%);
mask-image: linear-gradient(90deg, transparent 0 55%, #000 75%);
}
}
.page-home .hero {
background-image: var(--grain), linear-gradient(180deg, transparent 78%, #0B1624 100%), var(--mesh-dark);
background-size: 200px 200px, auto, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.hero-grid > .facts { margin-top: var(--s6); }
@media (min-width: 768px) { .hero-copy .lead { max-width: 33em; } }
@media (min-width: 1024px) {
.hero h1 { font-size: clamp(2.375rem, min(1.95rem + 2.1vw, 6.6svh), 3.75rem); }
}
@media (min-width: 1024px) and (max-height: 820px) {
.page-home .hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px); padding-bottom: var(--s6); }
.hero-copy .lead { margin-top: .75em; font-size: 1.3125rem; }
.hero .cta-row { margin-top: 1.1em; }
.hero .facts { padding-top: var(--s4); }
.hero-grid > .facts { margin-top: var(--s4); }
}
@media (min-width: 1024px) and (max-width: 1199px) { .hero .facts--3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, 1.05fr); } }
@media (min-width: 1200px) {
.hero-grid {
grid-template-columns: minmax(0, 7.6fr) minmax(0, 4fr); column-gap: var(--s6);
grid-template-rows: 1fr auto auto 1fr;
grid-template-areas: "copy ." "copy facts" "copy note" "copy .";
}
.hero-grid > .hero-copy { grid-area: copy; align-self: center; }
.hero-grid > .facts { grid-area: facts; margin-top: 0; }
.hero-grid > .cta-note { grid-area: note; padding-inline: var(--s5); }
.hero .facts--3 {
grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--s2) var(--s5);
border: 1px solid rgba(255, 255, 255, .10); border-radius: var(--r-panel);
background: linear-gradient(160deg, rgba(14, 27, 44, .55), rgba(14, 27, 44, .38));
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero .facts--3 li { padding: var(--s4) 0; border-left: 0; }
.hero .facts--3 li + li { border-top: 1px solid var(--line-soft); }
.hero .facts--3 .fact-value { font-size: var(--fs-stat-m); }
.hero-bg { top: 50%; translate: 0 -50%; width: min(66vw, 1180px); }
.hero-bg-pic img { opacity: .75; }
}
@media (min-width: 1200px) and (max-width: 1919px) {
.hero-bg-pic img { -webkit-mask-image: linear-gradient(90deg, transparent 0 56%, #000 70%); mask-image: linear-gradient(90deg, transparent 0 56%, #000 70%); }
}
@media (min-width: 1200px) and (max-height: 820px) {
.hero .facts--3 li { padding: var(--s3) 0; }
}
@media (max-width: 767px) {
.hero-grid > .facts { margin-top: var(--s5); }
.hero .facts { padding-top: var(--s4); }
}
@media (max-width: 379px) {
.hero h1 { font-size: 2.1875rem; }
.hero-copy .lead { font-size: 1.1875rem; }
.page-home .hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px); }
}
@media (min-width: 1024px) and (max-height: 720px) {
.page-home .hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px); }
.hero .eyebrow { margin-bottom: .5em; }
}
.aud-grid .section-intro { margin-bottom: var(--s6); }
.audience-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.audience-list li { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--c-surface); border: 1px solid var(--slate-5); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(14, 27, 44, .04); }
@media (min-width: 768px) { .audience-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
.audience-list { gap: var(--gap); }
.audience-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.audience-list .aud-media { display: flex; align-items: center; border-bottom: 0; border-right: 1px solid var(--slate-4); background: var(--c-base); }
.audience-list .aud-text { align-self: center; }
}
.aud-media { display: block; border-bottom: 1px solid var(--slate-4); background: var(--c-tint); }
.aud-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.aud-text { padding: var(--s5); }
.audience-list h3 { margin: 0 0 .4em; font-size: var(--fs-h4); line-height: var(--lh-tight); }
.audience-list p { margin: 0; color: var(--ink-2); }
.clients { position: relative; background-color: #0B1624; border-block: 1px solid rgba(255, 255, 255, .07); padding-block: 28px; overflow: hidden; color: var(--c-on-dark-2); }
.clients-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.clients-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 32px; align-items: center; }
.clients-label { margin: 0; font-size: var(--fs-meta); font-weight: 600; line-height: var(--lh-tight); color: var(--c-on-dark-3); }
.clients-note { grid-column: 2 / 3; margin: 12px 0 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--c-on-dark-3); }
.marquee { min-width: 0; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-dur, 32s) linear infinite; will-change: transform; }
.marquee-set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.logo { flex: none; margin-inline: 44px; color: #DCE3EC; opacity: .72; }
.logo svg { display: block; width: var(--w); height: var(--h); max-width: none; fill: currentColor; }
.logo--kramer  { --w: 122px; --h: 38px; }
.logo--snk     { --w: 148px; --h: 28px; }
.logo--modulit { --w: 168px; --h: 36px; }
.logo--deephub { --w: 210px; --h: 26px; }
.clients.is-offscreen .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
.clients { padding-block: 20px; }
.clients-row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.marquee { grid-column: 1 / -1; grid-row: 2;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.marquee-track { --marquee-dur: 22s; }
.logo { margin-inline: 28px; }
.logo svg { width: calc(var(--w) * .8); height: calc(var(--h) * .8); }
.clients-note { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; width: auto; }
.marquee-set { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; column-gap: 48px; }
.marquee-set[aria-hidden="true"] { display: none; }
.logo { margin-inline: 0; }
.marquee { -webkit-mask-image: none; mask-image: none; }
}
html.reduce .marquee-track { animation: none; width: auto; }
html.reduce .marquee-set { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; column-gap: 48px; }
html.reduce .marquee-set[aria-hidden="true"] { display: none; }
html.reduce .logo { margin-inline: 0; }
html.reduce .marquee { -webkit-mask-image: none; mask-image: none; }
.how-to-read { max-width: var(--w-note); margin: 0 0 var(--s7); color: var(--ink-2); font-size: var(--fs-small); border-block: 1px solid var(--rule-mid); }
.how-to-read summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 48px; padding-block: 10px; list-style: none; cursor: pointer; }
.how-to-read summary::-webkit-details-marker { display: none; }
.how-to-read[open] .verify-icon::after { height: 0; }
.how-to-read > p { margin: 0 0 var(--s4); }
.how-to-read strong { color: var(--ink); }
.case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.case-list--mini { margin-top: var(--gap); }
@media (min-width: 768px) { .case-list--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .case-list--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-card {
position: relative; min-width: 0; display: grid; gap: var(--s5); align-content: start;
padding: var(--s5); background: var(--c-surface); border: 1px solid var(--slate-5); border-radius: var(--r-panel); cursor: pointer;
box-shadow: 0 1px 2px rgba(14, 27, 44, .04);
transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .case-card:hover { box-shadow: 0 2px 4px rgba(14, 27, 44, .05), 0 18px 40px -20px rgba(14, 27, 44, .28); border-color: var(--slate-7); transform: translateY(-2px); } }
.case-card:has(.case-link:focus-visible) { border-color: var(--slate-8); outline: 2px solid var(--c-accent); outline-offset: 3px; }
@supports selector(:has(*)) { .case-link:focus-visible { outline: none; box-shadow: none; } }
html.reduce .case-card:hover { transform: none; }
.case-link { color: var(--ink); text-decoration: none; }
.case-link:hover { color: var(--ink); }
.case-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-panel); }
.case-card :is(summary, .case-verify p) { position: relative; z-index: 2; }
.case-card:hover .case-open, .case-card:has(.case-link:focus-visible) .case-open { text-decoration: underline; text-decoration-thickness: 2px; }
.case-card--lead .case-media { order: -1; min-width: 0; }
.case-body { min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) { .case-card--lead { padding: var(--s6); } }
@media (min-width: 1024px) {
.case-list--lead { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.case-card--lead { grid-column: span 6; }
.case-card--lead:nth-child(2) { grid-column: span 7; }
.case-card--lead:nth-child(3) { grid-column: span 5; }
.case-card--feature { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s7); align-items: center; padding: var(--s7); }
.case-card--feature .case-body { grid-column: 1 / span 5; grid-row: 1; }
.case-card--feature .case-media { grid-column: 6 / -1; grid-row: 1; order: 0; }
}
.case-card--feature {
isolation: isolate; overflow: hidden; color: var(--c-on-dark); border-color: #1F3350;
background-color: var(--c-anchor); background-image: var(--grain), radial-gradient(70% 90% at 100% 0%, rgba(11, 122, 114, .28), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(46, 84, 150, .25), transparent 70%);
background-size: 200px 200px, auto, auto; background-repeat: repeat, no-repeat, no-repeat;
--ink: #fff; --ink-2: var(--c-on-dark-2); --muted: var(--c-on-dark-3); --muted-strong: var(--c-on-dark-2);
--navy: #fff; --navy-600: var(--c-on-dark-3); --rule: rgba(255, 255, 255, .3); --rule-mid: rgba(255, 255, 255, .2); --line-soft: rgba(255, 255, 255, .12);
--link-c: var(--c-accent-on-dark);
}
@media (hover: hover) { .case-card--feature:hover { border-color: #2C4566; box-shadow: 0 24px 48px -24px rgba(14, 27, 44, .6); } }
.case-card--feature .case-title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.2; letter-spacing: var(--ls-h); }
.case-card--feature .case-video video { background: #0B1624; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .6); border-radius: 12px; }
.case-kicker { display: inline-flex; align-self: flex-start; justify-self: start; margin: 0 0 .75em; padding: 2px 10px; border-radius: 999px; background: var(--slate-3); font-size: var(--fs-meta); font-weight: 600; color: var(--c-text-2); }
.case-card--feature .case-kicker { background: rgba(79, 209, 197, .12); color: var(--c-accent-on-dark); }
.case-title { margin: 0; max-width: 32ch; }
.case-card .ba-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .45em; margin: var(--s3) 0 var(--s5); }
.case-card .ba-line s { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); text-decoration-thickness: 1.5px; text-decoration-color: var(--rule); }
.case-card .ba-line .ba-arrow { color: var(--navy-600); }
.case-body .ba-now { margin: 0; font-size: var(--fs-h3); font-family: var(--font); font-weight: 600; line-height: 1.2; letter-spacing: var(--ls-h3); }
.case-body .case-verify { margin-top: auto; }
.case-fig { margin: 0; display: flex; flex-direction: column; }
.case-fig figcaption { order: 2; margin-top: var(--s3); font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted-strong); max-width: 52ch; }
.case-fig .mock { max-width: none; }
.case-card--mini { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); }
.case-card--mini .case-kicker { margin-bottom: var(--s1); }
.case-card--mini .case-open { margin-top: auto; }
.case-card--mini .mini-metric + .case-open { margin-top: auto; }
.case-mini-media { display: block; margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s3); border-bottom: 1px solid var(--slate-4); background: var(--c-tint); }
.case-mini-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0; }
@media (min-width: 900px) {
.case-list--mini.has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.case-list--mini.has-media .case-card--media { grid-column: 1; grid-row: 1 / span 3; }
.case-list--mini.has-media > :not(.case-card--media) { grid-column: 2; }
.case-list--mini.has-media .case-card--media .case-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.case-list--mini.has-media .case-card--media .case-mini-media { flex: 1 1 auto; min-height: 0; position: relative; }
.case-list--mini.has-media .case-card--media .case-mini-media { background: var(--c-base); }
.case-list--mini.has-media .case-card--media .case-mini-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--c-base); }
.case-list--mini.has-media .case-card--media .case-open { margin-top: var(--s2); }
}
@media (min-width: 768px) and (max-width: 899px) { .case-list--mini.has-media { grid-template-columns: minmax(0, 1fr); } }
.case-list--mini.has-media > .case-card:not(.case-card--media) {
gap: var(--s1); padding: var(--s4) 0; background: none; border: 0; border-top: 1px solid var(--slate-6); border-radius: 0; box-shadow: none;
}
.case-list--mini.has-media > .case-card:not(.case-card--media):last-child { border-bottom: 1px solid var(--slate-6); }
.case-list--mini.has-media > .case-card:not(.case-card--media) .case-link::after { border-radius: 0; }
.case-list--mini.has-media > .case-card:not(.case-card--media) .case-kicker { margin: 0; padding: 0; background: none; color: var(--c-text-3); font-weight: 500; }
@media (hover: hover) {
.case-list--mini.has-media > .case-card:not(.case-card--media):hover { transform: none; box-shadow: none; border-color: var(--slate-6); }
.case-list--mini.has-media > .case-card:not(.case-card--media):hover .case-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
@media (min-width: 600px) {
.case-list--mini.has-media > .case-card:not(.case-card--media) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, auto); column-gap: var(--s5); align-content: center; }
.case-list--mini.has-media > .case-card:not(.case-card--media) > * { grid-column: 1; }
.case-list--mini.has-media > .case-card:not(.case-card--media) > .mini-metric { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0; border: 0; text-align: right; }
.case-list--mini.has-media > .case-card:not(.case-card--media) .mini-metric .metric-num { font-size: var(--fs-h3); }
}
.case-card--mini .case-title { font-size: var(--fs-h4); line-height: var(--lh-tight); }
.case-card--mini .ba-line { margin: 0; }
.case-card--mini .case-open { min-height: 0; padding-top: var(--s2); }
.case-card--mini .ba-now { margin: 0; font-family: var(--font); letter-spacing: 0; font-size: var(--fs-small); font-weight: 600; line-height: var(--lh-tight); color: var(--navy); }
.mini-metric { margin: var(--s2) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.mini-metric .metric-num { font-size: var(--fs-h4); }
.metrics { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.metrics li { min-width: 0; padding-left: var(--s4); border-left: 1px solid var(--line-soft); }
.metrics li:first-child { padding-left: 0; border-left: 0; }
.metric-num { display: block; min-width: 4ch; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.metric-lbl { display: block; margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--ink-2); }
@media (max-width: 767px) {
.case-body .metrics { grid-template-columns: minmax(0, 1fr); gap: 0; }
.case-body .metrics li { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); column-gap: var(--s4); align-items: baseline; padding: var(--s2) 0; border-left: 0; border-top: 1px solid var(--line-soft); }
.case-body .metrics li:first-child { padding: 0 0 var(--s2); border-top: 0; }
.case-body .metric-lbl { margin-top: 0; }
.case-verify summary > span:first-child { white-space: nowrap; }
}
.case-verify { margin: 0; border-top: 1px solid var(--line-soft); }
.case-verify summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; list-style: none; cursor: pointer; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.case-verify summary::-webkit-details-marker { display: none; }
.case-verify summary:hover { color: var(--navy); }
.verify-icon { position: relative; flex: 0 0 auto; width: 26px; height: 26px; }
.verify-icon::before, .verify-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--navy); transform: translate(-50%, -50%); }
.verify-icon::before { width: 16px; height: 2px; border-radius: 1px; }
.verify-icon::after { width: 2px; height: 16px; border-radius: 1px; }
.case-verify[open] .verify-icon::after { height: 0; }
.case-verify p { margin: 0 0 12px; font-size: var(--fs-small); color: var(--ink-2); }
.case-open { margin: 0; display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 600; color: var(--link-c); }
.case-open::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.case-card:hover .case-open::after { transform: translateX(3px) rotate(45deg); }
.case-video { display: block; width: 100%; }
.case-video video { width: 100%; aspect-ratio: 16 / 10; background: var(--slate-3); border-radius: 12px; box-shadow: var(--e1); }
.mock { width: 100%; max-width: 560px; }
.mock .win-bar { flex-wrap: wrap; }
.mock-body { padding: 12px; }
.mock-pdf-body { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 12px 16px; }
.pdf-cap { margin: 0 0 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted-strong); }
.pdf-page.is-out .pdf-cap { color: var(--navy); }
.pdf-sheet { display: grid; gap: 7px; padding: 10px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-xs); }
.pdf-line { display: block; height: 7px; border-radius: var(--r-xs); background: var(--line-soft); }
.pdf-line.is-head { height: 9px; width: 72%; }
.pdf-line.is-short { width: 58%; }
.is-out .pdf-line { background: var(--navy-600); }
.pdf-draw {
display: block; height: 40px; border: 1.5px solid var(--rule-mid); border-radius: var(--r-xs); background-color: #fff;
background-image: radial-gradient(circle, transparent 0 3px, var(--navy-600) 3px 4.5px, transparent 5px);
background-size: 16px 16px; background-repeat: repeat-x; background-position: 6px 50%;
}
.pdf-guide { position: absolute; left: 12px; right: 12px; top: 58%; border-top: 1px dashed var(--navy-600); }
html.js .mock-pdf.is-live .is-out .pdf-line { animation: pdf-draw var(--dur-mask) var(--ease-out) both; transform-origin: left center; }
html.js .mock-pdf.is-live .is-out .pdf-line:nth-child(2) { animation-delay: 60ms; }
html.js .mock-pdf.is-live .is-out .pdf-line:nth-child(3) { animation-delay: 120ms; }
html.js .mock-pdf.is-live .is-out .pdf-line:nth-child(5) { animation-delay: 180ms; }
html.js .mock-pdf.is-live .is-out .pdf-line:nth-child(6) { animation-delay: 240ms; }
html.reduce .mock-pdf.is-live .is-out .pdf-line { animation: none; }
@keyframes pdf-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mock-answer-body { padding: 12px 0 14px; }
.ans-q { margin: 0 12px 10px; font-weight: 600; color: var(--ink); }
.mock-answer .win-rule { margin: 0 12px 7px; }
.ans-src { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 8px 10px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-xs); }
.ans-thumb {
flex: 0 0 auto; width: 30px; height: 40px; border: 1px solid var(--line-soft); border-radius: var(--r-xs); background-color: #fff;
background-image: linear-gradient(var(--line-soft), var(--line-soft)), linear-gradient(var(--line-soft), var(--line-soft)), linear-gradient(var(--navy-600), var(--navy-600));
background-size: 18px 3px, 18px 3px, 12px 3px;
background-position: 5px 9px, 5px 17px, 5px 25px;
background-repeat: no-repeat;
}
.ans-srctext { color: var(--muted-strong); font-weight: 600; }
.mock-register-body { padding: 12px 12px 14px; }
.reg-src { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 10px; padding: 0; color: var(--muted-strong); font-weight: 600; }
.reg-src li + li::before { content: "·"; margin: 0 .5em; }
.reg-table { margin: 0; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.reg-table th, .reg-table td { padding: 6px 8px; border-bottom: 1px solid var(--paper-2); }
.reg-table thead th { border-bottom: 1px solid var(--rule-mid); color: var(--muted-strong); font-weight: 600; }
.reg-table tbody tr:last-child td { border-bottom: 0; }
.reg-table .is-merged td { background: var(--accent-wash); }
.reg-badge { display: block; margin: 2px 0 0; padding: 0; border: 0; color: var(--accent-deep); font-weight: 600; white-space: nowrap; }
.reg-table td:first-child, .reg-table th { white-space: nowrap; }
.mock-rrf-body { padding: 12px; }
.rrf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rrf-h { margin: 0 0 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted-strong); }
.rrf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: rrf; }
.rrf-list li { counter-increment: rrf; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--paper-2); font-variant-numeric: tabular-nums; }
.rrf-list li::before { content: counter(rrf); flex: 0 0 auto; color: var(--muted-strong); font-weight: 600; }
.rrf-arrow { position: relative; height: 20px; margin: 10px 0 8px; }
.rrf-arrow::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 13px; background: var(--rule-mid); }
.rrf-arrow::after { content: ""; position: absolute; left: 50%; top: 8px; width: 9px; height: 9px; border-right: 1px solid var(--rule-mid); border-bottom: 1px solid var(--rule-mid); transform: translateX(-50%) rotate(45deg); }
.rrf-sum .rrf-h { color: var(--accent-deep); }
.rrf-list .is-win { background: var(--accent-wash); border-radius: var(--r-xs); color: var(--ink); font-weight: 600; }
.rrf-mark { margin-left: auto; padding: 0; border: 0; color: var(--accent-deep); font-weight: 600; white-space: nowrap; }
.mock-card-body { padding: 12px 12px 14px; }
.card-slot {
display: block; height: 96px; margin-bottom: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-xs); background-color: var(--paper-2);
background-color: var(--c-base);
background-image: url(/assets/img/photo/case-cards-560.522b0ac0b3.jpg);
background-image: image-set(url(/assets/img/photo/case-cards-560.ad4c8a56c1.avif) type("image/avif"), url(/assets/img/photo/case-cards-560.62fed165c9.webp) type("image/webp"));
background-size: cover; background-position: 50% 40%;
}
.card-specs { padding: 0; }
.card-specs div { padding: 4px 0; }
.mock-private-body { padding: 18px 12px 14px; }
.pv-perimeter { position: relative; padding: 14px 12px 12px; background: var(--paper); border: 1px dashed var(--navy-600); border-radius: var(--r-s); }
.pv-cap { position: absolute; left: 10px; top: -10px; margin: 0; padding: 0 6px; background: #fff; font-size: var(--fs-meta); font-weight: 600; color: var(--muted-strong); }
.pv-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 8px; }
.pv-items li { padding: 10px 6px; text-align: center; background: var(--paper-2); border: 0; border-radius: var(--r-xs); color: var(--ink); font-weight: 600; }
.pv-link { position: relative; display: flex; justify-content: center; align-items: center; margin: 0; padding: 10px 0; }
.pv-link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule-mid); }
.pv-token { position: relative; padding: 0 6px; border-radius: var(--r-xs); background: var(--accent-wash); border: 1px solid rgba(11, 122, 114, .28); font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; font-size: var(--fs-meta); font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.pv-out { margin: 0; padding: 10px 12px; text-align: center; background: var(--paper-2); border: 1px dashed var(--rule-mid); border-radius: var(--r-xs); color: var(--muted-strong); font-weight: 600; }
@media (min-width: 900px) {
.case-list--mini.has-media.has-media-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-list--mini.has-media.has-media-2 > * { grid-column: auto; grid-row: auto; }
.case-list--mini.has-media.has-media-2 .case-card--media .case-mini-media { flex: 0 0 auto; position: static; }
.case-list--mini.has-media.has-media-2 .case-card--media .case-mini-media img { position: static; height: auto; aspect-ratio: 4 / 3; }
.case-list--mini.has-media.has-media-2 .case-card--media .case-open { margin-top: auto; }
}
.calc { margin: 0; min-width: 0; padding: clamp(20px, 3vw, 40px); border: 1px solid var(--slate-5); border-radius: var(--r-panel); background: var(--c-surface); box-shadow: var(--e1); }
.calc h3 { margin: 0 0 .3em; }
.calc-intro { color: var(--c-text-2); margin: 0 0 var(--s5); max-width: var(--w-lead); }
.hours-grid { display: grid; gap: var(--s6); align-items: start; }
.hours-side { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.hours-lead { margin: 0; font-size: var(--fs-body); color: var(--c-text-2); max-width: var(--w-lead); }
.hours-media { display: block; margin: 0; border-radius: var(--r-panel); overflow: hidden; background: var(--c-tint); }
.hours-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 767px) { .hours-media img { aspect-ratio: 16 / 9; } }
@media (min-width: 768px) and (max-width: 1023px) { .hours-grid.has-media .hours-side { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
@media (min-width: 1024px) {
.hours-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.hours-grid > .calc { grid-column: 1 / span 7; grid-row: 1; }
.hours-grid > .hours-side { grid-column: 8 / -1; grid-row: 1; padding-left: var(--s5); position: sticky; top: calc(var(--header-h) + 24px); }
.hours-grid:not(.has-media) > .hours-side { grid-column: 9 / -1; padding-left: 0; padding-top: var(--s5); }
}
.calc-wrap { display: grid; gap: var(--s5); align-items: start; }
.calc-grid { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 560px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); } }
.calc-field { min-width: 0; }
.calc-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.stepper { display: flex; align-items: stretch; border: 1px solid var(--slate-7); border-radius: var(--r-ctl); background: var(--c-surface); overflow: hidden; }
.stepper button { width: 48px; min-height: 48px; border: 0; border-radius: 0; background: var(--slate-2); font: inherit; font-size: 1.25rem; line-height: 1; color: var(--c-anchor); cursor: pointer; }
.stepper button:hover { background: var(--c-accent-wash); color: var(--c-accent-strong); }
.stepper:focus-within { border-color: var(--c-accent); }
.stepper input { flex: 1; min-width: 0; border: 0; border-inline: 1px solid var(--line-soft); padding: 8px 12px; font: inherit; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: center; background: transparent; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline-offset: -3px; }
.hint { display: block; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted); margin-top: 6px; }
.calc-result { margin: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-m); background: var(--c-tint); color: var(--c-text); box-shadow: none; }
.calc-line { margin: 0 0 .6em; }
.calc-big { display: flex; align-items: baseline; gap: .15em; font-family: var(--font-display); color: var(--c-anchor); font-size: var(--fs-stat-xl); font-weight: 700; line-height: 1; letter-spacing: var(--ls-num); }
.calc-result strong { display: block; min-width: 3ch; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.calc-unit { display: block; margin-top: var(--s3); font-size: var(--fs-lead); color: var(--ink); }
.calc-unit b, .calc-money b { color: var(--c-anchor); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-money { color: var(--ink); }
.calc-formula { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted-strong); font-variant-numeric: tabular-nums; }
.calc-empty { margin: .6em 0 0; font-size: var(--fs-meta); color: var(--muted-strong); }
.calc-result.is-empty .calc-big { color: var(--muted-strong); }
.calc-cta { margin-top: var(--s5); }
@media (max-width: 479px) { .calc-cta { width: 100%; } }
@media (min-width: 1024px) { .calc-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: end; } .calc-result > * { grid-column: 1; } .calc-result > .calc-cta { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; } .calc-result > .calc-how { grid-column: 1 / -1; } }
.calc-note { margin: var(--s5) 0 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted); max-width: var(--w-note); }
.hours-details { margin-top: var(--s7); border-top: 1px solid var(--rule-mid); border-bottom: 1px solid var(--rule-mid); }
.hours-details > summary { min-height: 56px; padding-inline: 2px; }
.hours-details .more-title { color: var(--c-anchor); }
.hours-details-body { padding-bottom: var(--s5); }
.section-hours .table-wrap { margin-bottom: var(--s4); }
.hours-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line-soft); border-radius: var(--r-m); overflow: hidden; background: var(--c-surface); }
.hours-table thead th { font-size: var(--fs-meta); font-weight: 600; color: var(--muted-strong); border-bottom: 1px solid var(--slate-7); background: var(--slate-2); }
.hours-table td, .hours-table th { border-bottom: 0; }
.hours-table tbody tr:nth-child(even) td, .hours-table tbody tr:nth-child(even) th { background: var(--zebra); }
.hours-table thead th:last-child { text-align: right; }
.hours-table th:nth-child(1) { width: 26%; } .hours-table th:nth-child(2) { width: 22%; } .hours-table th:nth-child(3) { width: 26%; }
.hours-table .formula { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours-table .hours { text-align: right; font-size: var(--fs-h4); font-weight: 700; color: var(--c-anchor); font-variant-numeric: tabular-nums; overflow-wrap: normal; width: 26%; }
.table-note { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted); max-width: var(--w-note); }
@media (max-width: 767px) {
.section-hours .table-wrap { overflow: visible; }
.hours-table { table-layout: auto; min-width: 0; display: block; }
.hours-table th:nth-child(1), .hours-table th:nth-child(2), .hours-table th:nth-child(3), .hours-table td.hours { width: auto; }
.hours-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hours-table tbody { display: block; }
.hours-table tr { display: block; padding: 14px; border-bottom: 1px solid var(--line-soft); }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table th[scope="row"] { display: block; padding: 0 0 8px; font-size: var(--fs-h4); }
.hours-table td { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 4px 0; }
.hours-table td::before { content: attr(data-label); font-size: var(--fs-meta); font-weight: 600; color: var(--muted-strong); }
.hours-table .hours { text-align: left; }
.hours-table tbody tr:nth-child(even) td, .hours-table tbody tr:nth-child(even) th { background: transparent; }
.hours-table tbody tr:nth-child(even) { background: var(--zebra); }
}
.calc-how { margin-top: var(--s4); border-top: 1px solid var(--rule-mid); }
.calc-how > summary { min-height: 44px; padding-block: var(--s2); }
.calc-how .more-title { font-size: var(--fs-meta); color: var(--ink-2); }
details.more.calc-how:last-of-type { border-bottom: 0; }
.process-layout { display: grid; gap: var(--s6); align-items: start; }
.process-main, .process-media { min-width: 0; }
.process-media { order: -1; }
@media (min-width: 1024px) {
.process-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.process-main { grid-column: 1 / span 7; }
.process-media { order: 0; grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1200px) { .process-media { grid-column: 9 / -1; } }
@media (max-width: 1023px) { .process-media .shot { max-width: 420px; } }
.process-steps { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.process-steps > li { margin: 0; }
.process-steps > li:last-child details.more { border-bottom: 1px solid var(--line-soft); }
.process-step > summary { align-items: flex-start; padding-block: var(--s4); }
.process-step > summary .more-icon { margin-top: 10px; }
.ps-head { display: flex; gap: var(--s4); align-items: flex-start; font-weight: 400; }
.ps-num { flex: none; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--slate-7); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1; color: var(--c-anchor); }
.process-step[open] .ps-num { background: var(--c-accent); border-color: var(--c-accent-strong); color: #fff; }
.ps-text { display: grid; gap: 2px; min-width: 0; }
.ps-meta { font-size: var(--fs-meta); font-weight: 600; color: var(--muted-strong); }
.ps-title { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; color: var(--ink); }
.ps-sum { color: var(--ink-2); max-width: 60ch; }
.process-step > summary:hover .ps-title { color: var(--c-accent-strong); }
.process-step .more-body { padding-left: calc(36px + var(--s4)); }
.process-step .more-body p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.process-panels details.more:first-child { border-top: 1px solid var(--slate-7); }
.process-panels .more-body p, .process-panels .more-body ol { margin: 0; color: var(--ink-2); max-width: 62ch; }
.process-panels .more-body ol { padding-left: 1.2em; }
.process-panels .more-body li + li { margin-top: .6em; }
.timeline { position: relative; list-style: none; margin: 0; padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) + 52px); display: grid; gap: var(--s5); border-radius: var(--r-m); background: var(--paper); box-shadow: 0 0 32px rgba(0, 0, 0, .08); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -35px; top: 18px; width: 2px; height: calc(100% + var(--s5)); background: var(--rule-mid); }
.timeline li:last-child::before { content: none; }
.tl-num { position: absolute; left: -52px; top: 0; z-index: 1; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--navy-600); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); color: var(--navy); }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; margin: 0; }
.tl-name { font-weight: 600; color: var(--ink); }
.timeline li:not(:last-child)::after {
content: ""; position: absolute; left: -40px; top: 36px; width: 12px; height: calc(100% + var(--s5) - 36px); pointer-events: none;
background: radial-gradient(circle closest-side, var(--wire-dot, var(--accent-btn)) 0 72%, transparent 78%) 50% 0 / 0 0 no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
html.js .timeline.is-live li:not(:last-child)::after { animation: tl-pulse 6s var(--ease-io) infinite; }
html.js .timeline.is-live li:nth-child(2)::after { animation-delay: 1.5s; }
html.js .timeline.is-live li:nth-child(3)::after { animation-delay: 3s; }
html.js .timeline.is-live li:nth-child(4)::after { animation-delay: 4.5s; }
}
@keyframes tl-pulse {
0%        { background-size: 10px 10px; background-position: 50% 0%; }
25%       { background-size: 10px 10px; background-position: 50% 100%; }
26%, 100% { background-size: 0 0; background-position: 50% 100%; }
}
html.reduce .timeline li::after { animation: none; }
@media (max-width: 1023px) { .timeline--compact { display: none; } }
@media (max-width: 480px) { .ps-sum { display: none; } }
@media (max-width: 767px) { .process-media:has(.shot) { display: none; } }
.section-data {
position: relative; isolation: isolate; color: var(--on-dark);
background-color: var(--c-anchor);
background-image: var(--grain), radial-gradient(55% 70% at 0% 0%, rgba(11, 122, 114, .24), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(46, 84, 150, .28), transparent 70%);
background-size: 200px 200px, auto, auto; background-repeat: repeat, no-repeat, no-repeat;
--ink: #fff; --ink-2: var(--c-on-dark-2); --muted: var(--c-on-dark-3); --muted-strong: var(--c-on-dark-2);
--wire-c: var(--on-dark-3); --wire-dot: var(--amber); --flow-bg: var(--c-anchor);
--status-c: var(--on-dark-2); --status-done: var(--amber); --link-c: var(--amber);
}
.section-data > .container { position: relative; z-index: 1; }
.section-data::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--dots-dark); background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 45% 60% at 25% 55%, #000 10%, transparent 75%);
mask-image: radial-gradient(ellipse 45% 60% at 25% 55%, #000 10%, transparent 75%);
}
.section-data h2, .section-data h3 { color: var(--on-dark); }
.section-data .section-intro { color: var(--on-dark-2); }
.section-data a { color: var(--amber); }
.section-data a:hover { color: var(--on-dark); }
.data-grid { display: grid; gap: var(--s6) var(--gap); }
@media (min-width: 768px) { .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1024px) {
.data-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.data-scheme { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + 24px); }
.data-modes { grid-column: 7 / -1; }
}
.data-modes { display: grid; gap: var(--s5); min-width: 0; }
.data-mode-list { list-style: none; margin: 0; padding: 0; }
.data-mode { position: relative; margin: 0; padding: var(--s5) 0 var(--s5) var(--s6); border-top: 1px solid var(--c-line-dark); }
.data-mode:first-child { border-top: 0; padding-top: 0; }
.data-mode::before { content: ""; position: absolute; left: 0; top: calc(var(--s5) + .55em); width: 10px; height: 10px; border-radius: 3px; background: var(--c-accent-on-dark); }
.data-mode:first-child::before { top: .55em; }
.data-mode h3 { color: var(--on-dark); margin: 0 0 .4em; }
.data-mode p { margin: 0; font-size: var(--fs-small); color: var(--on-dark-2); max-width: 60ch; }
.data-head { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
.data-head-text > :last-child { margin-bottom: 0; }
.data-media { display: block; margin: 0; }
.data-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
@media (min-width: 1024px) {
.data-head.has-media { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin-top: calc(-1 * var(--s5)); }
.data-head.has-media .data-head-text { grid-column: 1 / span 6; }
.data-head.has-media .data-media { grid-column: 7 / -1; margin-right: calc(-1 * var(--s5)); }
}
@media (max-width: 1023px) { .data-media { max-width: 640px; } }
.data-proof { margin: 0; padding: var(--s5); font-size: var(--fs-small); border-radius: var(--r-m); background: var(--c-anchor-2); color: var(--on-dark); max-width: var(--w-note); font-variant-numeric: tabular-nums; }
.data-link { margin: calc(-1 * var(--s2)) 0 0; }
.data-scheme { margin: 0; min-width: 0; }
.ds-stage { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 400 / 380; }
.ds-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-perim { fill: none; stroke: var(--line-dark); stroke-width: 1.5; stroke-dasharray: 7 6; }
.ds-box { fill: none; stroke: var(--line-dark); stroke-width: 1; }
.ds-out { fill: none; stroke: var(--amber); stroke-width: 1.5; }
.ds-line { fill: none; stroke: var(--on-dark-3); stroke-width: 2; }
.ds-arrow { fill: none; stroke: var(--on-dark-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-access { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 5; }
.ds-dot { fill: var(--amber); transform: translate(112px, 284px); }
@supports (offset-path: path("M 0 0 V 10")) {
.ds-dot { transform: none; transform-box: view-box; transform-origin: 0 0; offset-path: path("M 112 116 V 284"); offset-distance: 100%; }
.data-scheme.is-live .ds-dot { animation: ds-run 2.4s linear infinite; }
}
@keyframes ds-run { 0% { offset-distance: 0%; opacity: 1; } 25% { opacity: 1; } 27% { opacity: 0; } 73% { opacity: 0; } 75% { opacity: 1; } 100% { offset-distance: 100%; opacity: 1; } }
html.reduce .ds-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .data-scheme.is-live .ds-dot { animation: none; } }
.ds-cap { position: absolute; left: 1.5%; top: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--on-dark-2); }
.ds-label { position: absolute; display: grid; place-items: center; text-align: center; padding: 0 10px; font-size: var(--fs-small); line-height: 1.25; color: var(--on-dark); }
.ds-n1 { left: 5.5%; top: 13.7%; width: 45%; height: 16.8%; }
.ds-n2 { left: 5.5%; top: 42.6%; width: 45%; height: 20%; }
.ds-n3 { left: 5.5%; top: 74.7%; width: 45%; height: 16.8%; }
.ds-n4 { left: 72.5%; top: 44.7%; width: 26%; height: 15.8%; padding: 0 4px; font-size: var(--fs-meta); color: var(--on-dark); }
.ds-lock { position: absolute; left: 63.5%; top: 52.6%; width: 28px; height: 28px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--c-anchor); color: var(--amber); }
.ds-lock svg { width: 18px; height: 18px; }
.ds-access-label { position: absolute; left: 63.5%; bottom: 52.6%; transform: translate(-50%, -18px); white-space: nowrap; font-size: var(--fs-meta); font-weight: 600; color: var(--amber); }
.section-llm { background-color: var(--c-tint); --paper: var(--c-surface); }
.section-llm h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.section-llm h4 { margin: 0 0 .35em; }
.llm-deploy { overflow: hidden; background: var(--c-surface); border: 1px solid var(--slate-5); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(14, 27, 44, .04); }
.llm-deploy-media { display: block; border-bottom: 1px solid var(--slate-4); background: var(--c-tint); }
.llm-deploy-media img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.llm-variants { list-style: none; margin: 0; padding: 0; display: grid; }
.llm-variant { min-width: 0; padding: var(--s5); }
.llm-variant + .llm-variant { border-top: 1px solid var(--slate-4); }
.llm-variant > p { margin: 0; color: var(--c-text-2); }
.llm-variant > .llm-variant-tag { display: inline-flex; margin: 0 0 var(--s3); padding: 2px 10px; border-radius: 999px; background: var(--c-accent-wash); font-size: var(--fs-meta); font-weight: 600; color: var(--c-accent-strong); }
@media (min-width: 768px) {
.llm-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.llm-variant + .llm-variant { border-top: 0; border-left: 1px solid var(--slate-4); }
}
@media (min-width: 1024px) { .llm-variant { padding: var(--s6); } }
.llm-mask { display: grid; gap: var(--s6); margin-top: var(--s8); }
.llm-mask-text, .llm-mask-side { min-width: 0; }
@media (min-width: 1024px) {
.llm-mask { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.llm-mask-text { grid-column: 1 / span 5; }
.llm-mask-side { grid-column: 6 / -1; padding-left: var(--s5); position: sticky; top: calc(var(--header-h) + 24px); }
}
.llm-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: llm; }
.llm-steps li { position: relative; counter-increment: llm; padding: 0 0 var(--s5) calc(32px + var(--s4)); }
.llm-steps li::before { content: counter(llm); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; display: grid; place-items: center; box-sizing: border-box; border-radius: 50%; background: var(--c-surface); border: 1.5px solid var(--c-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-meta); color: var(--c-accent-strong); }
.llm-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15.25px; top: 34px; bottom: 2px; border-left: 1.5px dashed var(--wire-c); }
.llm-steps li:last-child { padding-bottom: 0; }
.llm-steps p { margin: 0; color: var(--c-text-2); }
.llm-flow-media { display: block; margin: 0 0 var(--s4); overflow: hidden; border: 1px solid var(--slate-5); border-radius: var(--r-panel); background: var(--c-base); }
.llm-flow-media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: var(--c-base); }
.anon-demo { margin: 0; padding: var(--s5); background: var(--c-surface); border: 1px solid var(--slate-5); border-radius: var(--r-m); box-shadow: 0 1px 2px rgba(14, 27, 44, .04); color: var(--c-text); }
.anon-demo-title { margin: 0 0 var(--s3); font-weight: 600; color: var(--c-text); }
.anon-row { display: grid; gap: 2px; }
.anon-row.is-out { position: relative; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--slate-7); }
.anon-row.is-out::before { content: ""; position: absolute; left: var(--s4); top: -6px; width: 10px; height: 10px; background: var(--c-surface); border-right: 1.5px solid var(--c-accent); border-bottom: 1.5px solid var(--c-accent); transform: rotate(45deg); }
.anon-demo .anon-label { margin: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--c-text-3); }
.anon-demo .anon-line { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--c-text); font-variant-numeric: tabular-nums; }
.anon-pd { padding: 1px 4px; border-radius: var(--r-xs); background: #F6E4E4; color: var(--c-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.anon-tag { display: inline-block; padding: 0 6px; border-radius: var(--r-xs); background: var(--c-accent-wash); border: 1px solid rgba(11, 122, 114, .28); font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; font-size: .92em; font-weight: 600; line-height: 1.5; color: var(--c-accent-strong); white-space: nowrap; }
.anon-keep { white-space: nowrap; }
.anon-demo .anon-note { margin: var(--s4) 0 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--c-text-3); }
.llm-demand { display: grid; gap: var(--s6); margin-top: var(--s8); align-items: center; }
.llm-demand-text { min-width: 0; }
.llm-demand-text > p { color: var(--c-text-2); max-width: 62ch; }
@media (min-width: 1024px) {
.llm-demand.has-media { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.llm-demand.has-media .llm-demand-text { grid-column: 1 / span 7; }
.llm-demand.has-media .llm-demand-media { grid-column: 8 / -1; margin-left: var(--s5); }
}
.llm-demand-media { display: block; overflow: hidden; border-radius: var(--r-panel); border: 1px solid var(--slate-5); background: var(--c-base); }
.llm-demand-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--c-base); }
@media (max-width: 1023px) { .llm-demand-media { max-width: 640px; } }
.llm-facts { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s3) var(--s4); }
.llm-facts li { min-width: 0; }
.llm-facts .metric-num { font-size: var(--fs-stat); }
@media (min-width: 600px) {
.llm-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.llm-facts li + li { padding-left: var(--s4); border-left: 1px solid var(--slate-6); }
}
@media (max-width: 599px) {
.llm-facts { gap: 0; }
.llm-facts li { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 12fr); column-gap: var(--s4); align-items: baseline; padding: var(--s2) 0; border-top: 1px solid var(--slate-6); }
.llm-facts li:first-child { border-top: 0; padding-top: 0; }
.llm-facts .metric-lbl { margin-top: 0; }
}
.llm-demand-text > .llm-guards { margin: 0; font-size: var(--fs-small); color: var(--c-text-2); }
.llm-limits { margin-top: var(--s8); padding: clamp(20px, 3vw, 40px); background: var(--c-surface); border: 1px solid var(--slate-5); border-radius: var(--r-panel); }
.llm-limits h3 { margin: 0 0 var(--s4); }
.llm-limit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s6); }
@media (min-width: 768px) { .llm-limit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.llm-limit-list li { position: relative; margin: 0; padding-left: calc(10px + var(--s4)); color: var(--c-text-2); }
.llm-limit-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--slate-9); box-sizing: border-box; }
.llm-link { margin: var(--s4) 0 0; }
.case-figure { margin: var(--s6) 0 0; display: flex; flex-direction: column; }
.case-figure picture { display: block; overflow: hidden; border: 1px solid var(--slate-5); border-radius: var(--r-panel); background: var(--c-base); }
.case-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--c-base); }
.case-figure figcaption { margin-top: 10px; font-size: var(--fs-meta); color: var(--c-text-3); max-width: var(--w-text); }
.case-inline-fig { margin: 1.2em 0 1.4em; }
.case-inline-fig picture { display: block; overflow: hidden; border: 1px solid var(--slate-5); border-radius: var(--r-panel); background: var(--c-base); }
.case-inline-fig img { display: block; width: 100%; height: auto; background: var(--c-base); }
.case-inline-fig figcaption { margin-top: 10px; font-size: var(--fs-meta); color: var(--c-text-3); }
.prose .anon-demo { margin: 1.2em 0 1.4em; }
.prose .anon-demo p { color: var(--c-text); }
.badges .badge-link { color: inherit; text-decoration: underline; text-decoration-color: var(--c-accent-on-dark); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.badges .badge-link:hover { color: var(--c-on-dark); text-decoration-thickness: 2px; }
@media (min-width: 1024px) { .site-nav a:not(.btn), .site-nav .btn { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279px) {
.site-nav ul { gap: 0; }
.site-nav a:not(.btn) { padding-inline: 7px; font-size: .9375rem; }
}
.page-home .section-audience { background-color: var(--c-tint); }
.section-savings, .section-process-short { background-color: var(--c-base); }
.section-trust { background-color: var(--c-tint); --paper: var(--c-surface); }
@media (min-width: 1024px) { .facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts--3 .fact-value { min-width: 0; }
.savings-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 900px) { .savings-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.saving-tile { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s5); background: var(--c-surface); border: 1px solid var(--slate-5); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(14, 27, 44, .04); }
.saving-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; font-size: var(--fs-h4); line-height: var(--lh-tight); }
.saving-flag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--c-accent-wash); color: var(--c-accent-strong); font-family: var(--font); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0; }
.saving-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; margin: var(--s2) 0 0; }
.saving-num { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; line-height: 1.05; letter-spacing: var(--ls-num); color: var(--c-anchor); font-variant-numeric: tabular-nums; }
.saving-per { font-weight: 600; color: var(--c-text-2); }
.saving-extra { margin: 0; font-weight: 600; color: var(--c-text); }
.saving-basis { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--c-text-3); }
.saving-link { margin-top: auto; align-self: flex-start; }
.savings-how { max-width: var(--w-note); margin: var(--s6) 0 var(--s7); padding-left: var(--s5); border-left: 2px solid var(--c-accent); }
.savings-how h3 { margin: 0 0 .3em; font-size: var(--fs-h4); }
.savings-how p { margin: 0 0 .4em; color: var(--c-text-2); }
.section-savings .calc-big { flex-wrap: wrap; }
.section-savings .calc-result strong { min-width: 0; overflow-wrap: anywhere; }
.section-savings .calc-unit { margin-top: var(--s2); }
.calc-year { font-size: var(--fs-lead); color: var(--c-text); }
.calc-year b, .calc-hours b { color: var(--c-anchor); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-hours { color: var(--c-text-2); }
.calc-result.is-empty :is(.calc-year, .calc-hours) { color: var(--c-text-3); }
.case-bento { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 768px) { .case-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .case-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-bento > .case-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); }
.case-bento > .case-card--feature { grid-column: auto; }
@media (min-width: 768px) { .case-bento > .case-tile--wide { grid-column: span 2; } }
.case-bento .case-kicker { margin: 0 0 var(--s1); }
.case-bento .case-title { font-size: var(--fs-h4); line-height: var(--lh-tight); }
.case-bento .case-tile--wide .case-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.case-result { margin: 0; color: var(--ink-2); }
.case-bento .case-open { margin-top: auto; min-height: 0; padding-top: var(--s2); }
.ps-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 768px) { .ps-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.ps-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s4); align-content: start; padding-top: var(--s4); border-top: 1px solid var(--slate-6); }
.ps-step-num { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-dark); font-family: var(--font-display); font-weight: 700; line-height: 1; }
.ps-step h3 { margin: 0 0 .3em; font-size: var(--fs-h4); line-height: var(--lh-tight); }
.ps-step p { margin: 0; color: var(--c-text-2); }
.ps-more { margin: var(--s5) 0 0; }
.trust-grid { display: grid; gap: var(--s6); align-items: center; }
.trust-text, .trust-media { min-width: 0; }
.trust-text > :last-child { margin-bottom: 0; }
.trust-list { margin-bottom: var(--s4); }
.trust-pic { display: block; overflow: hidden; border-radius: var(--r-panel); border: 1px solid var(--slate-5); background: var(--c-tint); }
.trust-pic img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
@media (min-width: 1024px) {
.trust-grid.has-media { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.trust-grid.has-media .trust-text { grid-column: 1 / span 5; }
.trust-grid.has-media .trust-media { grid-column: 6 / -1; }
}
.package-option-line { margin: var(--s4) 0 0; padding: var(--s4) var(--s5); border-radius: var(--r-panel); background: var(--c-tint); color: var(--c-text); }
.package-option-line a, .price-note a { font-weight: 600; color: var(--c-accent); }
.section-savings .calc-result > .calc-line:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; }
.section-savings .calc-result > .calc-line:first-child .calc-unit { margin-top: 0; font-weight: 600; }
.calc-long { margin-top: -.2em; }
.savings-long { margin-top: var(--s7); }
.savings-long h3 { margin: 0 0 var(--s4); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.savings-long-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 900px) { .savings-long-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
.savings-long-list li { min-width: 0; padding-top: var(--s3); border-top: 2px solid var(--c-accent); color: var(--c-text-2); }
.savings-long-list strong { display: block; margin-bottom: .2em; color: var(--c-text); }
.savings-long-note { max-width: var(--w-note); margin: var(--s5) 0 0; color: var(--c-text-2); }
.savings-long-note .link-arrow { white-space: nowrap; }
.page-hero { padding-block: clamp(24px, 3vw, 48px) clamp(32px, 4vw, 56px); background-color: var(--c-base); border-bottom: 1px solid var(--slate-5); }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: .3em; }
.page-hero .lead { max-width: var(--w-note); margin: 0; }
.page-kicker { display: inline-flex; margin: 0 0 .6em; padding: 2px 10px; border-radius: 999px; background: var(--c-accent-wash); color: var(--c-accent-strong); font-size: var(--fs-meta); font-weight: 600; }
.breadcrumbs [aria-current] { color: var(--c-text-2); }
.page-toc ul { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.page-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--c-accent); }
.page-inner main > .section:nth-of-type(odd):not(.section-data):not(.section-contact) { background-color: var(--c-tint); --paper: var(--c-surface); }
.page-inner main > .section:nth-of-type(even):not(.section-data):not(.section-contact) { background-color: var(--c-base); --paper: var(--c-base); }
.training-grid { display: grid; gap: var(--s5); }
.training-head, .training-grid .check-list { min-width: 0; }
@media (min-width: 1024px) {
.training-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.training-head { grid-column: 1 / span 5; }
.training-grid .check-list { grid-column: 7 / -1; }
}
.training-head .section-intro { margin-bottom: 0; }
.hours-copy { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.hours-copy > * { margin: 0; }
.hours-copy .btn { justify-self: start; }
.hours-rate, .hours-read { color: var(--c-text-2); max-width: var(--w-note); }
.hours-read strong { color: var(--c-text); }
@media (min-width: 1024px) {
.hours-grid > .hours-copy { grid-column: 1 / span 7; grid-row: 1; }
.hours-grid:not(.has-media) > .hours-copy { grid-column: 1 / -1; }
}
.hours-details { padding: var(--s5) 0; border-bottom: 0; }
.hours-table-title { margin: 0 0 var(--s4); font-size: var(--fs-h4); }
.hours-table--money th:nth-child(1) { width: 20%; } .hours-table--money th:nth-child(2) { width: 18%; } .hours-table--money th:nth-child(3) { width: 20%; }
.hours-table--money .hours { width: 22%; font-size: var(--fs-body); }
.hours-table .money { text-align: right; font-weight: 700; color: var(--c-accent-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
.hours-table--money th:nth-child(1), .hours-table--money th:nth-child(2), .hours-table--money th:nth-child(3), .hours-table--money td.hours { width: auto; }
.hours-table .money { text-align: left; }
}
.section-packages--full .package-includes { margin-bottom: var(--s3); }
.section-packages--full .package-excludes { margin: auto var(--s5) 0; padding-top: var(--s3); border-top: 1px solid var(--slate-4); }
.section-packages--full .package-option { padding-bottom: var(--s4); }
@media (min-width: 1024px) { .section-packages--full .package-option .package-includes { columns: 2; column-gap: var(--s7); } }
.packages-head { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
.packages-head-text > :last-child { margin-bottom: 0; }
.packages-media { display: block; margin: 0; border-radius: var(--r-panel); overflow: hidden; background: var(--c-tint); }
.packages-media img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
@media (min-width: 1024px) {
.packages-head.has-media { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.packages-head.has-media .packages-head-text { grid-column: 1 / span 5; }
.packages-head.has-media .packages-media { grid-column: 6 / -1; }
}
.package-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 768px) { .package-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .package-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.package { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0 0 var(--s4); overflow: hidden; border: 1px solid var(--slate-6); border-radius: var(--r-panel); background: var(--c-surface); }
.package > :not(.package-head) { margin-inline: var(--s5); }
.package-head { margin-bottom: var(--s4); padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--slate-5); }
.package.is-recommended { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), 0 18px 40px -24px rgba(14, 27, 44, .45); }
.package.is-recommended .package-head { border-bottom: 0; color: #fff; background-color: var(--c-anchor); background-image: radial-gradient(90% 120% at 100% 0%, rgba(11, 122, 114, .35), transparent 70%); }
.package-flag { display: inline-block; margin: 0 0 var(--s3); padding: 2px 12px; border-radius: 999px; background: var(--c-accent-on-dark); color: var(--c-anchor); font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; }
.package h3 { margin: 0 0 var(--s3); font-size: var(--fs-h4); line-height: 1.3; }
.package.is-recommended h3 { color: #fff; }
.package-terms { margin: 0; }
.package-price { margin: 0; font-family: var(--font-display); font-size: clamp(1.3125rem, 1rem + .5vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: var(--ls-num); color: var(--c-anchor); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.package.is-recommended .package-price { color: #fff; }
.package-per { display: block; margin-top: 2px; font-family: var(--font); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0; color: var(--c-text-2); }
.package.is-recommended .package-per { color: var(--c-on-dark-2); }
.package-dur { margin: var(--s2) 0 0; font-size: var(--fs-meta); font-weight: 600; color: var(--c-text-3); }
.package.is-recommended .package-dur { color: var(--c-on-dark-2); }
.package-includes { margin: 0 0 var(--s3); padding-left: 1.15em; font-size: var(--fs-small); color: var(--ink-2); }
.package-includes li + li { margin-top: .4em; }
.package-more { margin-top: auto; }
.package .package-more:last-child { border-bottom: 0; }
.package-more > summary .more-title { font-size: var(--fs-meta); color: var(--c-anchor); }
.package-more .more-body .package-includes { margin-top: 0; }
.package-excludes { margin: 0; font-size: var(--fs-meta); color: var(--muted-strong); }
.package-excludes span { font-weight: 600; }
.package-option { margin-top: var(--s4); padding: var(--s4) var(--s5) 0; border-radius: var(--r-panel); background: var(--c-tint); }
.package-option-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); }
.package-option h3 { margin: 0; font-size: var(--fs-h4); line-height: 1.3; }
.package-option-terms { margin: 0; font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.package-option-terms b { color: var(--c-anchor); }
.package-option-terms .nowrap { white-space: nowrap; }
@media (min-width: 1200px) { .package-price { font-size: 1.25rem; } }
.package-option .package-more { margin-top: var(--s2); }
.package-option details.more:last-of-type { border-bottom: 0; }
@media (min-width: 1024px) { .package-option .package-includes { columns: 2; column-gap: var(--s7); } .package-option .package-includes li { break-inside: avoid; } }
.package-foot { display: grid; gap: var(--s4); margin-top: var(--s5); align-items: center; }
@media (min-width: 900px) { .package-foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); } }
.price-note { margin: 0; font-size: var(--fs-small); color: var(--ink-2); max-width: var(--w-note); }
.package-cta { justify-self: start; }
@media (max-width: 479px) { .package-cta { justify-self: stretch; } }
.diagnostic { display: grid; gap: 10px; margin-top: var(--s7); padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-panel); color: #fff; background-color: var(--c-anchor); background-image: var(--grain), radial-gradient(60% 120% at 100% 0%, rgba(11, 122, 114, .35), transparent 70%); background-size: 200px 200px, auto; background-repeat: repeat, no-repeat; }
@media (min-width: 900px) { .diagnostic { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s6); } .diagnostic h3, .diagnostic p { grid-column: 1; } .diagnostic .btn { grid-column: 2; grid-row: 1 / span 2; } }
.diagnostic h3 { margin: 0; color: #fff; }
.diagnostic p { margin: 0; max-width: var(--w-text); color: var(--on-dark-2); }
.diagnostic .btn { justify-self: start; margin-top: 6px; }
@media (min-width: 900px) { .diagnostic .btn { margin-top: 0; } }
@media (max-width: 479px) { .diagnostic .btn { justify-self: stretch; } }
.diagnostic :focus-visible { outline-color: var(--c-accent-on-dark); box-shadow: 0 0 0 5px rgba(14, 27, 44, .9); }
.compare-table { table-layout: fixed; font-size: var(--fs-meta); }
.compare-table th[scope="row"] { font-size: var(--fs-small); color: var(--ink); }
.compare-table td { color: var(--ink-2); }
.mark-val { display: block; }
.mark-flag { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--fs-meta); font-weight: 600; }
.mark-flag:last-child { margin-bottom: 0; }
.mark { flex: 0 0 auto; width: 18px; height: 18px; }
.mark-no { color: var(--muted-strong); }
.mark-part { color: var(--warn); }
.mark-yes { color: var(--ok); }
@media (min-width: 768px) {
.section-market .table-wrap { overflow: visible; }
.compare-table th[scope="row"] { width: 22%; }
.compare-table thead th { position: sticky; top: calc(var(--header-h) + 8px); z-index: 2; background: var(--c-tint); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--slate-7); }
.compare-table thead th.us { background: var(--c-anchor); color: #fff; border-radius: var(--r-m) var(--r-m) 0 0; box-shadow: none; }
.compare-table td.us { background: var(--c-surface); font-weight: 600; color: var(--c-text); }
.compare-table tbody tr:last-child td.us { border-radius: 0 0 var(--r-m) var(--r-m); }
}
@media (min-width: 1024px) { .compare-table { font-size: var(--fs-small); } }
@media (max-width: 767px) {
.compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.compare-table, .compare-table tbody { display: block; }
.compare-table tr { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line-soft); }
.compare-table tbody tr:last-child { border-bottom: 0; }
.compare-table th[scope="row"] { order: 0; display: block; padding: 0 0 2px; border: 0; font-size: var(--fs-h4); }
.compare-table td { display: block; order: 2; min-width: 0; padding: 0; border: 0; font-size: var(--fs-meta); line-height: 1.45; }
.compare-table td.us { order: 1; padding: 6px 12px; margin-bottom: 2px; border-radius: var(--r-s); background: var(--c-surface); font-weight: 600; color: var(--c-text); }
.compare-table td::before { content: attr(data-label); margin-right: .5em; font-weight: 600; color: var(--muted-strong); }
.compare-table td.us::before { color: var(--c-anchor); }
.section-market .market-note { font-size: var(--fs-small); }
.compare-table td .mark-flag { display: inline-flex; vertical-align: -3px; margin: 0 .45em 0 0; }
.compare-table td .mark-val { display: inline; }
}
.market-grid { display: grid; gap: var(--s6); align-items: start; }
.market-main { min-width: 0; }
@media (min-width: 1200px) {
.market-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.market-main { grid-column: 1 / span 8; }
.market-note { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 24px); }
}
.market-note { margin: 0; padding: var(--s6); border-radius: var(--r-panel); background: var(--c-surface); color: var(--c-text-2); max-width: var(--w-note); }
.market-note p { margin: 0; }
.market-note .market-note-title { margin-bottom: var(--s2); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); }
.market-more { margin-top: var(--s4); }
.market-more .more-title { color: var(--c-anchor); }
.compare-table .vh-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
.compare-table--more tbody tr:first-child td.us { border-radius: var(--r-m) var(--r-m) 0 0; }
}
.stack-grid { display: grid; gap: var(--s7); align-items: start; }
.stack-tech, .stack-people { min-width: 0; }
@media (min-width: 1024px) {
.stack-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.stack-tech { grid-column: 1 / span 7; }
.stack-people { grid-column: 9 / -1; }
}
.stack-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 640px) { .stack-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }
.stack-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule-mid); }
.stack-list li:last-child { border-bottom: 1px solid var(--rule-mid); }
@media (min-width: 640px) { .stack-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-mid); } }
.stack-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--c-accent-wash); color: var(--c-accent-strong); }
.stack-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.stack-list h3 { margin-bottom: .3em; font-size: var(--fs-h4); line-height: 1.3; }
.stack-list p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); text-wrap: wrap; }
.stack-note { margin: var(--s4) 0 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted-strong); max-width: var(--w-note); }
.stack-people { padding: var(--s6); border-radius: var(--r-panel); background: var(--c-tint); scroll-margin-top: var(--scroll-pad); }
.stack-people h3 { margin: 0 0 .4em; }
.stack-people-intro { margin: 0 0 var(--s4); color: var(--ink-2); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-bottom: 1px solid var(--rule-mid); }
.check-list li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--rule-mid); font-size: var(--fs-small); color: var(--ink); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent); }
.check-list li::after { content: ""; position: absolute; left: 5px; top: 19px; width: 12px; height: 12px; background: #fff; -webkit-mask: var(--ico-check) center/12px no-repeat; mask: var(--ico-check) center/12px no-repeat; }
.stack-list li { grid-template-columns: 24px minmax(0, 1fr); }
.stack-icon { width: 24px; height: 24px; margin-top: 2px; border-radius: 0; background: none; }
@media (min-width: 1024px) {
.stack-tech { grid-column: 1 / -1; }
.stack-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack-list li:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule-mid); }
}
.section-faq h2 { margin-bottom: var(--s6); }
.faq-grid { display: grid; gap: var(--s6); }
@media (min-width: 1024px) {
.faq-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.faq { grid-column: span 7; }
.faq-aside { grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + 16px); }
}
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 4px; list-style: none; cursor: pointer; font-size: var(--fs-h4); font-weight: 600; color: var(--ink); transition: padding-left var(--dur-base) var(--ease-io); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--c-accent-strong); }
.faq-icon { position: relative; flex: 0 0 auto; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid var(--slate-8); border-radius: 50%; background: var(--c-surface); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-anchor); transform: translate(-50%, -50%); }
.faq-icon::before { width: 13px; height: 2px; }
.faq-icon::after { width: 2px; height: 13px; transition: transform var(--dur-base) var(--ease-io); }
.faq-item summary:hover .faq-icon { background: var(--c-accent); border-color: var(--c-accent-strong); }
.faq-item summary:hover .faq-icon::before, .faq-item summary:hover .faq-icon::after { background: #fff; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-io); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-inner { min-height: 0; overflow: hidden; padding: 0 44px 18px 4px; color: var(--ink-2); transition: padding-left var(--dur-base) var(--ease-io); }
.faq-inner p { margin: 0; max-width: var(--w-text); }
.faq-item[open] { background: var(--c-surface); border-radius: var(--r-m); }
.faq-item.is-open summary, .faq-item.is-open .faq-inner { padding-left: 16px; }
@media (scripting: none) {
.faq-item[open] .faq-body { grid-template-rows: 1fr; }
.faq-item[open] summary, .faq-item[open] .faq-inner { padding-left: 16px; }
}
.faq-aside { align-self: start; padding: var(--s6); border-radius: var(--r-panel); background-color: var(--c-anchor); background-image: var(--grain), radial-gradient(80% 100% at 100% 0%, rgba(11, 122, 114, .3), transparent 70%); background-size: 200px 200px, auto; background-repeat: repeat, no-repeat; color: #fff; }
.faq-aside h3 { margin-bottom: .4em; color: #fff; }
.faq-aside p { margin: 0 0 18px; font-size: var(--fs-small); color: var(--on-dark-2); }
.faq-aside :focus-visible { outline-color: var(--c-accent-on-dark); box-shadow: 0 0 0 5px rgba(14, 27, 44, .9); }
.faq-icon { border: 0; border-radius: 0; background: none; }
.faq-icon::before { width: 16px; border-radius: 1px; }
.faq-icon::after { height: 16px; border-radius: 1px; }
.faq-item summary:hover .faq-icon { background: none; }
.faq-item summary:hover .faq-icon::before, .faq-item summary:hover .faq-icon::after { background: var(--c-accent-strong); }
.section-contact {
position: relative; isolation: isolate; color: #fff;
background-color: var(--c-anchor);
background-image: var(--grain), radial-gradient(50% 80% at 90% 20%, rgba(11, 122, 114, .30), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(46, 84, 150, .22), transparent 70%);
background-size: 200px 200px, auto, auto; background-repeat: repeat, no-repeat, no-repeat;
--wire-c: var(--on-dark-3); --wire-dot: var(--amber); --flow-bg: var(--c-anchor-3);
--status-c: var(--on-dark-2); --status-done: var(--amber); --link-c: var(--amber);
}
.section-contact > .container { position: relative; z-index: 1; }
.section-contact h2 { color: #fff; }
.section-contact .section-intro { color: var(--on-dark-2); }
.contact-inner { max-width: var(--w-max); display: grid; gap: var(--s6); }
.contact-main { max-width: var(--w-note); min-width: 0; }
.contact-note { margin: var(--s5) 0 0; font-size: var(--fs-small); color: var(--on-dark-2); max-width: var(--w-note); }
.contact-media picture { display: block; }
.contact-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
@media (max-width: 1023px) { .contact-media { max-width: 520px; margin-block: calc(-1 * var(--s4)); } .contact-media img { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) {
.contact-inner { grid-template-columns: 8fr 4fr; column-gap: var(--s7); align-items: start; }
.contact-inner.has-media { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); align-items: center; }
.contact-inner.has-media .contact-main { grid-column: 1 / span 7; }
.contact-inner.has-media .contact-media { grid-column: 8 / -1; margin-block: calc(-1 * var(--s6)); }
.contact-inner.has-media .after-card { grid-column: 1 / -1; }
}
.after-card { padding: 0; }
.after-card h3 { margin-bottom: 14px; font-size: var(--fs-h4); font-weight: 600; color: var(--on-dark); }
.contact-inner:not(.has-media) .after-card { padding: var(--s6); border-radius: var(--r-panel); background: var(--c-anchor-2); }
.contact-inner.has-media .after-card { padding-top: var(--s6); border-top: 1px solid var(--c-line-dark); }
.after-list { counter-reset: aft; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.after-list li { counter-increment: aft; position: relative; padding-left: 40px; min-height: 26px; font-size: var(--fs-small); color: var(--on-dark-2); }
.after-list li::before { content: counter(aft); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent-on-dark); color: var(--c-anchor); font-size: var(--fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; }
.after-list li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 31px; bottom: -9px; border-left: 1.5px dashed var(--wire-c); }
@media (min-width: 768px) {
.contact-inner.has-media .after-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); }
.contact-inner.has-media .after-list li:not(:last-child)::after { content: none; }
}
@media (min-width: 1024px) {
.contact-inner.has-media .after-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.contact-inner.has-media .after-card h3 { grid-column: 1 / span 2; margin: 0; }
.contact-inner.has-media .after-list { grid-column: 3 / -1; }
}
.modal { border: 0; padding: 0; border-radius: var(--r-panel); width: min(560px, calc(100% - 32px)); background: var(--c-surface); color: var(--c-text); box-shadow: 0 24px 64px -16px rgba(14, 27, 44, .45); }
.modal::backdrop { background: rgba(14, 27, 44, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-inner { padding: clamp(20px, 4vw, 32px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head h2 { margin: 0; }
.modal-close { width: 44px; height: 44px; border: 1px solid var(--slate-6); border-radius: var(--r-ctl); background: var(--c-surface); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--c-text); flex: 0 0 auto; }
.modal-close:hover { background: var(--slate-3); border-color: var(--slate-8); }
.modal-stub { padding: 12px 14px; background: var(--c-accent-wash); border-radius: var(--r-ctl); color: var(--c-text-2); font-size: var(--fs-small); }
.modal-form .field { margin-bottom: 12px; }
.modal-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: var(--fs-small); }
.modal-form input, .modal-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--slate-8); border-radius: var(--r-ctl); font: inherit; background: var(--c-surface); color: var(--c-text); min-height: 48px; }
.modal-form input:focus-visible, .modal-form textarea:focus-visible { border-color: var(--c-accent); }
.modal-form textarea { min-height: 96px; resize: vertical; }
.modal-form input:disabled, .modal-form textarea:disabled { background: var(--slate-2); color: var(--c-text-3); }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.modal-hint { font-size: var(--fs-meta); color: var(--c-text-3); }
.site-footer { background: #09131F; border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 64px 40px; color: var(--c-on-dark-2); }
.footer-inner { display: grid; gap: var(--s6); }
.footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: 4fr 2.4fr 2.4fr 3.2fr; column-gap: var(--s6); } }
.footer-brand .brand-mark { display: block; width: 32px; height: 32px; margin-bottom: 14px; color: #fff; }
.footer-brand .brand-mark svg { width: 100%; height: 100%; }
.footer-brand .brand-mark .bm-core { fill: var(--c-accent-on-dark); }
.footer-brand .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; margin-bottom: 8px; color: #fff; }
.footer-tagline { color: var(--c-on-dark-2); margin: 0; max-width: 34em; font-size: var(--fs-small); }
.footer-nav h2, .footer-meta h2 { font-family: var(--font); font-size: var(--fs-meta); font-weight: 600; line-height: var(--lh-tight); letter-spacing: 0; max-width: none; hyphens: none; -webkit-hyphens: none; color: var(--c-on-dark-3); margin: 0 0 12px; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav a { color: var(--c-on-dark-2); font-size: var(--fs-small); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; min-width: 44px; line-height: 1.35; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-meta p { margin: 0 0 6px; color: var(--c-on-dark-2); font-size: var(--fs-small); }
.footer-note { font-size: var(--fs-meta); color: var(--c-on-dark-3); }
@media (max-width: 767px) { body:has(.dock) .site-footer { padding-bottom: calc(40px + var(--dock-h, 64px) + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1023px) { .footer-brand, .footer-meta { grid-column: 1 / -1; } }
.footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; align-content: start; }
.footer-brand .brand-mark { width: 24px; height: 24px; margin-bottom: 0; }
.footer-brand .brand-name { margin-bottom: 0; font-size: 1.1875rem; }
.footer-tagline { grid-column: 1 / -1; margin-top: 12px; }
.case-hero {
position: relative; isolation: isolate; color: var(--c-on-dark);
padding-block: clamp(28px, 4vw, 56px) clamp(32px, 4vw, 56px);
background-color: var(--c-anchor);
background-image: var(--grain), var(--mesh-dark);
background-size: 200px 200px, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat;
--ink: #fff; --ink-2: var(--c-on-dark-2); --muted: var(--c-on-dark-3); --muted-strong: var(--c-on-dark-2);
--navy: #fff; --navy-600: var(--c-on-dark-3); --rule: rgba(255, 255, 255, .28); --rule-mid: rgba(255, 255, 255, .16); --line-soft: rgba(255, 255, 255, .10);
--paper-2: rgba(255, 255, 255, .05); --ok: var(--c-accent-on-dark);
--wire-c: var(--c-on-dark-3); --wire-dot: var(--c-accent-on-dark); --flow-bg: var(--c-anchor);
--status-c: var(--c-on-dark-2); --status-done: var(--c-accent-on-dark); --link-c: var(--c-accent-on-dark);
}
.case-hero::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: var(--dots-dark); background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 30%, #000 10%, transparent 72%);
mask-image: radial-gradient(ellipse 60% 70% at 78% 30%, #000 10%, transparent 72%);
}
.page-case .case-hero { margin-top: calc(-1 * (var(--header-h) + 1px + env(safe-area-inset-top, 0px))); padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(20px, 3vw, 48px)); }
.case-hero :is(.win, .shot-win, .mock) {
--ink: var(--c-text); --ink-2: var(--c-text-2); --muted: var(--c-text-3); --muted-strong: var(--c-text-3);
--navy: #13263D; --navy-600: #52607A; --rule: var(--slate-9); --rule-mid: var(--slate-7); --line-soft: var(--slate-5);
--paper-2: var(--c-tint); --paper: var(--c-base); color: var(--c-text);
}
.case-hero .shot-win { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -24px rgba(0, 0, 0, .6); }
.case-hero .shot-cap { color: var(--c-on-dark-3); }
.case-hero .breadcrumbs a { color: var(--c-on-dark-2); }
.case-hero .breadcrumbs a:hover { color: #fff; }
@media (min-width: 1024px) { .case-hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s7); row-gap: var(--s6); align-items: start; } }
.breadcrumbs { margin: 0 0 .6em; font-size: var(--fs-meta); color: var(--muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--muted); }
.case-hero .case-kicker { margin: 0 0 .6em; font-size: var(--fs-meta); font-weight: 600; color: var(--c-accent-on-dark); background: rgba(79, 209, 197, .12); }
.case-hero h1 { font-size: var(--fs-h1); }
.case-hero .lead { max-width: var(--w-note); }
.case-ba-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .5em; margin: var(--s5) 0 0; }
.case-ba-line s { font-size: var(--fs-h3); font-weight: 600; color: var(--ink-2); text-decoration-thickness: 2px; text-decoration-color: var(--rule); }
.case-ba-line .ba-arrow { font-size: var(--fs-h3); color: var(--navy-600); }
.case-ba-line .ba-now { margin: 0; font-size: var(--fs-h2); }
.case-hero-media { margin-top: var(--s5); }
@media (min-width: 1024px) { .case-hero-media { margin-top: 0; } }
.case-photo { display: block; margin: 0; padding: var(--s3); overflow: hidden; border-radius: var(--r-panel); background: var(--paper-2); border: 1px solid var(--line-soft); }
.case-photo img { border-radius: var(--r-m); }
.case-photo img { width: 100%; height: auto; }
.case-steps { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); }
.case-step { position: relative; min-width: 0; padding-top: var(--s4); border-top: 1px solid var(--rule-mid); }
.case-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.case-step p:last-child { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
@media (min-width: 768px) {
.case-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s7); }
.case-step + .case-step::before { content: ""; position: absolute; top: calc(var(--s4) + .55em); left: calc(-1 * var(--s7) + 10px); width: calc(var(--s7) - 20px); border-top: 1.5px dashed var(--wire-c); }
.case-step + .case-step::after { content: ""; position: absolute; top: calc(var(--s4) + .55em - 4px); left: -18px; width: 8px; height: 8px; border-top: 1.5px solid var(--wire-c); border-right: 1.5px solid var(--wire-c); transform: rotate(45deg); }
}
@media (min-width: 1024px) { .case-steps { grid-column: 1 / -1; margin-top: 0; } }
.case-mock, .case-media-page { margin: 0; display: flex; flex-direction: column; }
.case-media-page { margin-block: var(--s6) 0; }
.case-mock figcaption, .case-media-page figcaption { order: 2; margin-top: 10px; font-size: var(--fs-meta); color: var(--muted); max-width: var(--w-text); }
.case-frame-page { display: grid; place-items: center; padding: clamp(16px, 3vw, 40px); background-color: var(--paper-2); border-radius: var(--r-m); }
.case-media-page .mock { max-width: 720px; }
.case-frame-page.is-video { padding: 0; background-color: transparent; }
.case-layout { display: grid; gap: var(--s6); padding-block: var(--s7) var(--s4); }
.case-aside { padding-top: var(--s4); border-top: 1px solid var(--slate-7); }
.case-aside .metrics { margin-bottom: var(--s5); }
.case-aside-cta { width: 100%; }
.tag-line { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--muted); }
.tag-line li + li::before { content: "·"; margin: 0 .45em; }
@media (max-width: 767.98px) {
.metrics-aside { grid-template-columns: minmax(0, 1fr); gap: 0; }
.metrics-aside li { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); column-gap: var(--s4); align-items: baseline; padding: var(--s2) 0; border-left: 0; border-top: 1px solid var(--line-soft); }
.metrics-aside li:first-child { border-top: 0; }
}
@media (min-width: 1024px) {
.case-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); align-items: start; }
.case-aside { position: sticky; top: calc(var(--header-h) + 16px); }
.metrics-aside { grid-template-columns: 1fr; }
.metrics-aside li { padding: var(--s3) 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
.metrics-aside li:first-child { padding-top: 0; border-top: 0; }
.metrics-aside .metric-num { font-size: var(--fs-quote); }
}
.prose { max-width: var(--w-text); }
.prose h2 { font-size: var(--fs-h2); max-width: none; margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.2em 0; padding-left: 24px; border-left: 1px solid var(--rule-mid); color: var(--ink-2); }
.prose blockquote p { margin: 0; }
.prose blockquote:first-of-type { margin: 1.8em 0 1.2em; padding: var(--s4) 0; border-left: 0; border-block: 1px solid var(--rule-mid); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-quote); line-height: 1.35; color: var(--ink); }
.case-cta { margin-top: var(--s7); padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-panel); background-color: var(--c-anchor); background-image: var(--grain), var(--mesh-dark); background-size: 200px 200px, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat; color: #fff; }
.case-cta h2 { max-width: none; color: #fff; }
.case-cta p { color: var(--on-dark-2); max-width: var(--w-text); }
.case-cta .cta-row { margin-top: 1em; }
.case-cta :focus-visible { outline-color: var(--c-accent-on-dark); box-shadow: 0 0 0 5px rgba(14, 27, 44, .9); }
.case-nav { margin-block: var(--s7) var(--s8); }
.case-nav ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule-mid); }
.case-nav li { border-top: 1px solid var(--rule-mid); }
.case-nav-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); min-height: 56px; padding: 12px 4px; color: var(--ink); text-decoration: none; }
@media (min-width: 768px) { .case-nav-link { grid-template-columns: 12rem minmax(0, 1fr) auto; } }
.case-nav-kicker { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.case-nav-title { font-weight: 600; }
.case-nav-arrow { width: 8px; height: 8px; margin-right: 6px; border-top: 2px solid var(--link-c); border-right: 2px solid var(--link-c); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.case-nav-link:hover { color: var(--navy); }
.case-nav-link:hover .case-nav-arrow { transform: translateX(4px) rotate(45deg); }
@media (max-width: 767px) { .case-nav-kicker { grid-column: 1 / -1; } }
.case-tech { margin: 0 0 var(--s5); }
.case-tech .more-title { font-size: var(--fs-meta); color: var(--ink-2); }
.tag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted-strong); }
@media (min-width: 1024px) { .case-hero-media { align-self: center; } }
.case-photo { padding: 0; border: 0; background: none; }
.case-photo img { border-radius: var(--r-panel); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.case-media-page .mock { max-width: 960px; }
.case-media-page .case-video { max-width: 880px; margin-inline: auto; }
.case-media-page:has(.is-video) figcaption { width: 100%; max-width: 880px; margin-inline: auto; }
.case-flow { padding-top: var(--s7); }
.case-flow-title { margin: 0 0 var(--s5); font-size: var(--fs-h2); }
.case-flow-grid { display: grid; gap: var(--s6); align-items: start; }
.case-flow-grid > * { min-width: 0; }
.case-flow-grid:not(.has-media) .case-flow-scheme { max-width: 760px; }
@media (min-width: 1200px) {
.case-flow-grid.has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s7); }
}
.case-flow-scheme { margin: 0; }
.case-flow-cap { margin: var(--s4) 0 0; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted); max-width: 52ch; }
.case-flow .ba {
grid-template-columns: minmax(0, 1.2fr) 2.5rem minmax(0, 1fr);
grid-template-areas: "before wire head" "before wire now" "flow flow flow";
column-gap: var(--s2); row-gap: 0; align-items: start;
}
.case-flow .ba-after { display: contents; }
.case-flow .ba-before { grid-area: before; padding: var(--s3) var(--s4) var(--s4); }
.case-flow .ba-after > .ba-head { grid-area: head; }
.case-flow .ba-now { grid-area: now; margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); overflow-wrap: normal; }
.case-flow .ba-was { font-size: var(--fs-h4); overflow-wrap: normal; }
.case-flow .ba-wire { grid-area: wire; align-self: center; margin: 0; min-height: 0; }
.case-flow .ba-wire .wire { rotate: none; width: 40px; }
.case-flow .flow { grid-area: flow; margin-top: var(--s5); }
.case-flow .flow .win { width: 100%; max-width: 440px; }
.ba-photo { display: none; }
@media (min-width: 768px) {
.case-flow .ba-before:has(.ba-photo) { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "head head" "photo was"; column-gap: var(--s3); align-items: center; }
.case-flow .ba-before .ba-head { grid-area: head; }
.case-flow .ba-before .ba-was { grid-area: was; }
.case-flow .ba-photo {
grid-area: photo; display: block; aspect-ratio: 1; border-radius: var(--r-s);
background-color: var(--c-base); background-repeat: no-repeat; background-size: 150% auto; background-position: 50% 52%;
background-image: url(/assets/img/photo/hero-plate-1200.97b0aba03b.jpg);
background-image: image-set(url(/assets/img/photo/hero-plate-1200.9e064fe271.avif) type("image/avif"), url(/assets/img/photo/hero-plate-1200.a1f738d45c.webp) type("image/webp"));
background-blend-mode: multiply;
}
}
.flow-ans { display: flex; align-items: center; gap: 10px; max-width: 440px; margin: 0; padding: 8px 10px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-s); box-shadow: var(--e1); font-size: var(--fs-meta); font-weight: 600; line-height: 1.3; color: var(--muted-strong); }
.flow-ans .ans-thumb { width: 24px; height: 32px; background-position: 4px 7px, 4px 13px, 4px 19px; background-size: 14px 2px, 14px 2px, 10px 2px; }
@media (max-width: 767px) {
.case-flow .flow .win, .case-flow .flow-ans { display: none; }
.case-flow .ba { grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr); }
.case-flow .ba-now { font-size: var(--fs-h3); font-family: var(--font); font-weight: 600; letter-spacing: var(--ls-h3); line-height: 1.2; }
.case-flow .ba-was { font-size: var(--fs-body, 1rem); }
}
@media (max-width: 359px) { .case-flow .ba-now { font-size: 1.125rem; } }
.case-flow-media { margin: 0; display: flex; flex-direction: column; }
.case-flow-media figcaption { margin-top: 10px; font-size: var(--fs-meta); line-height: var(--lh-tight); color: var(--muted); max-width: var(--w-text); }
.case-flow-media .mock { max-width: 720px; }
.case-flow-media .case-video { max-width: 880px; }
@media (min-width: 1200px) { .case-flow-media { position: sticky; top: calc(var(--header-h) + 16px); } }
html.reveal-on [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
html.reveal-on .audience-list li:nth-child(2).is-in, html.reveal-on .timeline li:nth-child(2).is-in, html.reveal-on .stack-list li:nth-child(2).is-in, html.reveal-on .package:nth-child(2).is-in { transition-delay: var(--stagger); }
html.reveal-on .audience-list li:nth-child(3).is-in, html.reveal-on .timeline li:nth-child(3).is-in, html.reveal-on .stack-list li:nth-child(3).is-in, html.reveal-on .package:nth-child(3).is-in { transition-delay: calc(var(--stagger) * 2); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.reveal-on [data-reveal] { opacity: 1; transform: none; }
}
@media print {
.site-header, .site-footer, .nav-toggle, .modal, .skip-link, .dock { display: none !important; }
html.reveal-on [data-reveal] { opacity: 1; transform: none; }
body { background: #fff; }
.win, .section { box-shadow: none; }
}
.section-404 { padding-block: var(--sp-base) var(--sp-air); background-color: var(--c-base); }
.nf-grid { display: grid; gap: var(--s7); align-items: center; }
.nf-text { min-width: 0; }
@media (min-width: 900px) { .nf-grid.has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s7); } }
.page-404 .num-404 { display: inline-block; margin: 0 0 var(--s4); padding: 4px 14px; border-radius: 999px; background: var(--c-accent-wash); color: var(--c-accent-strong); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); line-height: 1.5; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.page-404 h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 14ch; margin: 0 0 var(--s4); }
.page-404 .lead { margin: 0 0 var(--s6); font-size: var(--fs-lead); color: var(--c-text-2); max-width: 40ch; }
.nf-media { display: block; border-radius: var(--r-panel); overflow: hidden; background: var(--c-tint); }
.nf-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 899px) { .nf-media { max-width: 560px; } }
.page-404 .cta-row { margin-top: 0; }