/* referencer.css — the Referencer page (/referencer/): the five stands on the shared stage
   (stage.css), the hall row behind them, the customer cards with their screenshot carousel
   (referencer.js), the drawn fallback screens (partials/ref-ui.njk) and the closing CTA. */

/* ── Customer colours: --k main, --kq quiet, --ks strong (text), --kon text on --k ── */
.ref--copenhagen-comics { --k: var(--ug-accent-60); --kq: var(--ug-accent-95); --ks: var(--ug-accent-40); --kon: #fff; --kc: var(--ug-accent-60); }
.ref--digital-dogme { --k: var(--ug-slate-50); --kq: var(--ug-slate-95); --ks: var(--ug-slate-30); --kon: #fff; --kc: var(--ug-slate-60); }
.ref--bogforum { --k: var(--ug-brand); --kq: var(--ug-brand-95); --ks: var(--ug-brand); --kon: #fff; --kc: #fff; }
.ref--olfestival { --k: var(--ug-warning); --kq: #fffbd6; --ks: #6b5a00; --kon: var(--ug-brand-10); --kc: var(--ug-warning); }
.ref--health-rehab { --k: var(--ug-gron-40); --kq: var(--ug-gron-95); --ks: var(--ug-gron-30); --kon: #fff; --kc: var(--ug-gron-60); }

/* ── Stage: fascia lettering, the language switch, who's stand it is ──── */
.ill .ref-fascia { font-size: 19px; letter-spacing: .16em; font-weight: 700; }
.ill .tk--w { fill: #fff; }
.is-on .ill .ref-sprog { animation: ref-sprog 4.4s cubic-bezier(.65, 0, .35, 1) 3s infinite; }
@keyframes ref-sprog { 0%, 42% { transform: none; } 50%, 92% { transform: translateX(-44px); } 100% { transform: none; } }
.ref-who { color: var(--ug-on-brand-soft); text-transform: uppercase; letter-spacing: var(--ug-tracking-wide); font-size: var(--ug-text-xs); margin-left: .35rem; display: inline-flex; align-items: center; gap: .5rem; }
.ref-who::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--kc, #fff); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.ref-who.is-in { animation: fs-rise .7s var(--fs-out, ease) .2s both; }

/* the hall row: the other stands on the horizon glide past as the camera moves on */
.fs__world .ref-hall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ref-hall__row { transform: translateX(calc((var(--cam, 0) - 1) * -440px)); transition: transform 2s cubic-bezier(.65, 0, .35, 1), opacity 1.2s ease; }
.fs[data-phase="intro"] .ref-hall__row { transform: translateX(440px); opacity: 0; }
.fs[data-phase="sum"] .ref-hall__row { transform: translateX(-1900px); opacity: 0; }
.ref-hall__wall { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.ref-hall__stand { transition: opacity 1.1s ease; }
.ref-hall__stand.is-on, .ref-hall__stand.is-past { opacity: 0; } /* the big stand stands in front; passed stands leave */
.ref-hall__fascia { fill: var(--kc); opacity: .7; }
.ref-hall__line { stroke: rgba(255,255,255,.3); stroke-width: 2; fill: none; }

/* ── Jump links ─────────────────────────────────────────────────────── */
.ref-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 2rem; }
.ref-jump__a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: 0 1.05rem 0 .7rem; border-radius: var(--ug-radius-pill); border: 1px solid var(--ug-border); background: var(--ug-surface); color: var(--ug-text); text-decoration: none; font-weight: var(--ug-weight-semibold); font-size: var(--ug-text-m); transition: transform .15s var(--ug-ease), border-color .15s, box-shadow .15s; }
.ref-jump__a i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ref-jump__a:hover { transform: translateY(-1px); border-color: var(--k); box-shadow: var(--ug-shadow); color: var(--ug-text); }

/* ── Customer cards ─────────────────────────────────────────────────── */
.ref-list { display: grid; gap: 2rem; }
.ref-card { border-radius: calc(var(--ug-radius-l) + 4px); background: var(--ug-surface); border: 1px solid var(--ug-border-quiet); box-shadow: var(--ug-shadow); overflow: hidden; scroll-margin-top: calc(var(--ug-topbar-h) + 1rem); transition: box-shadow .35s var(--ug-ease), transform .35s var(--ug-ease); }
.ref-card:hover { box-shadow: var(--ug-shadow-pop); }
.ref-card__kop { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem; padding: 1.6rem 2rem 1.45rem; background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.5px) 0 0 / 18px 18px,
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 55%),
    var(--k); color: var(--kon); overflow: hidden; }
.ref--olfestival .ref-card__kop, .ref--bogforum .ref-card__kop { background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--kon) 14%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22), transparent 55%), var(--k); }
.ref-card__nr { position: absolute; right: 1.6rem; bottom: -.16em; font-size: clamp(3.5rem, 7vw, 6rem); font-weight: var(--ug-weight-light); letter-spacing: -.05em; line-height: 1; color: currentColor; opacity: .16; font-variant-numeric: tabular-nums; pointer-events: none; }
.ref-card__navn { margin: 0; color: inherit; font-size: inherit; line-height: 1; }
.ref-card__logo { height: clamp(2.2rem, 4vw, 3rem); width: auto; }
.ref-card__type { margin: 0; font-family: var(--ug-mono); font-size: var(--ug-text-s); letter-spacing: var(--ug-tracking-label); text-transform: uppercase; opacity: .82; }

/* wordmarks: the customer's name set in a typographic voice of its own (swap for `logo`) */
.ref-wm { display: inline-block; font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -.03em; line-height: 1; }
.ref--copenhagen-comics .ref-wm { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; transform: rotate(-2deg) skewX(-6deg); text-shadow: 3px 3px 0 rgba(5,34,29,.25); }
.ref--digital-dogme .ref-wm { font-weight: 300; text-transform: lowercase; letter-spacing: .01em; }
.ref--bogforum .ref-wm { font-weight: 700; letter-spacing: -.045em; }
.ref--olfestival .ref-wm { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
.ref--health-rehab .ref-wm { font-weight: 600; }
.ref-wm__amp { color: var(--ug-gron-80); font-weight: 300; }

.ref-card__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem 2.5rem; padding: 2rem; align-items: start; }
.ref-card--flip .ref-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.ref-card--flip .ref-car { order: 2; }
.ref-card__txt { display: grid; align-content: start; }
.ref-card__kort { font-size: var(--ug-text-xl); line-height: 1.45; color: var(--ug-text); margin-bottom: 1.25rem; text-wrap: pretty; }
.ref-card__txt h4 { font-family: var(--ug-mono); font-size: var(--ug-text-xs); font-weight: var(--ug-weight-semibold); letter-spacing: var(--ug-tracking-wide); text-transform: uppercase; color: var(--ks); margin: 0 0 .35rem; display: flex; align-items: center; gap: .5rem; }
html[data-theme="dark"] .ref-card__txt h4 { color: color-mix(in srgb, var(--k) 70%, #fff); }
.ref-card__txt h4::before { content: ""; width: 1.1rem; height: 2px; border-radius: 2px; background: var(--k); }
.ref-card__txt p { color: var(--ug-text-quiet); font-size: var(--ug-text-m); margin-bottom: 1.05rem; }
.ref-card__tags { list-style: none; margin: .25rem 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ref-card__tags .chip { border-color: color-mix(in srgb, var(--k) 45%, var(--ug-border)); background: color-mix(in srgb, var(--kq) 60%, var(--ug-surface)); color: var(--ug-text-quiet); }
html[data-theme="dark"] .ref-card__tags .chip { background: color-mix(in srgb, var(--k) 12%, var(--ug-surface)); color: var(--ug-text); }
.ref-card__site { justify-self: start; font-weight: var(--ug-weight-semibold); font-size: var(--ug-text-m); color: var(--ug-brand-strong); }

/* ── Carousel ───────────────────────────────────────────────────────── */
.ref-car { position: relative; min-width: 0; }
.ref-car__viewport { overflow: hidden; border-radius: var(--ug-radius-l); touch-action: pan-y; cursor: grab; outline: none; }
.ref-car.is-drag .ref-car__viewport { cursor: grabbing; }
.ref-car__track { display: flex; margin: 0; padding: 0; list-style: none; transform: translate3d(0, 0, 0); transition: transform .85s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.ref-car.is-drag .ref-car__track { transition: none; }
.ref-car__slide { flex: 0 0 100%; min-width: 0; }
.ref-slide { margin: 0; }
.ref-slide__stage { --ar: 10.4; --ph: .13; --pv: .12; position: relative; container-type: inline-size; aspect-ratio: 16 / var(--ar); display: grid; place-items: center; padding: 5.5% 6.5% 6.5%; border-radius: var(--ug-radius-l); overflow: hidden; isolation: isolate; background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--k) 30%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(90% 90% at 50% 115%, color-mix(in srgb, var(--k) 34%, transparent), transparent 70%),
    var(--kq); }
html[data-theme="dark"] .ref-slide__stage { background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--k) 30%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(90% 90% at 50% 115%, color-mix(in srgb, var(--k) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--k) 10%, var(--ug-surface-2)); }
.ref-slide__tegnet { position: absolute; right: .7rem; top: .6rem; z-index: 3; font-family: var(--ug-mono); font-size: .625rem; letter-spacing: var(--ug-tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--ks) 80%, transparent); opacity: .7; }
html[data-theme="dark"] .ref-slide__tegnet { color: var(--ug-text-faint); }

/* the frames: browser, wall screen (skærm), phones — they tilt in as the slide arrives */
.ref-browser, .ref-tv, .ref-phones { transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease; }
.ref-car__slide:not(.is-active) :is(.ref-browser, .ref-tv, .ref-phones) { transform: translate3d(0, 4%, 0) scale(.95); opacity: .55; }
/* frame sizes follow the stage's inner height (cqw = 1 % of the stage width) so nothing is cropped */
/* 100cqw is the stage's content width; its full width is 100cqw / (1 - horizontal padding) */
.ref-slide__stage > * { --ih: calc(100cqw / (1 - var(--ph)) * (var(--ar) / 16 - var(--pv))); }
.ref-browser { width: min(100cqw, calc((var(--ih) - 1.85rem) * 1.6)); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 50px -22px rgba(5,34,29,.45), 0 4px 12px -4px rgba(5,34,29,.18); border: 1px solid rgba(5,34,29,.1); }
.ref-browser__bar { display: flex; align-items: center; gap: .35rem; height: 1.85rem; padding: 0 .7rem; background: #f1eeeb; border-bottom: 1px solid #e3dfdb; }
.ref-browser__bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #d6d1cc; flex: none; }
.ref-browser__bar i:first-child { background: #ec6a5e; } .ref-browser__bar i:nth-child(2) { background: #f4bf4f; } .ref-browser__bar i:nth-child(3) { background: #61c554; }
.ref-browser__url { margin: 0 auto; min-width: 0; max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; color: #6b6765; background: #fff; border-radius: 6px; padding: .12rem .8rem; border: 1px solid #e3dfdb; }
.ref-browser__screen { aspect-ratio: 16 / 10; overflow: hidden; background: #f5f3f1; }
.ref-browser__screen img, .ref-tv__screen img, .ref-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; user-select: none; -webkit-user-drag: none; }
.ref-browser__screen .u, .ref-tv__screen .u, .ref-phone__screen .u { width: 100%; height: 100%; }
html[data-theme="dark"] .ref-browser { border-color: rgba(255,255,255,.08); box-shadow: 0 24px 50px -22px rgba(0,0,0,.8), 0 4px 12px -4px rgba(0,0,0,.5); }

.ref-tv { position: relative; width: min(100cqw, calc((var(--ih) - 18px) / .6325)); padding-bottom: 7%; }
.ref-tv__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0d1715; border: 9px solid #1d2422; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 28px 50px -24px rgba(5,34,29,.6); }
.ref-tv__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, transparent 32%); pointer-events: none; }
.ref-tv__stand { position: absolute; left: 50%; bottom: 0; width: 22%; height: 9%; transform: translateX(-50%); background: linear-gradient(#2a3230, #1d2422); clip-path: polygon(38% 0, 62% 0, 66% 70%, 100% 72%, 100% 100%, 0 100%, 0 72%, 34% 70%); }

.ref-phones { position: relative; height: var(--ih); display: flex; justify-content: center; align-items: center; gap: 0; }
.ref-phone { position: relative; z-index: 2; height: 100%; aspect-ratio: 300 / 600; border-radius: 26px; padding: 9px; background: #1d2422; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 26px 46px -22px rgba(5,34,29,.6); }
.ref-phone__screen { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #f5f3f1; }
.ref-phone--back { z-index: 1; transform: rotate(-7deg) translate(18%, 4%) scale(.9); margin-right: -10%; opacity: .92; filter: saturate(.85); }
.ref-car__slide.is-active .ref-phone--back { animation: ref-phone-in 1s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes ref-phone-in { from { transform: rotate(0) translate(48%, 0) scale(.9); opacity: 0; } }

.ref-slide__cap { display: flex; gap: .85rem; align-items: baseline; padding: 1rem .25rem 0; min-height: 4.6rem; }
.ref-slide__nr { font-family: var(--ug-mono); font-size: var(--ug-text-s); color: var(--ks); font-weight: 600; letter-spacing: var(--ug-tracking-label); }
html[data-theme="dark"] .ref-slide__nr { color: color-mix(in srgb, var(--k) 70%, #fff); }
.ref-slide__cap b { display: block; font-size: var(--ug-text-l); color: var(--ug-text); margin-bottom: .15rem; letter-spacing: -.005em; }
.ref-slide__cap span span, .ref-slide__cap > span:last-child { color: var(--ug-text-quiet); font-size: var(--ug-text-m); line-height: 1.45; }
.ref-car__slide.is-active .ref-slide__cap > span:last-child { animation: fs-rise .7s cubic-bezier(.16, 1, .3, 1) .25s both; }

/* controls: arrows, dots that fill while the carousel advances on its own, a counter */
.ref-car__ctrl { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; padding: 0 .1rem; }
.ref-car__btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--ug-border); background: var(--ug-surface); color: var(--ug-text); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, border-color .2s, transform .2s var(--ug-ease), color .2s; }
.ref-car__btn svg { width: 1.05rem; height: 1.05rem; }
.ref-car__btn--prev svg { transform: scaleX(-1); }
.ref-car__btn:hover { background: var(--k); border-color: var(--k); color: var(--kon); transform: translateY(-1px); }
.ref-car__dots { display: flex; gap: .3rem; margin: 0 .35rem; }
.ref-car__dot { width: 2.25rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.ref-car__dot i { position: relative; display: block; height: 4px; border-radius: 4px; background: var(--ug-border); overflow: hidden; }
.ref-car__dot i::after { content: ""; position: absolute; inset: 0; background: var(--k); transform: scaleX(0); transform-origin: left; border-radius: inherit; }
.ref--olfestival .ref-car__dot i::after { background: #d9c400; }
.ref-car__dot.is-on i::after { transform: scaleX(1); }
.ref-car.is-running .ref-car__dot.is-on i::after { animation: ref-fill var(--auto, 6.5s) linear both; }
.ref-car__dot:hover i { background: var(--ug-text-faint); }
@keyframes ref-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ref-car__count { margin-left: auto; white-space: nowrap; font-family: var(--ug-mono); font-size: var(--ug-text-s); color: var(--ug-text-faint); letter-spacing: var(--ug-tracking-label); font-variant-numeric: tabular-nums; }
.ref-car__count b { color: var(--ug-text); font-weight: 600; }
.ref-card:hover .ref-car__btn { border-color: color-mix(in srgb, var(--k) 55%, var(--ug-border)); }

/* ── Drawn screens (partials/ref-ui.njk): light UI, like a real screenshot ── */
.u { display: block; font-family: var(--ug-font); }
.u-bg { fill: #f6f4f2; } .u-surf { fill: #fff; } .u-bd { stroke: #e6e2de; stroke-width: 1; }
.u-ln { stroke: #e6e2de; stroke-width: 1; fill: none; } .u-ln--b { stroke: #cfcac6; stroke-width: 2; }
.u-q { fill: #e2ddd8; } .u-q2 { fill: #eeeae6; } .u-qd { fill: #bdb6b0; }
.u-k { fill: var(--k); } .u-kq { fill: var(--kq); } .u-ks { fill: var(--ks); }
.ref--bogforum .u-kq { fill: var(--ug-brand-90); } .ref--olfestival .u-k { fill: #f5dd2a; }
.u-g { fill: var(--ug-gron-60); } .u-gq { fill: var(--ug-gron-95); } .u-y { fill: var(--ug-warning); } .u-yq { fill: #fffad0; }
.u-s { fill: var(--ug-slate-60); } .u-sq { fill: var(--ug-slate-95); }
.u-w { fill: #fff; } .u-wq { fill: rgba(255,255,255,.4); } .u-wq2 { fill: rgba(255,255,255,.22); } .u-wo { fill: transparent; stroke: rgba(255,255,255,.7); stroke-width: 1.5; }
.u-wl { stroke: rgba(255,255,255,.85); }
.u-ink { fill: rgba(5,34,29,.55); } .u-ink2 { fill: rgba(5,34,29,.3); }
.u-pill { fill: #fff; stroke: #dcd7d2; stroke-width: 1; }
.u-embed { fill: color-mix(in srgb, var(--kq) 55%, #fff); stroke: var(--k); stroke-width: 1.6; stroke-dasharray: 6 5; }
.u-dk { fill: #0b1513; } .u-dk2 { fill: #0f1d1a; } .u-dk3 { fill: rgba(255,255,255,.07); }
.u text { font-family: var(--ug-font); }
.u-h { fill: #1f1e1d; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.u-h2 { fill: #2b2928; font-size: 12.5px; font-weight: 700; } .u-h2--s { font-size: 11px; }
.u-hw { fill: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.015em; } .u-hw--s { font-size: 17px; font-weight: 400; }
.u-hb { fill: var(--ug-brand-10); font-size: 40px; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.u-s1 { fill: #8a8581; font-size: 11.5px; }
.u-m { fill: #8a8581; font-family: var(--ug-mono); font-size: 9px; letter-spacing: .12em; } .u-m--w { fill: rgba(255,255,255,.85); }
.u-wm { fill: var(--ks); font-size: 14px; font-weight: 800; letter-spacing: -.01em; } .u-wm--w { fill: #fff; }
.ref--olfestival .u-wm:not(.u-wm--w) { fill: var(--ug-brand-10); }
.u-nav { fill: #5b5957; font-size: 10.5px; font-weight: 600; } .u-nav--w { fill: rgba(255,255,255,.85); }
.u-pt { fill: #484544; font-size: 10px; font-weight: 600; } .u-pt--on { fill: var(--kon); } .u-pt--on2 { fill: #fff; }
.u-time { fill: var(--ks); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .u-time--s { font-size: 10.5px; }
.ref--olfestival .u-time { fill: #6b5a00; }
.u-tvl { fill: var(--kon); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.ref--olfestival .u-y + .u-tvl, .u--signage-ol .u-tvl { fill: var(--ug-brand-10); }
.u-tvm { fill: rgba(255,255,255,.55); font-family: var(--ug-mono); font-size: 11px; letter-spacing: .16em; }
.u-tvt { fill: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-ic { color: #5b5957; } .u-ic--k { color: var(--ks); } .u-ic--q { color: #d2ccc6; } .u-ic--w { color: #fff; } .u-ic--g { color: var(--ug-gron-40); } .u-ic--dk { color: var(--ug-brand-10); }
.ref--olfestival .u-ic--k { color: #8a7400; }
.u-ic svg { overflow: visible; }

/* build-up when a slide arrives */
.u-in, .u-grow { transform-box: fill-box; transform-origin: 0 50%; }
.ref-car__slide.is-active .u-in { animation: u-in .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) both; }
.ref-car__slide.is-active .u-grow { animation: u-grow 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) both; }
.ref-car__slide.is-active .u-pop { transform-origin: center; animation: u-pop .7s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.ref-car__slide.is-active .u-blink { animation: u-blink 1.1s steps(1) infinite; }
.ref-car__slide.is-active .u-tick { animation: u-blink 2.4s ease-in-out infinite; }
@keyframes u-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes u-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes u-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes u-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

/* ── Closing CTA ────────────────────────────────────────────────────── */
.ref-cta { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem 3rem; padding: 2.5rem 2.75rem; border-radius: calc(var(--ug-radius-l) + 4px); color: var(--ug-on-brand); overflow: hidden; background:
    radial-gradient(120% 120% at 100% 120%, var(--ug-brand-40), transparent 60%),
    linear-gradient(160deg, var(--ug-brand-20), var(--ug-brand) 60%); box-shadow: var(--ug-shadow-pop); }
.ref-cta h2 { color: #fff; max-width: 16ch; }
.ref-cta .em { color: var(--ug-accent-70); }
.ref-cta .eyebrow { color: var(--ug-on-brand-soft); }
.ref-cta .lede { color: var(--ug-on-brand-quiet); margin-top: .75rem; }
.ref-cta__btns { display: grid; gap: .6rem; justify-items: stretch; }
.ref-cta .btn--outline { color: #fff; border-color: rgba(255,255,255,.55); }
.ref-cta .btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; }
/* six little stands: five taken, the sixth waiting for you */
.ref-cta__stande { display: grid; grid-template-columns: repeat(3, 2.6rem); gap: .55rem; }
.ref-cta__stande span { position: relative; height: 2.6rem; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.35); border-top: .55rem solid var(--kc); animation: fs-rise .7s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .12s) both; }
.ref-cta__stande .ref-cta__ny { border: 1.5px dashed var(--ug-accent-70); border-top-width: 1.5px; display: grid; place-items: center; color: var(--ug-accent-70); font-weight: 700; font-size: 1.1rem; animation: fs-rise .7s cubic-bezier(.16, 1, .3, 1) .7s both, ref-glow 2.6s ease-in-out 1.6s infinite; }
@keyframes ref-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,145,106,0); } 50% { box-shadow: 0 0 0 6px rgba(255,145,106,.18); } }

/* ── Narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ref-card__body { grid-template-columns: 1fr; }
  .ref-card--flip .ref-card__body { grid-template-columns: 1fr; }
  .ref-card--flip .ref-car { order: 0; }
  .ref-cta { grid-template-columns: 1fr; }
  .ref-cta__btns { justify-items: start; grid-auto-flow: column; grid-auto-columns: max-content; }
}
@media (max-width: 640px) {
  .ref-card__kop { padding: 1.25rem 1.25rem 1.1rem; }
  .ref-card__body { padding: 1.1rem 1rem 1.4rem; gap: 1.25rem; }
  .ref-slide__stage { padding: 6% 5% 7%; --ar: 11.5; --ph: .10; --pv: .13; }
  .ref-car__dot { width: 1.6rem; }
  .ref-car__btn { width: 2.25rem; height: 2.25rem; }
  .ref-slide__cap { min-height: 6rem; }
  .ref-cta { padding: 1.75rem 1.4rem; }
  .ref-cta__btns { grid-auto-flow: row; justify-items: stretch; }
  .ref-jump { gap: .35rem; }
  .ref-jump__a { min-height: 2.2rem; font-size: var(--ug-text-ms); }
}
/* five stands + summary = six dots: keep the stacked stage inside a phone's width */
@media (max-width: 860px) { .fs__world .ref-hall { display: none; } }

/* ── Reduced motion: no auto-advance (referencer.js), instant slides, final states ── */
@media (prefers-reduced-motion: reduce) {
  .ref-car__track, .ref-browser, .ref-tv, .ref-phones, .ref-hall__row { transition: none !important; }
  .ref-car__slide:not(.is-active) :is(.ref-browser, .ref-tv, .ref-phones) { transform: none; opacity: 1; }
  .ref-car__slide.is-active :is(.u-in, .u-grow, .u-pop, .u-blink, .u-tick, .ref-phone--back), .ref-car__slide.is-active .ref-slide__cap > span:last-child, .ref-cta__stande span, .is-on .ill .ref-sprog { animation: none !important; }
}