/* 00-tokens.css */
@layer reset, tokens, base, layout, components, chrome, home, pages, motion, utilities, print;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend, hr { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; }
fieldset { border: 0; min-width: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); }
[hidden] { display: none !important; }
@media screen and (min-width: 768px), screen and (max-height: 480px) {
.chat-launch--nav[hidden] { display: inline-flex !important; visibility: hidden; }
}
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
dialog { color: inherit; }
}
@font-face { font-family: "Inter Fallback Segoe Label"; src: local("Segoe UI"); font-weight: 100 550; size-adjust: 111.4%; ascent-override: 86.96%; descent-override: 21.65%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Label"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 109%; ascent-override: 88.88%; descent-override: 22.13%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Small"; src: local("Segoe UI"); font-weight: 100 550; size-adjust: 107.6%; ascent-override: 90.03%; descent-override: 22.42%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Small"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 106.7%; ascent-override: 90.79%; descent-override: 22.61%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe"; src: local("Segoe UI"); font-weight: 100 450; size-adjust: 106.1%; ascent-override: 91.31%; descent-override: 22.73%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe"; src: local("Segoe UI"); font-weight: 451 550; size-adjust: 109.2%; ascent-override: 88.71%; descent-override: 22.09%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 105.6%; ascent-override: 91.74%; descent-override: 22.84%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe 19"; src: local("Segoe UI"); font-weight: 100 550; size-adjust: 105%; ascent-override: 92.26%; descent-override: 22.97%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe 19"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 104.6%; ascent-override: 92.61%; descent-override: 23.06%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe 21"; src: local("Segoe UI"); font-weight: 100 550; size-adjust: 104%; ascent-override: 93.15%; descent-override: 23.19%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe 21"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 103.8%; ascent-override: 93.33%; descent-override: 23.24%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Lead"; src: local("Segoe UI"); font-weight: 100 550; size-adjust: 100.2%; ascent-override: 96.68%; descent-override: 24.07%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Lead"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 101.6%; ascent-override: 95.35%; descent-override: 23.74%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Display"; src: local("Segoe UI"); font-weight: 100 550; size-adjust: 98.1%; ascent-override: 98.75%; descent-override: 24.59%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Segoe Display"; src: local("Segoe UI Semibold"), local("Segoe UI Bold"); font-weight: 551 900; size-adjust: 99.6%; ascent-override: 97.26%; descent-override: 24.22%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Label"; src: local("Roboto"); font-weight: 100 550; size-adjust: 112.1%; ascent-override: 86.42%; descent-override: 21.52%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Label"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 110.4%; ascent-override: 87.75%; descent-override: 21.85%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Small"; src: local("Roboto"); font-weight: 100 550; size-adjust: 108.3%; ascent-override: 89.45%; descent-override: 22.27%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Small"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 108.1%; ascent-override: 89.62%; descent-override: 22.31%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto"; src: local("Roboto"); font-weight: 100 450; size-adjust: 106.7%; ascent-override: 90.79%; descent-override: 22.61%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto"; src: local("Roboto"); font-weight: 451 550; size-adjust: 109.8%; ascent-override: 88.23%; descent-override: 21.97%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 106.8%; ascent-override: 90.71%; descent-override: 22.58%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto 19"; src: local("Roboto"); font-weight: 100 550; size-adjust: 105.6%; ascent-override: 91.74%; descent-override: 22.84%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto 19"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 105.9%; ascent-override: 91.48%; descent-override: 22.78%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto 21"; src: local("Roboto"); font-weight: 100 550; size-adjust: 104.6%; ascent-override: 92.61%; descent-override: 23.06%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto 21"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 105.1%; ascent-override: 92.17%; descent-override: 22.95%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Lead"; src: local("Roboto"); font-weight: 100 550; size-adjust: 100.8%; ascent-override: 96.11%; descent-override: 23.93%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Lead"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 102.9%; ascent-override: 94.14%; descent-override: 23.44%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Display"; src: local("Roboto"); font-weight: 100 550; size-adjust: 98.7%; ascent-override: 98.15%; descent-override: 24.44%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Roboto Display"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 551 900; size-adjust: 100.5%; ascent-override: 96.39%; descent-override: 24.00%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Label"; src: local("Arial"); font-weight: 100 550; size-adjust: 110.1%; ascent-override: 87.99%; descent-override: 21.91%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Label"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 103.7%; ascent-override: 93.42%; descent-override: 23.26%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Small"; src: local("Arial"); font-weight: 100 550; size-adjust: 106.3%; ascent-override: 91.13%; descent-override: 22.69%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Small"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 101.5%; ascent-override: 95.44%; descent-override: 23.76%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial"; src: local("Arial"); font-weight: 100 450; size-adjust: 105.2%; ascent-override: 92.09%; descent-override: 22.93%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial"; src: local("Arial"); font-weight: 451 550; size-adjust: 105.9%; ascent-override: 91.48%; descent-override: 22.78%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 100%; ascent-override: 96.88%; descent-override: 24.12%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial 19"; src: local("Arial"); font-weight: 100 550; size-adjust: 104.2%; ascent-override: 92.97%; descent-override: 23.15%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial 19"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 99.3%; ascent-override: 97.56%; descent-override: 24.29%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial 21"; src: local("Arial"); font-weight: 100 550; size-adjust: 103.1%; ascent-override: 93.96%; descent-override: 23.39%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial 21"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 98.5%; ascent-override: 98.35%; descent-override: 24.49%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Lead"; src: local("Arial"); font-weight: 100 550; size-adjust: 99.4%; ascent-override: 97.46%; descent-override: 24.27%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Lead"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 96.3%; ascent-override: 100.60%; descent-override: 25.05%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Display"; src: local("Arial"); font-weight: 100 550; size-adjust: 97.3%; ascent-override: 99.56%; descent-override: 24.79%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback Arial Display"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 94.1%; ascent-override: 102.95%; descent-override: 25.63%; line-gap-override: 0%; }
@layer tokens {
:root {
--c-black: #000000;
--c-ink-1: #1d1d1f;
--c-ink-2: #2c2c2e;
--c-ink-3: #424245;
--c-gray-1: #6e6e73;
--c-gray-2: #86868b;
--c-gray-3: #a1a1a6;
--c-gray-4: #d2d2d7;
--c-gray-5: #e8e8ed;
--c-gray-6: #f5f5f7;
--c-white: #ffffff;
--c-red: #d70015;
--c-red-hover: #e0001a;
--c-red-press: #bf0013;
--c-red-text: #c4001a;
--c-red-on-ink: #ff6961;
--c-red-tint: #fff1f2;
--c-red-glow: rgba(215, 0, 21, .22);
--c-error: var(--c-red-text);
--c-focus: #0071e3;
--c-focus-on-ink: #2997ff;
--c-success: #1d6b34; --c-success-tint: #e9f6ec;
--c-warning: #8a3b00; --c-warning-tint: #fff4e5;
--font-web: "Inter";
--font-sans: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe", "Inter Fallback Roboto", "Inter Fallback Arial", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-small: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe Small", "Inter Fallback Roboto Small", "Inter Fallback Arial Small", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-label: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe Label", "Inter Fallback Roboto Label", "Inter Fallback Arial Label", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-19: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe 19", "Inter Fallback Roboto 19", "Inter Fallback Arial 19", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-21: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe 21", "Inter Fallback Roboto 21", "Inter Fallback Arial 21", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-lead: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe Lead", "Inter Fallback Roboto Lead", "Inter Fallback Arial Lead", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-display: -apple-system, BlinkMacSystemFont, var(--font-web), "Inter Fallback Segoe Display", "Inter Fallback Roboto Display", "Inter Fallback Arial Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px;
--s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px; --s-14: 160px;
--container: 1264px;
--container-narrow: 784px;
--container-form: 864px;
--gutter: 20px;
--section-y: var(--s-11);
--head-gap: var(--s-8);
--grid-gap: var(--s-3);
--r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-pill: 980px;
--bw: 1px;
--shadow-soft: 0 20px 40px -24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .04);
--shadow-panel: 0 24px 40px -24px rgba(0, 0, 0, .18);
--shadow-float: 0 12px 32px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08);
--shadow-inset: inset 0 0 0 1px rgba(0, 0, 0, .06);
--glass-light: rgba(255, 255, 255, .72);
--glass-light-solid: rgba(255, 255, 255, .96);
--glass-dark: rgba(22, 22, 23, .72);
--glass-filter: saturate(180%) blur(20px);
--backdrop-dim: rgba(232, 232, 237, .4);
--backdrop-filter: blur(20px);
--z-content: 0; --z-raised: 1; --z-pin-ui: 10;
--z-ribbon: 40; --z-localnav: 41; --z-callbar: 42; --z-chat-launch: 45;
--z-mega-backdrop: 48; --z-nav: 50; --z-mmenu: 60; --z-chat: 70; --z-toast: 80; --z-skip: 100;
--nav-h: 52px;
--ribbon-h: 40px;
--localnav-h: 52px;
--chrome-h: calc(var(--nav-h) + var(--ribbon-h));
--callbar-h: 68px;
--ease-apple: cubic-bezier(.28, .11, .32, 1);
--ease-intro: cubic-bezier(.16, 1, .3, 1);
--ease-sheet: cubic-bezier(.65, 0, .35, 1);
--dur-press: 100ms; --dur-fast: 200ms; --dur-base: 300ms; --dur-sheet: 420ms;
--dur-reveal: 600ms; --dur-zoom: 800ms; --dur-word: 900ms; --dur-intro: 1100ms;
--dur-route-out: 180ms; --dur-route-in: 380ms;
--stagger: 60ms; --stagger-word: 70ms; --stagger-char: 45ms; --stagger-menu: 28ms; --stagger-mega: 40ms;
--reveal-y: 24px;
color-scheme: only light;
}
html.font-late { --font-web: "Inter Late"; }
@media (min-width: 768px)  { :root { --gutter: 32px; --section-y: var(--s-13); --head-gap: 56px; --grid-gap: var(--s-4); } }
@media (min-width: 1024px) { :root { --section-y: var(--s-14); --grid-gap: var(--s-6); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root { --glass-light: var(--glass-light-solid); --glass-dark: rgba(22, 22, 23, .96); }
}
html.ribbon-off { --ribbon-h: 0px; }
html[data-localnav] { --ribbon-h: 0px; --chrome-h: calc(var(--nav-h) + var(--localnav-h)); }
html[data-chrome="minimal"], html[data-chrome="none"] { --nav-h: 0px; --ribbon-h: 0px; }
:root,
[data-tone="white"] {
--bg: var(--c-white);
--fg: var(--c-ink-1);
--fg-body: var(--c-ink-3);
--fg-muted: var(--c-gray-1);
--fg-subtle: var(--c-gray-2);
--hairline: var(--c-gray-4);
--hairline-soft: rgba(0, 0, 0, .08);
--card: var(--c-gray-6);
--card-raised: var(--c-white);
--chip: var(--c-gray-6);
--chip-hover: var(--c-gray-5);
--ghost: var(--c-gray-5);
--ghost-fg: var(--c-ink-1);
--link: var(--c-red-text);
--btn: var(--c-red); --btn-hover: var(--c-red-hover); --btn-press: var(--c-red-press); --btn-fg: #fff;
--btn-2: var(--c-red-text); --btn-2-hover-bg: rgba(215, 0, 21, .06);
--control-border: var(--c-gray-2);
--focus: var(--c-focus);
color-scheme: only light;
}
[data-tone="surface"] {
--bg: var(--c-gray-6);
--card: var(--c-white);
--card-raised: var(--c-white);
--chip: var(--c-white);
--chip-hover: var(--c-gray-5);
}
[data-tone="ink"] {
--bg: var(--c-black);
--fg: var(--c-gray-6);
--fg-body: var(--c-gray-4);
--fg-muted: var(--c-gray-3);
--fg-subtle: var(--c-gray-2);
--hairline: rgba(255, 255, 255, .16);
--hairline-soft: rgba(255, 255, 255, .10);
--card: var(--c-ink-1);
--card-raised: var(--c-ink-2);
--chip: rgba(255, 255, 255, .10);
--chip-hover: rgba(255, 255, 255, .16);
--ghost: rgba(255, 255, 255, .12);
--ghost-fg: var(--c-gray-6);
--link: var(--c-red-on-ink);
--btn-2: var(--c-red-on-ink); --btn-2-hover-bg: rgba(255, 105, 97, .12);
--focus: var(--c-focus-on-ink);
color-scheme: dark;
}
@media (prefers-contrast: more) {
:root, [data-tone="white"], [data-tone="surface"] { --fg-muted: var(--c-ink-3); --hairline: var(--c-gray-2); --glass-light: #fff; }
[data-tone="ink"] { --fg-muted: var(--c-gray-4); --hairline: var(--c-gray-2); }
}
}
/* 10-base.css */
@layer base {
html {
font-family: var(--font-sans); font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto;
text-rendering: optimizeLegibility; scroll-padding-top: calc(var(--chrome-h) + var(--s-4));
scroll-padding-bottom: 88px;
background: var(--c-white);
}
body {
font-size: 17px; line-height: 1.5; letter-spacing: -0.013em; color: var(--fg); background: var(--c-white);
padding-top: var(--nav-h); min-height: 100vh; overflow-x: clip;
}
@media (max-width: 767px) { html[data-callbar] body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom)); } }
@media (max-height: 480px) { html[data-callbar] body { padding-bottom: 0; } }
html:has(dialog.lightbox[open]) { overflow: hidden; scrollbar-gutter: stable; background: #141414; }
html.menu-open { overflow: hidden; }
main { display: block; outline: none; }
[data-tone] { background-color: var(--bg); color: var(--fg); }
.t-display { font-size: clamp(44px, 8vw, 96px); line-height: 1.04; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; }
.t-h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.07; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.t-h1--article { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; max-width: 12.75em; }
.t-h2 { font-size: clamp(30px, 4.5vw, 48px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 600; text-wrap: balance; }
.t-h3 { font-size: clamp(21px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; text-wrap: balance; }
.t-h3--xl { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.14; letter-spacing: -0.015em; }
.t-h4 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }
@media (min-width: 768px) { .t-h4 { font-size: 21px; } }
.t-display, .t-h1, .t-h2 { max-width: 17.86em; }
.t-display { max-width: 14.03em; }
.t-display, .t-h1, .t-h2, .t-stat, .t-wordmark { font-family: var(--font-display); }
.t-caption, .t-small, .t-nav, .crumbs ol { font-family: var(--font-small); }
.t-h3--xl, .prose h2 { font-family: var(--font-lead); }
.t-h4, .t-lead--xl { font-family: var(--font-19); }
.t-h3 { font-family: var(--font-21); }
@media (min-width: 768px) { .t-h4 { font-family: var(--font-21); } }
@media (min-width: 1024px) { .t-lead--xl { font-family: var(--font-lead); } }
@media (min-width: 1200px) { .t-lead:not(.t-lead--xl) { font-family: var(--font-21); } }
.t-eyebrow { display: block; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--fg-muted); }
@media (min-width: 768px) { .t-eyebrow { font-size: 17px; } }
.t-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -0.012em; font-weight: 400; color: var(--fg-muted); max-width: 640px; text-wrap: pretty; }
.t-lead--xl { font-size: clamp(19px, 2.2vw, 28px); line-height: 1.35; letter-spacing: -0.015em; }
.t-body { font-size: 17px; line-height: 1.5; letter-spacing: -0.013em; }
.t-small { font-size: 15px; line-height: 1.45; letter-spacing: -0.009em; }
.t-caption { font-size: 12px; line-height: 1.35; letter-spacing: 0; color: var(--fg-muted); }
.t-nav { font-size: 12px; line-height: 1; letter-spacing: -0.01em; }
.t-stat { font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-stat-unit { font-size: .36em; line-height: 1; letter-spacing: -0.01em; font-weight: 600; color: var(--fg-muted); }
.t-stat .t-stat-unit { font-size: .36em; }
.t-wordmark { font-size: clamp(64px, 17vw, 260px); line-height: .74; letter-spacing: -0.045em; font-weight: 600; color: var(--c-gray-5); }
.t-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: 12px; font-weight: 600;
letter-spacing: .02em; text-transform: uppercase; background: rgba(0,0,0,.62); color: #fff;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hl-mute { color: var(--fg-muted); }
.hl-accent { color: var(--link); }
.hl-silver { background: linear-gradient(180deg, #f5f5f7 30%, #a1a1a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tabular { font-variant-numeric: tabular-nums; }
p, li, dd, dt, figcaption, blockquote { text-wrap: pretty; }
h1, h2, h3, h4 { font-weight: 600; }
strong, b { font-weight: 600; }
:where(p, figcaption, blockquote, .prose li, .prose td) a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(p, figcaption, blockquote, .prose li, .prose td) a:not([class]):hover { text-decoration-thickness: 2px; }
::selection { background: rgba(215, 0, 21, .18); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
[data-anchor-focus]:focus { outline: none; }
.btn:focus-visible, .chip:focus-visible, .rail__btn:focus-visible, .seg button:focus-visible { border-radius: var(--r-pill); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { flex: none; }
@supports not (overflow: clip) {
body { overflow-x: hidden; }
.media, .mega__pmedia, .footer, .footer__wordmark, .hero-cine__media, .hero__media, .hero--media, .hero--media .hero__bg, .hero-article__media,
.tile, .card, .svc-card, .svc-card__media, .steps__media, .statement__card, .ba__frame, .pair__cell, .masonry__btn, .cta-band, .map-facade,
.split__media, html.js .marquee { overflow: hidden; }
}
}
@layer layout {
.container { width: 100%; max-width: var(--container); margin-inline: auto;
padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.container--narrow { max-width: var(--container-narrow); }
.container--form { max-width: var(--container-form); }
.section { padding-block: var(--section-y); position: relative; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.stack > * + * { margin-top: var(--stack, 16px); }
.media { position: relative; overflow: clip; isolation: isolate; background-color: var(--card); }
.media::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--lqip, none); background-size: cover;
background-position: center; filter: blur(18px); transform: scale(1.1); }
.media > img, .media__img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.media--vignette::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%), linear-gradient(to bottom, transparent 62%, #000 100%); }
}
@layer motion {
html.engine:not(.rm) .media img[loading="lazy"]:not([data-loaded]) { opacity: 0; }
html.engine .media img[loading="lazy"] { transition: opacity 400ms var(--ease-apple); }
[data-reveal], [data-reveal-stagger] > * {
transition: opacity var(--dur-reveal) var(--ease-apple), transform var(--dur-reveal) var(--ease-apple);
transition-delay: var(--d, 0ms); }
html.js:not(.rm) [data-reveal]:not(.is-in), html.js:not(.rm) [data-reveal-stagger]:not(.is-in) > * {
opacity: 0; transform: translate3d(0, var(--reveal-y), 0); }
html.js:not(.engine) [data-reveal]:not(.is-in), html.js:not(.engine) [data-reveal-stagger]:not(.is-in) > * { animation: reveal-failsafe 0s 3s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
html[data-redirect] [data-reveal], html[data-redirect] [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
html.engine:not(.rm) [data-reveal-media]:not(.is-in) { clip-path: inset(8% 8% 8% 8% round var(--r-lg)); opacity: .001; }
html.engine:not(.rm) [data-reveal-media] { transition: clip-path var(--dur-zoom) var(--ease-apple), opacity var(--dur-zoom) var(--ease-apple); }
@keyframes intro-text { from { opacity: .01; translate: 0 var(--intro-y, 20px); filter: blur(14px); } to { opacity: 1; translate: none; filter: none; } }
@keyframes intro-rise { from { opacity: .01; translate: 0 44px; scale: .97; } to { opacity: 1; translate: none; scale: none; } }
[data-intro-lines] .line { display: inline-block; max-width: 100%; overflow-wrap: break-word; }
html.js:not(.rm):not([data-redirect]) [data-intro], html.js:not(.rm):not([data-redirect]) [data-intro-lines] .line {
animation: intro-text calc(var(--dur-intro) * var(--intro-scale, 1)) var(--ease-intro) calc(var(--d, 0ms) * var(--intro-scale, 1)) both; }
html.js:not(.rm):not([data-redirect]) [data-intro-rise] {
animation: intro-rise calc(1400ms * var(--intro-scale, 1)) var(--ease-intro) calc(350ms * var(--intro-scale, 1)) both; }
html.nav-internal { --intro-scale: .6; }
@keyframes intro-text-clip { from { opacity: .01; translate: 0 var(--intro-y, 20px); } to { opacity: 1; translate: none; } }
html.js:not(.rm):not([data-redirect]) .hl-silver[data-intro-lines] .line, html.js:not(.rm):not([data-redirect]) .hl-silver .line[data-intro] { animation-name: intro-text-clip; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.w__i { display: inline-block; }
html.js:not(.rm) [data-words]:not([data-state="in"]) .w__i { transform: translate3d(0, 108%, 0); opacity: 0; transition: none; }
html.js:not(.rm) [data-words][data-state="in"] .w__i {
transition: transform var(--dur-word) var(--ease-apple) calc(var(--i) * var(--stagger-word)),
opacity 630ms var(--ease-apple) calc(var(--i) * var(--stagger-word)); }
html.js:not(.engine) [data-words] .w__i { animation: reveal-failsafe 0s 3s forwards; }
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
::view-transition-old(root) { animation: var(--dur-route-out) var(--ease-apple) both vt-out; mix-blend-mode: normal; }
::view-transition-new(root) { animation: var(--dur-route-in) var(--ease-apple) 60ms both vt-in; mix-blend-mode: normal; }
::view-transition-group(site-nav), ::view-transition-group(site-ribbon), ::view-transition-group(site-callbar), ::view-transition-group(site-chat) {
animation-duration: 200ms; animation-timing-function: var(--ease-apple); }
::view-transition-group(*.svc) { animation-duration: 560ms; animation-timing-function: var(--ease-apple); }
::view-transition-old(*.svc):only-child { animation: var(--dur-route-out) var(--ease-apple) both vt-out; }
::view-transition-new(*.svc):only-child { animation: var(--dur-route-in) var(--ease-apple) 60ms both vt-in; }
html[data-staff]::view-transition-old(root), html[data-staff]::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
}
@layer utilities {
@media (max-width: 639px) { .hide-sm, br.hide-sm-br { display: none; } }
@media (min-width: 768px) { .md-hide { display: none; } }
.xl-only { display: none; }
@media (min-width: 1280px) { .xl-only { display: inline; } li.xl-only { display: list-item; } .xl-hide { display: none; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { display: contents; white-space: nowrap; }
.center { text-align: center; }
@media (forced-colors: active) {
.seam, .morph, .hero-cine__glow, .cta-band::before { display: none !important; }
.btn, .chip { border: 1px solid ButtonText; }
:focus-visible { outline-color: Highlight; }
.steps__tab[aria-selected="true"] { border-bottom: 2px solid Highlight; }
.chat-launch { border: 1px solid ButtonText; }
}
}
@layer print {
@media print {
.nav, .ribbon, .localnav, .callbar, .chat-launch, .chat-panel, .toasts, .mega, .mega-backdrop, .mmenu, .skip, .marquee__toggle, .rail__ui { display: none !important; }
html, body { background: #fff !important; padding: 0 !important; }
[data-tone] { background: #fff !important; color: #000 !important; --fg: #000; --fg-muted: #333; --fg-body: #111; --fg-subtle: #555;
--card: #fff; --card-raised: #fff; --chip: #fff; --hairline: #c7c7cc; --hairline-soft: #d2d2d7;
--link: var(--c-red-text); --btn-2: var(--c-red-text); --btn-2-hover-bg: transparent; --ghost: #fff; --ghost-fg: #000; color-scheme: light; }
.hl-silver, .hl-silver .line, [data-intro-lines].hl-silver .line { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
color: #000 !important; -webkit-text-fill-color: #000 !important; }
.svc-card__cat, .svc-card__sum { color: #333 !important; }
.rail__track, .co-strip, .svc-lineup__list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12pt !important; overflow: visible !important;
scroll-snap-type: none !important; padding-inline: 0 !important; transform: none !important; }
.rail__item, .co-strip > *, .svc-lineup__item { flex: none !important; width: auto !important; break-inside: avoid; }
.ba, .ba-switch__stage, .pair { break-inside: avoid; }
.ba__handle, .ba__knob, .ba-switch__ui, .filters, .seg { display: none !important; }
h1, h2, h3, h4, .t-eyebrow, .row-head, .step-chip, .head { break-after: avoid; }
main li, .faq__item, .card, .cert, .stat { break-inside: avoid; }
p { orphans: 3; widows: 3; }
[data-open-status], .co-status, .map-facade--drawn .map-facade__map { display: none !important; }
.steps__media--ui { background: #fff !important; border: 1px solid #d2d2d7; aspect-ratio: auto !important; }
.hero-cine__cap { position: static !important; color: #333 !important; opacity: 1 !important; margin-top: 6pt; }
.statement .statement__proof .chip { border: 0 !important; background: none !important; }
.footer__dir, .footer__notes, .footer__social, .footer__staff, .footer__more { display: none !important; }
.footer { break-inside: avoid; padding-top: 12pt !important; }
.prose a[href^="/"]::after { content: " (easternautoworks.com" attr(href) ")"; font-size: .85em; }
.tile, .card, .card--ink, .svc-card, .review { background: #fff !important; color: #000 !important; border: 1px solid #d2d2d7; break-inside: avoid; }
.chip, .chips--glass .chip { background: #fff !important; color: #000 !important; border: 1px solid #86868b; }
.statement__h, .tile__title, .card__title { color: #000 !important; }
.statement__card { background: #fff !important; min-height: 0 !important; aspect-ratio: auto !important; }
.statement__card::after, .statement__img, .hero-cine__glow, .cta-band::before, .media::before, .media--vignette::after { display: none !important; }
.hero-cine__media { break-inside: avoid; }
.split__media, .faq--split .faq__title, .home-area__nap { position: static !important; }
.faq__a { grid-template-rows: 1fr !important; visibility: visible !important; }
.media img, [data-reveal-media] { opacity: 1 !important; clip-path: none !important; }
[data-reveal], [data-reveal-stagger] > *, .w__i, [data-intro], [data-intro-lines] .line, [data-intro-rise] { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
.pin, .hero-cine, .hero-cine__track, .statement, .steps { height: auto !important; }
.pin__stage, .hero-cine__stage { position: static !important; height: auto !important; }
.prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
.footer__wordmark, .seam, .morph { display: none !important; }
}
}
/* 20-chrome.css */
@layer chrome {
.wordmark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -2px; color: var(--c-ink-1); text-decoration: none; border-radius: var(--r-pill); justify-self: start; }
.wordmark__mark { width: 26px; height: auto; flex: none; }
.wordmark__text { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; line-height: 1; white-space: nowrap; }
@media (max-width: 359px) { .wordmark__text { font-size: 15px; } }
.skip { position: fixed; left: 12px; top: -60px; z-index: var(--z-skip); padding: 10px 16px; border-radius: var(--r-pill);
background: var(--c-ink-1); color: #fff; font-size: 14px; font-weight: 600; transition: top var(--dur-fast) var(--ease-apple); }
.skip:focus { top: 12px; }
.nav__links, .nav__phone, .chat-launch--nav, .localnav__links { font-family: var(--font-label); }
.ribbon__text { font-family: var(--font-small); }
.ribbon { position: sticky; top: var(--nav-h); z-index: var(--z-ribbon); height: 40px; background: var(--c-gray-6); overflow: hidden;
border-bottom: 1px solid rgba(0,0,0,.06); color: var(--c-ink-1); }
html[data-localnav] .ribbon { position: relative; top: auto; }
html.ribbon-off .ribbon { display: none; }
.ribbon__in { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.ribbon__text { font-size: 14px; line-height: 1.3; letter-spacing: -0.006em; text-align: center; padding-inline: 44px; white-space: nowrap;
transition: opacity var(--dur-fast) var(--ease-apple); }
@media (max-width: 639px) { .ribbon__text { font-size: 13px; padding-inline: 0 40px; } }
@media (max-width: 359px) { .ribbon__opt { display: none; } }
.ribbon[data-closing] .ribbon__text { opacity: 0; }
.ribbon__text strong { font-weight: 600; }
.ribbon__text a { color: var(--c-red-text); text-decoration: underline; text-underline-offset: 3px; }
.ribbon__close { position: absolute; right: calc(max(var(--gutter), env(safe-area-inset-right)) - 12px); top: 0; width: 44px; height: 40px; display: grid; place-items: center;
color: var(--c-gray-1); border-radius: var(--r-pill); }
.ribbon__close:hover { color: var(--c-ink-1); }
html:not(.js) .ribbon__close { display: none; }
.nav { position: fixed; inset: 0 0 auto; height: var(--nav-h); z-index: var(--z-nav); color: var(--c-ink-1); }
html[data-vt] .nav { view-transition-name: site-nav; }
html[data-vt] .ribbon { view-transition-name: site-ribbon; }
html[data-vt] .callbar { view-transition-name: site-callbar; }
.nav__bg { position: absolute; inset: 0; z-index: -1; background: var(--glass-light);
-webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-bottom: 1px solid rgba(0,0,0,.08);
transition: background-color var(--dur-fast) var(--ease-apple), border-color var(--dur-fast) var(--ease-apple); }
.nav[data-open] .nav__bg, html[data-vt] .nav__bg { background: #fff; border-bottom-color: transparent; }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__links { display: none; }
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: var(--nav-h); padding-inline: 2px; font-size: 12px; letter-spacing: -0.01em;
color: rgba(29,29,31,.8); white-space: nowrap; transition: color var(--dur-fast) var(--ease-apple); }
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current], .nav__link[data-current] { color: var(--c-ink-1); }
.nav__link:focus-visible { outline: none; }
.nav__link:focus-visible::after { content: ""; position: absolute; inset: 13px -7px; border-radius: 8px; box-shadow: 0 0 0 2px var(--c-focus); pointer-events: none; }
.nav__link .chev { flex: none; width: 12px; height: 12px; opacity: .6; transition: transform var(--dur-fast) var(--ease-apple); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 4px; }
.nav__phone { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; justify-content: center; font-size: 12px;
color: rgba(29,29,31,.8); white-space: nowrap; border-radius: var(--r-pill); }
.nav__phone:hover { color: var(--c-ink-1); }
.nav__cta { display: none; }
.nav__burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; margin-right: -10px; border-radius: var(--r-pill); }
.nav__burger span { display: block; width: 18px; height: 0; border-top: 1.5px solid currentColor; border-radius: 1px; background: none; transition: transform var(--dur-base) var(--ease-apple); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }
html:not(.js) .nav__burger { display: none; }
.nav__nojs { display: none; }
html:not(.js) .nav__nojs { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; margin-right: -10px; font-size: 14px; font-weight: 600; color: var(--c-ink-1); }
@media (min-width: 1024px) { html:not(.js) .nav__nojs { display: none; } }
@media (min-width: 1024px) {
.nav__in { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav__links { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav__actions { justify-self: end; gap: 8px; }
.nav__burger { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .nav__links { gap: 16px; } .nav__phone { display: none; } }
@media (min-width: 1280px) {
.nav__in { grid-template-columns: auto minmax(0, 1fr) auto; }
.nav__links { gap: 22px; justify-self: center; }
}
.mega { position: fixed; inset: var(--nav-h) 0 auto; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: var(--shadow-panel); color: var(--c-ink-1);
opacity: 0; transform: translate3d(0,-8px,0); visibility: hidden;
transition: opacity var(--dur-base) var(--ease-apple), transform var(--dur-base) var(--ease-apple), visibility 0s linear var(--dur-base); }
.mega[data-open] { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mega__in { padding-block: 32px 36px; display: grid; grid-template-columns: minmax(0,1fr) 248px; gap: 40px; }
@media (min-width: 1280px) { .mega__in { padding-block: 40px 44px; } }
.mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px 32px; }
.mega__cols--areas { grid-template-columns: 2fr 1fr 1.25fr; }
.mega__col { opacity: 0; transform: translate3d(0,-6px,0);
transition: opacity var(--dur-base) var(--ease-apple) calc(var(--i) * var(--stagger-mega)), transform var(--dur-base) var(--ease-apple) calc(var(--i) * var(--stagger-mega)); }
.mega[data-open] .mega__col { opacity: 1; transform: none; }
.mega__head { margin-bottom: 12px; font-size: 12px; line-height: 1; color: var(--c-gray-1); }
.mega__list { display: grid; gap: 2px; }
.mega__list--2col { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.mega__item { display: flex; align-items: center; gap: 12px; margin-inline: -6px; padding: 4px 6px; border-radius: var(--r-sm); min-height: 48px; }
.mega__thumb { width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: cover; background: var(--c-gray-6); }
.mega__name { font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink-1); transition: color var(--dur-fast) var(--ease-apple); }
.mega__item:hover .mega__name, .mega__item:focus-visible .mega__name, .mega__item[data-active] .mega__name { color: var(--c-red-text); }
.mega__text-link { display: block; padding-block: 6px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--c-ink-1); border-radius: 6px; transition: color var(--dur-fast) var(--ease-apple); }
.mega__text-link:hover { color: var(--c-red-text); }
.mega__preview { border-left: 1px solid var(--c-gray-4); padding-left: 32px; }
.mega__pmedia { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--r-sm); overflow: clip; background: var(--c-gray-6); }
.mega__pimg { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-fast) var(--ease-apple); }
.mega__pcat { margin-top: 16px; font-size: 12px; color: var(--c-gray-1); }
.mega__pname { margin-top: 4px; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.mega__psum { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--c-gray-1); }
.mega__preview[data-swap] .mega__pimg, .mega__preview[data-swap] .mega__pcat, .mega__preview[data-swap] .mega__pname, .mega__preview[data-swap] .mega__psum { opacity: 0; }
.mega__pcat, .mega__pname, .mega__psum { transition: opacity var(--dur-fast) var(--ease-apple); }
.mega__visit .mega__vline { font-size: 14px; line-height: 1.45; color: var(--c-ink-1); margin-bottom: 10px; }
.mega__visit .link-ext { font-size: 14px; min-height: 32px; }
.mega__vnote { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-gray-4); font-size: 12px; color: var(--c-gray-1); }
.mega__foot { border-top: 1px solid var(--c-gray-4); margin-top: 32px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.mega__foot .link-more, .mega__foot .link-ext { font-size: 12px; min-height: 28px; }
.mega-backdrop { position: fixed; inset: var(--nav-h) 0 0; z-index: var(--z-mega-backdrop); background: var(--backdrop-dim);
-webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter);
opacity: 0; transition: opacity var(--dur-base) var(--ease-apple); }
.mega-backdrop[data-open] { opacity: 1; }
@media (max-width: 1023px) { .mega, .mega-backdrop { display: none !important; } }
.mmenu { position: fixed; inset: 0; z-index: var(--z-mmenu); background: #fff; color: var(--c-ink-1); overflow-y: auto; overscroll-behavior: contain;
opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-sheet), visibility 0s linear 240ms; }
.mmenu[data-open] { opacity: 1; visibility: visible; transition-delay: 0s; }
.mmenu[data-closing] { transition-duration: 180ms, 0s; transition-delay: 0s, 180ms; }
.mmenu__bar { position: sticky; top: 0; z-index: 1; height: var(--nav-h, 52px); min-height: 52px; display: flex; align-items: center; justify-content: space-between;
padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); background: var(--glass-light); -webkit-backdrop-filter: var(--glass-filter);
backdrop-filter: var(--glass-filter); border-bottom: 1px solid rgba(0,0,0,.08); }
.mmenu__close { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; border-radius: var(--r-pill); }
.mmenu__body { padding: 20px var(--gutter) max(32px, env(safe-area-inset-bottom)); max-width: 640px; margin-inline: auto; }
.mmenu__ctas { display: grid; gap: 10px; }
.mmenu__cta { height: 50px; }
.mmenu__tow { margin: 2px 0 16px; font-size: 14px; }
.mmenu__tow a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-red-text); text-decoration: underline; text-underline-offset: 3px; }
.mmenu__label { font-size: 12px; color: var(--c-gray-1); margin-bottom: 4px; }
.mmenu__group > button { width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; font-size: 21px; font-weight: 600;
letter-spacing: -0.015em; border-bottom: 1px solid rgba(0,0,0,.08); text-align: left; }
.mmenu__group > button .icon { color: var(--c-gray-1); transition: transform var(--dur-base) var(--ease-apple); }
.mmenu__group > button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mmenu__group--big > button { font-size: 28px; letter-spacing: -0.02em; min-height: 52px; border-bottom: 0; }
.mmenu__panel { display: grid; grid-template-rows: 1fr; }
html.engine .mmenu__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-base) var(--ease-apple), visibility 0s linear var(--dur-base); }
html.engine .mmenu__group[data-open] .mmenu__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.mmenu__inner { overflow: hidden; }
.mmenu__inner ul { padding: 6px 0 4px; }
.mmenu__inner a:not(.link-more) { display: flex; align-items: center; min-height: 44px; font-size: 17px; color: var(--c-ink-1); }
.mmenu__inner .link-more { margin-bottom: 8px; }
.mmenu__sub { margin-top: 10px; font-size: 12px; color: var(--c-gray-1); }
.mmenu__rule { margin: 20px 0 12px; border-color: rgba(0,0,0,.08); }
.mmenu__big { display: flex; align-items: center; min-height: 52px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--c-ink-1); }
.mmenu__big[aria-current] { color: var(--c-ink-1); }
.mmenu__nap { margin-top: 28px; font-size: 12px; line-height: 1.7; color: var(--c-gray-1); }
.mmenu__nap a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-gray-1); text-decoration: underline; text-underline-offset: 3px; }
.mmenu [data-stagger] { opacity: 0; transform: translate3d(0,-6px,0);
transition: opacity 320ms var(--ease-apple) calc(var(--i) * var(--stagger-menu)), transform 320ms var(--ease-apple) calc(var(--i) * var(--stagger-menu)); }
.mmenu[data-open] [data-stagger] { opacity: 1; transform: none; }
.mmenu[data-closing] [data-stagger] { transition-delay: 0s; }
html.menu-open .callbar { transform: translateY(110%); }
@media (min-width: 1024px) { .mmenu { display: none !important; } }
.localnav { position: sticky; top: var(--nav-h); z-index: var(--z-localnav); height: 48px; background: var(--glass-light);
-webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-bottom: 1px solid rgba(0,0,0,.08); color: var(--c-ink-1); }
@media (min-width: 768px) { .localnav { height: var(--localnav-h); } }
.localnav__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.localnav__title { margin-right: auto; align-self: stretch; line-height: 48px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--c-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .localnav__title { font-size: 21px; line-height: var(--localnav-h); } }
.localnav__links { display: none; gap: 24px; font-size: 12px; }
.localnav__links a { display: inline-grid; color: rgba(29,29,31,.8); padding-block: 14px; white-space: nowrap; transition: color var(--dur-fast) var(--ease-apple); }
.localnav__links a > span { grid-area: 1 / 1; }
.localnav__links a::after { content: attr(data-label); grid-area: 1 / 1; font-weight: 600; visibility: hidden; }
.localnav__links a:hover { color: var(--c-ink-1); }
.localnav__links a[aria-current] { color: var(--c-ink-1); font-weight: 600; }
@media (min-width: 768px) { .localnav__links { display: flex; } }
@media (min-width: 768px) and (max-width: 1023px) { .localnav__links { gap: 16px; } }
.callbar { position: fixed; inset: auto 0 0; z-index: var(--z-callbar); display: flex; gap: 12px; align-items: center;
padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--glass-light);
-webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-top: 1px solid rgba(0,0,0,.08);
transition: transform var(--dur-base) var(--ease-apple);
--btn: var(--c-red); --btn-hover: var(--c-red-hover); --btn-press: var(--c-red-press); --btn-fg: #fff; --btn-2: var(--c-red-text); --btn-2-hover-bg: rgba(215,0,21,.06); }
.callbar .btn { height: 48px; }
.callbar__cta { flex: 1; min-width: 0; }
.callbar .btn--icon { flex: none; }
.callbar__call--wide { flex: 1; min-width: 0; gap: 8px; }
@media (max-width: 359px) { .callbar__cta { padding-inline: 10px; font-size: 16px; } }
.callbar .callbar__call { color: var(--c-ink-1); border-color: var(--c-gray-2); }
.callbar .callbar__call:hover { background: rgba(0,0,0,.04); }
.callbar[data-hidden], html.chat-open .callbar { transform: translateY(110%); }
@media (min-width: 768px), (max-height: 480px) { .callbar { display: none; } }
.chat-launch { align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-pill); }
.chat-launch:focus-visible { outline-color: var(--c-focus); }
html:not(.js) .chat-launch { display: none !important; }
.chat-launch[hidden] { display: none !important; }
.chat-launch--bar { display: inline-flex; flex: none; width: 48px; height: 48px; padding: 0; background: rgba(29,29,31,.92); color: #fff;
transition: background-color var(--dur-fast) var(--ease-apple), transform var(--dur-fast) var(--ease-apple); }
.chat-launch--bar:hover { background: #000; }
.chat-launch--bar:active { transform: scale(.96); }
.chat-launch--nav { display: none; width: 44px; height: 44px; padding: 0; color: rgba(29,29,31,.8);
transition: color var(--dur-fast) var(--ease-apple); }
.chat-launch--nav:hover { color: var(--c-ink-1); }
.chat-launch--nav .icon { flex: none; }
@media (min-width: 768px), (max-height: 480px) {
.chat-launch--nav { display: inline-flex; }
}
.chat-launch--float { display: inline-flex; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: var(--z-chat-launch);
height: 48px; min-width: 48px; padding-inline: 14px; background: rgba(29,29,31,.92); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; box-shadow: var(--shadow-float);
transition: transform var(--dur-fast) var(--ease-apple), background-color var(--dur-fast) var(--ease-apple), opacity var(--dur-fast) var(--ease-apple); }
.chat-launch--float:hover { background: #000; }
.chat-launch--float:active { transform: scale(.96); }
.chat-launch--float .chat-launch__label { display: none; }
@media (min-width: 640px) { .chat-launch--float .chat-launch__label { display: inline; } .chat-launch--float { padding-inline: 18px 20px; } }
html.js .chat-launch--float:not([data-ready]) { opacity: 0; transform: translate3d(0,12px,0); pointer-events: none; }
html.js .chat-launch--float[data-ready] { transition: opacity 400ms var(--ease-apple), transform 400ms var(--ease-apple), background-color var(--dur-fast) var(--ease-apple); }
html[data-vt] .chat-launch--float { view-transition-name: site-chat; }
@media (max-width: 767px) and (min-height: 481px) { html[data-callbar] .chat-launch--float { display: none; } }
@media (max-width: 767px) { html.field-focus .chat-launch--float { transform: translate3d(0, 150%, 0); opacity: 0; pointer-events: none; } }
.chat-panel { position: fixed; z-index: var(--z-chat); right: max(24px, calc(env(safe-area-inset-right) + 8px)); bottom: calc(24px + env(safe-area-inset-bottom));
width: 380px; height: 560px; max-height: calc(100vh - 48px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 48px - env(safe-area-inset-bottom));
display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--c-ink-1); border-radius: var(--r-lg);
border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-float); transform-origin: bottom right;
opacity: 0; transform: translate3d(0,12px,0) scale(.96);
transition: opacity 200ms var(--ease-apple), transform 200ms var(--ease-apple); }
.chat-panel[data-open] { opacity: 1; transform: none; transition-duration: 320ms; }
@media (min-width: 768px) {
html[data-chat-dock="nav"] .chat-panel { top: calc(var(--nav-h) + 8px); bottom: auto; transform-origin: top right; transform: translate3d(0,-8px,0) scale(.98);
right: max(var(--gutter), env(safe-area-inset-right), calc((100vw - var(--container)) / 2 + var(--gutter)));
max-height: calc(100vh - var(--nav-h) - 32px); max-height: calc(100dvh - var(--nav-h) - 32px); }
html[data-chat-dock="nav"] .chat-panel[data-open] { transform: none; }
}
@media (max-width: 767px) {
.chat-panel { inset: 56px 0 0; width: auto; height: auto; max-height: none; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translate3d(0,100%,0);
transition: transform 200ms var(--ease-sheet), opacity 200ms linear; }
.chat-panel[data-open] { transform: none; transition: transform var(--dur-sheet) var(--ease-sheet), opacity 120ms linear; }
.chat-panel__form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
html.menu-open .chat-panel { visibility: hidden; }
.chat-panel__head { flex: none; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; border-bottom: 1px solid rgba(0,0,0,.08); }
.chat-panel__id { flex: 1; min-width: 0; }
.chat-panel__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.chat-panel__sub { font-size: 12px; color: var(--c-gray-1); line-height: 1.3; }
.chat-panel__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--c-ink-1); transition: background-color var(--dur-fast) var(--ease-apple); }
.chat-panel__icon:hover { background: var(--c-gray-6); }
.chat-panel__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-panel__log { display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 85%; padding: 10px 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 18px;
animation: chat-in 240ms var(--ease-apple) both; }
@keyframes chat-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.chat-msg--assistant { align-self: flex-start; background: var(--c-gray-6); border-bottom-left-radius: 6px; }
.chat-msg--user { align-self: flex-end; background: var(--c-ink-1); color: #fff; border-bottom-right-radius: 6px; }
.chat-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; background: var(--c-gray-6); border-radius: 18px; border-bottom-left-radius: 6px; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-gray-2); animation: chat-dot 1s var(--ease-apple) infinite; }
.chat-typing i:nth-of-type(2) { animation-delay: 150ms; } .chat-typing i:nth-of-type(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%, 100% { transform: none; } 40% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: chat-pulse 1s linear infinite !important; animation-duration: 1s !important; animation-iteration-count: infinite !important; } @keyframes chat-pulse { 50% { opacity: .35; } } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.chat-chip { min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--c-gray-5); color: var(--c-ink-1); font-size: 14px; font-weight: 500;
transition: background-color var(--dur-fast) var(--ease-apple); }
.chat-chip:hover { background: #dcdce1; }
.chat-panel__form { flex: none; padding: 10px 12px 10px; border-top: 1px solid rgba(0,0,0,.08); }
.chat-panel__row { display: flex; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 14px; background: var(--c-gray-6); border-radius: 20px; border: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-apple); }
.chat-panel__row:focus-within { border-color: var(--c-focus); }
.chat-panel__input { flex: 1; min-height: 36px; max-height: 128px; padding: 7px 0; border: 0; background: transparent; resize: none; font-size: 17px; line-height: 1.3; outline: none; color: var(--c-ink-1); }
.chat-panel__input::placeholder { color: var(--c-gray-1); }
.chat-panel__send { width: 32px; height: 32px; flex: none; margin-bottom: 2px; display: grid; place-items: center; border-radius: 50%; background: var(--c-red); color: #fff; transition: opacity var(--dur-fast) var(--ease-apple); }
.chat-panel__send:disabled { opacity: .35; cursor: default; }
.chat-panel__send { position: relative; }
.chat-panel__send::before { content: ""; position: absolute; inset: -6px; }
@media (max-width: 767px) { .chat-chip { min-height: 44px; } .chat-panel__icon { width: 44px; height: 44px; } }
.chat-panel__call { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px; margin-top: 6px; text-align: center; font-size: 12px; color: var(--c-gray-1); }
@media (max-width: 767px) { .chat-panel__call { min-height: 44px; margin-top: 2px; } }
.chat-panel__call span { text-decoration: underline; text-underline-offset: 3px; }
.footer { position: relative; padding-top: 32px; overflow: clip; font-size: 12px; line-height: 1.4; color: var(--c-ink-3); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.footer a { color: var(--c-ink-3); text-decoration: none; transition: color var(--dur-fast) var(--ease-apple); }
.footer a:hover, .footer a:focus-visible { color: var(--c-ink-1); text-decoration: underline; text-underline-offset: 2px; }
.footer__notes { padding-bottom: 16px; border-bottom: 1px solid var(--c-gray-4); color: var(--c-gray-1); }
.footer__notes p { max-width: 63.02em; }
.footer__dir { display: grid; grid-template-columns: 1fr; padding-block: 8px 20px; }
.footer__col { border-bottom: 1px solid var(--c-gray-4); }
.footer__head { font-size: 12px; font-weight: 600; color: var(--c-ink-1); margin: 0; }
.footer__head > button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--c-ink-1); }
.footer__head > button .icon { transition: transform var(--dur-base) var(--ease-apple); color: var(--c-gray-1); }
.footer__head > button[aria-expanded="true"] .icon { transform: rotate(180deg); }
html:not(.engine) .footer__head { padding: 14px 0 6px; }
.footer__head:not(:has(button)) { padding: 14px 0 6px; }
.footer__panel ul { padding-bottom: 12px; }
.footer__panel li a { display: inline-flex; align-items: center; gap: 3px; padding: 11px 0; }
.footer__panel li a .icon { opacity: .6; }
html.engine .footer__col[data-collapsible]:not([data-open]) .footer__panel { display: none; }
.footer__more { margin: -4px 0 12px; }
.footer__more summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--c-ink-1); list-style: none; }
.footer__more summary .icon { transition: transform var(--dur-base) var(--ease-apple); }
.footer__more[open] summary .icon { transform: rotate(180deg); }
.footer__lines { padding-bottom: 14px; color: var(--c-gray-1); line-height: 1.7; }
@media (min-width: 768px) {
.footer { padding-top: 40px; }
.footer__dir { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; padding-block: 28px 32px; border-bottom: 1px solid var(--c-gray-4); }
.footer__col { border-bottom: 0; }
.footer__head, html:not(.engine) .footer__head { padding: 0 0 10px; }
.footer__head:not(:has(button)) { padding: 0 0 10px; }
.footer__panel li a { padding: 4px 0; line-height: 16px; min-height: 24px; }
.footer__panel ul { padding-bottom: 0; display: grid; gap: 4px; }
.footer__more { margin: 8px 0 0; }
.footer__more summary { min-height: 28px; }
.footer__lines { padding: 10px 0 0; }
}
@media (min-width: 1024px) { .footer__dir { grid-template-columns: 1fr 1fr 1.2fr 1.2fr 1fr; } }
.footer__brand { display: grid; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--c-gray-4); }
@media (min-width: 1024px) { .footer__brand { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 32px; } }
.footer__brand-id { display: flex; align-items: center; gap: 14px; }
.footer__badge { width: auto; height: 36px; flex: none; }
.footer__name { font-size: 14px; font-weight: 600; color: var(--c-ink-1); }
.footer__tag { margin-top: 2px; color: var(--c-gray-1); }
.footer__nap { display: grid; gap: 6px; }
@media (min-width: 1024px) { .footer__nap { justify-items: end; text-align: right; } }
.footer__nap a { display: inline-flex; align-items: center; gap: 3px; min-height: 24px; }
.footer__dot { margin-inline: 8px; color: var(--c-gray-2); }
.footer__item { white-space: nowrap; }
@media (max-width: 767px) {
.footer__nap > p { display: grid; justify-items: start; gap: 2px; }
.footer__dot { display: none; }
}
.footer__social { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer__social a { min-height: 32px; display: inline-flex; align-items: center; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 16px 8px; color: var(--c-gray-1); }
.footer__staff { display: flex; gap: 20px; }
.footer__staff a { color: var(--c-gray-1); min-height: 32px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
.footer__nap a, .footer__social a, .footer__staff a { min-height: 44px; }
.footer__social { gap: 0 20px; }
}
.footer__wordmark { display: block; overflow: clip; padding-top: .08em; margin-top: 48px; text-align: center; white-space: nowrap; user-select: none; pointer-events: none; }
.footer__wordmark .ch { display: inline-block; }
.footer__wordmark .ch:last-child { margin-right: -.045em; }
html.engine:not(.rm) .footer__wordmark[data-state="hidden"] .ch { transform: translate3d(0,105%,0); opacity: 0; }
html.engine:not(.rm) .footer__wordmark .ch { transition: transform 1.1s var(--ease-apple) calc(var(--i) * var(--stagger-char)), opacity .9s var(--ease-apple) calc(var(--i) * var(--stagger-char)); }
.toasts { position: fixed; z-index: var(--z-toast); left: 12px; right: 12px; top: calc(var(--nav-h) + 12px); display: grid; justify-items: center; pointer-events: none; }
@media (min-width: 640px) {
.toasts { left: auto; top: auto; right: max(24px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); justify-items: end; }
html[data-chat-dock="float"] .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.toast { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; width: min(420px, 100%);
padding: 14px 16px; border-radius: 18px; background: rgba(29,29,31,.92); color: #f5f5f7;
-webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-float);
animation: toast-in 300ms var(--ease-apple) both; }
.toast[data-leaving] { animation: toast-out 200ms var(--ease-apple) both; }
.toast__icon { grid-row: 1 / span 2; margin-top: 1px; }
.toast__title { font-size: 15px; font-weight: 600; }
.toast__desc { grid-column: 2; font-size: 14px; color: #d2d2d7; }
.toast__close { grid-column: 3; grid-row: 1; width: 28px; height: 28px; margin: -4px -6px 0 0; display: grid; place-items: center; border-radius: 50%; color: #d2d2d7; }
.toast--destructive .toast__icon { color: var(--c-red-on-ink); }
.toast--success .toast__icon { color: #30d158; }
@keyframes toast-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
@media (min-width: 640px) { @keyframes toast-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } } @keyframes toast-out { to { opacity: 0; transform: translate3d(0, 8px, 0); } } }
@media (prefers-reduced-motion: reduce) {
.mega, .mega__col, .mmenu, .mmenu [data-stagger] { transform: none !important; }
}
@media (max-height: 480px) {
.ribbon { position: relative; top: auto; }
.localnav { position: static; }
.callbar { display: none; }
}
}
/* 30-components.css */
@layer components {
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px;
border-radius: var(--r-pill); border: 1px solid transparent; font: 400 17px/1 var(--font-small); letter-spacing: -0.01em;
white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
transition: background-color var(--dur-fast) var(--ease-apple), color var(--dur-fast) var(--ease-apple),
border-color var(--dur-fast) var(--ease-apple), transform var(--dur-press) var(--ease-apple), filter var(--dur-fast) var(--ease-apple); }
.btn::before { content: ""; position: absolute; inset: -8px -4px; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--btn); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--primary:active { background: var(--btn-press); }
.btn--secondary { background: transparent; color: var(--btn-2); border-color: var(--btn-2); }
.btn--secondary:hover { background: var(--btn-2-hover-bg); }
.btn--ghost { background: var(--ghost); color: var(--ghost-fg); }
.btn--ghost:hover { filter: brightness(.97); }
.btn--ink { background: var(--c-ink-1); color: #fff; }
.btn--ink:hover { background: #000; }
.btn--xs { height: 28px; padding: 0 12px; font-size: 12px; gap: 4px; }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 52px; padding: 0 28px; }
.btn--block { width: 100%; }
.btn--icon { width: 44px; padding: 0; }
.btn--icon.btn--lg, .callbar .btn--icon { width: 48px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn[aria-busy="true"] { opacity: 1; pointer-events: none; cursor: progress; }
.btn:has(> .btn__spinner) { opacity: 1; pointer-events: none; cursor: progress; }
.btn--primary[aria-busy="true"] { background: var(--btn-press); }
.btn--primary:has(> .btn__spinner) { background: var(--btn-press); }
.btn--ink[aria-busy="true"] { background: #000; }
.btn--ink:has(> .btn__spinner) { background: #000; }
.btn__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.btn-row--center { justify-content: center; }
.link-more, .link-ext { display: inline-flex; align-items: center; gap: .25em; min-height: 44px; color: var(--link); font-size: 17px; letter-spacing: -0.013em; text-underline-offset: 4px; }
.link-more { position: relative; padding-right: .62em; }
.link-more::after { content: "›"; position: absolute; right: 0; top: 50%; font-size: 1.15em; line-height: 1; transform: translateY(-54%); text-decoration: none; }
.link-ext .icon { width: .8em; height: .8em; }
.link-more:hover, .link-ext:hover { text-decoration: underline; }
.head { display: grid; gap: 8px; max-width: 880px; margin-bottom: var(--head-gap); }
@media (min-width: 768px) { .head { gap: 12px; } }
.head .t-lead { margin-top: 8px; max-width: 640px; color: var(--fg-muted); }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head--split { max-width: none; }
.head__link { justify-self: start; }
@media (min-width: 768px) {
.head--split { grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; }
.head--split > :not(.head__link) { grid-column: 1; }
.head--split .head__link { grid-column: 2; grid-row: 1 / span 4; align-self: end; }
}
.hero-cine { position: relative; padding-bottom: 48px; overflow-x: clip; }
.hero-cine__stage { position: relative; }
.hero-cine__copy { position: relative; z-index: 2; padding-top: clamp(48px, 9vh, 104px); text-align: center; }
.hero-cine__h { display: grid; gap: 12px; justify-items: center; }
.hero-cine__kicker { display: inline; font: inherit; letter-spacing: inherit; color: inherit; }
.hero-cine__h .t-display { max-width: 8.93em; }
.hero-cine__copy .t-lead { margin: 20px auto 0; max-width: 620px; }
.hero-cine__copy .btn-row { margin-top: 28px; }
.hero-cine__media { position: relative; z-index: 1; margin: 40px auto 0; width: calc(100% - 2 * var(--gutter));
max-width: calc(var(--container) - 2 * var(--gutter)); aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: clip; background: #000; }
.hero-cine__frame { position: absolute; inset: 0; }
.hero-cine__img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 55%; }
.hero-cine__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
linear-gradient(to bottom, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.6)); }
.hero-cine__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px; text-align: center; color: var(--fg-muted); padding-inline: var(--gutter); }
.hero-cine__glow { position: absolute; left: 50%; top: 42%; width: 120vmin; aspect-ratio: 1; transform: translate(-50%, -50%);
border-radius: 50%; background: radial-gradient(closest-side, #1d1d1f, rgba(29,29,31,.55) 45%, transparent);
opacity: 0; pointer-events: none; }
.hero-cine .callouts { display: none; }
.hero-cine__facts { margin-top: 24px; }
.hero-cine__facts .chips { justify-content: center; }
.hero { padding-block: clamp(56px, 9vw, 120px) clamp(56px, 8vw, 104px); }
.hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero--split .hero__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.hero h1, .hero .hero__hg { display: grid; gap: 12px; }
.hero .hero__hg > h1 { display: block; }
.hero__eyebrow { margin-bottom: 12px; text-wrap: balance; }
.hero--center .hero__copy { text-align: center; display: grid; justify-items: center; }
.hero--center h1, .hero--center .hero__hg { justify-items: center; }
.hero .t-lead { margin-top: 20px; }
.hero .hero__intro { margin-top: 12px; }
.hero .btn-row { margin-top: 28px; }
.hero .hero__badges { margin-top: 24px; }
.hero--center .hero__badges { justify-content: center; }
.hero .t-lead--xl { text-wrap: balance; }
.hero .btn--secondary { --btn-2: var(--fg); --btn-2-hover-bg: var(--ghost); }
.hero [data-intro-lines].hl-silver { background: none; color: var(--fg); }
.hero [data-intro-lines].hl-silver .line { background: linear-gradient(180deg, #f5f5f7 30%, #a1a1a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__glance { margin-top: 40px; width: 100%; }
.hero__media { border-radius: var(--r-lg); overflow: clip; aspect-ratio: 4 / 3; margin: 0; }
.hero--media { position: relative; min-height: min(88vh, 900px); min-height: min(88svh, 900px); display: grid; align-items: end; padding: 0; overflow: clip; }
.hero--media .hero__bg { position: absolute; inset: 0; overflow: clip; }
.hero--media .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--media .hero__bg::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 45%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.35)); }
.hero--media .container { position: relative; }
.hero--media .hero__copy { position: relative; padding-block: 120px clamp(48px, 7vw, 96px); max-width: 720px; }
html[data-localnav] .hero--media { min-height: max(min(88vh, 900px), calc(100vh - var(--nav-h) - 40px)); min-height: max(min(88svh, 900px), calc(100svh - var(--nav-h) - 40px)); }
html[data-localnav].ribbon-off .hero--media { min-height: max(min(88vh, 900px), calc(100vh - var(--nav-h))); min-height: max(min(88svh, 900px), calc(100svh - var(--nav-h))); }
@media (max-width: 767px) and (min-height: 481px) {
html[data-callbar][data-localnav] .hero--media { min-height: calc(100vh - var(--nav-h) - 40px - var(--callbar-h) - env(safe-area-inset-bottom)); min-height: calc(100svh - var(--nav-h) - 40px - var(--callbar-h) - env(safe-area-inset-bottom)); }
html[data-callbar][data-localnav].ribbon-off .hero--media { min-height: calc(100vh - var(--nav-h) - var(--callbar-h) - env(safe-area-inset-bottom)); min-height: calc(100svh - var(--nav-h) - var(--callbar-h) - env(safe-area-inset-bottom)); }
}
.hero-article { padding-bottom: 48px; }
.hero-article__byline { margin-top: 16px; }
.hero-article__media { margin-top: 40px; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: clip; }
.seam { --seam-from: var(--c-black); --seam-to: var(--c-gray-6); display: block; height: clamp(96px, 16vh, 176px);
background-color: var(--seam-to); background-image: linear-gradient(to bottom, var(--seam-from), var(--seam-to)); }
@supports (color: color-mix(in oklab, red, blue)) {
.seam { background-image: linear-gradient(to bottom, var(--seam-from) 0%,
color-mix(in oklab, var(--seam-from), var(--seam-to) 3%) 10%, color-mix(in oklab, var(--seam-from), var(--seam-to) 10%) 20%,
color-mix(in oklab, var(--seam-from), var(--seam-to) 22%) 30%, color-mix(in oklab, var(--seam-from), var(--seam-to) 35%) 40%,
color-mix(in oklab, var(--seam-from), var(--seam-to) 50%) 50%, color-mix(in oklab, var(--seam-from), var(--seam-to) 65%) 60%,
color-mix(in oklab, var(--seam-from), var(--seam-to) 78%) 70%, color-mix(in oklab, var(--seam-from), var(--seam-to) 90%) 80%,
color-mix(in oklab, var(--seam-from), var(--seam-to) 97%) 90%, var(--seam-to) 100%); }
}
.seam--ink-white { --seam-to: var(--c-white); }
.morph { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.morph--ink { background: var(--c-black); opacity: clamp(0, calc((var(--enter, 1) - .25) / .45), 1); }
.morph--out { background: var(--morph-to, var(--c-white)); opacity: clamp(0, calc((var(--p, 0) - .92) / .075), 1); }
.pin { position: relative; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 16px; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.stat__label { font-size: 15px; color: var(--fg-muted); }
.stat__value { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-end; gap: .08em; color: var(--fg); margin: 0; min-height: clamp(48px, 6vw, 80px); }
.stat__value .t-stat-unit { font-size: clamp(17px, 2.5vw, 34px); }
.t-stat--word { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; }
.stat .t-stat:not(.t-stat--word) { font-size: clamp(48px, 6vw, 80px); }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 16px; }
@media (min-width: 1024px) { .glance { grid-template-columns: repeat(var(--cols, 4), minmax(0,1fr)); gap: 24px; } }
.glance > div { padding-top: 16px; border-top: 1px solid var(--hairline); }
.glance dt { font-size: 15px; color: var(--fg-muted); }
.glance dd { margin: 4px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.bento-dark { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (min-width: 360px) { .bento-dark { gap: 12px; } }
@media (min-width: 640px) { .bento-dark { gap: 16px; } }
@media (min-width: 1024px) { .bento-dark { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; } }
.tile { position: relative; display: flex; flex-direction: column; overflow: clip; border-radius: var(--r-md); background: var(--card);
container-type: inline-size; isolation: isolate; }
.tile::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 0%); width: 480px; height: 480px; margin: -240px 0 0 -240px;
border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent); opacity: 0; transition: opacity 600ms var(--ease-apple); pointer-events: none; }
.tile[data-lit]::before { opacity: 1; }
.tile__visual { aspect-ratio: 1 / .78; display: grid; place-items: center; padding: 16px; }
.tile__visual img { max-height: 100%; width: auto; border-radius: var(--r-sm); }
.tile__text { padding: 0 clamp(14px, 8cqi, 24px) clamp(16px, 8cqi, 28px); }
.tile__title { font-size: min(24px, calc((100cqi - 28px) / 8.2)); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
.tile__desc { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--fg-muted); }
@media (max-width: 639px) { .tile__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 1280px) { .tile__desc { font-size: 16px; } }
.ui-card { width: min(88%, 260px); padding: 16px; border-radius: 14px; background: #fff; color: var(--c-ink-1); box-shadow: var(--shadow-float); text-align: left; }
.tile .ui-card { width: 88%; padding: clamp(12px, 7cqi, 20px); }
.tile .ui-card__title { font-size: clamp(12px, 5.2cqi, 15px); }
.tile .ui-card__sub { font-size: clamp(12px, 4.6cqi, 13px); }
.tile .ui-card__rows li { font-size: clamp(12px, 4.8cqi, 13px); }
.tile .ui-card__chips li { font-size: 12px; }
.ui-card__more--narrow { display: none; }
@container (max-width: 240px) {
.tile .tile__visual:has(> .ui-card) { padding: 8px; }
.tile .ui-card { width: 100%; padding: 10px; }
.tile .ui-card:has(.ui-card__chips) .ui-card__sub { display: none; }
.tile .ui-card__chips { gap: 4px; margin-top: 10px; }
.tile .ui-card__chips li { padding: 3px 7px; }
.tile .ui-card__rows li:nth-child(n+2) { display: none; }
.tile .ui-card__chips li:nth-child(n+4):not(.ui-card__more), .tile .ui-card__more--wide { display: none; }
.tile .ui-card__more--narrow { display: block; }
}
@container (max-width: 160px) {
.tile .tile__visual:has(> .ui-card) { padding: 6px; }
.tile .ui-card { padding: 8px; border-radius: 10px; }
.tile .ui-card__title { font-size: 12px; line-height: 1.25; }
.tile .ui-card__sub { display: none; }
.tile .ui-card__chips { gap: 3px; margin-top: 6px; }
.tile .ui-card__chips li { padding: 2px 6px; }
.tile .ui-card__chips li:nth-child(n+3):not(.ui-card__more) { display: none; }
.tile .ui-card__rows { margin-top: 6px; }
.tile .ui-card__rows li { gap: 6px; line-height: 1.2; }
.tile .ui-card__check { width: 14px; height: 14px; }
}
.ui-card__title { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ui-card__sub { margin-top: 2px; font-family: var(--font-small); font-size: 12px; line-height: 1.35; color: var(--c-gray-1); }
.ui-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ui-card__chips li { padding: 4px 8px; border-radius: var(--r-pill); background: var(--c-gray-6); font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--c-ink-1); white-space: nowrap; }
.ui-card__rows { margin-top: 12px; display: grid; gap: 7px; }
.ui-card__rows li { display: flex; align-items: center; gap: 8px; font-family: var(--font-small); font-size: 12px; line-height: 1.3; }
.ui-card__check { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-ink-1); color: #fff; }
.bento { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 20px; }
.bento__a, .bento__f { grid-column: span 6; } .bento__b, .bento__c, .bento__d, .bento__e { grid-column: span 3; } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; }
.bento__a { grid-column: 1 / 8; grid-row: 1 / 3; } .bento__b { grid-column: 8 / 13; } .bento__c { grid-column: 8 / 13; }
.bento__d { grid-column: 1 / 6; } .bento__e { grid-column: 6 / 13; } .bento__f { grid-column: 1 / -1; } }
.card { position: relative; overflow: clip; border-radius: var(--r-md); background: var(--card); color: var(--fg); padding: clamp(24px, 3vw, 40px); }
.card--ink { background: var(--c-black); }
.card__title { font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.card__text { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--fg-muted); max-width: 27.62em; }
.card__link { margin-top: 8px; }
.card__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; font-size: clamp(56px, 7vw, 88px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.card__big small { font-size: 21px; letter-spacing: -0.01em; color: var(--fg-muted); font-weight: 600; }
.card__media { margin: 24px calc(clamp(24px, 3vw, 40px) * -1) calc(clamp(24px, 3vw, 40px) * -1); }
.card__media img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
.card--ink .card__media img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 18%, #000 52%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 18%, #000 52%); }
.cardgrid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
@media (min-width: 768px) { .cardgrid--2, .cardgrid--3, .cardgrid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .cardgrid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .cardgrid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cardgrid__item { display: flex; flex-direction: column; gap: 10px; }
.cardgrid__icon { color: var(--fg); margin-bottom: 6px; }
.cardgrid__title { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.cardgrid__text { font-size: 17px; line-height: 1.5; color: var(--fg-muted); }
.cardgrid__note { font-size: 14px; color: var(--fg-muted); }
.cardgrid__item--link { padding: 0; transition: box-shadow var(--dur-fast) var(--ease-apple); }
.cardgrid__link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(24px, 3vw, 40px); border-radius: inherit; }
@media (hover: hover) and (pointer: fine) { .cardgrid__item--link:hover { box-shadow: var(--shadow-soft); } }
.checklist { display: grid; gap: 14px 32px; }
@media (min-width: 768px) { .checklist:not(.checklist--1) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--fg); }
.checklist__mark { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--chip); color: var(--fg); margin-top: 1px; }
[data-tone="surface"] .checklist__mark { background: var(--c-white); }
.numbered { display: grid; max-width: 720px; border-top: 1px solid var(--hairline); list-style: none; }
.numbered > li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding-block: 20px; border-bottom: 1px solid var(--hairline); }
.numbered__n { font-size: 17px; font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.numbered__title { font-size: 17px; font-weight: 600; letter-spacing: -0.013em; }
.numbered__text { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--fg-muted); }
@media (min-width: 768px) {
.numbered--row { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; border-top: 0; }
.numbered--row > li { position: relative; grid-template-columns: 1fr; gap: 0; align-content: start; border-bottom: 0; padding-block: 24px 0; }
.numbered--row > li::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line, var(--hairline)); transform-origin: left center; }
.numbered--row .numbered__n { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--fg-subtle); }
.numbered--row .numbered__title { font-size: 21px; line-height: 1.2; margin-top: 16px; text-wrap: balance; }
.numbered--row .numbered__text { font-size: 15px; margin-top: 6px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.numbered--row:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .numbered--row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1279px) {
.numbered--row:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.route__list { position: relative; list-style: none; display: grid; gap: 16px; padding-left: 28px; margin-bottom: 16px; }
.route__list::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--hairline); }
.route__list li { position: relative; font-size: 17px; line-height: 1.45; }
.route__list li::before { content: ""; position: absolute; left: -28px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); }
.route__list li:last-child::before { background: var(--c-red); }
.rail { --inset: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); position: relative; }
.rail__track { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
scroll-padding-inline: var(--inset); padding-inline: var(--inset); padding-block: 4px 8px; margin: 0;
scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.rail__track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .rail__track { gap: 24px; } }
.rail__item { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .rail__item { flex-basis: 46%; } }
@media (min-width: 1024px) { .rail__item { flex-basis: calc((min(100vw, var(--container)) - 2 * var(--gutter) - 2 * 24px) / 3.2); } }
.rail__ui { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.rail[data-static] .rail__ui { display: none; }
.rail__progress { flex: 1; height: 2px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.rail__thumb { display: block; height: 100%; width: calc(var(--rail-vis, .3) * 100%); background: var(--fg); border-radius: inherit;
transform: translateX(calc(var(--rail-pos, 0) * (1 / var(--rail-vis, .3) - 1) * 100%)); }
html:not(.engine) .rail__progress { visibility: hidden; }
.rail__btns { display: none; gap: 12px; }
@media (min-width: 768px) { html.engine .rail__btns { display: flex; } }
.rail__btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ghost); color: var(--ghost-fg);
transition: opacity var(--dur-fast) var(--ease-apple), background-color var(--dur-fast) var(--ease-apple), transform var(--dur-press) var(--ease-apple); }
.rail__btn:hover { filter: brightness(.95); }
.rail__btn:active { transform: scale(.94); }
.rail__btn[disabled], .rail__btn[aria-disabled="true"] { opacity: .36; cursor: default; }
.rail__btn[aria-disabled="true"]:hover { filter: none; } .rail__btn[aria-disabled="true"]:active { transform: none; }
.svc-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-md); background: var(--card); color: var(--fg);
overflow: clip; transition: box-shadow var(--dur-fast) var(--ease-apple), transform var(--dur-press) var(--ease-apple); container-type: inline-size; }
.svc-card:active { transform: scale(.99); }
.svc-card__media { aspect-ratio: 4 / 3; min-height: 0; overflow: clip; background-color: var(--c-gray-5); flex: none; }
.svc-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-zoom) var(--ease-apple), opacity 400ms var(--ease-apple); }
.svc-card__cat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.svc-card__tag { height: 20px; padding: 0 7px; font-size: 12px; background: var(--c-gray-6); color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tone="white"] .svc-card__tag { background: var(--c-white); }
.svc-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
@media (min-width: 768px) { .svc-card__body { padding: 28px; } }
.svc-card__cat { font-size: 12px; color: var(--fg-muted); margin-bottom: 6px; }
.svc-card__title { font-size: clamp(21px, 2vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.svc-card__sum { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--fg-muted); }
.svc-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline-soft); }
.svc-card__sum + .svc-card__foot { margin-top: auto; }
.svc-card__body > .svc-card__sum { margin-bottom: 16px; }
.svc-card__foot .link-more { min-height: 28px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
.svc-card:hover { box-shadow: var(--shadow-soft); }
.svc-card:hover .svc-card__media img { transform: scale(1.03); }
.svc-card:hover .link-more { text-decoration: underline; }
}
.review { display: flex; flex-direction: column; gap: 16px; height: 100%; margin: 0; padding: 28px; border-radius: var(--r-md); background: var(--card); }
.review__stars { display: flex; gap: 2px; color: var(--fg); }
.review__quote { margin: 0; font-size: 17px; line-height: 1.55; letter-spacing: -0.013em; color: var(--fg); }
.review__by { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-hover); font-size: 15px; font-weight: 600; color: var(--fg); }
[data-tone="surface"] .review__avatar { background: var(--c-gray-6); }
.review__name { font-size: 15px; font-weight: 600; }
.rail--reviews .rail__item { display: flex; }
@media (min-width: 1024px) { .rail--reviews .rail__item { flex-basis: calc((min(100vw, var(--container)) - 2 * var(--gutter) - 2 * 24px) / 3); } }
.steps { padding-block: var(--section-y); }
.steps__panels { display: grid; gap: 56px; margin-top: 8px; }
.step-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.step-chip span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--fg); font-variant-numeric: tabular-nums; }
.steps__panel .t-h3 { color: var(--fg); }
.steps__panel .t-lead { margin-top: 10px; }
.steps__panel .link-more { margin-top: 4px; }
.steps__media { position: relative; margin: 0; border-radius: var(--r-md); overflow: clip; aspect-ratio: 4 / 3; background: var(--c-ink-1); }
.steps__media--inline { margin-top: 24px; }
@media (min-width: 1024px) {
.steps:not([data-pinned]) .steps__panels { gap: 72px; margin-top: 16px; }
.steps:not([data-pinned]) .steps__panel { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.steps:not([data-pinned]) .steps__media--inline { margin-top: 0; }
}
.steps__media > img, .steps__img { width: 100%; height: 100%; object-fit: cover; }
.steps__ui { position: absolute; z-index: 2; inset: auto 16px 16px auto; display: flex; justify-content: flex-end; }
.steps__media--ui { display: grid; place-items: center; background: radial-gradient(90% 90% at 50% 40%, #2c2c2e, #1d1d1f 60%, #111 100%); }
.steps__media--ui .steps__ui { position: static; inset: auto; justify-content: center; width: 100%; }
.steps__media--ui .ui-card { width: min(80%, 340px); }
@media (min-width: 640px) {
.steps__media--ui .ui-card:not(.ui-card--sm) { width: min(80%, 480px); padding: clamp(20px, 3vw, 32px); border-radius: 20px; }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__title { font-size: clamp(17px, 1.7vw, 21px); }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__sub { font-size: 15px; margin-top: 4px; }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__chips { gap: 8px; margin-top: 18px; }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__chips li { font-size: 14px; padding: 6px 12px; }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__rows { gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-gray-5); }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__rows li { font-size: 15px; gap: 10px; }
.steps__media--ui .ui-card:not(.ui-card--sm) .ui-card__check { width: 22px; height: 22px; }
}
.steps__visual, .steps__tabs { display: none; }
.steps__tab { display: grid; gap: 12px; text-align: left; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-muted);
min-height: 44px; transition: color var(--dur-base) var(--ease-apple); align-content: start; white-space: nowrap; }
.steps__tab[aria-selected="true"] { color: var(--fg); }
.steps__bar { display: block; height: 2px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.steps__bar i { display: block; height: 100%; background: var(--fg); transform-origin: left center; transform: scaleX(0); }
.steps__tab[aria-selected="true"] .steps__bar i { background: var(--c-red); }
.steps__num { font-variant-numeric: tabular-nums; margin-right: 6px; }
.statement { background: var(--c-black); padding-block: var(--section-y); }
.statement .morph { display: none; }
.statement__card { position: relative; overflow: clip; background: var(--c-black); margin-inline: auto; display: flex; flex-direction: column;
width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); border-radius: var(--r-lg); }
.statement__img { position: relative; order: 1; display: block; width: 100%; height: auto; aspect-ratio: 2.4 / 1; max-height: 800px; margin-top: -6%;
object-fit: cover; object-position: 62% 45%; opacity: .9;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
@media (max-width: 767px) { .statement__img { aspect-ratio: 4 / 3; object-position: 72% 50%; margin-top: -10%; } }
.statement__card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.92) 32%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.15) 100%); }
.statement__copy { position: relative; z-index: 1; padding-top: clamp(40px, 7vh, 80px); text-align: center; display: grid; justify-items: center; gap: 22px; }
@media (max-width: 767px) { .statement__copy { padding-top: 40px; gap: 20px; } }
.statement__h { max-width: 8.93em; color: var(--c-gray-6); }
@media (max-width: 359px) { .statement__h { font-size: 12.2vw; } }
@media (min-width: 1024px) { .statement__br { display: none; } .statement__h { font-size: clamp(44px, min(6vw, 10.5vh), 80px); font-size: clamp(44px, min(6vw, 10.5svh), 80px); max-width: none; } }
.statement__proof { justify-content: center; }
@media (max-width: 767px) {
.statement .statement__proof { display: grid; justify-items: center; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.statement .statement__proof .chip { min-height: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
color: inherit; font-size: inherit; font-weight: 500; line-height: inherit; white-space: normal; }
.statement .btn-row { flex-wrap: nowrap; gap: 10px; }
.statement .btn { padding-inline: 18px; font-size: 16px; }
}
@media (max-width: 374px) { .statement .btn { height: 40px; padding-inline: 14px; font-size: 15px; } }
.callouts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 2; }
.callout { position: absolute; left: var(--x); top: var(--y); height: 0; width: var(--len, 18%); }
@media (min-width: 1024px) { .callout { width: var(--len-lg, var(--len, 18%)); } }
.callout[data-side="left"] { left: auto; right: calc(100% - var(--x)); }
.callout[data-anchor] { left: var(--lx); right: calc(100% - var(--x)); width: auto; display: flex; align-items: center; }
.callouts .callout[data-anchor] .callout__text { position: relative; top: auto; right: auto; left: auto; order: -1; flex: none; transform: none; text-align: left; }
.callouts .callout[data-anchor] .callout__line { position: relative; top: auto; left: auto; right: auto; flex: 1; min-width: 12px; margin-left: 10px; }
.callout__dot { position: absolute; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #f5f5f7; box-shadow: 0 0 0 3px rgba(245,245,247,.18);
transform: scale(0); transition: transform 300ms var(--ease-apple); }
.callout[data-side="right"] .callout__dot { left: -2.5px; } .callout[data-side="left"] .callout__dot { right: -2.5px; }
.callout__line { position: absolute; top: -.5px; left: 0; right: 0; height: 1px; background: rgba(245,245,247,.5); transform: scaleX(0); transition: transform var(--dur-reveal) var(--ease-apple); }
.callout[data-side="right"] .callout__line { transform-origin: left center; } .callout[data-side="left"] .callout__line { transform-origin: right center; }
.callout__text { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
color: #f5f5f7; text-shadow: 0 1px 12px rgba(0,0,0,.5); opacity: 0; transition: opacity 400ms var(--ease-apple) 200ms; }
@media (min-width: 768px) { .callout__text { font-size: 17px; } }
.callout[data-side="right"] .callout__text { left: calc(100% + 10px); } .callout[data-side="left"] .callout__text { right: calc(100% + 10px); text-align: right; }
.callouts[data-on] .callout__line { transform: scaleX(1); } .callouts[data-on] .callout__text { opacity: 1; } .callouts[data-on] .callout__dot { transform: none; }
.callouts[data-on] .callout:nth-child(2) * { transition-delay: 120ms; } .callouts[data-on] .callout:nth-child(3) * { transition-delay: 240ms; }
.callouts--ink .callout__dot { background: #1d1d1f; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 5px rgba(29,29,31,.14); }
.callouts--ink .callout__line { background: rgba(29,29,31,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.callouts--ink .callout__text { color: #1d1d1f; text-shadow: none; font-size: 14px; padding: 5px 12px; border-radius: var(--r-pill);
background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.certs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.cert { display: grid; gap: 8px; align-content: start; padding: 24px 16px 24px 0; border-top: 1px solid var(--hairline); color: var(--fg); }
.cert .icon { color: var(--fg); margin-bottom: 4px; }
.cert__name { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.cert__detail { font-size: 15px; line-height: 1.45; color: var(--fg-muted); }
@media (min-width: 1024px) { .certs { grid-template-columns: repeat(4, minmax(0,1fr)); } .cert { border-top: 0; padding: 0 24px; border-left: 1px solid var(--hairline); } .cert:first-child { border-left: 0; padding-left: 0; } }
.marquee-wrap { display: flex; align-items: center; gap: 16px; }
.marquee { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; min-width: 0; }
.marquee__list { display: contents; margin: 0; padding: 0; list-style: none; }
.marquee__list--dupe, .marquee__toggle { display: none; }
.marquee__list li { font-size: clamp(24px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-subtle); white-space: nowrap; line-height: 1.3; }
.marquee__toggle .i-play { display: none; }
.marquee-wrap[data-paused] .marquee__toggle .i-play { display: block; }
.marquee-wrap[data-paused] .marquee__toggle .i-pause { display: none; }
.marquee__toggle { width: 36px; height: 36px; flex: none; }
@keyframes marquee { to { transform: translate3d(-100%, 0, 0); } }
.ba { margin: 0; }
.ba__frame { position: relative; aspect-ratio: var(--ba-ar); border-radius: var(--r-md); overflow: clip; background: var(--c-gray-5); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba--feature .ba__frame { border-radius: var(--r-lg); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--before { clip-path: inset(0 calc(100% - var(--bx, 50%) - (var(--pos) - var(--bx, 50%)) / var(--bz, 1)) 0 0);
transform: scale(var(--bz, 1)); transform-origin: var(--bx, 50%) var(--by, 50%); }
.ba__handle { position: absolute; inset: 0 auto 0 0; width: 100%; translate: var(--pos) 0; pointer-events: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.25); }
.ba__knob { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%;
display: flex; align-items: center; justify-content: center; gap: 2px; background: rgba(255,255,255,.88);
-webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); color: var(--c-ink-1); box-shadow: var(--shadow-float); }
.ba__knob svg { width: 14px; height: 14px; }
.ba__tag { position: absolute; top: 16px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: rgba(0,0,0,.55); color: #fff;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; }
.ba__tag--before { left: 16px; } .ba__tag--after { right: 16px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; display: none; touch-action: pan-y; }
.ba.is-live .ba__range { display: block; }
.ba:not(.is-live) .ba__knob { display: none; }
.ba__frame:has(.ba__range:focus-visible) .ba__knob { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.ba__cap { margin-top: 12px; font-size: 15px; color: var(--fg-muted); }
.ba-switch__stage { display: grid; gap: 32px; }
.ba-switch__ui { display: flex; justify-content: center; margin-top: 24px; }
html.engine .ba-switch[data-live] .ba-switch__stage { display: grid; gap: 0; }
html.engine .ba-switch[data-live] .ba-switch__stage > .ba { grid-area: 1 / 1; }
.ba[data-entering] { animation: ba-in 300ms var(--ease-apple) both; }
@keyframes ba-in { from { opacity: 0; } }
.pair { margin: 0; }
.pair__grid { display: flex; gap: 12px; align-items: stretch; }
.pair__cell { position: relative; flex: var(--ar, 1) 1 0%; min-width: 0; aspect-ratio: var(--ar, 3 / 4); border-radius: var(--r-md); overflow: clip; background: var(--c-gray-5); }
.pair__cell img { width: 100%; height: 100%; object-fit: cover; }
.masonry { columns: 1; column-gap: 16px; list-style: none; }
@media (min-width: 640px) { .masonry { columns: 2; } } @media (min-width: 1024px) { .masonry { columns: 3; column-gap: 24px; } }
.masonry__item { break-inside: avoid; margin-bottom: 16px; } @media (min-width: 1024px) { .masonry__item { margin-bottom: 24px; } }
.masonry__btn { display: block; width: 100%; border-radius: var(--r-md); overflow: clip; cursor: zoom-in; background: var(--card); }
html:not(.js) [data-lightbox] { cursor: default; }
.masonry__btn img { width: 100%; height: auto; transition: transform var(--dur-zoom) var(--ease-apple); }
@media (hover: hover) and (pointer: fine) { .masonry__btn:hover img { transform: scale(1.03); } }
.masonry__cap { margin-top: 8px; font-size: 14px; color: var(--fg-muted); }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.92); color: #f5f5f7; opacity: 0; transition: opacity 200ms var(--ease-apple);
touch-action: pan-y pinch-zoom; overscroll-behavior: contain; }
.lightbox__fig, .lightbox__img { touch-action: pan-y pinch-zoom; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.lightbox[open] { opacity: 1; }
.lightbox::backdrop { background: transparent; }
.lightbox__fig { height: 100%; display: grid; place-items: center; align-content: center; margin: 0; padding: 64px max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left)); }
.lightbox__img { max-width: min(92vw, 1600px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: var(--r-lg); object-fit: contain; transition: opacity 200ms var(--ease-apple), transform 280ms var(--ease-apple); }
.lightbox__img[data-swap] { opacity: 0; transform: scale(.96); }
.lightbox__close, .lightbox__prev, .lightbox__next { position: fixed; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255,255,255,.12); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lightbox__close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.lightbox__prev { left: max(16px, env(safe-area-inset-left)); top: 50%; } .lightbox__next { right: max(16px, env(safe-area-inset-right)); top: 50%; }
.lightbox__count { position: fixed; top: calc(28px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font-size: 12px; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.lightbox__cap { margin-top: 12px; font-size: 14px; color: #a1a1a6; text-align: center; }
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q { margin: 0; }
.faq__q button { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding-block: 20px; text-align: left; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
@media (min-width: 768px) { .faq__q button { font-size: 21px; } }
.faq__q button:focus-visible { outline-offset: 2px; }
.faq__icon { position: relative; flex: none; width: 16px; height: 16px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1.5px solid currentColor; margin-top: -.75px;
border-radius: 1px; background: none; transition: transform var(--dur-base) var(--ease-apple); }
.faq__icon::after { transform: rotate(90deg); }
[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 1fr; }
html.engine .faq__a { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-base) var(--ease-apple), visibility 0s linear var(--dur-base); }
html.engine .faq__item[data-open] .faq__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
html:not(.engine) .faq__icon { display: none; }
.faq__inner { overflow: hidden; }
.faq__inner > :last-child { padding-bottom: 24px; }
.faq__a p { font-size: 17px; line-height: 1.55; color: var(--fg-muted); max-width: 42.69em; }
.faq__a a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.faq--split { display: grid; gap: 32px; }
.faq__title .t-h1 { font-size: clamp(36px, 5vw, 56px); }
.faq__title > p { margin-top: 16px; font-size: 17px; color: var(--fg-muted); }
.faq__title > p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .faq--split { grid-template-columns: 4fr 8fr; gap: 64px; }
.faq--split .faq__title { position: sticky; top: calc(var(--chrome-h) + 32px); align-self: start; } }
.cta-band { text-align: center; overflow: clip; }
.cta-band::before { content: ""; position: absolute; left: 50%; bottom: -12%; width: min(1200px, 140vw); aspect-ratio: 2 / 1; transform: translateX(-50%);
background: radial-gradient(closest-side, var(--c-red-glow), transparent); pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 88%); mask-image: linear-gradient(to bottom, #000 45%, transparent 88%); }
.cta-band > .container { position: relative; display: grid; justify-items: center; gap: 12px; }
.cta-band .t-h1 { max-width: 10.2em; }
.cta-band .t-lead { margin-top: 8px; }
.cta-band .btn-row { margin-top: 20px; justify-content: center; }
.cta-band__meta { margin-top: 20px; font-size: 12px; color: var(--fg-muted); }
@media (max-width: 639px) { .cta-band .btn-row .btn { flex: 1 1 200px; max-width: 260px; } }
@media (max-width: 767px) { a.cta-band__item, .cta-band__item > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 8px; } }
@media (min-width: 768px) { a.cta-band__item, .cta-band__item > a { display: inline-flex; align-items: center; min-height: 24px; } }
.nap { display: grid; gap: 4px; align-content: start; container-type: inline-size; }
.nap > *, .map-facade { min-width: 0; }
.nap__title { margin-bottom: 8px; }
.nap__addr { font-size: 17px; line-height: 1.45; }
.nap__rows { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); display: grid; gap: 8px; }
.nap__rows > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; }
.nap__rows dt { font-size: 15px; color: var(--fg-muted); }
.nap__rows dd { margin: 0; font-size: min(17px, 6.6cqi); white-space: nowrap; min-width: 0; }
@container (max-width: 380px) { .nap__rows > div { grid-template-columns: 1fr; gap: 0; } .nap__rows dd { font-size: min(17px, 7.2cqi); } }
.nap__rows dd a { color: var(--link); text-decoration: none; }
@media (max-width: 767px) { .nap__rows { gap: 0; } .nap__rows > div { align-items: center; } .nap__rows dd a { display: inline-flex; align-items: center; min-height: 44px; } }
.nap__rows dd a:hover { text-decoration: underline; }
.nap__hours { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.nap__hours-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 8px; }
.nap__hours-title { font-size: 15px; color: var(--fg-muted); }
.nap__status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--chip); color: var(--fg-muted); }
.nap__status::before { content: ""; width: 0; height: 0; border: 3px solid currentColor; border-radius: 50%; background: none; }
.nap__status[data-open] { background: var(--c-success-tint); color: var(--c-success); }
.nap__table { width: 100%; font-size: 17px; font-variant-numeric: tabular-nums; }
.nap__table th { text-align: left; font-weight: 400; padding: 4px 16px 4px 0; white-space: nowrap; }
.nap__table td { padding: 4px 0; white-space: nowrap; }
@container (max-width: 300px) { .nap__table { font-size: 15px; } }
.map-facade { position: relative; margin-top: 20px; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: clip; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center;
background-color: var(--card); background-image: linear-gradient(var(--hairline-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-soft) 1px, transparent 1px); background-size: 24px 24px; }
.card .map-facade { background-color: var(--c-gray-6); }
.map-facade__art { color: var(--c-red); }
.map-facade__addr { font-size: 15px; line-height: 1.45; }
.map-facade iframe { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; border: 0; }
.map-facade .link-ext { font-size: 14px; }
.map-facade--drawn { display: block; padding: 0; text-align: left; isolation: isolate; container-type: inline-size;
background: #eceef2; --mf-land: #eceef2; --mf-water: #d3dfe9; --mf-road: #fff; --mf-case: #c9ced6; }
.card .map-facade--drawn { background: var(--mf-land); }
.map-facade__map { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mf-land { fill: var(--mf-land); } .mf-water { fill: var(--mf-water); }
.mf-street path, .mf-road, .mf-case { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mf-street path { stroke: var(--mf-road); stroke-width: 4; }
.mf-case { stroke: var(--mf-case); stroke-width: 15; } .mf-road { stroke: var(--mf-road); stroke-width: 11; }
.mf-case--old { stroke-width: 9; } .mf-road--old { stroke-width: 6; }
.mf-shield rect { fill: #fff; stroke: var(--mf-case); stroke-width: 1.5; }
.mf-shield text { fill: var(--c-gray-1); font: 600 15px/1 var(--font-sans); letter-spacing: 0; }
.map-facade--drawn .map-facade__art { position: absolute; z-index: 1; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
border-radius: 50%; background: var(--c-red); color: #fff; box-shadow: 0 0 0 6px rgba(215,0,21,.16), 0 8px 20px rgba(0,0,0,.2); }
.map-facade__bar { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
padding: 10px 12px 10px 18px; border-radius: 18px; color: var(--c-ink-1); --link: var(--c-red-text);
background: rgba(255,255,255,.84); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04); }
.map-facade__bar .map-facade__addr { font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.map-facade__bar .btn-row { flex-wrap: nowrap; gap: 4px 14px; }
.map-facade__bar .link-ext { min-height: 36px; white-space: nowrap; }
@media (min-width: 640px) { .map-facade__bar { left: 16px; right: 16px; bottom: 16px; } }
@container (max-width: 430px) {
.map-facade__bar { justify-content: center; padding: 8px 12px; }
.map-facade__bar .map-facade__addr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
html:not(.js) [data-map-show] { display: none; }
.compare-wrap { border: 1px solid var(--hairline); border-radius: 14px; overflow-x: auto; scroll-snap-type: x proximity; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.compare th, .compare td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.compare thead th { background: var(--c-gray-6); font-weight: 600; color: var(--fg); position: sticky; top: 0; }
.compare tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; position: sticky; left: 0; background: var(--bg); }
.compare td { color: var(--fg-body); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 12px; color: var(--fg-muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--fg-subtle); }
.crumbs a { position: relative; color: var(--fg-muted); } .crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs a::after { content: ""; position: absolute; inset: -14px -3px; }
.crumbs [aria-current] { color: var(--fg); }
@media (max-width: 479px) { .crumbs ol { flex-wrap: nowrap; } .crumbs li { flex: none; white-space: nowrap; } .crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } }
.hero--center .crumbs ol { justify-content: center; }
.links-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); list-style: none; }
@media (min-width: 768px) { .links-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1024px) { .links-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.links-grid a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 16px; border-bottom: 1px solid var(--hairline); color: var(--fg); }
.links-grid .lg__title { font-size: 17px; font-weight: 600; letter-spacing: -0.013em; }
.links-grid .lg__desc { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--fg-muted); }
.links-grid a::after { content: "›"; font-size: 21px; color: var(--link); transition: transform var(--dur-fast) var(--ease-apple); }
.links-grid a:hover::after { transform: translateX(3px); }
.links-grid a[target="_blank"]::after { content: "↗"; font-size: 17px; }
.links-grid a[target="_blank"]:hover::after { transform: translate(2px, -2px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips > li { display: contents; }
.chips > li.chips__label { display: block; width: 100%; margin: 16px 0 4px; font-size: 12px; color: var(--fg-muted); }
.chips > li.chips__label:first-child { margin-top: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--chip); color: var(--fg);
font-size: 14px; font-weight: 500; letter-spacing: -0.006em; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-apple), transform var(--dur-press) var(--ease-apple); }
a.chip { position: relative; }
a.chip::after { content: ""; position: absolute; inset: -4px 0; }
a.chip:hover { background: var(--chip-hover); }
a.chip:active { transform: scale(.98); }
.chips--quiet .chip { background: transparent; border: 1px solid var(--hairline); }
.chips--glass .chip { background: rgba(255,255,255,.12); color: #f5f5f7; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.prose { max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--fg-body); }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 48px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; color: var(--fg); text-wrap: balance; }
.prose h3 { margin-top: 32px; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--fg); }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose ul, .prose ol { padding-left: 1.25em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-top: 6px; padding-left: 4px; } .prose li::marker { color: var(--fg-subtle); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote { margin: 24px 0; padding-left: 18px; border-left: 2px solid var(--hairline); color: var(--fg); }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--hairline); }
.prose .note { padding: 14px 18px; border-radius: 14px; background: var(--card); font-size: 15px; line-height: 1.5; }
.prose table { width: 100%; }
.prose img, .prose figure { margin-block: 32px; border-radius: var(--r-md); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--ghost); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { min-height: 36px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--fg); white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease-apple), box-shadow var(--dur-fast) var(--ease-apple); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--card-raised); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }
[data-tone="ink"] .seg button[aria-pressed="true"] { background: var(--c-ink-2); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .filters { display: none; }
html.js .filters:not([data-live]) { visibility: hidden; }
.filters button { min-height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--chip); font-size: 14px; color: var(--fg); }
.filters button[aria-pressed="true"] { background: var(--c-ink-1); color: #fff; }
@media (max-width: 767px) { .seg button, .filters button { min-height: 44px; } }
.readfill { font-family: var(--font-lead); font-size: clamp(28px, 3.6vw, 48px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); max-width: 19.41em; text-wrap: pretty; }
@media (min-width: 900px) { .readfill { font-family: var(--font-display); } }
.readfill .rf { white-space: nowrap; }
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } .split--flip .split__media { order: -1; } }
.split__media { margin: 0; border-radius: var(--r-lg); overflow: clip; aspect-ratio: var(--ar, 4 / 3); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__copy > * + * { margin-top: 20px; }
.split__copy > .t-eyebrow + * { margin-top: 8px; }
.split__copy .prose { max-width: 560px; }
.field { display: grid; gap: 8px; }
.field__label { font-size: 14px; font-weight: 600; letter-spacing: -0.006em; color: var(--fg); }
.field__hint { font-size: 14px; color: var(--fg-muted); }
.input, .select, .textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--control-border); border-radius: var(--r-sm);
background: var(--card-raised); color: var(--fg); font: 400 17px/1.3 var(--font-sans); letter-spacing: -0.013em;
transition: border-color var(--dur-fast) var(--ease-apple), box-shadow var(--dur-fast) var(--ease-apple), background-color var(--dur-fast) var(--ease-apple); }
[data-tone="white"] .input, [data-tone="white"] .select, [data-tone="white"] .textarea { background: #fff; }
.textarea { min-height: 128px; padding-block: 14px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--c-gray-1); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-gray-1); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(0,113,227,.25); }
.select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; }
.field[data-invalid] .input, .field[data-invalid] .select, .field[data-invalid] .textarea, .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-red); background-color: var(--c-red-tint); }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; line-height: 1.35; color: var(--c-error); }
.field__error svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
input[type="date"].input { padding-right: 12px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--c-red); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--c-ink-1); }
.fgroup { display: grid; gap: 20px; }
.fgroup + .fgroup { margin-top: 40px; }
.fgroup__legend { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 4px; }
@media (min-width: 640px) { .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }
}
@layer motion { @media screen {
:root.js:not(.rm) .hero-cine { padding-bottom: 0; }
:root.js:not(.rm) .hero-cine__track { height: 180vh; }
@media (min-width: 768px) { :root.js:not(.rm) .hero-cine__track { height: 240vh; } }
:root.js:not(.rm) .hero-cine__stage { position: sticky; top: var(--chrome-h); height: calc(100vh - var(--chrome-h)); height: calc(100svh - var(--chrome-h)); overflow: clip; contain: layout paint; }
:root.js:not(.rm) .hero-cine__copy {
--kc: clamp(0, calc(var(--p, 0) / .3), 1);
opacity: calc(1 - var(--kc));
transform: translate3d(0, calc(var(--kc) * -40px), 0) scale(calc(1 - var(--kc) * .04)); }
:root.js:not(.rm) .hero-cine[data-faded] .hero-cine__copy { pointer-events: none; }
:root.js:not(.rm) .hero-cine__media { position: absolute; inset: 0; margin: 0; width: auto; max-width: none; aspect-ratio: auto;
--km: clamp(0, calc((var(--p, 0) - .05) / .45), 1);
--s: calc(var(--s0, .86) + (1 - var(--s0, .86)) * var(--km));
transform: translate3d(0, calc(var(--y0, 60vh) * (1 - var(--km))), 0) scale(var(--s));
border-radius: calc(var(--r-lg) * (1 - var(--km)) / var(--s)); }
:root.js:not(.rm) .hero-cine__frame { inset: auto; left: 50%; top: 50%; aspect-ratio: 16 / 9; width: max(100%, calc((100vh - var(--chrome-h)) * 16 / 9)); width: max(100%, calc((100svh - var(--chrome-h)) * 16 / 9)); transform: translate(-50%, -50%); }
:root.js:not(.rm) .hero-cine__img { object-position: 50% 50%; transform: scale(calc(1.08 - .08 * var(--km, 0))); }
:root.js:not(.rm) .hero-cine__cap { opacity: clamp(0, calc((var(--p, 0) - .85) / .1), 1); }
:root.js:not(.rm) .hero-cine__glow { opacity: clamp(0, calc(var(--p, 0) / .2), 1); }
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
:root.js:not(.rm) .hero-cine .callouts { display: block; }
:root.engine:not(.rm) .hero-cine__facts { display: none; }
}
:root.js:not(.rm) .hero-cine__facts { margin-top: 0; padding-block: 24px 8px; }
:root.js:not(.rm) .hero--media[data-scrub="zoom"] .hero__bg img { transform: scale(calc(1.06 - .06 * clamp(0, calc(var(--p, 0) / .6), 1))); }
@media (min-width: 1024px) {
:root.engine:not(.rm) .steps[data-pinned] { height: var(--pin-h, 420vh); padding-block: 0; }
:root.engine:not(.rm) .steps[data-pinned] .pin__stage { position: sticky; top: var(--chrome-h); height: calc(100vh - var(--chrome-h)); height: calc(100svh - var(--chrome-h)); overflow: clip; }
:root.engine:not(.rm) .steps[data-pinned] .morph { display: block; }
:root.engine:not(.rm) .steps[data-pinned] .morph--out { z-index: 2; opacity: clamp(0, calc((var(--p, 0) - .935) / .065), 1); }
:root.engine:not(.rm) .steps[data-pinned] .steps__grid { background: transparent; position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center;
--kx: clamp(0, calc((var(--p, 0) - .935) / .065), 1); transform: scale(calc(1 - .026 * var(--kx)));
transition: color var(--dur-base) var(--ease-apple); }
:root.engine:not(.rm) .steps[data-pinned] .steps__grid .head { margin-bottom: 0; }
:root.engine:not(.rm) .steps[data-pinned] .steps__grid .t-h2 { font-size: clamp(32px, 3.6vw, 48px); }
:root.engine:not(.rm) .steps[data-pinned] .steps__grid .head, :root.engine:not(.rm) .steps[data-pinned] .steps__grid .t-h2,
:root.engine:not(.rm) .steps[data-pinned] .steps__grid .t-lead, :root.engine:not(.rm) .steps[data-pinned] .steps__grid .t-eyebrow { transition: color var(--dur-base) var(--ease-apple); }
:root.engine:not(.rm) .steps[data-pinned] .steps__tabs { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0,1fr)); gap: 12px; margin-top: 40px; }
@media (max-width: 1279px) { :root.engine:not(.rm) .steps[data-pinned] .steps__grid { grid-template-columns: 1fr 1fr; gap: 48px; } :root.engine:not(.rm) .steps[data-pinned] .steps__tab { font-size: 12px; } }
:root.engine:not(.rm) .steps[data-pinned] .step-chip, :root.engine:not(.rm) .steps[data-pinned] .steps__media--inline { display: none; }
:root.engine:not(.rm) .steps[data-pinned] .steps__visual { display: block; position: relative; height: min(72%, 620px); }
:root.engine:not(.rm) .steps[data-pinned] .steps__panels { display: block; position: relative; min-height: 15em; margin-top: 40px; }
:root.engine:not(.rm) .steps[data-pinned] .steps__panel { position: absolute; inset: 0 0 auto; opacity: 0; transform: translate3d(0,22px,0); pointer-events: none;
transition: opacity 500ms var(--ease-apple), transform 500ms var(--ease-apple); }
:root.engine:not(.rm) .steps[data-pinned] .steps__panel[data-state="active"] { opacity: 1; transform: none; pointer-events: auto; }
:root.engine:not(.rm) .steps[data-pinned] .steps__panel[data-state="past"] { transform: translate3d(0,-22px,0); }
:root.engine:not(.rm) .steps[data-pinned] .steps__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: var(--r-lg); opacity: 0; transform: scale(1.04);
transition: opacity 600ms var(--ease-apple), transform var(--dur-zoom) var(--ease-apple); }
:root.engine:not(.rm) .steps[data-pinned] .steps__media[data-state="active"] { opacity: 1; transform: none; }
}
@media (min-width: 1024px) { :root.engine:not(.rm) .steps[data-pinned] + .seam--static-only { display: none; } }
:root.js:not(.rm) .statement { height: var(--pin-h, 300vh); padding-block: 0; background: var(--c-white); }
@media (max-width: 767px) { :root.js:not(.rm) .statement { --pin-h: 240vh; } }
:root.js:not(.rm) .statement .pin__stage { position: sticky; top: var(--chrome-h); height: calc(100vh - var(--chrome-h)); height: calc(100svh - var(--chrome-h)); overflow: clip; contain: layout paint; }
:root.js:not(.rm) .statement .morph { display: block; }
:root.js:not(.rm) .statement .morph--ink { opacity: clamp(0, calc((var(--p, 0) - .02) / .12), 1); }
:root.js:not(.rm) .statement .morph--out { --morph-to: var(--c-gray-6); opacity: clamp(0, calc((var(--p, 0) - .88) / .09), 1); }
:root.js:not(.rm) .statement__card { display: block; position: absolute; inset: 0; width: auto; max-width: none; aspect-ratio: auto; min-height: 0; margin: 0; z-index: 1;
--kin: clamp(0, calc((var(--p, 0) - .14) / .2), 1);
--kout: clamp(0, calc((var(--p, 0) - .82) / .15), 1);
--k: calc(var(--kin) - var(--kout));
--s: calc(var(--s0, .9) + (1 - var(--s0, .9)) * var(--k));
transform: scale(var(--s)); border-radius: calc(var(--r-lg) * (1 - var(--k)) / var(--s)); }
:root.js:not(.rm) .statement__img { --img-top: max(calc(var(--copy-b, 38%) - 24px), calc(100% - min(62%, 800px)));
position: absolute; left: 0; right: 0; order: 0; margin: 0; width: 100%; aspect-ratio: auto; max-height: none;
top: var(--img-top); height: calc(100% - var(--img-top)); }
@media (max-width: 767px) { :root.js:not(.rm) .statement__img { --img-top: max(calc(var(--copy-b, 50%) - 24px), 50%); } }
:root.js:not(.rm) .statement + .seam--static-only { display: none; }
:root.engine:not(.rm) .statement__proof, :root.engine:not(.rm) .statement .btn-row { opacity: 0; transform: translate3d(0,16px,0);
transition: opacity var(--dur-reveal) var(--ease-apple), transform var(--dur-reveal) var(--ease-apple); }
:root.engine:not(.rm) .statement[data-proof] .statement__proof, :root.engine:not(.rm) .statement[data-proof] .btn-row { opacity: 1; transform: none; }
:root.engine:not(.rm) .statement:focus-within .statement__proof, :root.engine:not(.rm) .statement:focus-within .btn-row { opacity: 1; transform: none; transition: none; }
.statement[data-proof] .btn-row { transition-delay: 120ms; }
@media (prefers-reduced-motion: no-preference) {
html.js .marquee { flex-wrap: nowrap; justify-content: flex-start; gap: 0; overflow: clip;
-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); }
html.js .marquee__list { display: flex; flex: none; gap: 56px; padding-right: 56px; animation: marquee var(--marquee-dur, 40s) linear infinite; }
html.js .marquee__toggle { display: inline-flex; }
html.js .marquee:hover .marquee__list, html.js .marquee:focus-within .marquee__list,
html.js .marquee-wrap[data-paused] .marquee__list, html.js .marquee:not([data-visible]) .marquee__list { animation-play-state: paused; }
}
@media (min-width: 768px) {
html.js:not(.rm) .numbered--row[data-reveal-stagger]:not(.is-in) > li::before { transform: scaleX(0); }
html.js:not(.rm) .numbered--row[data-reveal-stagger] > li::before { transition: transform var(--dur-word) var(--ease-apple) calc(var(--d, 0ms) + 120ms); }
html.js:not(.engine) .numbered--row[data-reveal-stagger]:not(.is-in) > li::before { animation: reveal-failsafe 0s 3s forwards; }
}
@keyframes map-ping { from { transform: scale(1); opacity: .7; } 70%, to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
html.js:not(.rm) .map-facade--drawn .map-facade__art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c-red);
animation: map-ping 2.6s var(--ease-apple) infinite; pointer-events: none; }
}
@supports (color: color-mix(in oklab, red, blue)) {
:root.engine:not(.rm) .readfill .rf { color: color-mix(in oklab, var(--fg-muted), var(--fg) calc(clamp(0, (var(--rf, 0) - var(--t)) * 8, 1) * 100%)); }
}
@media (hover: none), (prefers-reduced-motion: reduce) { .tile::before { display: none; } }
} }
@layer utilities {
@media (max-width: 767px) and (min-height: 481px) and (max-height: 700px) {
.hero:not(.hero--media) { padding-top: 16px; }
.hero--media .hero__copy { padding-top: 24px; }
.hero .crumbs ol { margin-bottom: 10px; }
.hero .hero__eyebrow { margin-bottom: 6px; }
.hero h1, .hero .hero__hg { gap: 8px; }
.hero h1 .t-h1, .hero h1.t-h1, .hero .hero__hg .t-h1 { font-size: 32px; line-height: 1.07; }
.hero .t-lead { margin-top: 12px; }
.hero .btn-row { margin-top: 18px; gap: 8px 12px; }
.hero:not(.hero--center) .hero__copy { display: flex; flex-direction: column; }
.hero .hero__copy > .hero__intro { order: 1; margin-top: 16px; }
.hero .hero__copy > .btn-row ~ * { order: 2; }
}
@media (max-width: 359px) and (min-height: 481px) and (max-height: 700px) {
.hero:not(.hero--media) { padding-top: 12px; }
.hero h1 .t-h1, .hero h1.t-h1, .hero .hero__hg .t-h1 { font-size: 28px; font-family: var(--font-lead); }
.hero .t-lead { margin-top: 10px; }
.hero .btn-row { margin-top: 16px; }
}
}
@layer utilities {
@media screen and (max-width: 767px) {
.readfill.readfill--long { font-family: var(--font-21); font-size: 21px; line-height: 1.3; letter-spacing: -0.014em; }
}
}