/* OrbData 2026 experience layer. Loaded after orb.css on every page. */

/* ------------------------------------------------------------ base */
html {scroll-behavior: auto}
body {font-feature-settings: "ss01","cv11";letter-spacing: -.003em}
html.lenis,html.lenis body {height: auto}
.lenis.lenis-smooth {scroll-behavior: auto!important}
.lenis.lenis-stopped {overflow: hidden}
.mono,.kicker {font-family: var(--ff-mono)}
.kicker {font-size: .72rem;letter-spacing: .14em;text-transform: uppercase;color: var(--text-3);display: inline-flex;gap: .9rem;align-items: baseline}
.kicker b {color: var(--brand-2);font-weight: 500}
.ser {font-family: var(--ff-display);font-weight: 400}
.it {font-style: italic;color: var(--brand-2)}
.display {font-family: var(--ff-display);font-weight: 400;line-height: .95;letter-spacing: -.02em;font-size: clamp(3.1rem,9.4vw,9.4rem)}
.big {font-family: var(--ff-display);font-weight: 400;line-height: 1.04;font-size: clamp(2rem,4.6vw,4.3rem);letter-spacing: -.012em}
.rule {height: 1px;background: var(--line);border: 0;margin: 0}
.wrap {max-width: var(--maxw)}

/* ---------------------------------------------------- startup loader */
.boot {position: fixed;inset: 0;z-index: 1000;display: grid;place-items: center;pointer-events: all}
.boot-p {position: absolute;left: 0;right: 0;height: 50.5%;background: var(--bg);transition: transform 1s cubic-bezier(.76,0,.24,1)}
.boot-t {top: 0}
.boot-b {bottom: 0}
.boot.done {pointer-events: none}
.boot.done .boot-t {transform: translateY(-101%)}
.boot.done .boot-b {transform: translateY(101%)}
.boot-in {position: relative;z-index: 1;width: min(420px,80vw);display: grid;justify-items: center;gap: 16px;transition: opacity .45s,transform .7s cubic-bezier(.76,0,.24,1)}
.boot.done .boot-in {opacity: 0;transform: scale(1.08)}
.boot-orb {width: 132px;height: 132px;overflow: visible;animation: orbSpin 14s linear infinite}
.boot-orb .rim {fill: none;stroke: var(--brand-2);stroke-width: .8;stroke-dasharray: 1;stroke-dashoffset: 1;animation: draw 1s .05s cubic-bezier(.6,0,.2,1) forwards}
.boot-orb line {stroke: var(--brand-2);stroke-width: .55;stroke-dasharray: 1;stroke-dashoffset: 1;animation: draw .5s cubic-bezier(.6,0,.2,1) forwards;animation-delay: calc(.15s + var(--i) * 6ms)}
.boot-orb line.b {opacity: .28}
.boot-orb circle:not(.rim) {fill: var(--brand-2);transform-box: fill-box;transform-origin: center;transform: scale(0);animation: pop .45s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay: calc(.8s + var(--i) * 28ms)}
@keyframes draw {to {stroke-dashoffset: 0}}
@keyframes pop {to {transform: scale(1)}}
@keyframes orbSpin {to {transform: rotate(360deg)}}
.boot-word {font-family: var(--ff-display);font-size: clamp(2.6rem,7vw,3.6rem);line-height: 1;color: var(--text);display: flex;overflow: hidden;padding-bottom: .06em;margin-top: 10px}
.boot-word span {display: inline-block;transform: translateY(105%);animation: rise .8s cubic-bezier(.2,.7,.1,1) forwards;animation-delay: calc(.55s + var(--i) * 55ms)}
.boot-word span.i {font-style: italic;color: var(--brand-2)}
@keyframes rise {to {transform: none}}
.boot-sub {font-family: var(--ff-mono);font-size: .62rem;letter-spacing: .1em;color: var(--text-3);opacity: 0;animation: track 1.1s 1s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes track {to {letter-spacing: .42em;opacity: 1}}
.boot-bar {width: 100%;height: 1px;background: var(--line);position: relative;overflow: hidden;margin-top: 18px}
.boot-bar i {position: absolute;inset: 0;background: var(--brand-2);transform-origin: 0 50%;transform: scaleX(0)}
.boot-meta {width: 100%;display: flex;justify-content: space-between;font-family: var(--ff-mono);font-size: .68rem;letter-spacing: .12em;color: var(--text-3);text-transform: uppercase}
.boot-num {color: var(--text);font-variant-numeric: tabular-nums}
html.js:not(.fonts-ok) body > :not(.boot):not(.world):not(script) {visibility: hidden}
.boot.quick .boot-word,.boot.quick .boot-sub,.boot.quick .boot-meta,.boot.quick .boot-bar,.rv .boot-word,.rv .boot-sub,.rv .boot-meta,.rv .boot-bar {display: none}
.boot.quick .boot-orb,.rv .boot-orb {width: 56px;height: 56px;animation-duration: 3s}
.boot.quick .boot-orb line,.boot.quick .boot-orb .rim {animation-duration: .25s;animation-delay: 0s}
.boot.quick .boot-orb circle:not(.rim) {animation-delay: .1s}
.boot.quick .boot-p {transition-duration: .7s}
html:not(.js) .boot {display: none}
@media (prefers-reduced-motion:reduce) {.boot-orb,.boot-orb *,.boot-word span,.boot-sub {animation: none!important;stroke-dashoffset: 0!important;transform: none!important;opacity: 1!important;letter-spacing: .42em}
.boot-p {transition: none}}
.mk-l {display: none}
html[data-theme=light] .mk-l {display: block}
html[data-theme=light] .mk-d {display: none}

/* ---------------------------------------------------- page transition */
.wipe {position: fixed;inset: 0;z-index: 999;background: var(--bg);pointer-events: none;clip-path: inset(100% 0 0 0);transition: clip-path .55s cubic-bezier(.76,0,.24,1);display: grid;place-items: center}
.wipe.on {clip-path: inset(0 0 0 0);pointer-events: all}
.wipe-in {display: grid;justify-items: center;gap: 14px;opacity: 0;transform: translateY(18px);transition: opacity .3s .2s,transform .5s .15s var(--ease)}
.wipe.on .wipe-in {opacity: 1;transform: none}
.wipe .boot-orb {width: 64px;height: 64px;animation-duration: 2.6s}
.wipe .boot-orb line,.wipe .boot-orb .rim {animation-duration: .35s;animation-delay: calc(.15s + var(--i,0) * 2ms)}
.wipe .boot-orb circle:not(.rim) {animation-delay: calc(.35s + var(--i) * 12ms)}
.wipe-label {font-family: var(--ff-display);font-size: 1.9rem;color: var(--text)}
.wipe-bar {width: 140px;height: 1px;background: var(--line);position: relative;overflow: hidden}
.wipe-bar i {position: absolute;top: 0;bottom: 0;width: 40%;background: var(--brand-2);animation: indet 1s cubic-bezier(.6,0,.4,1) infinite}
@keyframes indet {from {transform: translateX(-100%)}to {transform: translateX(260%)}}

/* busy buttons + buffering media */
.btn.is-busy {opacity: 1!important;color: transparent!important;position: relative}
.btn.is-busy::after {content: "";position: absolute;left: 50%;top: 50%;width: 16px;height: 16px;margin: -8px 0 0 -8px;border: 2px solid var(--on-brand);border-right-color: transparent;border-radius: 50%;animation: spin .7s linear infinite}
.btn-ghost.is-busy::after {border-color: var(--text);border-right-color: transparent}
@keyframes spin {to {transform: rotate(360deg)}}
.film::after {content: "";position: absolute;left: 50%;top: 50%;width: 28px;height: 28px;margin: -14px 0 0 -14px;border: 2px solid var(--brand-2);border-right-color: transparent;border-radius: 50%;opacity: 0;transition: opacity .3s;animation: spin .8s linear infinite;pointer-events: none}
.film.buffering::after {opacity: 1}

/* ------------------------------------------------ progress + header */
.scroll-prog {position: fixed;left: 0;right: 0;top: 0;height: 2px;background: var(--brand-2);transform-origin: 0 50%;transform: scaleX(0);z-index: 120;pointer-events: none}
.hdr {transition: transform .45s var(--ease),background .3s,border-color .3s}
.hdr.tucked {transform: translateY(-100%)}
.hdr.scrolled {background: var(--bg)}
.brand .wm {font-family: var(--ff-display);font-weight: 400;font-size: 1.5rem;letter-spacing: 0}
.brand .wm small {font-family: var(--ff-mono);font-weight: 500;font-size: .5rem;letter-spacing: .32em}
.nav a {border-radius: 2px;font-size: .86rem;color: var(--text-2);background: transparent!important;position: relative}
.nav a.active {color: var(--text)}
.nav a.active::after {content: "";position: absolute;left: .8rem;right: .8rem;bottom: .2rem;height: 1px;background: var(--brand-2)}
.nav a:hover {color: var(--text)}
.icon-btn {border-radius: 2px}
@media (max-width:1080px) {
.nav {background: var(--bg)}
.nav a {font-family: var(--ff-display);font-size: 1.7rem;padding: .5rem 0;border-bottom: 1px solid var(--line)}
.nav a.active::after {display: none}}

/* ------------------------------------------------------------ reveal */
[data-reveal] {opacity: 0;transform: translateY(28px);transition: opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in {opacity: 1;transform: none}
.rise-ready .w {display: inline-block;overflow: hidden;vertical-align: top;padding-bottom: .08em;margin-bottom: -.08em}
.rise-ready .w > span {display: inline-block;transform: translateY(105%);transition: transform 1s cubic-bezier(.2,.7,.1,1)}
.rise-ready.risen .w > span {transform: none}
[data-fill] .w {color: var(--text-3);opacity: .38;transition: opacity .25s,color .25s}
[data-fill] .w.lit {opacity: 1;color: var(--text)}
[data-fill] .it .w.lit,[data-fill] .w .it {color: var(--brand-2)}
@media (prefers-reduced-motion:reduce) {
[data-reveal] {opacity: 1;transform: none}
.rise-ready .w > span {transform: none}}

/* ------------------------------------------------------------ cursor */
.has-cursor,.has-cursor a,.has-cursor button {cursor: none}
.has-cursor input,.has-cursor textarea,.has-cursor select {cursor: text}
.cur {position: fixed;inset: 0;pointer-events: none;z-index: 1001;opacity: 0;transition: opacity .3s}
.cur.on {opacity: 1}
.cur i {position: fixed;left: 0;top: 0;will-change: transform}
.cur-dot {width: 6px;height: 6px;margin: -3px 0 0 -3px;background: var(--brand-2);border-radius: 50%}
.cur-ring {width: 34px;height: 34px;margin: -17px 0 0 -17px;border: 1px solid color-mix(in srgb,var(--text) 45%,transparent);border-radius: 50%;display: grid;place-items: center;transition: width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.cur-ring span {font-family: var(--ff-mono);font-size: .62rem;letter-spacing: .14em;text-transform: uppercase;color: var(--on-brand);opacity: 0;transition: opacity .2s}
.cur.link .cur-ring {width: 52px;height: 52px;margin: -26px 0 0 -26px;border-color: var(--brand-2)}
.cur.label .cur-ring {width: 86px;height: 86px;margin: -43px 0 0 -43px;background: var(--brand-2);border-color: var(--brand-2)}
.cur.label .cur-ring span {opacity: 1}
.cur.label .cur-dot,.cur.text .cur-dot {opacity: 0}
.cur.text .cur-ring {width: 2px;height: 26px;margin: -13px 0 0 -1px;border-radius: 1px;background: var(--brand-2);border: 0}
.cur.down .cur-ring {width: 24px;height: 24px;margin: -12px 0 0 -12px}

/* ---------------------------------------------------- consent banner */
.consent {position: fixed;left: 16px;bottom: 16px;z-index: 200;max-width: 420px;background: var(--bg-2);border: 1px solid var(--line-strong);padding: 18px 18px 16px;border-radius: 3px;transform: translateY(24px);opacity: 0;transition: transform .5s var(--ease),opacity .5s}
.consent.on {transform: none;opacity: 1}
.consent p {font-size: .84rem;line-height: 1.55;color: var(--text-2)}
.consent p b {color: var(--text);font-weight: 600}
.consent a {color: var(--brand-2);text-decoration: underline;text-underline-offset: 3px}
.consent-row {display: flex;gap: 8px;margin-top: 14px;flex-wrap: wrap}
@media (max-width:760px) {.consent {left: 10px;right: 10px;max-width: none;bottom: 10px}
.has-mcta .consent {bottom: 84px}}

/* ------------------------------------------------ sticky mobile CTA */
.m-cta {display: none}
@media (max-width:760px) {
.m-cta {display: flex;position: fixed;left: 0;right: 0;bottom: 0;z-index: 150;gap: 10px;align-items: center;padding: 10px 12px calc(10px + env(safe-area-inset-bottom));background: var(--bg);border-top: 1px solid var(--line-strong);transform: translateY(110%);transition: transform .4s var(--ease)}
.m-cta.on {transform: none}
.m-cta .btn {flex: 1;padding: .95rem 1rem}
.m-cta-2 {font-size: .85rem;color: var(--text-2);padding: .6rem .4rem;text-decoration: underline;text-underline-offset: 4px}
.has-mcta .ftr {padding-bottom: 96px}}

/* ------------------------------------------------------- skeletons */
[data-skel]:not(.filled) {position: relative;min-height: var(--skel-h,120px);background: var(--surface);border-radius: 3px;overflow: hidden}
[data-skel]:not(.filled)::after {content: "";position: absolute;inset: 0;background: linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--text) 6%,transparent) 50%,transparent 100%);transform: translateX(-100%);animation: skel 1.4s infinite}
@keyframes skel {to {transform: translateX(100%)}}
img[data-fade] {opacity: 0;transition: opacity .8s var(--ease)}
img[data-fade].loaded {opacity: 1}
.media-skel {background: var(--surface)}

/* ------------------------------------------------------------ world */
.world {position: fixed;inset: 0;width: 100%;height: 100%;z-index: 0;display: block;outline: 0}
.world-film {position: fixed;inset: 0;z-index: 0}
.world-film video {width: 100%;height: 100%;object-fit: cover}
.world-fallback .world {display: none}
.page-world main,.page-world .ftr {position: relative;z-index: 1}
.page-world .hdr:not(.scrolled) {background: transparent}
.chapter {min-height: 100vh;min-height: 100svh;display: flex;align-items: center;padding-block: calc(var(--nav-h) + 40px) 60px;pointer-events: none}
.chapter a,.chapter button,.chapter .pe {pointer-events: auto}
.chapter .wrap {width: 100%}
.solid {background: var(--bg);position: relative;z-index: 2}
.solid-2 {background: var(--bg-2)}
.veil {position: relative}

/* hero */
.hero2 {min-height: 100vh;min-height: 100svh;align-items: flex-end;padding-bottom: clamp(40px,8vh,90px)}
.hero2 .display {max-width: 13ch}
.hero2-grid {display: grid;grid-template-columns: 1fr auto;gap: 40px;align-items: end}
.hero2 .lede {margin-top: 26px;color: var(--text-2);max-width: 46ch;font-size: clamp(1.02rem,1.3vw,1.18rem)}
.hero2-cta {display: flex;gap: 22px;align-items: center;margin-top: 34px;flex-wrap: wrap}
.hero2-meta {display: grid;gap: 10px;justify-items: end;text-align: right;font-family: var(--ff-mono);font-size: .72rem;letter-spacing: .12em;text-transform: uppercase;color: var(--text-3)}
.hero2-meta b {color: var(--text);font-weight: 500}
.tlink {display: inline-flex;align-items: center;gap: .5rem;font-size: .95rem;color: var(--text);border-bottom: 1px solid var(--line-strong);padding-bottom: 4px;transition: border-color .2s,color .2s}
.tlink:hover {border-color: var(--brand-2);color: var(--brand-2)}
.scroll-cue {font-family: var(--ff-mono);font-size: .68rem;letter-spacing: .2em;text-transform: uppercase;color: var(--text-3);display: flex;align-items: center;gap: 12px;margin-top: 44px}
.scroll-cue i {display: block;width: 60px;height: 1px;background: var(--line-strong);position: relative;overflow: hidden}
.scroll-cue i::after {content: "";position: absolute;inset: 0;background: var(--brand-2);transform: translateX(-100%);animation: cue 2.4s var(--ease) infinite}
@keyframes cue {60%,100% {transform: translateX(100%)}}
@media (max-width:760px) {.hero2-grid {grid-template-columns: 1fr}.hero2-meta {justify-items: start;text-align: left}.hero2 .display {font-size: clamp(2.9rem,13vw,4.6rem)}}

/* chapter copy blocks over the world */
.ch-copy {max-width: 640px}
.ch-copy.right {margin-left: auto}
.ch-copy.center {margin-inline: auto;text-align: center}
.ch-copy .kicker {margin-bottom: 22px}
.ch-copy p {margin-top: 20px;max-width: 52ch}
.scrim {background: color-mix(in srgb,var(--bg) 78%,transparent);padding: clamp(22px,3vw,38px);border: 1px solid var(--line)}
.statement {font-family: var(--ff-display);font-size: clamp(2rem,4.8vw,4.6rem);line-height: 1.06;letter-spacing: -.012em;max-width: 20ch}

/* ledger lists (instead of card grids) */
.ledger {border-top: 1px solid var(--line-strong)}
.ledger a,.ledger .lrow {display: grid;grid-template-columns: 3.2rem 1fr auto;gap: 18px;align-items: baseline;padding: 18px 0;border-bottom: 1px solid var(--line);transition: color .2s,padding .35s var(--ease)}
.ledger .n {font-family: var(--ff-mono);font-size: .72rem;color: var(--text-3);letter-spacing: .08em}
.ledger b {font-family: var(--ff-display);font-weight: 400;font-size: clamp(1.3rem,2vw,1.75rem);line-height: 1.1;display: block}
.ledger i {font-style: normal;font-size: .9rem;color: var(--text-2);display: block;margin-top: 6px;max-width: 58ch}
.ledger .go {font-family: var(--ff-mono);font-size: .7rem;letter-spacing: .12em;color: var(--text-3);text-transform: uppercase}
.ledger a:hover b {color: var(--brand-2)}
.halves {display: grid;grid-template-columns: 1fr 1fr;gap: clamp(28px,4vw,70px)}
.halves h3 {margin-bottom: 8px}
.halves .sub {font-size: .9rem;color: var(--text-3);margin-bottom: 22px}
@media (max-width:900px) {.halves {grid-template-columns: 1fr}}

/* numbers band */
.numbers {display: grid;grid-template-columns: repeat(4,1fr);border-top: 1px solid var(--line-strong)}
.numbers > div {padding: 26px 22px 6px 0;border-right: 1px solid var(--line)}
.numbers > div + div {padding-left: 22px}
.numbers > div:last-child {border-right: 0}
.numbers .v {font-family: var(--ff-display);font-size: clamp(3rem,6vw,6rem);line-height: .95;letter-spacing: -.02em;color: var(--text);font-variant-numeric: tabular-nums}
.numbers .v sup {font-size: .4em;vertical-align: top;margin-left: 4px;color: var(--brand-2)}
.numbers .l {font-size: .86rem;color: var(--text-2);margin-top: 14px;max-width: 28ch}
@media (max-width:900px) {.numbers {grid-template-columns: 1fr 1fr}.numbers > div:nth-child(2) {border-right: 0}.numbers > div:nth-child(3) {padding-left: 0}}

/* film frames */
.film {position: relative;overflow: hidden;background: var(--surface);border: 1px solid var(--line)}
.film video,.film img {width: 100%;height: 100%;object-fit: cover;display: block}
.film-cap {display: flex;justify-content: space-between;gap: 14px;padding: 12px 0 0;font-family: var(--ff-mono);font-size: .7rem;letter-spacing: .12em;text-transform: uppercase;color: var(--text-3)}
.film-16 {aspect-ratio: 16/9}
.film-wide {aspect-ratio: 21/9}
@media (max-width:760px) {.film-wide {aspect-ratio: 4/3}}

/* work */
.work-list {display: grid;gap: clamp(60px,9vw,130px)}
.work-item {display: grid;grid-template-columns: 1.25fr .75fr;gap: clamp(24px,4vw,64px);align-items: end}
.work-item:nth-child(even) {grid-template-columns: .75fr 1.25fr}
.work-item:nth-child(even) .work-media {order: 2}
.work-media {aspect-ratio: 16/10;overflow: hidden;background: var(--surface)}
.work-media img {width: 100%;height: 100%;object-fit: cover}
.work-meta {display: flex;gap: 10px;flex-wrap: wrap;font-family: var(--ff-mono);font-size: .68rem;letter-spacing: .1em;text-transform: uppercase;color: var(--text-3);margin-bottom: 18px}
.work-item h3 {font-size: clamp(1.7rem,2.8vw,2.6rem)}
.work-item p {margin-top: 14px;font-size: .95rem}
.work-figs {display: flex;gap: 30px;margin-top: 24px;padding-top: 18px;border-top: 1px solid var(--line)}
.work-figs strong {display: block;font-family: var(--ff-display);font-weight: 400;font-size: 2rem;line-height: 1;color: var(--text)}
.work-figs small {font-size: .74rem;color: var(--text-3)}
@media (max-width:900px) {.work-item,.work-item:nth-child(even) {grid-template-columns: 1fr}.work-item:nth-child(even) .work-media {order: 0}}

/* process timeline */
.proc {display: grid;grid-template-columns: .9fr 1.1fr;gap: clamp(30px,6vw,110px)}
.proc-head {position: sticky;top: calc(var(--nav-h) + 40px);align-self: start}
.proc ol {counter-reset: p;border-top: 1px solid var(--line-strong)}
.proc li {counter-increment: p;display: grid;grid-template-columns: 4.5rem 1fr;gap: 16px;padding: 28px 0;border-bottom: 1px solid var(--line)}
.proc li::before {content: "0" counter(p);font-family: var(--ff-display);font-size: 2.6rem;line-height: .9;color: var(--brand-2)}
.proc h4 {font-size: 1.1rem;margin-bottom: 6px}
.proc p {font-size: .94rem}
@media (max-width:900px) {.proc {grid-template-columns: 1fr}.proc-head {position: static}}

/* rail (industries) */
.rail {overflow: hidden}
.rail-track {display: flex;gap: 18px;padding-inline: max(24px,calc((100vw - var(--maxw))/2 + 24px));will-change: transform}
.rail-card {flex: 0 0 min(380px,78vw);border-top: 1px solid var(--line-strong);padding: 22px 0 10px;display: block}
.rail-card .n {font-family: var(--ff-mono);font-size: .7rem;color: var(--text-3)}
.rail-card b {display: block;font-family: var(--ff-display);font-weight: 400;font-size: 1.9rem;line-height: 1.05;margin: 14px 0 12px}
.rail-card i {font-style: normal;font-size: .92rem;color: var(--text-2)}
.rail-card:hover b {color: var(--brand-2)}
@media (max-width:899px) {.rail-track {overflow-x: auto;scroll-snap-type: x mandatory;padding-bottom: 14px}.rail-card {scroll-snap-align: start}}

/* FAQ */
.faq {border-top: 1px solid var(--line-strong)}
.faq-q {font-family: var(--ff-display);font-size: clamp(1.25rem,2vw,1.6rem);font-weight: 400;padding: 26px 0}
.faq-a p {font-size: 1rem}

/* finale */
.finale {min-height: 100vh;min-height: 100svh;display: flex;align-items: center;text-align: center}
.finale .display {margin-inline: auto;max-width: 12ch}
.finale .lede {margin: 26px auto 0}
.finale .hero2-cta {justify-content: center}

/* inner page hero */
.phero {padding-top: calc(var(--nav-h) + clamp(60px,10vw,140px));padding-bottom: clamp(40px,6vw,80px);border-bottom: 1px solid var(--line)}
.phero .kicker {margin-bottom: 26px}
.phero h1 {font-size: clamp(2.9rem,7.2vw,7rem);line-height: .98;max-width: 15ch;letter-spacing: -.02em}
.phero .lede {margin-top: 26px;max-width: 58ch}
.phero-row {display: grid;grid-template-columns: 1fr auto;gap: 30px;align-items: end}
@media (max-width:760px) {.phero-row {grid-template-columns: 1fr}}
.page-hero {padding-top: calc(var(--nav-h) + clamp(60px,9vw,120px))}
.page-hero h1 {font-size: clamp(2.6rem,6.4vw,6rem);line-height: 1;max-width: 16ch}

/* cards retuned: flat, ruled */
.card,.svc-card,.tier,.price-card,.panel,.kpi,.stat,.case {background: var(--surface);border: 1px solid var(--line);border-radius: 3px}
.stat .num,.case-metrics div strong {background: none;-webkit-background-clip: initial;background-clip: initial;color: var(--text);font-weight: 400}
.icon-box {border-radius: 2px!important;background: transparent!important;border: 1px solid var(--line)}
.cta-band {background: var(--bg-2)!important;border: 1px solid var(--line);border-radius: 3px!important}
.cta-band h2 {font-size: clamp(2.2rem,5vw,4.4rem)}

/* 404 + thank-you */
.lost {min-height: 100vh;min-height: 100svh;display: flex;align-items: center;position: relative;z-index: 1}
.lost .code {font-family: var(--ff-mono);font-size: .76rem;letter-spacing: .2em;color: var(--brand-2);text-transform: uppercase}
.lost h1 {font-size: clamp(3rem,9vw,8.4rem);line-height: .95;margin: 20px 0 22px;max-width: 12ch}
.lost-links {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 0 34px;margin-top: 36px;max-width: 640px}
.lost-links a {display: flex;justify-content: space-between;padding: 14px 0;border-bottom: 1px solid var(--line);color: var(--text-2)}
.lost-links a:hover {color: var(--brand-2)}
.lost-links a span {font-family: var(--ff-mono);font-size: .7rem;color: var(--text-3)}
@media (max-width:560px) {.lost-links {grid-template-columns: 1fr}}
.ty-steps {counter-reset: t;margin-top: 34px;border-top: 1px solid var(--line-strong);max-width: 680px}
.ty-steps li {counter-increment: t;display: grid;grid-template-columns: 3rem 1fr;padding: 18px 0;border-bottom: 1px solid var(--line);gap: 12px}
.ty-steps li::before {content: "0" counter(t);font-family: var(--ff-mono);color: var(--brand-2);font-size: .8rem;padding-top: 3px}

/* inputs flat */
.field input,.field select,.field textarea,input.inp,select.inp,textarea.inp {border-radius: 2px}

/* marquee: quiet text, no fade mask */
.marquee span {font-family: var(--ff-mono);font-size: .78rem;letter-spacing: .06em;color: var(--text-3)}

/* ---------------------------------------------------------- print */
@media print {.boot,.wipe,.cur,.consent,.m-cta,.scroll-prog,.world,.world-film {display: none!important}}
.linkbtn {font-size: inherit;color: inherit;padding: 0;background: none;border: 0;cursor: pointer}
.linkbtn:hover {color: var(--brand-2)}
.skip {position: absolute;left: 12px;top: -60px;z-index: 1100;background: var(--brand-2);color: var(--on-brand);padding: 10px 14px;border-radius: 2px;font-weight: 600}
.skip:focus {top: 12px}

/* Orbie: 3D animated coffee cup launcher (sprite rendered in Three.js) */
.chat-fab,.chat-fab:hover,.chat-fab:active {width: 78px;height: 84px;padding: 0;border: 0;border-radius: 0;background: none;filter: none;transform: none;display: grid;place-items: end center;position: relative;overflow: visible;cursor: pointer}
.chat-fab::before,.chat-fab::after {content: none!important}
.orbie {position: relative;width: 78px;height: 78px;display: block;transition: transform .35s cubic-bezier(.3,1.6,.5,1)}
.orbie-cup {position: absolute;inset: 0;background: url(../img/orbie-cup-dark.webp) 0 0/3120px 78px no-repeat;animation: orbieSway 3.4s steps(40) infinite}
html[data-theme=light] .orbie-cup {background-image: url(../img/orbie-cup-light.webp)}
@keyframes orbieSway {to {background-position: -3120px 0}}
.orbie-steam {position: absolute;left: 22px;top: -14px;width: 30px;height: 30px;pointer-events: none}
.orbie-steam i {position: absolute;bottom: 0;width: 6px;height: 16px;border-radius: 50%;border-right: 2px solid color-mix(in srgb,var(--text) 55%,transparent);opacity: 0;animation: steam 2.6s ease-in infinite}
.orbie-steam i:nth-child(1) {left: 2px;animation-delay: 0s}
.orbie-steam i:nth-child(2) {left: 11px;animation-delay: .8s;height: 20px}
.orbie-steam i:nth-child(3) {left: 20px;animation-delay: 1.6s}
@keyframes steam {0% {transform: translateY(6px) scaleX(1);opacity: 0}30% {opacity: .75}60% {transform: translateY(-8px) scaleX(-1)}100% {transform: translateY(-20px) scaleX(1);opacity: 0}}
.chat-fab:hover .orbie,.chat-fab:focus-visible .orbie {transform: translateY(-6px) rotate(-4deg)}
.chat-fab:active .orbie {transform: translateY(0) scale(.94)}
.orbie-tag {position: absolute;right: 76px;top: 50%;transform: translate(8px,-50%);white-space: nowrap;padding: 7px 12px;font-size: .8rem;font-weight: 500;color: var(--on-brand);background: var(--brand-2);border-radius: 999px;opacity: 0;pointer-events: none;transition: opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
html[data-theme=light] .orbie-tag {background: var(--brand)}
.chat-fab:hover .orbie-tag,.chat-fab:focus-visible .orbie-tag,.chat-fab.hello .orbie-tag {opacity: 1;transform: translate(0,-50%)}
.chat-fab.on {width: 52px;height: 52px;border-radius: 50%;background: var(--brand-2);place-items: center}
html[data-theme=light] .chat-fab.on {background: var(--brand)}
.chat-fab.on .orbie,.chat-fab.on .orbie-tag {display: none}
.chat-fab.on .cf-close {display: block;color: var(--on-brand)}
.chat-ping {position: absolute;top: 8px;right: 6px;width: 12px;height: 12px;border-radius: 50%;background: var(--danger);border: 2px solid var(--bg);z-index: 2}
.orbie-mini {background: var(--surface-2) url(../img/orbie-cup-dark.webp) 0 0/1360px 34px no-repeat!important;border: 1px solid var(--line)}
.chat-avatar.sm.orbie-mini {background-size: 1040px 26px!important;background-position: 0 0!important}
html[data-theme=light] .orbie-mini {background-image: url(../img/orbie-cup-light.webp)!important}
.chat-panel {border-radius: 3px!important}
.chat-fab:focus-visible {outline: 2px solid var(--brand-2);outline-offset: 4px;border-radius: 8px}
@media (prefers-reduced-motion:reduce) {.orbie-cup,.orbie-steam i {animation: none}}
@media (max-width:760px) {.orbie-tag {display: none}
.has-mcta .chat-wrap {bottom: calc(78px + env(safe-area-inset-bottom,0px))}
.chat-fab,.chat-fab:hover {width: 64px;height: 70px}
.orbie {width: 64px;height: 64px}
.orbie-cup {background-size: 2560px 64px;animation-name: orbieSwayS}
@keyframes orbieSwayS {to {background-position: -2560px 0}}}

/* hero sizing */
.hero2 .display {font-size: clamp(3rem,6.4vw,6.9rem);max-width: 12.5ch}
.kicker {flex-wrap: wrap;row-gap: .3rem}
@media (max-width:760px) {
.hero2 {padding-top: 40svh}
.hero2 .display {font-size: clamp(2.7rem,12vw,4.2rem)}
.consent p {font-size: .78rem}
.consent {padding: 14px}}
/* Orbie stays available while the cookie banner is up: on phones the banner
   spans the bottom, so the button simply moves above it instead of hiding. */
@media (max-width:760px) {.consent-open .chat-wrap {transform: translateY(-104px);transition: transform .3s ease}
.consent-open.has-mcta .chat-wrap {transform: translateY(-168px)}}
.hero2 .display {font-size: clamp(3rem,5.6vw,6rem);max-width: 14ch}
/* no icon tiles on marketing pages: headings carry the meaning */
.icon-box {display: none!important}
.mt-card {padding-left: 20px}

.hero2-meta span {background: color-mix(in srgb,var(--bg) 82%,transparent);padding: 3px 8px}
.scroll-cue {color: var(--text-2)}
.mt-5 {margin-top: clamp(3rem,6vw,5.5rem)}
.mb-4 {margin-bottom: 2.4rem}
.mb-1 {margin-bottom: .5rem}
.chat-wrap {pointer-events: none}
.chat-wrap > * {pointer-events: auto}
/* live samples + stack + toy */
.work-live {position: relative;background: var(--surface);border: 1px solid var(--line);display: flex;align-items: center;padding: 22px 18px 14px}
.work-live .case-viz {width: 100%;height: auto;min-height: 260px;background: transparent;border: 0}
.live-tag {position: absolute;top: 12px;right: 14px;font-family: var(--ff-mono);font-size: .64rem;letter-spacing: .14em;text-transform: uppercase;color: var(--accent);display: inline-flex;align-items: center;gap: 7px}
.live-tag::before {content: "";width: 6px;height: 6px;border-radius: 50%;background: var(--accent);animation: blink 1.6s infinite}
@keyframes blink {50% {opacity: .25}}
.live-panel {border-top: 1px solid var(--line-strong);padding-top: 22px}
.marquee {overflow: hidden}
.marquee-track {display: flex;gap: 38px;width: max-content;animation: slide 48s linear infinite}
.marquee:hover .marquee-track {animation-play-state: paused}
@keyframes slide {to {transform: translateX(-50%)}}
@media (prefers-reduced-motion:reduce) {.marquee-track {animation: none;flex-wrap: wrap;width: auto}}
#fxToy {position: relative;height: 300px;border: 1px solid var(--line-strong);background: var(--bg);cursor: grab;touch-action: none;user-select: none;border-radius: 3px;overflow: hidden}
#fxToy.dragging {cursor: grabbing}
#fxToy canvas {display: block;width: 100%;height: 100%}
.fx-toy-score {position: absolute;right: 16px;top: 14px;font-family: var(--ff-mono);font-size: .72rem;letter-spacing: .1em;color: var(--brand-2);pointer-events: none}
.fx-toy-hint {position: absolute;left: 16px;bottom: 14px;font-size: .8rem;color: var(--text-3);pointer-events: none;transition: opacity .4s}
#fxToy.touched .fx-toy-hint {opacity: 0}
.req {color: var(--danger-ink)}
.bk-step b {color: var(--text-2)}
.bk-step {color: var(--text-2)}
.field label .req {color: var(--danger-ink)}
/* sparkle trail + tap ripple */
.spark {position: fixed;inset: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1002}
@media print {.spark,.tap-ring {display: none}}
/* floating proof chips over the hero world (pointer + finger parallax) */
.hero2 {position: relative}
/* Decorative floating proof cards on the home hero. Named apart from the
   .chips control used inside panels and forms: they are unrelated. */
.hero-chips {position: absolute;inset: 0;pointer-events: none}
.chip-card {position: absolute;pointer-events: auto;width: 230px;padding: 14px 16px 12px;background: color-mix(in srgb,var(--bg-2) 86%,transparent);border: 1px solid var(--line-strong);border-radius: 4px;display: grid;gap: 4px;color: var(--text);transition: border-color .3s;animation: bob 6s ease-in-out infinite;will-change: transform}
.chip-card:hover {border-color: var(--brand-2)}
.chip-card b {font-family: var(--ff-display);font-weight: 400;font-size: 2.1rem;line-height: 1}
.chip-card span:not(.chip-k) {font-size: .78rem;color: var(--text-2);line-height: 1.4}
.chip-k {font-family: var(--ff-mono);font-size: .62rem;letter-spacing: .14em;text-transform: uppercase;color: var(--brand-2);display: flex;align-items: center;gap: 7px}
.chip-k i {width: 6px;height: 6px;border-radius: 50%;background: var(--accent);animation: blink 1.6s infinite}
.chip-card svg {width: 100%;height: 26px;margin-top: 4px}
.chip-card polyline {fill: none;stroke: var(--brand-2);stroke-width: 1.6;vector-effect: non-scaling-stroke;stroke-dasharray: 300;stroke-dashoffset: 300;animation: drawLine 2.4s 1.2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes drawLine {to {stroke-dashoffset: 0}}
.chip-card.c1 {right: 3%;top: 18%}
.chip-card.c2 {right: 21%;top: 52%;animation-delay: -3s;width: 210px}
@keyframes bob {50% {translate: 0 -10px}}
@media (max-width:1100px) {.chip-card.c2 {display: none}.chip-card.c1 {right: 2%;top: 14%;width: 200px}}
@media (max-width:760px) {.hero-chips {display: block}.chip-card.c1 {top: 12svh;right: 4%;width: 150px;padding: 10px 12px}.chip-card.c1 b {font-size: 1.5rem}.chip-card.c1 span:not(.chip-k),.chip-card svg {display: none}}
@media (prefers-reduced-motion:reduce) {.chip-card {animation: none}.chip-card polyline {stroke-dashoffset: 0;animation: none}}
@media (max-width:760px) {.hero-chips {display: none}
.hero2-grid > div:first-child {background: color-mix(in srgb,var(--bg) 80%,transparent);padding: 18px 16px 20px;margin-inline: -16px}
.hero2-meta {background: color-mix(in srgb,var(--bg) 80%,transparent);padding: 12px 16px;margin-inline: -16px}}

/* =====================================================================
   Gradient system built from the UI DESIGN SYSTEM palettes
   Dark  (gold + dark green):  Dark Spruce #101211 · Slate Depth #2F4F4F / #1A2626
         · Olive Leaf #58580A · Old Gold #B8AB38 · Vanilla Custard #E0D794 · Gold #D2B15E
   Light (maroon):             Linen #F0E5DE · Dark Wine #6F1D1B · Ash Grey #ADBDAB
         · Black Cherry #550003 · Dark Amaranth #8A2846 · Burnt Peach #E2725B
         · Almond Light #EBD3BB · Powder Petal #E1D0C9 · Chocolate Plum #764C4E
   ===================================================================== */
:root {
  --bg: #0E1411; --bg-2: #121B17; --surface: #15201B; --surface-2: #1A2626; --surface-3: #243532;
  --g-mesh: radial-gradient(60% 55% at 88% 0%, rgba(184,171,56,.16), transparent 70%),
            radial-gradient(55% 60% at 0% 100%, rgba(47,79,79,.55), transparent 72%),
            radial-gradient(40% 40% at 55% 55%, rgba(88,88,10,.14), transparent 70%),
            linear-gradient(180deg, #0E1411 0%, #101211 100%);
  --g-band: linear-gradient(120deg, #1A2626 0%, #16241D 45%, #2A2A0E 100%);
  --g-btn: linear-gradient(120deg, #B8AB38 0%, #D2B15E 48%, #E0D794 100%);
  --g-btn-h: linear-gradient(120deg, #E0D794 0%, #D2B15E 55%, #B8AB38 100%);
  --g-text: linear-gradient(100deg, #E0D794 0%, #D2B15E 45%, #B8AB38 100%);
  --g-line: linear-gradient(90deg, #58580A, #B8AB38, #E0D794);
  --g-card: linear-gradient(160deg, rgba(47,79,79,.30), rgba(21,32,27,.0) 60%);
}
html[data-theme=light] {
  --bg: #F3E9E2; --bg-2: #F8F0EA; --surface: #FBF5F0; --surface-2: #EFE0D6; --surface-3: #E1D0C9;
  --text-2: #5E3A3E; --text-3: #7A5A5C;
  --g-mesh: radial-gradient(55% 45% at 88% 0%, rgba(111,29,27,.18), transparent 70%),
            radial-gradient(60% 55% at 0% 100%, rgba(173,189,171,.50), transparent 72%),
            radial-gradient(45% 40% at 60% 55%, rgba(226,114,91,.10), transparent 70%),
            linear-gradient(180deg, #F3E9E2 0%, #F0E5DE 100%);
  --g-band: linear-gradient(120deg, #F0E5DE 0%, #EBD3BB 55%, #E1D0C9 100%);
  --g-btn: linear-gradient(120deg, #550003 0%, #6F1D1B 50%, #8A2846 100%);
  --g-btn-h: linear-gradient(120deg, #8A2846 0%, #6F1D1B 50%, #550003 100%);
  --g-text: linear-gradient(100deg, #6F1D1B 0%, #8A2846 50%, #550003 100%);
  --g-line: linear-gradient(90deg, #550003, #8A2846, #E2725B);
  --g-card: linear-gradient(160deg, rgba(173,189,171,.28), rgba(251,245,240,0) 60%);
}
body {background: var(--bg)}
body::before {content: "";position: fixed;inset: 0;z-index: -1;background: var(--g-mesh);pointer-events: none}
.solid {background: var(--g-mesh)}
.solid-2 {background: var(--g-band)}
.phero,.page-hero {background: var(--g-mesh)}
.ftr {background: var(--g-band)}
.btn-primary,html[data-theme=light] .btn-primary {background: var(--g-btn) var(--brand-2);border-color: transparent;color: var(--on-brand)}
.btn-primary:hover,html[data-theme=light] .btn-primary:hover {background: var(--g-btn-h) var(--brand-2);border-color: transparent;color: var(--on-brand)}
.it,.grad-text {background: var(--g-text);-webkit-background-clip: text;background-clip: text;color: transparent;padding-right: .06em}
[data-fill] .it .w.lit,[data-fill] .w .it {color: transparent}
.scroll-prog {background: var(--g-line)}
.boot-bar i,.wipe-bar i {background: var(--g-line)}
.card,.svc-card,.tier,.price-card,.panel,.kpi,.stat,.case,.scrim,.chip-card,.work-live {background-image: var(--g-card)}
.scrim {background-color: color-mix(in srgb,var(--bg) 80%,transparent)}
.cta-band {background: var(--g-band)!important}
.orbie-tag,html[data-theme=light] .orbie-tag {background: var(--g-btn) var(--brand-2);color: var(--on-brand)}
.chat-fab.on,html[data-theme=light] .chat-fab.on {background: var(--g-btn)}
.pill.pill-brand,.bk-step.on b,.cal-day.on,.slot.on,.chat-msg.me .chat-b,.chat-send {background: var(--g-btn) var(--brand-2)!important;color: var(--on-brand)!important}
.proc li::before,.numbers .v sup {background: var(--g-text);-webkit-background-clip: text;background-clip: text;color: transparent}
html[data-theme=light] .hero2 .lede {background: color-mix(in srgb,var(--bg) 78%,transparent);padding: 10px 14px;margin-left: -14px;color: var(--text)}

/* =====================================================================
   Accent palette (from the liked colours) — hero colours stay the lead,
   accents give each page its own signature. Dark: cool silvers + slate
   blues + camel. Light: berry, rosewood, wine plum, mauve.
   ===================================================================== */
:root {--acc-1: #5D8AA8;--acc-2: #E5E4E2;--acc-3: #BB9457;--acc-4: #536878;--dust: 229,228,226}
html[data-theme=light] {--acc-1: #974472;--acc-2: #B9375E;--acc-3: #764C4E;--acc-4: #D6C8DF;--dust: 82,46,56}
body[data-page=services] {--acc-1: #5D8AA8}
body[data-page^=work] {--acc-1: #BB9457}
body[data-page=process] {--acc-1: #536878}
body[data-page=pricing] {--acc-1: #E0D794}
body[data-page=about],body[data-page=privacy],body[data-page=terms] {--acc-1: #E5E4E2}
body[data-page=solutions] {--acc-1: #BB9457}
body[data-page=insights] {--acc-1: #536878}
html[data-theme=light] body[data-page=services],html[data-theme=light] body[data-page=contact],html[data-theme=light] body[data-page=book],html[data-theme=light] body[data-page=thank-you] {--acc-1: #B9375E}
html[data-theme=light] body[data-page^=work],html[data-theme=light] body[data-page=insights],html[data-theme=light] body[data-page=dashboard],html[data-theme=light] body[data-page=admin] {--acc-1: #974472}
html[data-theme=light] body[data-page=process] {--acc-1: #602437}
html[data-theme=light] body[data-page=pricing] {--acc-1: #8A2846}
html[data-theme=light] body[data-page=about],html[data-theme=light] body[data-page=privacy],html[data-theme=light] body[data-page=terms] {--acc-1: #522E38}
html[data-theme=light] body[data-page=solutions] {--acc-1: #764C4E}

/* page heroes: living mesh + accent glow + orb signature */
.page-hero,.phero,.ops-hero {position: relative;overflow: hidden;isolation: isolate}
.page-hero > .wrap,.phero > .wrap {position: relative;z-index: 1}
.hero-mesh {position: absolute;inset: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none}
.page-hero::before,.phero::before {content: "";position: absolute;inset: -20% -10% auto auto;width: 70%;height: 120%;z-index: -1;background: radial-gradient(closest-side, color-mix(in srgb,var(--acc-1) 22%,transparent), transparent 70%);pointer-events: none;animation: drift 18s ease-in-out infinite alternate}
.page-hero::after,.phero::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background: linear-gradient(90deg, transparent, var(--acc-1), var(--brand-2), transparent);opacity: .6}
@keyframes drift {to {transform: translate(-8%,6%) scale(1.08)}}
.page-hero .eyebrow::before {background: var(--acc-1)}
.eyebrow::before {background: linear-gradient(90deg, var(--acc-1), var(--brand-2))!important}
.ops-hero {padding: 10px 0 14px}
.ops-hero > :not(.hero-mesh) {position: relative;z-index: 1}

/* pointer spotlight on cards (fine pointers) */
.card,.svc-card,.tier,.price-card,.panel,.kpi,.stat,.case,.mt-card,.chip-card,.work-live,.step {transition: border-color .35s, background-color .35s}
.lit {border-color: color-mix(in srgb,var(--acc-1) 50%,var(--line))!important;background-image: radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb,var(--acc-1) 14%,transparent), transparent 70%), var(--g-card)!important}

/* staggered reveals for grids/lists */
.st {opacity: 0;transform: translateY(18px);transition: opacity .7s var(--ease), transform .7s var(--ease)}
.st.st-in {opacity: 1;transform: none}
@media (prefers-reduced-motion:reduce) {.st {opacity: 1;transform: none}}

/* accent touches that carry the palette through every page */
.kpi {border-top: 2px solid color-mix(in srgb,var(--acc-1) 60%,transparent)}
.faq-item.open .faq-q {color: var(--brand-2)}
.faq-item.open {border-left: 2px solid var(--acc-1);padding-left: 14px;transition: padding .3s}
.pill {border-color: color-mix(in srgb,var(--acc-1) 35%,var(--line))}
.hr,.rule {background: linear-gradient(90deg, transparent, var(--acc-1), transparent);opacity: .5}
::selection {background: var(--acc-1);color: var(--bg)}

/* owner console: remove the creature art, calm signature panel */
.lock-sig {display: grid!important;place-items: center;align-content: center;gap: 22px;background: var(--g-band)!important;position: relative;overflow: hidden}
.lock-sig::before {content: "";position: absolute;width: 140%;height: 140%;background: radial-gradient(closest-side, color-mix(in srgb,var(--acc-1) 22%,transparent), transparent 70%);animation: drift 16s ease-in-out infinite alternate}
.sig-orb {position: relative;width: 170px!important;height: 170px!important;animation: orbSpin 40s linear infinite}
.sig-orb line,.sig-orb .rim {animation-duration: 1.2s!important}
.lock-sig .la-cap {position: relative;font-family: var(--ff-display);font-size: 1.6rem;color: var(--text)}
.lock-sig .la-cap span {display: block;font-family: var(--ff-mono);font-size: .64rem;letter-spacing: .3em;text-transform: uppercase;color: var(--text-3);margin-top: 6px;text-align: center}
body[data-skin=console] {background: var(--g-mesh)}
body[data-skin=console] .panel,body[data-skin=console] .kpi,body[data-skin=console] .card {background-image: var(--g-card)}

/* water-drop ripple (canvas, drawn in site.js) */
.water {position: fixed;inset: 0;width: 100vw;height: 100vh;pointer-events: none;z-index: 1003}


/* startup: a seed of light becomes the orb, the network powers on, then it blooms open */
.boot-orbwrap {position: relative;width: 132px;height: 132px;display: grid;place-items: center}
.boot-orbwrap .boot-orb {position: absolute;inset: 0}
.boot-seed {position: absolute;left: 50%;top: 50%;width: 8px;height: 8px;margin: -4px 0 0 -4px;border-radius: 50%;background: var(--brand-2);animation: seed 1.1s cubic-bezier(.2,.7,.2,1) forwards;z-index: 2}
@keyframes seed {0% {transform: scale(0);opacity: 0}25% {transform: scale(1.4);opacity: 1}60% {transform: scale(1);opacity: 1}100% {transform: scale(14);opacity: 0}}
.boot-ring {position: absolute;inset: -18px;border-radius: 50%;border: 1px solid color-mix(in srgb,var(--brand-2) 55%,transparent);opacity: 0;animation: ringOn 1.6s 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ringOn {0% {transform: scale(.6);opacity: 0}40% {opacity: .9}100% {transform: scale(1.35);opacity: 0}}
.boot-orb line {animation-delay: calc(.35s + var(--i) * 5ms)}
.boot-orb circle:not(.rim) {animation-delay: calc(.9s + var(--i) * 24ms)}
.boot-word {position: relative}
.boot-word::after {content: "";position: absolute;inset: 0 auto 0 -40%;width: 30%;background: linear-gradient(100deg, transparent, rgba(var(--dust),.55), transparent);transform: skewX(-18deg);animation: shine 1.4s 1.5s ease-in-out forwards;opacity: 0}
@keyframes shine {0% {left: -40%;opacity: 1}100% {left: 120%;opacity: 1}}
.boot-meta span:first-child {transition: opacity .25s}
.boot-bloom {position: absolute;left: 50%;top: 50%;width: 40vmax;height: 40vmax;margin: -20vmax 0 0 -20vmax;border-radius: 50%;background: radial-gradient(closest-side, color-mix(in srgb,var(--brand-2) 55%,transparent), color-mix(in srgb,var(--acc-1) 25%,transparent) 55%, transparent 72%);transform: scale(0);opacity: 0;z-index: 0;pointer-events: none}
.boot.done .boot-bloom {animation: bloom 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bloom {0% {transform: scale(.1);opacity: .9}100% {transform: scale(3.2);opacity: 0}}
.boot.quick .boot-orbwrap,.rv .boot-orbwrap {width: 56px;height: 56px}
.boot.quick .boot-seed,.rv .boot-seed,.boot.quick .boot-ring,.rv .boot-ring {display: none}
@media (prefers-reduced-motion:reduce) {.boot-seed,.boot-ring,.boot-bloom,.boot-word::after {display: none}}

/* home: calmer hero + compact service index + stack band */
.facts {display: flex;flex-wrap: wrap;gap: 6px 18px;margin-top: 26px;font-family: var(--ff-mono);font-size: .68rem;letter-spacing: .12em;text-transform: uppercase;color: var(--text-2)}
.facts span {display: inline-flex;align-items: center;gap: 8px}
.facts span + span::before {content: "";width: 4px;height: 4px;border-radius: 50%;background: var(--acc-1)}
.facts b {color: var(--text);font-weight: 500}
.hero2-grid {grid-template-columns: 1fr}
.svc-index {display: grid;grid-template-columns: 1fr;border-top: 1px solid var(--line-strong)}
.svc-index a {display: flex;align-items: baseline;gap: 14px;padding: 12px 0;border-bottom: 1px solid var(--line);font-family: var(--ff-display);font-size: clamp(1.15rem,1.6vw,1.45rem);line-height: 1.15;color: var(--text);transition: color .25s, padding .35s var(--ease)}
.svc-index a .n {font-family: var(--ff-mono);font-size: .66rem;color: var(--text-3);min-width: 2rem}
.svc-index a:hover {color: var(--brand-2);padding-left: 8px}
.stack-band {padding-block: 34px 38px;border-block: 1px solid var(--line)}
.stack-band .kicker {margin-bottom: 18px}
.chip-card.c2 {top: 58%}
.chip-card.c2 {right: 4%;top: 64%}
/* keyboard focus appears instantly (a transition on "all" used to fade the ring in) */
.icon-btn,.soc-btn {transition-property: color, background-color, border-color, transform}

/* startup finish: the orb zooms until it covers the screen, then fades to the page */
.boot-fill {position: absolute;inset: -6px;border-radius: 50%;background: radial-gradient(circle, color-mix(in srgb,var(--brand-2) 26%,var(--bg)) 0%, color-mix(in srgb,var(--brand-2) 10%,var(--bg)) 52%, var(--bg) 70%, transparent 71%);opacity: 0;pointer-events: none}
.boot.zoom .boot-word,.boot.zoom .boot-sub,.boot.zoom .boot-bar,.boot.zoom .boot-meta,.boot.zoom .boot-seed,.boot.zoom .boot-ring {opacity: 0!important;transition: opacity .25s ease;animation: none}
.boot.zoom .boot-orbwrap {transform: scale(var(--zoom,20));opacity: 0;transition: transform 1.05s cubic-bezier(.7,0,.2,1);animation: bootfade 1.05s linear forwards;will-change: transform, opacity}
/* visible, then faint, then gone: each stage lasts long enough to be seen */
@keyframes bootfade {0% {opacity: 1} 34% {opacity: .66} 68% {opacity: .24} 100% {opacity: 0}}
.boot.quick.zoom .boot-orbwrap {transition-duration: .6s;animation-duration: .6s}
.boot.zoom .boot-orb {animation-play-state: paused}
.boot.zoom .boot-orb line,.boot.zoom .boot-orb .rim {vector-effect: non-scaling-stroke}
.boot.zoom .boot-orb circle:not(.rim) {opacity: 0;transition: opacity .4s ease}
.boot.zoom .boot-fill {opacity: 1;transition: opacity .35s ease}
.boot.zoom.done {opacity: 0;transition: opacity .5s ease .05s}
.boot.zoom.done .boot-t,.boot.zoom.done .boot-b {transform: none}
.boot.zoom.done .boot-in {opacity: 1;transform: none}
.boot.zoom .boot-bloom {display: none}

/* Arriving from a click inside a visit: the new page opens on the very same
   screen the click showed (orb, page name, bar), then simply fades to the page.
   No second loader, no panels splitting. */
.rv .boot-seed,.rv .boot-ring,.rv .boot-fill,.rv .boot-bloom {display: none}
.rv .boot-in {gap: 14px}
.rv .boot-orbwrap {width: 64px;height: 64px;order: 1}
.rv .boot-orb {width: 64px!important;height: 64px!important;animation-duration: 2.6s}
.rv .boot-orb line,.rv .boot-orb .rim {animation: none;stroke-dashoffset: 0}
.rv .boot-orb circle:not(.rim) {animation: none;transform: none}
.rv .boot-in::after {content: var(--wipe-label, "");order: 2;font-family: var(--ff-display);font-size: 1.9rem;color: var(--text);text-align: center}
.rv .boot .boot-bar {display: block!important;order: 3;width: 140px;margin-top: 0}
.rv .boot .boot-bar i {width: 40%;right: auto;animation: indet 1s cubic-bezier(.6,0,.4,1) infinite}
.rv .boot.done {opacity: 0;transition: opacity .35s ease}
.rv .boot.done .boot-t,.rv .boot.done .boot-b {transform: none}
.rv .boot.done .boot-in {opacity: 1;transform: none}