/* bab2o */
@font-face { font-family: "Albert Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(../assets/fonts/albert-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(../assets/fonts/albert-sans-500.woff2) format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(../assets/fonts/albert-sans-600.woff2) format("woff2"); }
:root {
  --font: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5.5vw, 80px);
  --max: 1280px;
  --header-h: 68px;
  color-scheme: dark;
  --bg: #101010;
  --surface: #181818;
  --surface-2: #202020;
  --fg: #F9F9F9;
  --muted: #B3B3B3;
  --faint: #8C8C8C;
  --focus: #F9F9F9;
}
:root[data-mode="light"] {
  --bg: #F9F9F9;
  --surface: #EEEEEE;
  --surface-2: #E4E4E4;
  --fg: #101010;
  --muted: #4D4D4D;
  --faint: #6B6B6B;
  --focus: #101010;
  color-scheme: light;
}
@media (prefers-contrast: more) {
  :root { --muted: #D6D6D6; --faint: #B8B8B8; }
  :root[data-mode="light"] { --muted: #2E2E2E; --faint: #444; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "tnum";
  transition: background-color .45s ease, color .45s ease;
}
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.label { font-size: .875rem; font-weight: 500; letter-spacing: .01em; color: var(--faint); }
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--bg); }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); transition: background-color .45s ease; }
.bar { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.logo { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: -6px; border-radius: 10px; }
.logo img { height: 30px; width: auto; display: block; transition: filter .45s ease; }
:root[data-mode="light"] .logo img { filter: invert(1); }
nav.main { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface); }
nav.main a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--muted); transition: color .3s ease; }
nav.main a:hover { color: var(--fg); }
nav.main a[aria-current="true"] { color: var(--bg); }
nav.main .ind { position: absolute; z-index: 0; top: 4px; height: 36px; left: 0; width: 0; border-radius: 999px; background: var(--fg); opacity: 0; transition: transform .45s cubic-bezier(.3,.8,.3,1), width .45s cubic-bezier(.3,.8,.3,1), opacity .3s ease, background-color .45s ease; }
.right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ctl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 0; cursor: pointer; transition: background-color .3s ease; }
.ctl:hover { background: var(--surface-2); }
.ctl svg { width: 18px; height: 18px; overflow: visible; }
.ctl .orb { transition: r .45s ease; }
.ctl .bite { transition: cx .45s ease, cy .45s ease; }
.ctl .rays { transform-origin: 12px 12px; transition: transform .45s ease, opacity .3s ease; }
:root:not([data-mode="light"]) .ctl .orb { r: 8px; }
:root:not([data-mode="light"]) .ctl .rays { transform: rotate(-45deg) scale(.4); opacity: 0; }
:root[data-mode="light"] .ctl .orb { r: 4.5px; }
:root[data-mode="light"] .ctl .bite { cx: 30px; cy: -6px; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface); height: 44px; }
.seg .knob { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: 36px; border-radius: 999px; background: var(--fg); transition: transform .5s cubic-bezier(.45,1.6,.4,1), background-color .45s ease; }
.seg[data-lang="en"] .knob { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; min-width: 40px; background: none; border: 0; cursor: pointer; font-size: .8125rem; font-weight: 500; color: var(--muted); border-radius: 999px; transition: color .35s ease; }
.seg button[aria-pressed="true"] { color: var(--bg); }
.cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: transform .3s ease, background-color .45s ease, color .45s ease; white-space: nowrap; }
.cta:hover { transform: translateY(-1px); }
.cta svg { width: 14px; height: 14px; transition: transform .3s ease; }
.cta:hover svg { transform: translate(2px, -2px); }
.menu-btn { display: none; }
.menu-btn .l { transition: transform .35s ease, opacity .2s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { transform: translateY(-3px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 39; background: var(--bg); padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.sheet.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.sheet nav { display: grid; gap: 4px; }
.sheet nav a { display: flex; align-items: baseline; gap: 14px; min-height: 56px; font-size: 2.5rem; font-weight: 500; letter-spacing: -0.03em; text-decoration: none; transform: translateY(12px); opacity: 0; transition: transform .45s cubic-bezier(.3,.8,.3,1), opacity .45s ease; }
.sheet nav a span { font-size: .875rem; color: var(--faint); letter-spacing: 0; }
.sheet.open nav a { transform: none; opacity: 1; }
.sheet.open nav a:nth-child(2) { transition-delay: .04s; } .sheet.open nav a:nth-child(3) { transition-delay: .08s; } .sheet.open nav a:nth-child(4) { transition-delay: .12s; }
.sheet .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toast { position: fixed; z-index: 45; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translate(-50%, -12px); opacity: 0; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); box-shadow: 0 12px 40px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.3,.8,.3,1), opacity .4s ease; max-width: calc(100% - 32px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast p { margin: 0; font-size: .9375rem; font-weight: 500; }
.toast .see { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg); font-weight: 500; font-size: .875rem; cursor: pointer; white-space: nowrap; }
.toast .x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--bg); cursor: pointer; font-size: 18px; line-height: 1; }
.toast :focus-visible { outline-color: var(--bg); }
.hero { padding-block: clamp(72px, 12vh, 140px) clamp(64px, 10vh, 120px); display: grid; gap: 28px; }
.hero h1 { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; }
.hero h1 .role { color: var(--faint); font-weight: 400; }
.statement { margin: 0; max-width: 20ch; font-size: clamp(2.5rem, 6.4vw, 5.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.statement .w { display: inline-block; transform: translateY(.35em); opacity: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.statement.in .w { transform: none; opacity: 1; }
.statement .dim { color: var(--faint); }
.avail { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 1.0625rem; font-weight: 500; min-height: 44px; }
.avail .lbl { position: relative; }
.avail .lbl { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.avail .go { display: inline-block; transition: transform .35s cubic-bezier(.3,.8,.3,1); }
.avail:hover .go, .avail:focus-visible .go { transform: translateX(5px); }
.avail .badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
section.block { padding-block: clamp(88px, 12vw, 160px) 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.sec-head h2 .n { display: block; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--faint); margin-bottom: 14px; }
.car-ctrl { display: flex; align-items: center; gap: 8px; }
.car-ctrl .count { min-width: 64px; text-align: right; color: var(--faint); font-size: .9375rem; font-variant-numeric: tabular-nums; margin-right: 6px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease; }
.arrow:hover { background: var(--surface-2); }
.arrow svg { width: 16px; height: 16px; }
.stage { position: relative; height: clamp(420px, 44vw, 620px); perspective: 1050px; perspective-origin: 50% 50%; overflow: hidden; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage.dragging { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 0; transform-style: preserve-3d; }
.pcard { position: absolute; top: clamp(48px, 4.4vw, 68px); width: var(--cw); margin-left: calc(var(--cw) / -2); padding: 0; border: 0; background: none; cursor: pointer; text-align: center; backface-visibility: hidden; will-change: transform, opacity; border-radius: 6px; }
.pcard .ttl { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 12px; font-weight: 500; font-size: 1rem; white-space: nowrap; }
.pcard .ph { position: relative; display: block; aspect-ratio: 496 / 579; overflow: hidden; border-radius: 6px; background: var(--surface); }
.pcard img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.pcard .open { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 8px); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #F9F9F9; color: #101010; font-size: .9375rem; font-weight: 500; opacity: 0; transition: opacity .35s ease, transform .35s ease; white-space: nowrap; }
.pcard.active .open { opacity: 1; transform: translate(-50%, 0); }
.pcard.active:hover img { transform: scale(1.04); }
.pcard:focus-visible { outline: none; }
.pcard:focus-visible .ph { outline: 2px solid var(--focus); outline-offset: 4px; }
.pcap { display: grid; justify-items: center; gap: 12px; text-align: center; min-height: 72px; }
.pcap .role { color: var(--muted); font-size: 1.0625rem; transition: opacity .3s ease; }
.ptags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; transition: opacity .3s ease; }
.ptags span { background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: .875rem; font-weight: 500; color: var(--muted); }
.pcap.swap .role, .pcap.swap .ptags { opacity: 0; }
.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about .big { margin: 0 0 40px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; text-wrap: pretty; }
.about .big .dim { color: var(--faint); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.timeline li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; }
.timeline b { font-weight: 500; font-size: 1.0625rem; }
.timeline small { display: block; color: var(--muted); font-size: 1rem; }
.timeline .when { color: var(--faint); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.portrait { position: relative; margin: 0; aspect-ratio: 600 / 822; container-type: inline-size; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#face { position: absolute; inset: 0; margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: calc(100cqw / 128 / 0.6); line-height: 1.1; white-space: pre; color: transparent; user-select: none; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 62%, transparent 100%); }
#face .c1 { color: color-mix(in srgb, var(--fg) 12%, var(--bg)); }
#face .c2 { color: color-mix(in srgb, var(--fg) 24%, var(--bg)); }
#face .c3 { color: color-mix(in srgb, var(--fg) 40%, var(--bg)); }
#face .c4 { color: color-mix(in srgb, var(--fg) 58%, var(--bg)); }
#face .c5 { color: color-mix(in srgb, var(--fg) 78%, var(--bg)); }
#face .c6 { color: var(--fg); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.card { background: var(--surface); border-radius: 12px; padding: 24px; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; min-width: 0; transition: background-color .45s ease; }
.card .fig { aspect-ratio: 1.3; display: grid; place-items: center; perspective: 600px; }
.card svg.abs { width: 74%; height: auto; overflow: visible; color: var(--fg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.card svg.abs * { vector-effect: non-scaling-stroke; }
.card svg.abs line, .card svg.abs circle, .card svg.abs rect { fill: none; stroke: currentColor; stroke-width: .7; }
.card h3 { margin: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.card p { margin: 8px 0 0; color: var(--muted); font-size: 1rem; }
.marquee { overflow: hidden; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .row { display: flex; width: max-content; animation: slide 60s linear infinite; }
.marquee.paused .row { animation-play-state: paused; }
.marquee span { font-size: clamp(2rem, 4.4vw, 3.75rem); font-weight: 500; letter-spacing: -0.035em; padding-inline: 24px; white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.marquee span::after { content: "/"; color: var(--faint); font-weight: 400; }
@keyframes slide { to { transform: translateX(-50%); } }
.pause { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--surface); cursor: pointer; font-size: .9375rem; font-weight: 500; }
.pause:hover { background: var(--surface-2); }
.pause svg { width: 12px; height: 12px; }
.contact { padding-block: clamp(120px, 16vw, 200px) clamp(64px, 8vw, 96px); }
.contact .kicker { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--surface); font-size: .875rem; font-weight: 500; margin-bottom: 28px; }
.contact h2 { margin: 0 0 48px; font-size: clamp(3.5rem, 10vw, 9rem); font-weight: 500; letter-spacing: -0.055em; line-height: .9; }
.contact h2 .dim { color: var(--faint); }
.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.links > * { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 88px; padding: 18px 22px; border-radius: 12px; background: var(--surface); text-decoration: none; min-width: 0; transition: background-color .3s ease; }
.links a:hover { background: var(--surface-2); }
.links .lbl { display: block; color: var(--faint); font-size: .875rem; font-weight: 500; margin-bottom: 2px; }
.links .val { font-size: 1.125rem; font-weight: 500; overflow-wrap: anywhere; }
.links svg { width: 16px; height: 16px; flex: none; transition: transform .3s ease; }
.links a:hover svg { transform: translate(3px, -3px); }
.copy { height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--bg); cursor: pointer; font-size: .875rem; font-weight: 500; flex: none; }
footer { display: flex; justify-content: space-between; gap: 16px; padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--faint); font-size: .875rem; flex-wrap: wrap; }
.case { position: fixed; inset: 0; z-index: 60; background: var(--bg); transform: translateY(100%); transition: transform .65s cubic-bezier(.7,0,.2,1), background-color .45s ease; overflow-y: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); }
.case.open { transform: none; }
.case .head { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; height: var(--header-h); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.case .head .btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--surface); cursor: pointer; font-weight: 500; }
.case .head .btn:hover { background: var(--surface-2); }
.case h2 { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -0.05em; line-height: .95; margin: 32px 0 20px; font-weight: 500; }
.case .lead { margin: 0; max-width: 38ch; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.35; color: var(--muted); letter-spacing: -0.01em; }
.case .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.case .meta span { background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: .875rem; font-weight: 500; color: var(--muted); }
.case .cover { margin-block: 48px; border-radius: 12px; overflow: hidden; background: var(--surface); display: grid; place-items: center; max-height: 78vh; }
.case .cover img { width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.case .part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; padding-block: 28px; }
.case .part h3 { margin: 0; font-size: 1.25rem; font-weight: 500; }
.case .part p { margin: 0; color: var(--faint); max-width: 62ch; font-size: 1.0625rem; }
.case .soon { margin: 24px 0 120px; padding: 40px; border-radius: 12px; background: var(--surface); text-align: center; color: var(--muted); }
.case .nextp { display: flex; justify-content: flex-end; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.device { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; padding: 24px; }
.device.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.device .phone { --s: 1; position: relative; width: calc(426px * var(--s)); height: calc(898px * var(--s)); border-radius: calc(68px * var(--s)); background: linear-gradient(145deg, #3a3a3c, #1c1c1e 40%, #2c2c2e); padding: calc(12px * var(--s)); box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 0 0 1.5px #5a5a5e; transform: translateY(20px) scale(.97); transition: transform .5s cubic-bezier(.3,.8,.3,1); }
.device.open .phone { transform: none; }
.device .screen { position: relative; width: 100%; height: 100%; border-radius: calc(56px * var(--s)); overflow: hidden; background: #000; }
.device iframe { position: absolute; left: 0; top: 0; width: 402px; height: 874px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; background: #101010; }
.device .island { position: absolute; z-index: 2; top: calc(11px * var(--s)); left: 50%; transform: translateX(-50%); width: calc(125px * var(--s)); height: calc(37px * var(--s)); border-radius: 999px; background: #000; pointer-events: none; }
.device .close-d { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: #F9F9F9; color: #101010; font-weight: 500; cursor: pointer; }
.device .cap { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: #cfcfcf; font-size: .875rem; }
:root.embed body { padding-top: 34px; }
:root.embed body::before { height: 34px; }
:root.embed header.top { top: 0; }
:root.embed .bar.wrap { padding-top: 38px; }
:root.embed .sheet { padding-top: calc(var(--header-h) + 58px); }
:root.embed footer { padding-bottom: 48px; }
@media (max-width: 1040px) {
  .about { grid-template-columns: 1fr; }
  .portrait { max-width: 440px; width: 100%; justify-self: center; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .hero { padding-block: 56px 48px; gap: 22px; }
  .car-ctrl .arrow { display: none; }
  .stage { height: 440px; }
  .cards { grid-template-columns: 1fr; }
  .links { grid-template-columns: 1fr; }
  .case .part { grid-template-columns: 1fr; gap: 8px; }
  .toast { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .statement .w { transform: none; opacity: 1; }
}
:root { --r: 10px; --rc: 18px; --glass: color-mix(in srgb, var(--bg) 64%, transparent); --glass-line: color-mix(in srgb, var(--fg) 10%, transparent); --shadow: 0 12px 40px rgba(0,0,0,.28); }
:root[data-mode="light"] { --shadow: 0 12px 40px rgba(0,0,0,.08); }
header.top { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
main { padding-top: var(--header-h); }
.bar.wrap { pointer-events: auto; display: flex; align-items: center; gap: 20px; height: var(--header-h); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: max-width .7s cubic-bezier(.3,.8,.3,1), margin-top .7s cubic-bezier(.3,.8,.3,1), height .7s cubic-bezier(.3,.8,.3,1), padding .7s cubic-bezier(.3,.8,.3,1), border-radius .7s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.top.compact .bar.wrap { max-width: 880px; margin-top: 12px; height: 60px; padding-left: 10px; padding-right: 8px; border-radius: 18px; background: var(--glass); border-color: var(--glass-line); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); }
.bar .logo { margin-right: auto; margin-left: 0; }
nav.main { background: transparent; padding: 0; gap: 2px; }
nav.main a { min-height: 40px; padding: 0 14px; border-radius: var(--r); }
nav.main a[aria-current="true"] { color: var(--fg); }
nav.main .ind { top: 0; height: 40px; border-radius: var(--r); background: var(--surface-2); }
.right { gap: 6px; margin-left: auto; }
.bar .ctl { background: transparent; border-radius: var(--r); width: 40px; height: 40px; }
.bar .ctl:hover { background: var(--surface); }
.seg { border-radius: var(--r); }
.bar .seg { background: var(--surface); height: 40px; padding: 3px; }
.bar .seg .knob { top: 3px; left: 3px; width: calc(50% - 3px); height: 34px; }
.seg .knob, .seg button { border-radius: calc(var(--r) - 3px); }
.bar .cta { height: 40px; padding: 0 16px; font-size: .9375rem; }
.bar .sep, .menu-btn, .sheet { display: none !important; }
.toast { border-radius: 14px; }
.toast .see, .toast .x { border-radius: 10px; }
.cta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--muted); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.cta:hover { transform: none; }
.cta:hover::before, .cta:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.arrow { border-radius: var(--r); width: 48px; height: 48px; background: var(--surface); }
.copy { border-radius: var(--r); height: 44px; }
.ptags span, .case .meta span, .contact .kicker, .case .head .btn, .pcard .open { border-radius: var(--r); }
.links > *, .case .cover, .case .soon { border-radius: var(--rc); }
.pcard .ph, .pcard { border-radius: 14px; }
.hero { min-height: min(calc(86svh - var(--header-h)), 820px); padding-block: clamp(48px, 9vh, 120px) 28px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hero .statement { max-width: 17ch; }
.rot { display: inline-grid; vertical-align: top; height: 1.08em; overflow: hidden; transition: width .7s cubic-bezier(.7,0,.2,1); padding-right: .02em; }
.rot > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .8s cubic-bezier(.7,0,.2,1), opacity .5s ease; }
.rot > span.on { transform: none; opacity: 1; }
.rot > span.out { transform: translateY(-105%); opacity: 0; }
.statement .rot { opacity: 0; transition: opacity .9s ease .35s, width .7s cubic-bezier(.7,0,.2,1); }
.statement.in .rot { opacity: 1; }
.avail { gap: 14px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); opacity: 0; transform: translateY(10px); transition: opacity .8s ease .7s, transform .8s cubic-bezier(.2,.7,.2,1) .7s; }
.statement.in ~ .avail { opacity: 1; transform: none; }
.avail .lbl { text-decoration: none; }
.avail .lbl .u { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s cubic-bezier(.3,.8,.3,1); }
.avail:hover .lbl .u { background-size: 0 1.5px; background-position: 100% 100%; }
.star { display: inline-block; font-size: 1.2em; line-height: 1; animation: spin 9s linear infinite; }
.avail:hover .star { animation-duration: 2.4s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cue { to { top: 100%; } }
.seek { display: flex; align-items: center; gap: 12px; margin: -12px 0 40px; font-size: 1.125rem; font-weight: 500; }
.cards { counter-reset: c; }
.card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rc); padding: 22px 22px 26px; background: var(--surface); transition: transform .5s cubic-bezier(.3,.8,.3,1), background-color .45s ease; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fg) 7%, transparent), transparent 45%); opacity: 0; transition: opacity .4s ease; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fg) 40%, transparent), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.card:hover { transform: translateY(-4px); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card .fig { background: color-mix(in srgb, var(--fg) 3%, transparent); border-radius: 12px; }
.card .label { display: flex; justify-content: space-between; }
.card .label::after { counter-increment: c; content: counter(c, decimal-leading-zero); color: var(--faint); font-variant-numeric: tabular-nums; }
.marquee .row { animation-duration: 130s; }
.marquee span::after { content: "✳︎"; font-size: .5em; color: var(--faint); }
.device .phone { width: calc((var(--pw) + 24px) * var(--s)); height: calc((var(--ph) + 24px) * var(--s)); border-radius: calc(var(--pr) * var(--s)); transition: width .6s cubic-bezier(.6,0,.2,1), height .6s cubic-bezier(.6,0,.2,1), transform .5s cubic-bezier(.3,.8,.3,1); }
.device .screen { border-radius: calc((var(--pr) - 12px) * var(--s)); }
.device iframe { width: var(--pw); height: var(--ph); transition: width .6s cubic-bezier(.6,0,.2,1), height .6s cubic-bezier(.6,0,.2,1); }
.device .island { width: calc(14px * var(--s)); height: calc(14px * var(--s)); top: calc(14px * var(--s)); transition: opacity .3s ease; }
.device[data-fold="open"] .island { opacity: 0; }
.device .crease { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 22px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.05) 40%, rgba(0,0,0,.18) 50%, rgba(255,255,255,.05) 60%, transparent); pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.device[data-fold="open"] .crease { opacity: 1; }
.device .dbar { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 6px; background: #000; border-radius: var(--r); --fg: #F9F9F9; --bg: #000; --surface: #1a1a1a; --muted: #B3B3B3; --focus: #F9F9F9; color: #F9F9F9; }
.device .dbar .seg { height: 40px; } .device .dbar .seg .knob { height: 32px; } .device .dbar .seg button { padding: 0 14px; }
.device .close-d { border-radius: var(--r); }
@media (max-width: 1040px) {
  .bar .cta { display: none; }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  nav.main { display: none; }
  .top.compact .bar.wrap { margin-inline: 12px; max-width: none; height: 56px; }
  footer { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .hero { min-height: calc(88svh - var(--header-h)); padding-top: 32px; }
}
@media (min-width: 641px) and (max-width: 1040px) {
  .about { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .hero { min-height: auto; padding-block: 64px 32px; }
  .hero .statement { font-size: clamp(3.25rem, 8.4vw, 5rem); }
}
:root.embed header.top { top: 34px; }
:root.embed .bar.wrap { padding-top: 0; }
.hero { min-height: 0; padding-block: clamp(56px, 10vh, 112px) clamp(56px, 9vh, 104px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 32px 56px; }
.hero-k { margin: 0 0 18px; color: var(--faint); font-size: 1rem; font-weight: 500; }
.hero h1.name { margin: 0; display: block; font-size: clamp(3rem, 7.4vw, 6.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.name .ln { display: block; padding-block: .04em .08em; overflow: hidden; }
.name .ch { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.75,.15,1); }
.name.in .ch { transform: translateY(var(--lift, 0px)); }
.name.ready .ch { transition: transform .5s cubic-bezier(.2,.75,.15,1); transition-delay: 0s !important; }
.hero-r { display: grid; gap: 22px; padding-bottom: .6em; }
.lines { display: grid; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; min-height: 2.6em; }
.lines > span { grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; text-wrap: balance; }
.lines > span.on { opacity: 1; transform: none; filter: none; transition-delay: .15s; }
.lines > span.out { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
.avail { opacity: 1; transform: none; font-size: 1.0625rem; }
.hero-r { opacity: 0; transform: translateY(12px); transition: opacity .9s ease .8s, transform .9s cubic-bezier(.2,.7,.2,1) .8s; }
.hero.in .hero-r { opacity: 1; transform: none; }
.sec-head h2 { line-height: 1.08; padding-top: .04em; }
.contact h2 { line-height: 1; padding-top: .05em; }
.pcard .ttl { line-height: 1.3; }
.marquee:hover .row, .marquee:focus-within .row { animation-play-state: paused; }
footer { align-items: center; }
.foot-link { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--fg); font-size: .875rem; font-weight: 500; cursor: pointer; }
.foot-link:hover { background: var(--surface-2); }
.cur { display: none; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--fg); transition: opacity .2s ease, background-color .45s ease; }
.cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent); display: grid; place-items: center; transition: width .35s cubic-bezier(.3,.8,.3,1), height .35s cubic-bezier(.3,.8,.3,1), margin .35s cubic-bezier(.3,.8,.3,1), background-color .3s ease, border-color .3s ease; }
.cur-lbl { font-size: .8125rem; font-weight: 500; color: var(--bg); opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.3,.8,.3,1); white-space: nowrap; }
.cur.link .cur-ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: color-mix(in srgb, var(--fg) 10%, transparent); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.cur.link .cur-dot { opacity: 0; }
.cur.label .cur-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--fg); border-color: var(--fg); }
.cur.label .cur-lbl { opacity: 1; transform: none; }
.cur.label .cur-dot { opacity: 0; }
.cur.down .cur-ring { transform-origin: center; }
.cur.hide .cur-dot, .cur.hide .cur-ring { opacity: 0; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .hero-r { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .hero { padding-block: 40px 56px; }
  .hero h1.name { font-size: clamp(2.75rem, 13vw, 4rem); }
}
.cur.label .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.cur-lbl { font-size: .75rem; }
.hclock { color: var(--faint); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 6px; white-space: nowrap; }
.sclock { color: var(--faint); font-size: .9375rem; margin-right: auto; font-variant-numeric: tabular-nums; }
.bar .menu-btn { display: none !important; }
@media (max-width: 759px) {
  .hclock { font-size: .8125rem; margin-right: 2px; }
  footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}
.sheet .row .seg { background: var(--surface); }
.menu-btn[aria-expanded="true"] { background: var(--fg) !important; color: var(--bg); }
.card, .card:hover { background: transparent; padding: 0; transform: none; }
.card::after, .card::before { display: none; }
.card .fig { background: transparent; border-radius: 0; justify-items: start; aspect-ratio: 1.6; }
.card svg.abs { width: 62%; opacity: .85; transition: opacity .4s ease; }
.card:hover svg.abs { opacity: 1; }
.cards { gap: 40px 32px; }
.card { overflow: visible; padding: 0; gap: 0; grid-template-rows: auto auto auto; align-content: start; }
.card .fig { aspect-ratio: auto; height: clamp(96px, 9vw, 128px); display: flex; align-items: center; justify-content: flex-start; margin-bottom: 28px; perspective: 600px; }
.card svg.abs { width: auto; height: 100%; max-width: 100%; opacity: .9; }
.card .label { padding-top: 16px; margin-bottom: 14px; border-top: 0; }
.card h3 { margin: 0 0 10px; }
.card p { margin: 0; }
.cards { gap: 56px 40px; }
@media (max-width: 640px) { .cards { gap: 56px; } .card .fig { height: 96px; margin-bottom: 20px; } }
.hero h1.name .ln { overflow: visible; clip-path: inset(-0.2em -2em -0.2em -2em); }
.name .tag { display: inline-block; font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--faint); opacity: 0; white-space: pre; transition: opacity .5s ease, transform .5s cubic-bezier(.3,.8,.3,1); }
.name .t-open { transform: translateY(4px); }
.name .t-close { transform: translateX(-4px); }
.name:hover .tag { opacity: .6; transform: none; }
.name .t-open { display: block; width: fit-content; min-height: 1.2em; margin: 0 0 6px 2px; }
.name .t-close { vertical-align: baseline; margin-left: 10px; }
.name .caret { display: none; }
.card .fig { justify-content: center; }
.links .lk { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 88px; padding: 18px 22px; border: 0; border-radius: var(--rc); background: var(--surface); color: var(--fg); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: background-color .3s ease; }
.links .lk:hover { background: var(--surface-2); }
.lk .txt { display: grid; min-width: 0; }
.lk .act { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-size: .875rem; font-weight: 500; flex: none; }
.lk .act svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.3,.8,.3,1); }
.lk .actx { opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .35s cubic-bezier(.3,.8,.3,1); }
.lk:hover .actx, .lk:focus-visible .actx, .lk.done .actx { opacity: 1; transform: none; }
.lk.done .act { color: var(--fg); }
@media (hover: none) { .lk .actx { opacity: 1; transform: none; } }
.foot-mid { display: flex; gap: 8px; flex-wrap: wrap; }
.a11y h2 { font-size: clamp(2.75rem, 7vw, 6rem); }
.a11y table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.a11y th, .a11y td { text-align: left; padding: 14px 12px 14px 0; vertical-align: middle; }
.a11y thead th { color: var(--faint); font-size: .875rem; font-weight: 500; }
.a11y tbody tr + tr td { border-top: 1px solid var(--surface-2); }
.a11y .sw { display: inline-grid; place-items: center; width: 56px; height: 34px; border-radius: 8px; font-weight: 500; }
.a11y .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.a11y ul.done { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.a11y ul.done li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--muted); }
.a11y ul.done li::before { content: "–"; color: var(--fg); }
.a11y ul.done b { color: var(--fg); font-weight: 500; }
.a11y .try { margin: 24px 0 0; padding: 18px 20px; border-radius: var(--rc); background: var(--surface); color: var(--muted); }
.a11y kbd { font: inherit; font-size: .875rem; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--fg); }
.case.a11y { left: auto; width: min(520px, 100%); transform: translateX(100%); background: var(--bg); box-shadow: -30px 0 100px rgba(0,0,0,.45); }
:root[data-mode="light"] .case.a11y { box-shadow: -30px 0 100px rgba(0,0,0,.12); }
.case.a11y.open { transform: none; }
.case.a11y .wrap { padding-left: 28px; padding-right: max(28px, env(safe-area-inset-right, 0px)); padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
.case.a11y .head { height: 64px; }
.case.a11y h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em; margin: 12px 0 14px; }
.case.a11y h2 span { display: block; color: var(--faint); }
.soft-lead { margin: 0 0 8px; color: var(--muted); font-size: 1.0625rem; }
.case.a11y h3 { margin: 36px 0 14px; font-size: .875rem; font-weight: 500; color: var(--faint); }
.case.a11y .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.case.a11y .chips span { padding: 7px 12px; border-radius: var(--r); background: var(--surface); font-size: .9375rem; }
.case.a11y .contrast { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.case.a11y .contrast li { display: grid; grid-template-columns: 14px 1fr auto 40px; gap: 12px; align-items: center; }
.case.a11y .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--surface-2); }
.case.a11y .num { font-variant-numeric: tabular-nums; }
.case.a11y .lvl { color: var(--faint); font-size: .875rem; text-align: right; }
.case.a11y .note { margin: 12px 0 0; color: var(--faint); font-size: .875rem; }
.case.a11y .soft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.case.a11y .soft-list li { display: grid; grid-template-columns: 22px 1fr; color: var(--muted); }
.case.a11y .soft-list li::before { content: "–"; color: var(--faint); font-size: .875rem; }
.case.a11y .made { margin: 0; color: var(--muted); }
.case.a11y .tip { margin: 40px 0 0; padding: 14px 16px; border-radius: var(--rc); background: var(--surface); color: var(--muted); font-size: .9375rem; }
.case.a11y kbd { font: inherit; font-size: .8125rem; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--fg); }
.a11y-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.a11y-scrim.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.bar .seg { background: transparent; box-shadow: inset 0 0 0 1px var(--glass-line); }
.bar .seg .knob { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.bar .seg button[aria-pressed="true"] { color: var(--fg); }
.bar .cta { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--glass-line); }
.bar .cta::before { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 36px; }
.links .lk { width: auto; min-height: 44px; padding: 0; background: transparent; border-radius: 0; justify-content: flex-start; gap: 12px; }
.links .lk:hover { background: transparent; }
.lk .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lk .val { font-size: 1.125rem; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .45s cubic-bezier(.3,.8,.3,1); }
.lk:hover .val, .lk:focus-visible .val { background-size: 100% 1.5px; }
.links .lk:first-child { flex-basis: 100%; margin-bottom: 18px; }
.links .lk:first-child .val { font-size: clamp(1.5rem, 3.4vw, 2.75rem); letter-spacing: -0.025em; }
.lk .act { color: var(--faint); }
.lk .actx { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: max-width .45s cubic-bezier(.3,.8,.3,1), opacity .3s ease, transform .35s ease; }
.lk:hover .actx, .lk:focus-visible .actx, .lk.done .actx { max-width: 140px; }
.lk .act { gap: 6px; }
@media (hover: none) { .lk .actx { max-width: 140px; } }
.contact .kicker { background: transparent; padding: 0; height: auto; color: var(--faint); }
.foot-link { background: transparent; padding: 0 4px; color: var(--muted); }
.foot-link:hover { background: transparent; color: var(--fg); }
.foot-mid { gap: 20px; }
.ptabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 44px; margin: 8px 0 28px; background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); }
.ptabs .knob { height: 36px; background: var(--surface-2); }
.ptabs button { font-size: .9375rem; color: var(--muted); }
.ptabs button[aria-pressed="true"] { color: var(--fg); }
.ds-sw, .ds-type, .ds-space { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-sw li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }
.ds-sw .sw { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--surface-2); }
.ds-sw .num, .ds-space .num { color: var(--faint); font-size: .875rem; font-variant-numeric: tabular-nums; }
.ds-type li { display: grid; gap: 2px; padding-bottom: 6px; }
.ds-type .ex { line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-type .spec { color: var(--faint); font-size: .8125rem; }
.ds-space li { display: grid; grid-template-columns: 200px auto; gap: 12px; align-items: center; }
.ds-space .bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 22%, transparent); }
.ds-rad { display: flex; gap: 20px; flex-wrap: wrap; color: var(--faint); font-size: .8125rem; }
.ds-rad div { display: grid; gap: 8px; }
.ds-rad span { display: block; width: 72px; height: 48px; background: var(--surface-2); }
.ds-comps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ds-comps .cta { height: 44px; padding: 0 16px; pointer-events: none; }
.ds-link { font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; }
.ds-tag { padding: 6px 12px; border-radius: var(--r); background: var(--surface); color: var(--muted); font-size: .875rem; font-weight: 500; }
.ds-seg { height: 40px; padding: 3px; background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); pointer-events: none; }
.ds-seg .knob { top: 3px; left: 3px; height: 34px; width: calc(50% - 3px); background: color-mix(in srgb, var(--fg) 14%, transparent); }
.ds-seg button { min-width: 44px; font-size: .8125rem; color: var(--muted); }
.ds-seg button[aria-pressed="true"] { color: var(--fg); }
.ds-motion { display: flex; align-items: center; gap: 16px; }
.ds-motion .track { position: relative; flex: 1; height: 36px; border-radius: var(--r); background: var(--surface); overflow: hidden; }
.ds-motion .ball { position: absolute; top: 9px; left: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); }
.ds-motion .ball.go { animation: dsgo .7s cubic-bezier(.3,.8,.3,1) forwards; }
@keyframes dsgo { to { left: calc(100% - 27px); } }
.ds-motion .replay { height: 40px; padding: 0 14px; border: 0; border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); color: var(--fg); font-size: .875rem; font-weight: 500; cursor: pointer; }
@media (max-width: 520px) { .ds-space li { grid-template-columns: 1fr auto; } }
.vb-video { position: relative; border-radius: var(--rc); overflow: hidden; background: #000; aspect-ratio: 16 / 9; margin-bottom: 40px; cursor: pointer; }
.vb-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-video:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.vb-vlabel { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: var(--r); background: rgba(0,0,0,.55); color: #F9F9F9; font-size: .8125rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vb-persona { margin-left: 88px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.vb-quote { margin: 0; font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; text-wrap: pretty; }
.vb-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vb-traits li { display: grid; grid-template-columns: 22px 1fr; color: var(--muted); }
.vb-traits li::before { content: "✳︎"; color: var(--faint); font-size: .875rem; }
.vb-screen { border-radius: var(--rc); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.vb-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-map { position: relative; margin-left: 88px; border-radius: var(--rc); overflow: hidden; background: #6b625a; }
.vb-map img { display: block; width: 100%; height: auto; transition: filter .6s ease; }
.vb-lights { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.vb-lights i { position: absolute; width: 7.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,240,.95) 0%, rgba(255,250,220,.55) 30%, rgba(255,250,220,0) 70%); animation: buzz 1.9s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes buzz { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
.vb-map.loud img { filter: brightness(1.25) contrast(1.1); }
.vb-map.loud .vb-lights { opacity: 1; }
.vb-maptool { margin: 16px 0 0 88px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.vb-maptool p { margin: 0; color: var(--faint); font-size: .875rem; max-width: 52ch; }
.vb-seg { width: 300px; margin: 0; }
.vb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.vb-rules li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; }
.vb-rules span { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.04em; color: var(--faint); line-height: 1; }
.vb-rules b { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
@media (max-width: 900px) {
  .vb-persona, .vb-map, .vb-maptool { margin-left: 0; }
  .vb-persona { grid-template-columns: 1fr; gap: 28px; }
  .vb-seg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vb-lights i { animation: none; } }
.rz { padding-bottom: 40px; }
.rz-kick { color: var(--faint); font-size: .875rem; }
.rz-phone { width: min(300px, 70vw); aspect-ratio: 384 / 832; border-radius: 44px; padding: 9px; background: linear-gradient(145deg, #3a3a3c, #161618 45%, #2c2c2e); box-shadow: inset 0 0 0 1.5px #555; }
.rz-phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 36px; background: #fff; }
.rz-meta { margin-top: 0; }
.rz-name { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 32px; align-items: start; margin-left: 88px; }
.rz-big { display: block; font-family: "DM Sans", var(--font); font-weight: 900; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.05em; line-height: 1; }
.rz-serif { font-family: "DM Serif Display", serif; font-weight: 400; font-style: italic; letter-spacing: -0.02em; }
.rz-name p { margin: 14px 0 0; color: var(--muted); max-width: 36ch; }
.rz-picks { list-style: none; margin: 0 0 0 88px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rz-picks li { display: grid; gap: 8px; }
.rz-picks b { font-weight: 500; font-size: 1.125rem; }
.rz-picks span { color: var(--muted); }
.rz-strip { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; border-radius: 0; }
.rz-strip::-webkit-scrollbar { display: none; }
.rz-strip img { display: block; height: clamp(380px, 46vw, 620px); width: auto; max-width: none; }
.rz-strip:focus-visible { outline-offset: -4px; }
.rz-ds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 32px; align-items: center; margin: 0 0 32px 88px; }
.rz-swatches { display: grid; grid-template-columns: repeat(13, 1fr); height: 140px; border-radius: var(--rc); overflow: hidden; }
.rz-swatches i { display: block; }
.rz-icon { width: 120px; height: 120px; border-radius: 26px; box-shadow: 0 0 0 1px var(--surface-2); }
.rz-fig { margin: 0 0 32px 88px; }
.rz-fig img { width: 100%; height: auto; display: block; border-radius: var(--rc); }
.rz-fig figcaption { margin-top: 10px; color: var(--faint); font-size: .875rem; }
.rz-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-left: 88px; }
.rz-end h3 { margin: 10px 0 14px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; }
.rz-end p { color: var(--muted); max-width: 44ch; margin: 0; }
.rz-end .rz-note { margin-top: 18px; font-size: .875rem; color: var(--faint); }
.rz-store { width: 100%; max-width: 440px; height: auto; justify-self: center; }
@media (max-width: 900px) {
  .rz-name, .rz-picks, .rz-ds, .rz-fig, .rz-end { margin-left: 0; }
  .rz-name { grid-template-columns: 1fr; gap: 16px; }
  .rz-picks { grid-template-columns: 1fr; }
  .rz-ds { grid-template-columns: 1fr; }
  .rz-end { grid-template-columns: 1fr; }
}
.cta.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--surface-2); }
.cta.ghost::before { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.rz-phone[data-hover-pause] { cursor: pointer; }
.rz-phone:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.rz-pal { display: grid; gap: 14px; }
.rz-swatches { display: flex; height: 150px; border-radius: var(--rc); overflow: hidden; }
.rz-swatches button { flex: 1 1 0; min-width: 0; border: 0; padding: 0; cursor: default; transition: flex-grow .5s cubic-bezier(.3,.8,.3,1); position: relative; }
.rz-swatches button:hover, .rz-swatches button:focus-visible, .rz-swatches button.on { flex-grow: 4; }
.rz-swatches button:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 0; }
.rz-swatches button span { position: absolute; left: 12px; bottom: 10px; font-size: .75rem; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .3s ease .1s, transform .3s ease .1s; white-space: nowrap; }
.rz-swatches button:hover span, .rz-swatches button:focus-visible span, .rz-swatches button.on span { opacity: 1; transform: none; }
.rz-swl { margin: 0; display: flex; gap: 12px; align-items: baseline; min-height: 1.6em; }
.rz-swl b { font-weight: 500; }
.rz-swl span { color: var(--muted); font-variant-numeric: tabular-nums; }
.rz-swl em { font-style: normal; color: var(--faint); font-size: .875rem; }
.rz-big, .rz-serif { font-family: var(--font); font-weight: 500; font-style: normal; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.04em; }
.rz-ds { grid-template-columns: minmax(0, 1fr) 120px; }
@media (max-width: 900px) { .rz-ds { grid-template-columns: 1fr; } }
.m-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0 0 24px; }
.m-meta dt { color: var(--faint); font-size: .875rem; margin-bottom: 4px; }
.m-meta dd { margin: 0; font-weight: 500; }
.m-sec { padding-top: clamp(72px, 10vw, 128px); }
.m-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 24px; align-items: baseline; margin-bottom: 32px; }
.m-n { color: var(--faint); font-size: .875rem; }
.m-head h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.m-head p { margin: 0; color: var(--muted); max-width: 52ch; }
@keyframes shimmer { to { opacity: .4; } }
@media (max-width: 900px) {
  .m-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-head { grid-template-columns: 40px minmax(0, 1fr); }
  .m-head p { grid-column: 2; }
}
@media (forced-colors: active) {
  nav.main a[aria-current="true"] { forced-color-adjust: none; color: Canvas; background: CanvasText; }
  .cta, .toast { border: 1px solid CanvasText; }
}
.ec-cover { position: relative; margin: 0 0 40px; border-radius: var(--rc); overflow: hidden; background: #0b2a8a; aspect-ratio: 16 / 9; }
.ec-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.case.open .ec-cover img { transform: none; }
.ec-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: p; }
.ec-pillars li { display: grid; grid-template-columns: 40px 1fr; gap: 4px; counter-increment: p; }
.ec-pillars li::before { content: "0" counter(p); color: var(--faint); font-size: .875rem; padding-top: .2em; }
.ec-pillars b { display: block; font-weight: 500; font-size: 1.125rem; }
.ec-pillars span { color: var(--muted); }
.ec-plan { margin-left: 88px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ec-mapbox { position: relative; aspect-ratio: 1000 / 360; border-radius: var(--rc); background: var(--surface); }
.ec-mapbox svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ec-mapbox svg .w { stroke: var(--fg); stroke-width: 3; fill: none; stroke-linecap: round; opacity: .8; }
.ec-mapbox svg .arc { stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; }
.ec-st { position: absolute; transform: translate(-50%, -50%); padding: 3px 7px; border-radius: 6px; border: 0; font: inherit; font-size: clamp(.5625rem, .85vw, .75rem); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; background: var(--fg); color: var(--bg); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background-color .3s ease; }
.ec-st.v { transform: translate(-50%, -50%) rotate(-90deg); }
.ec-st.d { background: #D62D20; color: #fff; }
.ec-st.a::after { content: "✳︎"; position: absolute; top: -.95em; left: 50%; transform: translateX(-50%); color: #E8A317; font-size: 1.05em; }
.ec-st.v.a::after { top: 50%; left: auto; right: -1.1em; transform: translateY(-50%) rotate(90deg); }
.ec-st.none { opacity: .38; cursor: default; }
.ec-st:not(.none):hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 18%, transparent); }
.ec-st[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--fg); z-index: 2; }
.ec-st.d[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #D62D20; }
.ec-st:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ec-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; color: var(--faint); font-size: .875rem; }
.ec-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ec-legend i { width: 18px; height: 10px; border-radius: 3px; background: #D62D20; display: inline-block; }
.ec-legend em { font-style: normal; color: #E8A317; }
.ec-panel { position: sticky; top: calc(var(--header-h) + 24px); }
.ec-shot { position: relative; border-radius: var(--rc); overflow: hidden; background: var(--surface); aspect-ratio: 16 / 9; }
.ec-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s ease; }
.ec-shot img.out { opacity: 0; }
.ec-dots { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.ec-dots button { width: 28px; height: 28px; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.ec-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: background .3s ease, transform .3s ease; }
.ec-dots button[aria-pressed="true"]::before { background: #fff; transform: scale(1.25); }
.ec-pinfo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.ec-pinfo .code { color: var(--faint); font-size: .875rem; }
.ec-pinfo h4 { margin: 2px 0 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.ec-ptags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ec-ptags span { background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: .8125rem; color: var(--muted); }
.ec-seg { width: 220px; margin: 0; }
.ec-seg[hidden] { display: none; }
.ec-story { margin-left: 88px; }
.ec-video { border-radius: var(--rc); overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 760px; }
.ec-video video { width: 100%; height: 100%; display: block; background: #000; }
.ec-video video::cue { background: rgba(0,0,0,.72); color: #F9F9F9; font-family: "Albert Sans", system-ui, sans-serif; font-size: clamp(14px, 1.7vw, 22px); line-height: 1.35; }
.ec-note { display: flex; gap: 10px 24px; flex-wrap: wrap; margin: 14px 0 0; color: var(--faint); font-size: .875rem; }
.ec-end { margin: 56px 0 0 88px; padding-top: 28px; border-top: 1px solid var(--line, color-mix(in srgb, var(--fg) 12%, transparent)); display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; align-items: center; color: var(--faint); font-size: .9375rem; }
.ec-end a { color: var(--fg); text-underline-offset: 4px; }
@media (max-width: 900px) {
  .ec-plan, .ec-story, .ec-end { margin-left: 0; }
  .ec-plan { grid-template-columns: 1fr; gap: 28px; }
  .ec-panel { position: static; }
  .ec-mapbox { aspect-ratio: auto; overflow-x: auto; }
  .ec-mapin { position: relative; min-width: 620px; aspect-ratio: 1000 / 360; }
  .ec-seg { width: 100%; }
}
@media (min-width: 901px) { .ec-mapin { position: absolute; inset: 0; } }
@media (prefers-reduced-motion: reduce) { .ec-cover img { transition: none; transform: none; } }
.ec-stat { display: flex; align-items: baseline; gap: 20px; }
.ec-stat .n { font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 500; letter-spacing: -0.06em; line-height: .85; font-variant-numeric: tabular-nums; }
.ec-stat p { margin: 0; color: var(--muted); max-width: 24ch; }
.ec-lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(10,10,10,.97); color: #F9F9F9; }
.ec-lb::backdrop { background: transparent; }
.ec-lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: lbIn .35s ease; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.ec-lb .bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; gap: 12px; }
.ec-lb .bar span { font-size: .875rem; color: #bdbdbd; }
.ec-lb button { height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.12); color: #F9F9F9; font: inherit; cursor: pointer; }
.ec-lb button:hover { background: rgba(255,255,255,.22); }
.ec-lb .stage { display: grid; place-items: center; padding: 0 20px; min-height: 0; min-width: 0; overflow: auto; }
.ec-lb img { max-width: calc(100vw - 40px); max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 4px; cursor: zoom-in; transition: transform .4s ease; }
.ec-lb img.z { max-height: none; max-width: none; width: 160%; cursor: zoom-out; }
.ec-lb .foot { display: flex; justify-content: center; gap: 12px; align-items: center; padding: 16px 20px 24px; text-align: center; }
.ec-lb .foot p { margin: 0; max-width: 60ch; color: #d6d6d6; font-size: .9375rem; }
html.lb-open .cur { display: none !important; }
.ec-lb .bar { position: sticky; top: 0; z-index: 2; padding: max(14px, env(safe-area-inset-top)) 16px 14px 20px; }
.ec-lb [data-lbx] { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 20px; background: #F9F9F9; color: #111; font-weight: 500; font-size: 1rem; }
.ec-lb [data-lbx]:hover { background: #fff; }
.ec-lb .bar [data-lbx] span { color: #111; font-size: 1rem; }
.ec-lb { background: #0b0b0b !important; }
.ec-lb [data-lbx] svg { width: 18px; height: 18px; }
.ec-lb img { cursor: zoom-out !important; touch-action: pinch-zoom; transition: transform .25s ease, opacity .25s ease; }
.ec-lb .stage { overflow: hidden; touch-action: pan-y pinch-zoom; }
.ec-lb .foot { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.ec-lb .hint { display: none; margin: 0; color: #9a9a9a; font-size: .8125rem; }
@media (max-width: 900px) {
  .ec-lb img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 190px); }
  .ec-lb .stage { padding: 0 12px; }
  .ec-lb .foot { flex-wrap: wrap; }
  .ec-lb .foot p { order: -1; flex-basis: 100%; }
  .ec-lb .hint { display: block; flex-basis: 100%; }
}
.ec-plan { display: block; margin-left: 0; }
.ec-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; font-weight: 500; }
.ec-hint svg { width: 22px; height: 22px; flex: none; }
.ec-hint .ec-count { margin-left: auto; color: var(--faint); font-weight: 400; font-size: .875rem; }
.ec-mapbox { aspect-ratio: 1000 / 380; border-radius: var(--rc); background: var(--surface); }
.ec-mapbox svg .w { stroke-width: 3.5; }
.ec-st { padding: 7px 12px; border-radius: 9px; font-size: clamp(.6875rem, .95vw, .875rem); font-weight: 600; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.35); cursor: pointer; }
.ec-st::before { content: ""; position: absolute; inset: -5px; border-radius: 13px; border: 2px solid currentColor; color: var(--fg); opacity: 0; pointer-events: none; }
.ec-st.d::before { color: #D62D20; }
.ec-mapbox:not(.touched) .ec-st:not(.none)::before { animation: ecPing 2.4s cubic-bezier(.2,.7,.2,1) infinite; animation-delay: var(--dl, 0s); }
@keyframes ecPing { 0% { opacity: .55; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.ec-st:not(.none):hover, .ec-st:not(.none):focus-visible { transform: translate(-50%, -50%) scale(1.14); z-index: 3; }
.ec-st.v:not(.none):hover, .ec-st.v:not(.none):focus-visible { transform: translate(-50%, -50%) rotate(-90deg) scale(1.14); }
.ec-st[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--fg), 0 10px 20px -8px rgba(0,0,0,.4); }
.ec-st.v[aria-pressed="true"] { transform: translate(-50%, -50%) rotate(-90deg) scale(1.12); }
.ec-st.d[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #D62D20, 0 10px 20px -8px rgba(0,0,0,.4); }
.ec-st.none { opacity: 1; background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 22%, transparent); font-weight: 500; }
.ec-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)); padding: 7px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: .8125rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.ec-tip.on { opacity: 1; }
.ec-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.ec-panel { position: static; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; margin-top: 36px; align-items: start; }
.ec-pinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 4px; }
.ec-pinfo h4 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.ec-pnav { display: flex; gap: 8px; margin-top: 8px; }
.ec-pnav button { height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--surface); color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ec-pnav button:hover { background: var(--surface-2); }
.ec-pnav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 900px) {
  .ec-panel { grid-template-columns: 1fr; gap: 20px; }
  .ec-mapin { min-width: 760px; aspect-ratio: 1000 / 380; }
  .ec-hint .ec-count { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ec-mapbox .ec-st::before { animation: none !important; } }
.ec-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "panel hint" "panel map" "panel legend"; grid-template-rows: auto auto 1fr; column-gap: 40px; align-items: start; margin-left: 88px; }
.ec-hint { grid-area: hint; font-size: .9375rem; }
.ec-mapbox { grid-area: map; aspect-ratio: 1000 / 360; }
.ec-legend { grid-area: legend; }
.ec-panel { grid-area: panel; grid-row: 1 / span 3; display: block; margin-top: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.ec-pinfo { gap: 12px; margin-top: 18px; }
.ec-pinfo h4 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.ec-st { padding: 4px 8px; border-radius: 7px; font-size: clamp(.5625rem, .78vw, .75rem); }
.ec-st::before { inset: -4px; border-radius: 10px; }
@media (max-width: 900px) {
  .ec-plan { grid-template-columns: 1fr; grid-template-areas: "hint" "map" "legend" "panel"; grid-template-rows: auto; margin-left: 0; }
  .ec-panel { grid-row: auto; position: static; margin-top: 24px; }
  .ec-mapin { min-width: 640px; aspect-ratio: 1000 / 360; }
  .ec-mapbox { aspect-ratio: auto; overflow-x: auto; overflow-y: hidden; }
  .ec-hint { display: grid; grid-template-columns: 22px 1fr; }
  .ec-hint .ec-count { grid-column: 1 / -1; }
}
.ec-mapbox .ec-st::before { animation: none !important; }
.m-meta.m-brief { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 0; margin: 0 0 32px; border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.m-brief > div { padding: 18px 20px 18px 0; }
.m-brief > div + div { padding-left: 20px; border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.m-brief dd { line-height: 1.35; }
.m-brief .res dd { font-size: 1.0625rem; }
.m-brief .res dt::before { content: "✳︎ "; }
@media (max-width: 900px) {
  .m-meta.m-brief { grid-template-columns: 1fr 1fr; }
  .m-brief > div { padding: 14px 12px 14px 0; }
  .m-brief > div + div { border-left: 0; padding-left: 0; }
  .m-brief > div:nth-child(even) { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
  .m-brief > div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
}
.cur-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: .85; }
.cur-ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-color: color-mix(in srgb, var(--fg) 22%, transparent); transition: width .45s cubic-bezier(.3,.8,.3,1), height .45s cubic-bezier(.3,.8,.3,1), margin .45s cubic-bezier(.3,.8,.3,1), background-color .4s ease, border-color .4s ease, opacity .3s ease; }
.cur.link .cur-ring, .cur.label .cur-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: color-mix(in srgb, var(--fg) 5%, transparent); border-color: color-mix(in srgb, var(--fg) 16%, transparent); }
.cur.label .cur-dot, .cur.link .cur-dot { opacity: .85; }
.cur-lbl { position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); padding: 5px 11px; border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--fg); background: color-mix(in srgb, var(--bg) 78%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent), 0 6px 18px -8px rgba(0,0,0,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s ease, transform .4s cubic-bezier(.3,.8,.3,1); }
.cur.label .cur-lbl { opacity: 1; transform: translate(0, -50%); }
.portrait { cursor: crosshair; touch-action: manipulation; }
.face-word { position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; line-height: 1.1; white-space: pre; padding: 0 .35em; margin-left: -.35em; color: var(--fg); background: var(--bg); border-radius: 3px; opacity: 0; transform: scale(1); transform-origin: center; transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.face-word.on { opacity: 1; transform: scale(2.1); }
@keyframes hintPulse { 50% { opacity: .25; } }
.hero h1.name { font-size: clamp(2.75rem, min(7.4vw, 12.5vh), 6.5rem); }
.statement { font-size: clamp(2.25rem, min(6.4vw, 11vh), 5.75rem); }
.sec-head h2 { font-size: clamp(2rem, min(4.6vw, 8.5vh), 3.75rem); }
.about .big { font-size: clamp(1.25rem, min(2.4vw, 4vh), 2rem); }
.contact h2 { font-size: clamp(3rem, min(10vw, 17vh), 9rem); }
.case h2 { font-size: clamp(2.75rem, min(8vw, 13vh), 7rem); }
.portrait { max-width: min(100%, calc(84vh * 600 / 822)); justify-self: center; width: 100%; }
@media (max-height: 760px) and (min-width: 761px) {
  .sec-head { margin-bottom: 20px; }
  .ec-video, .vb-video, .vb-screen { max-height: calc(100vh - var(--header-h) - 40px); }
  .ec-video video, .vb-video video { object-fit: contain; }
}
@media (min-width: 1500px) {
  :root { --max: min(1640px, calc(100vw - 2 * var(--gutter) - 80px)); --gutter: clamp(40px, 5vw, 96px); }
  body { font-size: 1.0625rem; }
  .pcard { top: 96px; }
  .about .big { font-size: clamp(1.5rem, min(1.9vw, 4vh), 2.25rem); }
}
section.block { padding-block: clamp(72px, 8vw, 120px) 0; }
.pcap { margin-top: -18px; }
@media (min-width: 901px) {
  .about .portrait { margin-top: calc(-1 * clamp(90px, 9vw, 170px)); max-width: min(100%, calc(76vh * 600 / 822)); }
}
.mk-body { margin-left: 88px; }
.mk-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.mk-tabs button { display: grid; justify-items: start; gap: 2px; min-height: 56px; padding: 10px 18px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); color: var(--muted); font: inherit; cursor: pointer; text-align: left; transition: background-color .3s ease, color .3s ease; }
.mk-tabs button b { font-weight: 500; color: inherit; }
.mk-tabs button span { font-size: .8125rem; color: var(--faint); }
.mk-tabs button:hover { background: var(--surface); }
.mk-tabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 25%, transparent); }
.mk-tabs button:focus-visible, .mk-scr:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.mk-duo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 19vw, 250px); gap: clamp(20px, 3vw, 40px); align-items: end; }
.mk-browser { position: relative; border-radius: 14px; padding-top: 30px; background: var(--surface-2); overflow: hidden; }
.mk-dots { position: absolute; top: 11px; left: 14px; display: flex; gap: 6px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 22%, transparent); }
.mk-phone { padding: 8px; border-radius: 38px; background: var(--surface-2); }
.mk-scr { position: relative; overflow-y: auto; overscroll-behavior: contain; background: #fff; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, #000 25%, transparent) transparent; }
.mk-browser .mk-scr { height: min(62vh, 560px); }
.mk-phone .mk-scr { height: min(62vh, 560px); border-radius: 30px; scrollbar-width: none; }
.mk-phone .mk-scr::-webkit-scrollbar { display: none; }
.mk-scr img { display: block; width: 100%; height: auto; transition: opacity .35s ease; }
.mk-scr { overscroll-behavior: auto !important; }
.mk-duo:not(.live) .mk-scr { overflow-y: hidden !important; }
@media (pointer: coarse) { .case { scroll-snap-type: y proximity; } .mk-duo { scroll-snap-align: start; scroll-margin-top: 72px; } }
.mk-scr img.out { opacity: 0; }
.mk-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; }
.mk-hint { margin: 0; color: var(--faint); font-size: .875rem; }
.mk-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--fg); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.mk-list { list-style: none; margin: 0 0 0 88px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.mk-list li { padding: 22px 24px 0 0; }
.mk-list li + li { padding-left: 24px; border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.mk-list span { color: var(--faint); font-size: .875rem; }
.mk-list b { display: block; margin-top: 10px; font-weight: 500; font-size: 1.125rem; }
.mk-list p { margin: 8px 0 0; color: var(--muted); }
@media (max-width: 900px) {
  .mk-body, .mk-list { margin-left: 0; }
  .mk-duo { grid-template-columns: 1fr; }
  .mk-browser { display: none; }
  .mk-phone { justify-self: center; width: min(300px, 82vw); }
  .mk-phone .mk-scr { height: 70vh; }
  .mk-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .mk-tabs button { flex: 0 0 auto; }
  .mk-list { grid-template-columns: 1fr; }
  .mk-list li, .mk-list li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
}
#face { right: auto; }
@media (max-width: 1040px) {
  .about { grid-template-columns: 1fr; }
  .about .portrait { width: min(100%, 440px, calc(70vh * 600 / 822)); margin: 8px auto 0 !important; justify-self: center; }
}
.card .fig { height: clamp(110px, 10vw, 150px); }
.card svg.abs { height: 100%; width: auto; max-width: 100%; }
@media (max-width: 640px) { .card .fig { height: clamp(110px, 32vw, 150px); justify-content: center; } }
.timeline .when { white-space: nowrap; }
svg.ico { width: .9em; height: .9em; vertical-align: -.08em; flex: none; display: inline-block; }
.foot-link svg.ico, .mk-link svg.ico, .ec-end svg.ico { margin-left: 6px; }
.links .lk:first-child { flex-wrap: wrap; row-gap: 6px; }
.links .lk:first-child .val { font-size: clamp(1.125rem, 5.4vw, 2.75rem); overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
html[data-av="a"] .star { animation: none; }
html[data-av="b"] .star, html[data-av="c"] .star { display: none; }
@keyframes apulse { 0% { transform: scale(1); opacity: .45; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
:root { --sh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10.5 -10.5 21 21'%3E%3Cpath d='M0.00 -10.00Q0.40 -0.97 4.10 -4.10Q0.97 -0.40 10.00 0.00Q0.97 0.40 4.10 4.10Q0.40 0.97 0.00 10.00Q-0.40 0.97 -4.10 4.10Q-0.97 0.40 -10.00 0.00Q-0.97 -0.40 -4.10 -4.10Q-0.40 -0.97 0.00 -10.00Z'/%3E%3C/svg%3E"); }
.star { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; background: currentColor; -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.star { font-size: 1em; width: 1.05em; height: 1.05em; }
.marquee span::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: inherit; vertical-align: .18em; background: var(--faint); -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.m-brief .res dt::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: 6px; vertical-align: -.12em; background: currentColor; -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.vb-traits li::before { content: ""; width: .8em; height: .8em; margin-top: .3em; background: var(--faint); -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.ec-st.a::after { content: ""; width: 1em; height: 1em; background: #E8A317; -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.ec-legend em { display: inline-block; width: 1em; height: 1em; background: #E8A317; -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.bloom { width: 1.4em; height: 1.4em; flex: none; overflow: visible; vertical-align: -.3em; }
.bloom path { fill: var(--fg); transition: fill .45s ease; }
.avail { gap: 10px; }
.m-brief .res dt::before { content: none !important; display: none !important; }
.bloom { width: 1.05em; height: 1.05em; vertical-align: -.17em; }
.bloom path { fill: var(--fg); }
.avail:hover .bloom path, .avail:focus-visible .bloom path { fill: var(--fg); }
.marquee span::after { width: .34em; height: .34em; opacity: .7; }
.avail .star { width: 1em; height: 1em; vertical-align: -.14em; background: currentColor; animation: spin 14s linear infinite; }
.avail:hover .star { animation-duration: 4s; }
.marquee span::after { font-size: 1em; width: .52em; height: .52em; vertical-align: .14em; opacity: .9; animation: spin 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee span::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .avail .star { animation: none; } }
.cdots { display: none; }
@media (max-width: 640px) {
  .cards { display: flex; gap: calc(2 * var(--gutter)); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .cards > .card { flex: 0 0 calc(100vw - 2 * var(--gutter)); scroll-snap-align: start; padding: 0; border-radius: 0; background: transparent; }
  .cards > .card .fig { justify-content: center; }
  .cdots { position: relative; display: flex; width: max-content; margin: 18px auto 0; padding: 6px 8px; gap: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--surface-2); }
  .cdots button { width: 20px; height: 20px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .cdots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 28%, transparent); }
  .cdots button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 50%; }
  .cpill { position: absolute; top: 50%; left: 0; height: 9px; margin-top: -4.5px; border-radius: 999px; background: var(--fg); pointer-events: none; will-change: transform, width; }
}
@media (hover: none) {
  .marquee:hover .row, .marquee:focus-within .row { animation-play-state: running; }
  .marquee.held .row, .marquee.held span::after { animation-play-state: paused; }
}
.stage, .stage *, .cards, .cards *, .portrait, .portrait * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pcard img { pointer-events: none; -webkit-user-drag: none; }
.stage { overflow-x: clip; overflow-y: visible; }
.m-sub { margin: clamp(56px, 7vw, 88px) 0 24px 88px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; }
.kpis { margin: 0 0 0 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.kpis > div { padding: 22px 24px 0 0; }
.kpis > div + div { padding-left: 24px; border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.kpis dt { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpis dd { margin: 10px 0 0; color: var(--muted); max-width: 22ch; }
.m-steps { margin: 0 0 0 88px; }
.ec .kpis, .vb .kpis { margin-bottom: 48px; }
.mk .mk-list { margin-top: 0; }
.rz-end .kpis { margin: 28px 0 0; }
.kpis:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66.6%; }
@media (max-width: 640px) { .kpis:has(> div:nth-child(2):last-child) { max-width: none; } }
.rz-end .kpis dt { font-size: clamp(2rem, 3.4vw, 3rem); }
@media (max-width: 900px) {
  .m-sub, .kpis, .m-steps { margin-left: 0; }
  .kpis > div { padding: 16px 12px 0 0; }
  .kpis > div + div { padding-left: 12px; }
  .kpis dd { font-size: .875rem; }
}
.fx-hero { padding: 36px 0 28px; max-width: 1080px; }
.fx-title { margin: 14px 0 0 !important; font-size: clamp(2rem, 4.4vw, 3.75rem) !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; font-weight: 500; text-wrap: balance; }
.fx-name { display: block; font-size: .875rem; letter-spacing: .02em; color: var(--faint); font-weight: 500; margin-bottom: 14px; }
.fx-pb { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin: 32px 0 0; max-width: 900px; }
.fx-pb dt { font-size: .875rem; color: var(--faint); margin-bottom: 6px; }
.fx-pb dd { margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4; }
.fx-cover { aspect-ratio: 3 / 2 !important; margin: 0 0 32px !important; }
@media (max-width: 760px) { .fx-pb { grid-template-columns: 1fr; gap: 18px; } }
.m-head { grid-template-columns: 64px minmax(0, 1fr) !important; row-gap: 10px !important; margin-bottom: 36px !important; }
.m-head p { grid-column: 2 !important; max-width: 60ch !important; }
@media (max-width: 900px) { .m-head { grid-template-columns: 40px minmax(0, 1fr) !important; } }
.ec-pill3 { margin-left: 88px; grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; gap: 32px; }
.ec-two { margin-left: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 40px; align-items: start; }
.ec-two .ec-stat { flex-direction: column; align-items: flex-start; gap: 10px; }
.ec-two .ec-stat .n { font-size: clamp(3.5rem, 7vw, 6rem); }
.ec-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ec-pad { margin-left: 88px; }
.ec-tile { margin: 0; }
.ec-tile button { display: block; width: 100%; padding: 0; border: 0; background: var(--surface); border-radius: var(--rc); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.ec-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ec-tile button:hover img { transform: scale(1.03); }
.ec-tile .ec-still { display: block; width: 100%; background: var(--surface); border-radius: var(--rc); overflow: hidden; aspect-ratio: 4 / 3; }
.ec-tile figcaption { margin-top: 10px; font-size: .9375rem; }
.ec-tile figcaption b { font-weight: 500; }
.ec-gal4 { margin: 40px 0 0 88px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ec-gal4 figure { margin: 0; aspect-ratio: 3 / 4; border-radius: var(--rc); overflow: hidden; background: var(--surface); }
.ec-gal4 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec .ec-end { margin-top: 32px; }
.ec-mapbox { background: transparent !important; box-shadow: inset 0 0 0 1px var(--surface-2); }
.ec-mapbox svg .w { stroke: var(--fg) !important; stroke-width: 1.5 !important; opacity: .55 !important; }
.ec-mapbox svg .arc { stroke: var(--faint) !important; stroke-width: 1 !important; }
.ec-hint svg { display: none; }
.ec-hint { font-weight: 400 !important; color: var(--muted); }
@media (max-width: 900px) { .ec-hint { display: block !important; } .ec-hint .ec-count { display: block; width: auto; margin: 6px 0 0; } }
.ec-st { background: var(--bg) !important; color: var(--fg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 45%, transparent) !important; font-weight: 500 !important; }
.ec-st.d { background: var(--fg) !important; color: var(--bg) !important; box-shadow: none !important; }
.ec-st.a::after { background: var(--fg) !important; }
.ec-st.d.a::after { background: var(--fg) !important; }
.ec-st.none { background: transparent !important; color: var(--faint) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent) !important; }
.ec-st[aria-pressed="true"], .ec-st.d[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg) !important; }
.ec-st::before { display: none !important; }
.ec-mapin { container-type: inline-size; }
.ec-st { font-size: clamp(8px, 1.55cqw, 13px) !important; padding: .42em .75em !important; border-radius: .6em !important; line-height: 1.15 !important; }
.ec-st[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.05); }
.ec-st.v[aria-pressed="true"] { transform: translate(-50%, -50%) rotate(-90deg) scale(1.05); }
.fx-name:has(.fx-logo) { margin-bottom: 20px; }
.fx-logo { display: block; height: 40px; width: auto; }
.fx-logo-m { height: 46px; }
:root[data-mode="light"] .fx-logo:not(.fx-logo-rz) { filter: invert(1); }
.fx-media { margin: 0 0 32px !important; border-radius: var(--rc); overflow: hidden; }
.fx-shot { aspect-ratio: 3 / 2; background: var(--surface); }
.fx-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.vb-video.fx-media { aspect-ratio: 3 / 2; }
.fx-phonebox { aspect-ratio: 16 / 9; background: var(--surface); display: grid; place-items: center; align-content: center; gap: 14px; padding: 28px 0; }
.fx-phonebox .rz-phone { width: auto; height: min(84%, 560px); }
.fx-media.fx-hasnote { margin-bottom: 10px !important; }
.fx-note, .mk-rights { display: flex; align-items: center; gap: 7px; margin: 0 0 32px; color: var(--faint); font-size: .8125rem; }
.fx-note::before, .mk-rights::before { content: ""; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--sh) center / contain no-repeat; mask: var(--sh) center / contain no-repeat; }
.mk-rights { margin: 14px 0 0; }
.sv { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-left: 88px; }
.sv-ph { grid-template-columns: auto minmax(0, 1fr); gap: 56px; }
.sv-ph .sv-media .rz-phone { width: 300px; }
.sv-media { position: sticky; top: calc(var(--header-h) + 24px); }
.sv-count { margin: 0 0 12px; color: var(--faint); font-size: .875rem; }
.sv-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.sv-list li { border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.sv-list button { width: 100%; display: grid; grid-template-columns: 36px 1fr; gap: 4px; align-items: start; padding: 16px 0; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; min-height: 44px; transition: color .2s ease; }
.sv-list button:hover { color: var(--fg); }
.sv-list button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sv-list .no { color: var(--faint); font-size: .875rem; padding-top: .25em; }
.sv-list b { display: block; font-weight: 500; font-size: 1.1875rem; letter-spacing: -0.01em; }
.sv-list .sv-p { display: grid; grid-template-rows: 0fr; overflow: hidden; color: var(--muted); font-size: .9375rem; line-height: 1.5; transition: grid-template-rows .35s ease, margin .35s ease; }
.sv-list .sv-p { display: block; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease, margin .35s ease; }
.sv-list li.on button { color: var(--fg); }
.sv-list li.on .sv-p { max-height: 12em; opacity: 1; margin-top: 8px; }
.sv-list li.on .no { color: var(--fg); }
@media (max-width: 900px) {
  .sv { grid-template-columns: 1fr; gap: 20px; margin-left: 0; }
  .sv-media { position: static; }
  .sv-ph { justify-items: stretch; }
  .sv-ph .sv-media { display: grid; justify-items: center; }
  .sv-ph .sv-media .rz-phone { width: min(240px, 62vw); }
  .fx-shot, .vb-video.fx-media { aspect-ratio: 4 / 3; }
  .fx-phonebox { aspect-ratio: auto; padding: 24px 0; }
  .fx-phonebox .rz-phone { height: auto; width: min(220px, 56vw); }
  .fx-logo { height: 32px; } .fx-logo-m { height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .sv-list .sv-p { transition: none; } }
.rz-eq { margin: 8px 0 0 88px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) !important; gap: 28px !important; align-items: center !important; justify-items: center; text-align: center; padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px); border-radius: var(--rc); background: var(--surface); }
.rz-term { display: grid; justify-items: center; align-content: start; gap: 14px; }
.rz-term p { margin: 0 !important; max-width: 24ch !important; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.rz-eq .rz-big { font-size: clamp(2.75rem, 5.5vw, 4.75rem) !important; line-height: 1 !important; }
.rz-eq .rz-serif { font-family: "DM Serif Display", serif !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -0.01em !important; }
.rz-op { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--faint); line-height: 1; align-self: start; padding-top: clamp(.35em, 1.6vw, .6em); }
.rz-eqlogo { height: clamp(48px, 5.4vw, 76px); width: auto; display: block; }
.rz-res p { color: var(--fg); font-weight: 500; }
.rz-term { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.rz-eq.in .rz-term { opacity: 1; transform: none; }
.rz-eq.in .rz-term:nth-of-type(2) { transition-delay: .15s; } .rz-eq.in .rz-term:nth-of-type(3) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .rz-term { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .rz-eq { margin-left: 0 !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .rz-op { padding: 0; align-self: center; }
}
.foot-top { display: none; }
@media (max-width: 760px) {
  #seePhone2, #toast, #device { display: none !important; }
  .contact .links { display: grid !important; grid-template-columns: 1fr; gap: 0 !important; border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
  .links .lk, .links .lk:first-child { width: 100% !important; min-height: 72px !important; margin: 0 !important; padding: 14px 0 !important; background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); justify-content: space-between !important; flex-wrap: nowrap !important; }
  .links .lk .lbl { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; color: var(--faint); font-size: .8125rem; margin-bottom: 4px; }
  .links .lk .val, .links .lk:first-child .val { font-size: 1.125rem !important; letter-spacing: -0.01em !important; white-space: normal !important; overflow-wrap: anywhere !important; background: none !important; }
  .links .lk .actx { display: none !important; }
  .links .lk .act { color: var(--muted); flex: none; }
  .links .lk .act svg { width: 18px; height: 18px; }
  .contact { padding-bottom: 48px !important; }
  footer { display: grid !important; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; margin-top: 0; padding-top: 8px !important; border-top: 0; }
  .foot-mid { grid-column: 1 / -1; order: -1; gap: 0 !important; }
  .foot-mid .foot-link { width: 100%; justify-content: space-between; display: flex; align-items: center; min-height: 52px; padding: 0 !important; font-size: 1rem; color: var(--fg); }
  .foot-copy { grid-column: 1; grid-row: 2; font-size: .8125rem; }
  .foot-made { grid-column: 1; grid-row: 3; font-size: .8125rem; }
  .foot-mid { margin-bottom: 14px; }
  .foot-top { display: grid; place-items: center; grid-column: 2; grid-row: 2 / span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--fg); }
  .foot-top svg { width: 18px; height: 18px; }
}
.fx-phonebox { background: transparent !important; }
[data-sv] .ec-pnav { display: none !important; }
.sv-list button { position: relative; padding-right: 44px; border-radius: 10px; }
.sv-list button::after { content: ""; position: absolute; right: 8px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5z' fill='%238C8C8C'/%3E%3C/svg%3E") center / 14px no-repeat; transition: background-color .2s ease, transform .2s ease; }
.sv-list li.on button::after { background-color: var(--fg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5z' fill='%23808080'/%3E%3C/svg%3E"); }
@media (hover: hover) { .sv-list li:not(.on) button:hover { background: var(--surface); padding-left: 10px; } .sv-list li:not(.on) button:hover::after { transform: scale(1.1); } .sv-list button { transition: color .2s ease, background-color .2s ease, padding .2s ease; } }
.sv-count .sv-tip { color: var(--faint); }
.fx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; padding: 28px 0 40px; }
.fx-top .fx-hero { padding: 0 !important; max-width: none !important; }
.fx-top .fx-title { font-size: clamp(1.875rem, 3.1vw, 3.125rem) !important; }
.fx-top .fx-pb { grid-template-columns: 1fr !important; gap: 20px !important; margin-top: 28px !important; max-width: 52ch; }
.fx-top .fx-pb dd { font-size: clamp(1rem, 1.25vw, 1.125rem) !important; }
.fx-side { min-width: 0; }
.fx-side > figure, .fx-side > .fx-media, .fx-side > .ec-cover { margin: 0 !important; width: 100%; aspect-ratio: 4 / 3 !important; max-height: min(64vh, 620px); border-radius: var(--rc); overflow: hidden; }
.fx-side .ec-cover img, .fx-side .fx-shot img { width: 100%; height: 100%; object-fit: cover; }
.fx-side .vb-video video { width: 100%; height: 100%; object-fit: cover; }
.fx-side .fx-phonebox { aspect-ratio: auto !important; max-height: none; padding: 0 !important; background: transparent !important; display: grid; justify-items: center; gap: 12px; overflow: visible; }
.fx-side .fx-phonebox .rz-phone { height: min(62vh, 560px) !important; width: auto !important; }
.fx-side .fx-note { margin: 10px 0 0 !important; }
.vbox { position: relative; cursor: pointer; }
.vbtn { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; color: #F9F9F9; background: rgba(16,16,16,.42); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); opacity: .7; transition: opacity .25s ease, transform .25s ease, background-color .25s ease; }
.vbtn svg { width: 15px; height: 15px; fill: currentColor; grid-area: 1 / 1; transition: opacity .2s ease, transform .2s ease; }
.vbtn .i-p { opacity: 0; transform: scale(.7); } .vbtn .i-r { opacity: 1; }
.vbtn.on .i-p { opacity: 1; transform: none; } .vbtn.on .i-r { opacity: 0; transform: scale(.7); }
.vbox:hover .vbtn, .vbtn:focus-visible, .vbtn:not(.on) { opacity: 1; }
.vbtn:hover { background: rgba(16,16,16,.62); transform: scale(1.06); }
.vbtn:focus-visible { outline: 2px solid #F9F9F9; outline-offset: 3px; }
.rz-phone .vbtn { right: 12px; bottom: 74px; width: 40px; height: 40px; }
.vb-vlabel { pointer-events: none; }
@media (max-width: 900px) {
  .fx-top { grid-template-columns: 1fr; gap: 24px; padding: 20px 0 28px; }
  .fx-top .fx-pb { margin-top: 22px !important; }
  .fx-side > figure, .fx-side > .fx-media, .fx-side > .ec-cover { aspect-ratio: 16 / 11 !important; max-height: none; }
  .fx-side .fx-phonebox .rz-phone { height: auto !important; width: min(230px, 60vw) !important; }
  .fx-side > .fx-phonebox { aspect-ratio: auto !important; height: auto !important; align-content: start !important; overflow: visible; }
  .vbtn { opacity: 1; width: 40px; height: 40px; right: 10px; bottom: 10px; }
  .rz-phone .vbtn { bottom: 64px; }
}
.sv-list button { padding-right: 0 !important; }
.sv-list button::after { content: none !important; display: none !important; }
.marquee.wait .row { animation-play-state: paused !important; }
.marquee span:not(.key) { color: var(--muted); }
.marquee span.first { margin-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) - 24px); }
.marquee span.first::after { margin-left: 0 !important; }
#marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 92%, transparent) !important; mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 92%, transparent) !important; }
.legal { border: 0; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); border-radius: var(--rc); background: var(--bg); color: var(--fg); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent); }
.legal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.legal .lg-in { padding: 28px 28px 32px; }
.legal .lg-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.legal h2 { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.legal .btn { height: 44px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--surface); color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; }
.legal h3 { margin: 22px 0 4px; font-size: .875rem; font-weight: 500; color: var(--faint); }
.legal p { margin: 0; color: var(--muted); line-height: 1.55; }
.legal a { color: var(--fg); }
.legal .btn { white-space: nowrap; flex: none; }
@media (max-width: 760px) { .legal h2 { font-size: 1.25rem; } .legal .lg-in { padding: 22px 20px 26px; } }
.fx-top .fx-logo, .fx-top .fx-logo-m, .fx-top .fx-logo-mr, .fx-top .fx-logo-rz { height: 48px !important; width: auto !important; display: block; }
.fx-name:has(.fx-logo) { margin-bottom: 22px !important; }
@media (max-width: 900px) { .fx-top .fx-logo, .fx-top .fx-logo-m, .fx-top .fx-logo-mr, .fx-top .fx-logo-rz { height: 40px !important; } }
[data-stp], [data-stn], .ec-lb [data-lbx], .ec-lb [data-lbp], .ec-lb [data-lbnx] { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px !important; height: 44px !important; min-width: 44px; padding: 0 18px !important; border-radius: 10px !important; border: 0 !important; background: #EEEEEE !important; color: #101010 !important; font-weight: 500 !important; font-size: 1rem !important; box-shadow: none !important; cursor: pointer; transition: background-color .2s ease; }
[data-stp]:hover, [data-stn]:hover, .ec-lb [data-lbx]:hover, .ec-lb [data-lbp]:hover, .ec-lb [data-lbnx]:hover { background: #E2E2E2 !important; }
.ec-lb [data-lbp], .ec-lb [data-lbnx] { padding: 0 !important; width: 44px; }
[data-stp], [data-stn] { background: var(--surface) !important; color: var(--fg) !important; }
[data-stp]:hover, [data-stn]:hover { background: var(--surface-2) !important; }
.ec-lb [data-lbx] svg { width: 14px !important; height: 14px !important; }
.ec-lb .bar [data-lbx] span { color: #101010 !important; font-size: 1rem !important; }
.ec-lb [data-lbx], .ec-lb [data-lbp], .ec-lb [data-lbnx] { background: #202020 !important; color: #F9F9F9 !important; }
.ec-lb [data-lbx]:hover, .ec-lb [data-lbp]:hover, .ec-lb [data-lbnx]:hover { background: #2C2C2C !important; }
.ec-lb .bar [data-lbx] span { color: #F9F9F9 !important; }
.ec-legend i { background: var(--fg) !important; border-radius: 3px; }
.ec-legend em { background: var(--fg) !important; }
.ec-ptags span { border-radius: var(--r); }
@media (max-width: 900px) {
  .ec-pill3, .ec-two, .ec-pad, .ec-gal4 { margin-left: 0; }
  .ec-pill3 { grid-template-columns: 1fr; gap: 20px; }
  .ec-two { grid-template-columns: 1fr; gap: 24px; }
  .ec-grid3 { grid-template-columns: 1fr 1fr; }
  .ec-gal4 { grid-template-columns: 1fr 1fr; }
}
.ec-gal4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 16px !important; }
.ec-gal4 figure { aspect-ratio: auto !important; border-radius: 0 !important; background: none !important; overflow: visible !important; }
.ec-gal4 .g4i { aspect-ratio: 3 / 2; border-radius: var(--rc); overflow: hidden; background: var(--surface); }
.ec-gal4 figcaption { margin-top: 10px; font-size: .9375rem; color: var(--muted); }
@media (max-width: 640px) { .ec-gal4 { grid-template-columns: 1fr !important; } }
.hclock, .sclock, .cur { display: none !important; }
.card .label::after { content: none; }
.ask { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s ease; }
.ask:hover, .ask:focus-visible { color: var(--fg); }
.contact h2#h-contact { font-size: clamp(2.75rem, min(7.4vw, 12.5vh), 6.5rem); letter-spacing: -0.05em; line-height: 1; margin-bottom: 40px; color: var(--fg);
  opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.75,.15,1); }
.contact h2#h-contact.in { opacity: 1; transform: none; }
#h-contact .ln { display: block; }
#h-contact .ln.dim { color: var(--fg); }
#h-contact .w { display: inline-block; white-space: nowrap; }
#h-contact .ch { display: inline-block; transform: translateY(var(--lift, 0px)); transition: transform .5s cubic-bezier(.2,.75,.15,1); }
@media (prefers-reduced-motion: reduce) { .contact h2#h-contact { opacity: 1; transform: none; transition: none; } #h-contact .ch { transform: none; } }
@media (forced-colors: active) { #h-contact, #h-contact .ln.dim { color: CanvasText; } }
.links .lk:first-child .val { font-size: clamp(1.125rem, 1.7vw, 1.5rem) !important; }
.mk-rights, .mk-hint, .ec-hint, .sv-tip, .ec-pnav { display: none !important; }
.ds-space li { grid-template-columns: 56px 1fr; }
.ds-space .num { order: -1; }
.ds-space li.grp { display: block; margin: 10px 0 2px; font-size: .875rem; color: var(--muted); }
.ds-space .grp:first-child { margin-top: 0; }
.ec-lb img { cursor: zoom-in !important; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2,.75,.15,1), opacity .25s ease !important; }
.ec-lb img.zm { transform: scale(2.2) !important; cursor: zoom-out !important; }
.ec-lb .stage { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ec-lb img { transition: none !important; } }
.ec-end { justify-content: flex-start; } .ec-end [data-t="credit"] { margin-right: auto; }
.ec-end, .m-meta.m-brief, .m-brief > div, .mk-list, .mk-list li, .kpis, .kpis > div, .sv-list, .sv-list li, .contact .links, .links .lk, .links .lk:first-child, .a11y tbody tr + tr td { border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; }
.ec-end { padding-top: 0; }
.m-meta.m-brief { column-gap: 24px; }
.m-brief > div + div, .kpis > div + div, .mk-list li + li { padding-left: 0; }
.sv-count, [data-stcount], .ec-lb .hint { display: none !important; }
.fx-note { display: none !important; }
.m-n { visibility: hidden; }
@media (max-width: 900px) { .m-n { display: none; } .m-head { grid-template-columns: minmax(0, 1fr) !important; } .m-head h3, .m-head p { grid-column: 1 !important; } }
.sv-list .no { display: none; }
.sv-list button { grid-template-columns: 1fr; }
.ec-pillars li::before { content: none; }
.ec-pillars li { grid-template-columns: 1fr; }
.car-ctrl { display: none !important; }
.pdots { position: relative; display: flex; width: max-content; margin: 22px auto 0; padding: 6px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--surface-2); }
.pdots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.pdots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 28%, transparent); }
.pdots button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 50%; }
@media (max-width: 760px) { .pdots { display: none !important; } }
.pdots .cpill { position: absolute; top: 50%; left: 0; height: 9px; margin-top: -4.5px; border-radius: 999px; background: var(--fg); pointer-events: none; will-change: transform, width; }
.vk { --ease: cubic-bezier(.2,.75,.15,1); --flip: cubic-bezier(.65,0,.35,1); margin: 0 0 0 88px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 32px; align-items: start; max-width: 1280px; }
.vk-stage { position: relative; perspective: 2600px; }
.vk-book { position: relative; aspect-ratio: 2000 / 1341; transform: translateX(-32.65%); transition: transform 1.3s var(--flip); }
.vk.open .vk-book { transform: none; }
.vk-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 65.3%); transition: clip-path .7s var(--ease) 1.2s; }
.vk.open .vk-layer { clip-path: inset(-8% -8% -12% -8%); }
.vk-open { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(8px 14px 22px rgba(0,0,0,.18)); opacity: 0; transition: opacity .35s ease; user-select: none; }
.vk-open.on { opacity: 1; }
.vk-cover { position: absolute; left: 65.3%; top: 1.1%; width: 34.7%; height: 97.4%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.3s var(--flip); z-index: 6; cursor: pointer; }
.vk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; transition: opacity .35s ease 1.4s; }
.vk.open .vk-face { opacity: 0; }
.vk-front { border-radius: 0 14px 14px 0; box-shadow: 10px 14px 28px rgba(0,0,0,.22); }
.vk-front img { width: 100%; height: 100%; display: block; border-radius: 0 14px 14px 0; }
.vk-bk { transform: rotateY(180deg); }
.vk-bk img { position: absolute; left: -88.2%; top: -1.13%; width: 288.2%; height: 102.7%; max-width: none; }
.vk:not(.open) .vk-cover:hover { transform: rotateY(-12deg); }
.vk.open .vk-cover { transform: rotateY(-180deg); pointer-events: none; }
.vk-cta { position: absolute; left: 82.65%; bottom: 9%; transform: translateX(calc(-50% - 32.65% * 0)); white-space: nowrap; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #111; color: #F9F9F9; font: inherit; font-weight: 500; font-size: .875rem; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.25); z-index: 7; transition: opacity .3s ease, transform .3s ease; }
.vk-cta { left: 50%; transform: translateX(-50%); }
.vk-cta:hover { transform: translateX(-50%) translateY(-2px); }
.vk-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.vk.open .vk-cta { opacity: 0; pointer-events: none; }
.vk-hot { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: none; z-index: 3; }
.vk.open .vk-hot { pointer-events: auto; }
.vk-h-letter { left: 6%; top: 12%; width: 28%; height: 66%; } .vk-h-fiche { left: 65.6%; top: 1%; width: 32.6%; height: 27%; }
.vk-h-g { left: 72%; top: 30.5%; width: 24.6%; height: 15%; } .vk-h-y { left: 72%; top: 48.6%; width: 24.6%; height: 14.6%; } .vk-h-p { left: 71.6%; top: 65.2%; width: 24.6%; height: 13.8%; }
.vk-hot:focus-visible { outline: none; }
.vk-dot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .4s var(--ease), background-color .2s ease; }
.vk-dot::before, .vk-dot::after { content: ""; position: absolute; left: 9px; top: 14px; width: 12px; height: 2px; border-radius: 1px; background: #111; transition: transform .3s var(--ease), background-color .2s ease; }
.vk-dot::after { transform: rotate(90deg); }
.vk.open .vk-dot { opacity: 1; transform: none; transition-delay: 1.6s; }
.vk.open[data-pick=""] .vk-dot, .vk.open:not([data-pick]) .vk-dot { animation: vkPulse 2.2s ease-out 1.8s infinite; }
@keyframes vkPulse { 0% { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.75); } 70%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 14px rgba(255,255,255,0); } }
.vk-hot:hover .vk-dot, .vk-hot:focus-visible .vk-dot { transform: scale(1.15); transition-delay: 0s; }
.vk-hot:focus-visible .vk-dot { outline: 2px solid var(--focus); outline-offset: 3px; }
.vk-hot[aria-pressed="true"] .vk-dot { background: #111; animation: none; }
.vk-hot[aria-pressed="true"] .vk-dot::before, .vk-hot[aria-pressed="true"] .vk-dot::after { background: #fff; }
.vk-hot[aria-pressed="true"] .vk-dot::before { transform: rotate(45deg); } .vk-hot[aria-pressed="true"] .vk-dot::after { transform: rotate(135deg); }
.vk-h-letter .vk-dot, .vk-h-letter .vk-tip { left: 55%; top: 50%; } .vk-h-fiche .vk-dot, .vk-h-fiche .vk-tip { left: 30%; top: 45%; }
.vk-h-g .vk-dot, .vk-h-y .vk-dot, .vk-h-p .vk-dot, .vk-h-g .vk-tip, .vk-h-y .vk-tip, .vk-h-p .vk-tip { left: 8%; top: 50%; }
.vk-tip { position: absolute; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: #111; color: #fff; font-size: .8125rem; font-weight: 500; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 22px)); transition: opacity .2s ease; }
@media (hover: hover) { .vk-hot:hover .vk-tip, .vk-hot:focus-visible .vk-tip { opacity: 1; } }
.vk-panel { position: sticky; top: 88px; scroll-margin-top: 80px; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; padding: clamp(16px, 2vw, 24px); border-radius: var(--rc); background: var(--surface); scrollbar-width: thin; }
.vk-panel.in { animation: vkIn .45s var(--ease); }
@keyframes vkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vk-intro h5, .vk-ph h5 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.vk-intro p { margin: 10px 0 0; color: var(--muted); }
.vk-ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.vk-back { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; flex: none; }
.vk-paper { margin: 0; }
.vk-paper img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.vk-flip { display: block; width: min(100%, 360px, calc((100vh - 290px) * 800 / 1450)); width: min(100%, 360px, calc((100svh - 290px) * 800 / 1450)); min-width: 180px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1600px; aspect-ratio: 800 / 1450; }
.vk-fi { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.vk-flip.turned .vk-fi { transform: rotateY(180deg); }
.vk-fi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vk-fv { transform: rotateY(180deg); }
.vk-seg { display: flex; width: max-content; margin: 16px auto 0; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-2); }
.vk-fbtn { min-height: 36px; min-width: 84px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); opacity: .6; font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .25s ease, opacity .25s ease, box-shadow .25s ease; }
.vk-fbtn:hover { opacity: 1; }
.vk-fbtn[aria-pressed="true"] { background: var(--bg); opacity: 1; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.vk-flip:focus-visible, .vk-fbtn:focus-visible, .vk-back:focus-visible, .vk-steps button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vk-deck { display: grid; gap: 16px; }
.vk-cards { position: relative; width: calc(100% - 36px); aspect-ratio: 880 / 609; margin-bottom: 28px; outline: none; }
.vk-cards:focus-visible { box-shadow: 0 0 0 2px var(--focus); border-radius: 8px; }
.vk-cards img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: pointer; z-index: calc(10 - var(--r)); transform: translate(calc(var(--r) * 11px), calc(var(--r) * 8px)) rotate(calc(var(--r) * 1.3deg)); filter: drop-shadow(0 8px 18px rgba(0,0,0,.2)); transition: transform .55s var(--ease); }
.vk-cards img.on { animation: vkCard .55s var(--ease); }
@keyframes vkCard { from { transform: translate(-30px, -14px) rotate(-5deg); } to { transform: none; } }
.vk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.vk-steps button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.vk-steps button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: .75rem; flex: none; }
.vk-steps button[aria-current="step"] { color: var(--fg); background: var(--surface-2); }
.vk-steps button[aria-current="step"] span { background: var(--fg); color: var(--bg); }
@media (max-width: 900px) {
  .vk { margin: 0 calc(var(--gutter, 16px) * -1); padding: 0 var(--gutter, 16px) 8px; grid-template-columns: 1fr; gap: 16px; overflow: hidden; }
  .vk-panel { position: static; max-height: none; overflow: visible; }
  .vk-book { transform-origin: 82.65% 50%; }
  .vk:not(.open) .vk-book { transform: translateX(-32.65%) scale(1.45); transform-origin: 82.65% 50%; }
  .vk:not(.open) .vk-stage { padding: 15% 0; }
  .vk-stage { transition: padding 1.3s var(--flip); }
  .vk-dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; } .vk-dot::before, .vk-dot::after { left: 7px; top: 12px; }
  .vk-cta { bottom: 4%; }
  .vk-flip { width: min(72%, 280px, calc((100vh - 300px) * 800 / 1450)); width: min(72%, 280px, calc((100svh - 300px) * 800 / 1450)); min-width: 160px; }
  .vk-panel[data-kind="fiche"] { scroll-margin-top: 72px; }
  .vk-seg { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .vk-book, .vk-layer, .vk-cover, .vk-open, .vk-cards img, .vk-fi, .vk-stage, .vk-dot { transition: none !important; animation: none !important; } }
.vk-letter { position: absolute; left: 34%; top: 11%; width: 28.5%; height: auto; z-index: 1; transform-origin: 70% 60%; transform: translateX(0) rotate(0deg) scale(.96); filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); transition: transform .9s cubic-bezier(.34,1.45,.55,1), opacity .4s ease; user-select: none; pointer-events: none; }
.vk-flapimg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; clip-path: inset(0 37% 0 33.3%); pointer-events: none; user-select: none; }
.vk.open .vk-letter { transform: translateX(-98%) rotate(-9deg); transition-delay: 1.55s; }
.vk.open:has(.vk-h-letter:hover) .vk-letter { transform: translateX(-104%) translateY(-3%) rotate(-12deg); transition-delay: 0s; transition-duration: .45s; }
.vk.open[data-pick="letter"] .vk-letter { transform: translateX(-110%) translateY(-18%) rotate(-16deg) scale(.9); opacity: 0; transition: transform .6s var(--ease), opacity .35s ease .15s; }
.vk.open.ready .vk-letter { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .vk-letter { transition: none !important; } }
.vb-map { max-width: 720px; }
@media (max-width: 900px) { .vb-map { max-width: none; } }
.hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
.hero-l, .hero-r { display: grid; justify-items: center; }
.hero-k { margin-bottom: 14px; }
.hero h1.name .ln { text-align: center; }
.hero h1.name .ln:first-child .t-open { display: inline-flex; justify-content: flex-end; width: 0; min-height: 0; margin: 0; padding-right: 10px; box-sizing: content-box; margin-left: -10px; white-space: nowrap; }
.hero-r { padding-bottom: 0; max-width: 44ch; }
.hero h1.name .ln { position: relative; width: fit-content; margin-inline: auto; }
.name .t-close { display: inline-flex; justify-content: flex-start; width: 0; padding-left: 8px; margin-right: -8px; white-space: nowrap; }
.name .caret { position: absolute; left: 100%; }
.lines > span { align-self: start; text-wrap: balance; }
#lines { pointer-events: auto; }
.vb-tv2, .fx-side > .vb-tv2 { background: #0b1b6e !important; aspect-ratio: 16 / 9 !important; }
.vb-tv2 video, .fx-side .vb-tv2 video { object-fit: cover !important; object-position: 50% 50%; }