/* =====================================================================
 * Welkem — À Propos V2 (éditorial / cartographique)
 * ===================================================================== */
.av2 { --av2-bg: #020617; --av2-bg2: #030b1f; --av2-paper: #f4f7fb; --av2-ink: #0b1324; --av2-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--av2-bg); overflow-x: clip; }
.av2-mono { font-family: var(--av2-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.av2 svg .wk-l-spin { transform-box: view-box; transform-origin: 200px 200px; animation: wk-pspin var(--dur, 40s) linear infinite; }
.av2 svg .wk-l-rev { animation-direction: reverse; }

/* labels & headings */
.av2-label { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--av2-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #475569; }
.av2-label b { font-weight: 700; color: var(--wk-primary); }
.av2-label::after { content: ""; width: 3.5rem; height: 1px; background: currentColor; opacity: 0.35; }
.av2-label--dark { color: #94a3b8; }
.av2-h2 { margin-top: 1.1rem; font-size: clamp(2rem, 4.4vw, 3.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--av2-ink); text-wrap: balance; }
.av2-h2--light { color: #fff; }
.av2-lead { max-width: 34rem; margin-top: 1.25rem; font-size: 1.08rem; line-height: 1.75; color: #5b6b82; }
.av2-lead--light { color: #94a3b8; }
.av2-head { max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.av2-head--row { display: grid; gap: 1.5rem 4rem; max-width: none; align-items: end; }
@media (min-width: 1024px) { .av2-head--row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .av2-head--row .av2-lead { margin-top: 0; } }
.av2-paper { background: var(--av2-paper); }

/* ---------- HERO ---------- */
.av2-hero { position: relative; min-height: 100svh; padding: clamp(9.5rem, 17vh, 12rem) 0 6rem; color: #fff; isolation: isolate; overflow: clip; }
.av2-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.av2-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); }
.av2-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.av2-hero__glow--a { width: 46rem; height: 46rem; right: -10rem; top: -14rem; background: radial-gradient(circle, rgba(14, 165, 233, 0.32), transparent 65%); }
.av2-hero__glow--b { width: 34rem; height: 34rem; left: -12rem; bottom: -12rem; background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 65%); }
.av2-hero__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .av2-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; min-height: calc(100svh - 16rem); } }
.av2-hero__content { position: relative; z-index: 2; max-width: 44rem; }
.av2-crumbs { display: flex; gap: 0.6rem; font-family: var(--av2-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; }
.av2-crumbs a { color: #94a3b8; transition: color 0.3s; }
.av2-crumbs a:hover { color: #fff; }
.av2-crumbs [aria-current] { color: var(--wk-accent, #22d3ee); }
.av2-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.6rem; padding: 0.55rem 1rem 0.55rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #cbd5e1; backdrop-filter: blur(8px); }
.av2-eyebrow__dot { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }
.av2-eyebrow__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: wk-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.av2-hero__title { margin-top: 1.5rem; font-size: clamp(2.6rem, 5.3vw, 5.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.av2-accent { display: block; padding-bottom: 0.08em; background: linear-gradient(100deg, #38bdf8 0%, #22d3ee 35%, #a5f3fc 55%, #0ea5e9 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: av2-sheen 9s ease-in-out infinite; }
@keyframes av2-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.av2-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.av2-w > span { display: inline-block; will-change: transform; }
.av2-w--block { display: block; }
.av2-w--block > .av2-accent { display: block; will-change: transform; }
.av2-hero__desc { max-width: 36rem; margin-top: 1.6rem; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.75; color: #94a3b8; }
.av2-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.2rem; }
.av2-hero__stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.av2-hstat { flex: 1 1 8rem; padding: 1.2rem 1.4rem 0 0; }
.av2-hstat + .av2-hstat { padding-left: 1.4rem; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.av2-hstat dt { font-family: var(--av2-mono); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.av2-hstat dd { margin-top: 0.25rem; font-size: 0.8rem; color: #64748b; }
.av2-hero__map { position: relative; z-index: 1; perspective: 1400px; }
.av2-hero__map-in { position: relative; width: min(100%, 36rem, calc((100svh - 8.5rem) * 0.7)); margin-inline: auto; transform-style: preserve-3d; will-change: transform; }
@media (max-width: 1023px) { .av2-hero__map-in { width: min(100%, 26rem); } }
.av2-hero__foot { position: absolute; left: 0; right: 0; bottom: 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #475569; }
.av2-hero__foot .av2-mono { font-size: 0.66rem; }
.av2-scrollcue { position: relative; width: 1.5rem; height: 2.4rem; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 999px; }
.av2-scrollcue span { position: absolute; left: 50%; top: 0.45rem; width: 3px; height: 0.5rem; margin-left: -1.5px; border-radius: 3px; background: #fff; animation: av2-cue 1.8s var(--wk-ease-out) infinite; }
@keyframes av2-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(0.9rem); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 640px) { .av2-hero__foot .av2-mono:last-child { display: none; } .av2-hstat { flex-basis: 33%; padding-right: 0.8rem; } .av2-hstat + .av2-hstat { padding-left: 0.8rem; } }

/* ---------- MAP ---------- */
.wk-tn { position: relative; width: 100%; aspect-ratio: 7 / 10; color: #38bdf8; }
.wk-tn__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wk-tn__grat path { fill: none; stroke: rgba(148, 163, 184, 0.1); stroke-width: 1; stroke-dasharray: 2 7; }
.wk-tn__grat text, .wk-tn__geo text, .wk-tn__scale text, .wk-tn__compass text { font-family: var(--av2-mono, monospace); font-size: 10px; letter-spacing: 0.16em; fill: #475569; }
.wk-tn__geo text { font-size: 11px; letter-spacing: 0.5em; fill: #334155; }
.wk-tn__geo .wk-tn__sea { fill: #1e3a5f; font-size: 12px; letter-spacing: 0.7em; }
.wk-tn__land { stroke: none; }
.wk-tn__halo { animation: av2-halo 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes av2-halo { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.wk-tn__dots path { fill: none; stroke: #38bdf8; stroke-width: 3.6; stroke-linecap: round; opacity: 0.22; animation: av2-wave 6.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.17s + 3s); }
@keyframes av2-wave { 0%, 100% { opacity: 0.2; } 9% { opacity: 0.95; stroke: #a5f3fc; } 26% { opacity: 0.2; stroke: #38bdf8; } }
.wk-tn__sweep { transform-box: view-box; animation: wk-pspin 10s linear infinite; mix-blend-mode: screen; opacity: 0.4; }
.wk-tn__gov { fill: none; stroke: rgba(148, 197, 255, 0.16); stroke-width: 0.8; stroke-linejoin: round; }
.wk-tn__edge { fill: none; stroke-linejoin: round; }
.wk-tn__edge--line { stroke: #7dd3fc; stroke-width: 1.6; stroke-opacity: 0.85; }
.wk-tn__edge--glow { stroke: #38bdf8; stroke-width: 7; stroke-opacity: 0.12; }
.wk-tn__route { fill: none; stroke: rgba(56, 189, 248, 0.32); stroke-width: 1.2; stroke-dasharray: 0.006 0.012; }
.wk-tn__comet { fill: none; stroke: #67e8f9; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.07 1.2; stroke-dashoffset: 0.07; animation: av2-comet 4.2s cubic-bezier(0.55, 0.1, 0.35, 1) infinite; animation-delay: calc(var(--r) * 0.55s + 3.4s); filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.9)); }
@keyframes av2-comet { 0% { stroke-dashoffset: 0.07; opacity: 0; } 8% { opacity: 1; } 78% { stroke-dashoffset: -1; opacity: 1; } 80%, 100% { stroke-dashoffset: -1; opacity: 0; } }
.wk-tn__pin { transform-box: fill-box; transform-origin: center; }
.wk-tn__core { fill: #e0f2fe; }
.wk-tn__ring { fill: rgba(2, 6, 23, 0.85); stroke: #38bdf8; stroke-width: 1.3; }
.wk-tn__ping { fill: none; stroke: #67e8f9; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.wk-tn__city.is-target .wk-tn__ping { animation: av2-arrive 4.2s ease-out infinite; animation-delay: calc(var(--r) * 0.55s + 3.4s); }
@keyframes av2-arrive { 0%, 70% { opacity: 0; transform: scale(0.6); } 76% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(2.6); } }
.wk-tn__lbl { font-family: var(--av2-mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; fill: #7c8ba3; paint-order: stroke; stroke: #020617; stroke-width: 3px; }
.wk-tn__hqp { fill: rgba(34, 211, 238, 0.28); transform-box: fill-box; transform-origin: center; animation: av2-hq 3s cubic-bezier(0, 0, 0.2, 1) infinite; }
.wk-tn__hqp--2 { animation-delay: 1.5s; }
@keyframes av2-hq { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }
.wk-tn__hqr { fill: none; stroke: #22d3ee; stroke-width: 1.2; stroke-dasharray: 3 5; transform-box: fill-box; transform-origin: center; animation: wk-pspin 14s linear infinite; }
.wk-tn__hqx { stroke: rgba(165, 243, 252, 0.6); stroke-width: 1.2; }
.wk-tn__hqc { fill: #22d3ee; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9)); }
.wk-tn__scale path { fill: none; stroke: #475569; stroke-width: 1.2; }
.wk-tn__compass circle { fill: none; stroke: rgba(148, 163, 184, 0.22); }
.wk-tn__compass .wk-tn__compass-in { stroke-dasharray: 1 4; }
.wk-tn__needle { transform-box: view-box; transform-origin: 0 0; animation: av2-needle 7s ease-in-out infinite; }
.wk-tn__needle-s { fill: #334155; }
.wk-tn__needle-n { fill: #22d3ee; }
@keyframes av2-needle { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } }
.wk-tn__card { position: absolute; left: calc(var(--hqx) + 2.4rem); top: var(--hqy); transform: translateY(-50%); display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem 0.7rem 0.75rem; border: 1px solid rgba(125, 211, 252, 0.22); border-radius: 1rem; background: rgba(2, 6, 23, 0.72); box-shadow: 0 20px 50px -20px rgba(14, 165, 233, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.wk-tn__card::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.9rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.7)); }
.wk-tn__card-dot { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 0.7rem; background: radial-gradient(circle at 50% 50%, #22d3ee 0 22%, rgba(34, 211, 238, 0.18) 24% 100%); }
.wk-tn__card-tx { display: flex; flex-direction: column; line-height: 1.25; }
.wk-tn__card strong { font-size: 0.85rem; font-weight: 800; color: #fff; }
.wk-tn__card em { font-style: normal; font-size: 0.75rem; color: #94a3b8; }
.wk-tn__card small { margin-top: 0.15rem; font-family: var(--av2-mono, monospace); font-size: 0.6rem; letter-spacing: 0.14em; color: #22d3ee; }
.wk-tn__legend { position: absolute; left: 4%; bottom: 3%; display: flex; gap: 1rem; padding: 0.5rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: rgba(2, 6, 23, 0.6); font-family: var(--av2-mono, monospace); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; backdrop-filter: blur(6px); }
.wk-tn__legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.wk-tn__lg { width: 1.4rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #67e8f9); box-shadow: 0 0 6px #67e8f9; }
@media (max-width: 640px) { .wk-tn__card { left: auto; right: 0; top: calc(var(--hqy) + 2.6rem); transform: none; } .wk-tn__card::before { display: none; } .wk-tn__lbl { font-size: 13px; } }

/* ---------- MANIFESTO ---------- */
.av2-manifesto { padding: clamp(5rem, 11vw, 10rem) 0; background: linear-gradient(var(--av2-bg), var(--av2-bg2)); color: #fff; }
.av2-split { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .av2-split { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; } .av2-split__aside { position: sticky; top: 8rem; align-self: start; } }
.av2-manifesto .av2-label { color: #94a3b8; }
.av2-manifesto__text { font-size: clamp(1.8rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.03em; color: #fff; text-wrap: pretty; }
.av2-js .av2-manifesto__text .av2-sw { color: #1e293b; transition: color 0.35s ease; }
.av2-js .av2-manifesto__text .av2-sw.is-on { color: #f8fafc; }
.av2-js .av2-manifesto__text .av2-sw.is-on.is-hl { color: #38bdf8; }
.av2-manifesto__sign { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; font-family: var(--av2-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; }
.av2-manifesto__line { width: 4rem; height: 1px; background: linear-gradient(90deg, #22d3ee, transparent); }

/* ---------- STATS ---------- */
.av2-stats { position: relative; padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); border-radius: 2.75rem 2.75rem 0 0; margin-top: -2.75rem; z-index: 2; }
.av2-stats__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0; }
@media (min-width: 640px) { .av2-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .av2-stats__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .av2-stats__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.av2-stat { position: relative; padding: 2rem 1.75rem 2.25rem 0; }
@media (min-width: 640px) { .av2-stat { padding-right: 2rem; } }
.av2-stat__rule { position: absolute; left: 0; right: 1.5rem; top: 0; height: 1px; background: #d8e0ea; overflow: hidden; }
.av2-stat__rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wk-primary), #22d3ee); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--wk-ease-out) calc(var(--i, 0) * 0.12s); }
.av2-stat.is-in .av2-stat__rule::after, html:not(.av2-js) .av2-stat__rule::after { transform: none; }
.av2-stat__idx { color: #94a3b8; font-size: 0.66rem; }
.av2-stat__num { display: flex; align-items: baseline; margin-top: 1.1rem; font-size: clamp(3.4rem, 6.4vw, 6rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; color: var(--av2-ink); font-variant-numeric: tabular-nums; }
.av2-stat__num em { font-style: normal; color: var(--wk-primary); margin-left: 0.04em; }
.av2-stat__label { margin-top: 1rem; font-size: 1rem; font-weight: 800; color: var(--av2-ink); }
.av2-stat__desc { margin-top: 0.35rem; font-size: 0.88rem; line-height: 1.6; color: #64748b; max-width: 17rem; }

/* ---------- VALUES (stacked cards) ---------- */
.av2-values { padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); }
.av2-values__wrap { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .av2-values__wrap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; } .av2-values__sticky { position: sticky; top: 8rem; } }
.av2-values__nav { display: none; margin-top: 2.5rem; border-top: 1px solid #dde4ee; }
@media (min-width: 1024px) { .av2-values__nav { display: block; } }
.av2-values__nav li { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid #dde4ee; font-weight: 700; color: #94a3b8; transition: color 0.4s, padding 0.5s var(--wk-ease-out); }
.av2-values__nav li span { font-family: var(--av2-mono); font-size: 0.7rem; }
.av2-values__nav li.is-on { color: var(--av2-ink); padding-left: 0.75rem; }
.av2-values__nav li.is-on span { color: var(--wk-primary); }
.av2-values__stack { display: grid; gap: 1.25rem; }
.av2-vcard { position: sticky; top: calc(7rem + var(--i) * 1.4rem); }
.av2-vcard__in { position: relative; overflow: hidden; min-height: 21rem; padding: clamp(1.75rem, 3.4vw, 2.75rem); border-radius: 2rem; background: #fff; border: 1px solid #e3e9f1; box-shadow: 0 30px 60px -45px rgba(15, 23, 42, 0.45); transform-origin: 50% 0; will-change: transform; }
.av2-vcard__art { position: absolute; right: -5rem; top: -5rem; width: 20rem; height: 20rem; color: var(--c); opacity: 0.55; pointer-events: none; }
.av2-vcard__num { position: absolute; right: 1.75rem; bottom: 0.25rem; font-size: clamp(5rem, 10vw, 8.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 35%, transparent); pointer-events: none; }
.av2-vcard__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; color: #fff; background: var(--c); box-shadow: 0 16px 30px -14px var(--c); }
.av2-vcard__icon svg { width: 1.6rem; height: 1.6rem; }
.av2-vcard__title { margin-top: 3.5rem; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; color: var(--av2-ink); }
.av2-vcard__desc { max-width: 26rem; margin-top: 0.85rem; font-size: 1.02rem; line-height: 1.7; color: #5b6b82; }
@media (max-width: 1023px) { .av2-vcard { top: calc(5.5rem + var(--i) * 1rem); } .av2-vcard__in { min-height: 17rem; } }

/* ---------- STORY (horizontal) ---------- */
.av2-story { position: relative; background: var(--av2-bg); color: #fff; overflow: hidden; }
.av2-story__pin { padding: clamp(5rem, 9vw, 7rem) 0 clamp(4rem, 7vw, 6rem); }
.av2-story__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 48rem; }
.av2-story__viewport { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(1rem, calc((100vw - 1280px) / 2 + 1rem)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.av2-story__viewport::-webkit-scrollbar { display: none; }
.av2-story__track { position: relative; display: flex; gap: 0; width: max-content; padding: 0 max(1rem, calc((100vw - 1280px) / 2 + 1rem)); }
.av2-story__track::before { content: ""; position: absolute; left: 0; right: 0; top: 7.6rem; height: 1px; background: rgba(148, 163, 184, 0.18); }
.av2-step { position: relative; width: min(78vw, 24rem); padding-right: 2.5rem; scroll-snap-align: start; }
.av2-step__year { display: block; height: 6.4rem; font-size: clamp(4rem, 7vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(148, 163, 184, 0.35); transition: color 0.6s, -webkit-text-stroke-color 0.6s; }
.av2-step.is-on .av2-step__year { color: #fff; -webkit-text-stroke-color: transparent; }
.av2-step__dot { position: relative; display: block; width: 0.85rem; height: 0.85rem; margin: 0.75rem 0 1.6rem; border-radius: 50%; background: #0b1324; border: 2px solid #334155; transition: background 0.5s, border-color 0.5s, box-shadow 0.5s; }
.av2-step.is-on .av2-step__dot { background: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.15), 0 0 18px rgba(34, 211, 238, 0.7); }
.av2-step__card { padding: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 1.5rem; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); transition: border-color 0.5s, transform 0.8s var(--wk-ease-out); }
.av2-step.is-on .av2-step__card { border-color: rgba(34, 211, 238, 0.25); }
.av2-step__tag { color: #22d3ee; font-size: 0.65rem; }
.av2-step__card h3 { margin-top: 0.6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.av2-step__card p { margin-top: 0.6rem; font-size: 0.93rem; line-height: 1.7; color: #94a3b8; }
.av2-story__rail { position: relative; height: 2px; margin: 2.5rem max(1rem, calc((100vw - 1280px) / 2 + 1rem)) 0; background: rgba(148, 163, 184, 0.14); border-radius: 2px; overflow: hidden; }
.av2-story__rail span { position: absolute; inset: 0; background: linear-gradient(90deg, #0ea5e9, #22d3ee); transform: scaleX(0); transform-origin: left; }
.av2-story.is-pinned .av2-story__viewport { overflow: visible; scroll-snap-type: none; }
.av2-story.is-pinned .av2-story__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 7rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .av2-step { width: 26rem; padding-right: 3.5rem; } }

/* ---------- ASSETS ---------- */
.av2-assets { padding: clamp(5rem, 9vw, 8rem) 0; }
.av2-assets__grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .av2-assets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .av2-assets__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .av2-asset--art { grid-column: span 2; grid-row: span 2; } }
.av2-asset { position: relative; overflow: hidden; padding: 1.75rem; border-radius: 1.6rem; background: #fff; border: 1px solid #e3e9f1; transition: transform 0.8s var(--wk-ease-out), box-shadow 0.8s var(--wk-ease-out), border-color 0.4s; }
.av2-asset:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--wk-primary) 30%, #e3e9f1); box-shadow: 0 30px 60px -40px rgba(14, 165, 233, 0.6); }
.av2-asset--art { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 18rem; background: linear-gradient(160deg, #eaf6fd, #f8fbff); }
.av2-asset--art:hover { transform: none; }
.av2-asset--art .wk-art { width: 100%; max-width: 34rem; }
.av2-asset__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.95rem; color: var(--wk-primary); background: color-mix(in srgb, var(--wk-primary) 10%, transparent); transition: background 0.5s, color 0.5s; }
.av2-asset:hover .av2-asset__icon { background: var(--wk-primary); color: #fff; }
.av2-asset__icon svg { width: 1.35rem; height: 1.35rem; }
.av2-asset__title { margin-top: 1.4rem; font-size: 1.06rem; font-weight: 800; line-height: 1.35; color: var(--av2-ink); }
.av2-asset__desc { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.65; color: #64748b; }
.av2-asset__n { position: absolute; right: 1.4rem; top: 1.5rem; color: #cbd5e1; font-size: 0.66rem; }

/* ---------- VISIT ---------- */
.av2-visit { padding: 0 0 clamp(2rem, 4vw, 3rem); }
.av2-visit__card { position: relative; display: grid; gap: 2rem; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border-radius: 2.5rem; background: radial-gradient(120% 120% at 100% 0%, #0b2545 0%, #020617 60%); color: #fff; }
@media (min-width: 1024px) { .av2-visit__card { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: 3rem; } }
.av2-visit__art { color: #38bdf8; max-width: 22rem; width: 100%; margin-inline: auto; }
.av2-visit__art svg { width: 100%; height: auto; overflow: visible; }
.av2-visit__wave { stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: av2-hq 3.6s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0; }
.av2-visit__wave--2 { animation-delay: 1.2s; }
.av2-visit__wave--3 { animation-delay: 2.4s; }
.av2-visit__pin { animation: av2-bob 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.av2-visit__shadow { animation: av2-shadow 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes av2-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes av2-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.25; } 50% { transform: scaleX(0.72); opacity: 0.12; } }
.av2-visit__grid { display: grid; gap: 1.75rem; margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (min-width: 768px) { .av2-visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.25fr); } }
.av2-visit__k { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; font-family: var(--av2-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #22d3ee; }
.av2-visit__k svg { width: 0.95rem; height: 0.95rem; }
.av2-visit__name { display: block; font-size: 0.95rem; font-weight: 800; color: #fff; }
.av2-visit__v { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; }
.av2-visit__hours { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; font-size: 0.82rem; color: #94a3b8; }
.av2-visit__hours svg { width: 0.9rem; height: 0.9rem; }
.av2-visit__link { display: block; margin-bottom: 0.7rem; font-size: 0.92rem; font-weight: 700; color: #fff; overflow-wrap: break-word; transition: color 0.3s; }
.av2-visit__link small { display: block; font-size: 0.72rem; font-weight: 600; color: #64748b; }
.av2-visit__link:hover { color: #38bdf8; }
.av2-visit__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.av2-paper--end { padding-bottom: 1rem; }

/* ---------- reveal (only when JS runs) ---------- */
.av2-js [data-av2-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--wk-ease-out), transform 1.2s var(--wk-ease-out); transition-delay: calc(var(--i, 0) * 0.08s); }
.av2-js [data-av2-reveal].is-in { opacity: 1; transform: none; }
.av2-js [data-av2-in] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .av2 *, .av2 *::before, .av2 *::after { animation: none !important; transition: none !important; }
    .av2-js [data-av2-reveal], .av2-js [data-av2-in] { opacity: 1; transform: none; }
    .av2-vcard { position: relative; top: auto; }
}

@media (min-width: 1024px) { .av2-asset--span-2 { grid-column: span 2; } .av2-asset--span-3 { grid-column: span 3; } .av2-asset--span-4 { grid-column: span 4; } }