/* "How we start" tile field and "Control" console (sections3d.js).
   Same rules as the platform stack: graphics only inside 3D planes, no opacity on preserve-3d
   elements, transform/opacity-only animation. Copy and controls live in 2D beside the scenes; the
   console faces carry tiny decorative labels (aria-hidden), and its models knob can be turned. */

.s3 .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.s3 h2 { font-size: clamp(34px, 3.8vw, 54px); margin: 0 0 14px; }
.s3 .lede3 { color: #3B475B; margin: 0 0 28px; max-width: 30em; }
@media (max-width: 960px) { .s3 .wrap { grid-template-columns: 1fr; } }

/* Shared lists: text only. A left rule marks the active item and fills as a progress bar. */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.picks button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0 14px 20px; position: relative; }
.picks button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgb(24 37 59 / .1); }
.picks button:focus-visible { outline: 2px solid var(--adaptum-signal); outline-offset: 2px; border-radius: 4px; }
.picks button:has(.num) { grid-template-columns: 34px 1fr; column-gap: 8px; }
.picks .num { grid-row: span 2; font: 500 12px/1.9 var(--adaptum-font-mono); letter-spacing: .06em; color: var(--adaptum-ink-muted); transition: color .35s; }
.picks b { font-weight: 500; font-size: 17px; color: var(--adaptum-ink-muted); transition: color .35s; }
.picks span.d { color: var(--adaptum-ink-muted); font-size: 14.5px; line-height: 1.5; opacity: .75; transition: opacity .35s; }
.picks button:hover b, .picks button.on b { color: var(--adaptum-ink); }
.picks button.on .num { color: var(--adaptum-viridian); }
.picks button.on span.d { opacity: 1; }
.picks .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; overflow: hidden; opacity: 0; }
.picks button.on .bar { opacity: 1; }
.picks .bar i { display: block; width: 100%; height: 100%; background: var(--adaptum-viridian); transform: scaleY(0); transform-origin: top; }
.picks button.on .bar i.run { animation: fillv var(--dur, 3.6s) linear forwards; }
@keyframes fillv { to { transform: scaleY(1); } }
.paused .picks .bar i.run { animation-play-state: paused; }
.paused .picks button.on .bar i { transform: scaleY(1); animation: none; }
.flip3 .wrap { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 960px) { .flip3 .wrap { grid-template-columns: 1fr; } .flip3 .wrap > .console-scene, .flip3 .wrap > .vault-scene { order: 2; } }

/* ---------- How we start: tile field ---------- */
.start3 { padding: clamp(88px, 10vw, 140px) 0; background: #F3EEE4; }
.tiles-scene { position: relative; width: 100%; aspect-ratio: 1 / .95; max-width: 640px; margin-inline: auto; perspective: 1700px; perspective-origin: 50% 30%; }
.tiles-fit { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -150px 0 0 -210px; transform-style: preserve-3d; }
.tiles { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tpx, 58deg)) rotateZ(var(--tz, -45deg)); }
.tiles .floor { position: absolute; inset: -18px; border-radius: 28px; background: rgb(24 37 59 / .05); box-shadow: inset 0 0 0 1px rgb(24 37 59 / .06); }
.tiles .shade { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(24 37 59 / .22), transparent); filter: blur(24px); transform: translateZ(-30px); }
.t { position: absolute; left: calc(var(--x) * 60px); top: calc(var(--y) * 60px); width: 52px; height: 52px; transform-style: preserve-3d; --h: 4px; }
.t > b { position: absolute; transition: transform .9s cubic-bezier(.2,.8,.2,1), background .7s ease; transition-delay: calc(var(--r) * 75ms); }
/* Solid blocks: a top face plus the two walls facing the viewer, scaled (not resized) so height animates on the compositor. */
.t .f { inset: 0; border-radius: 0; transform: translateZ(var(--h)); background-color: #fff; box-shadow: inset 0 0 0 1px rgb(24 37 59 / .06); }
.t .ws { left: 0; top: 100%; width: 100%; height: 100px; transform-origin: top; transform: rotateX(90deg) scaleY(var(--k, .06)); background: #CFC6B5; }
.t .ww { left: -100px; top: 0; width: 100px; height: 100%; transform-origin: right; transform: rotateY(90deg) scaleX(var(--k, .06)); background: #E2DACB; }
/* active looks */
.t.lit .ws { background: #0E3A2F; } .t.lit .ww { background: #155443; }
.t.lit .f { background-color: #23765F; box-shadow: none; }
.t.mint .ws { background: #86AEA0; } .t.mint .ww { background: #A9CBBF; }
.t.mint .f { background-color: #D6E9E1; box-shadow: none; }

/* ---------- Control: console ---------- */
.control3 { padding: clamp(88px, 10vw, 140px) 0; }
.control3 .note { color: var(--adaptum-ink-muted); font-size: 14.5px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgb(24 37 59 / .1); max-width: 34em; }
.control3 .picks { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.control3 .picks b { font-size: 15.5px; }
.control3 .picks span.d { font-size: 13.5px; }
@media (max-width: 560px) { .control3 .picks { grid-template-columns: 1fr; } }

.console-scene { position: relative; width: 100%; aspect-ratio: 1 / .8; max-width: 680px; margin-inline: auto; perspective: 1800px; perspective-origin: 50% 30%; }
.cfit { position: absolute; left: 50%; top: 50%; width: 540px; height: 380px; margin: -175px 0 0 -270px; transform-style: preserve-3d; }
/* The flat wrapper would sit in front of the console's far half and swallow clicks: only the modules take pointers. */
.cfit { pointer-events: none; } .cfit .mod { pointer-events: auto; }
.console { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--cx, 54deg)) rotateZ(var(--cz, -30deg)); }
.console .shade { position: absolute; inset: 6% 4%; border-radius: 60px; background: radial-gradient(closest-side, rgb(8 15 28 / .45), transparent); filter: blur(26px); transform: translateZ(-40px); }
.slab3 { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(calc(var(--d) * 1px)); }
.cbase { position: absolute; inset: 0; border-radius: 30px; transform-style: preserve-3d; }
.cbase .slab3 { background: #0B1424; }
.cbase .top { position: absolute; inset: 0; border-radius: 30px; transform: translateZ(18px); background: linear-gradient(150deg, #2B3E5E, #1A2840 55%, #141F33); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .14), inset 0 2px 0 rgb(255 255 255 / .12); overflow: hidden; }
.cbase .top::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(244 237 225 / .07) 1px, transparent 1.5px); background-size: 14px 14px; }
.cbase .brandmark { position: absolute; left: 24px; bottom: 18px; width: 44px; height: 14px; background: rgb(244 237 225 / .35); -webkit-mask: url(/brand/logos/svg/adaptum-icon-mono-white.svg) center / contain no-repeat; mask: url(/brand/logos/svg/adaptum-icon-mono-white.svg) center / contain no-repeat; }

.mod { position: absolute; width: 150px; height: 136px; left: calc(30px + var(--c) * 166px); top: calc(36px + var(--rw) * 152px); transform-style: preserve-3d; transform: translateZ(18px); }
.mod > .lift { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.mod .slab3 { border-radius: 18px; background: #0E1A2D; }
.mod .mf { position: absolute; inset: 0; border-radius: 18px; transform: translateZ(10px); background: linear-gradient(150deg, #34496C, #223352); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .14), inset 0 1.5px 0 rgb(255 255 255 / .14); transition: box-shadow .5s, background .5s; overflow: hidden; }
.mod .led { position: absolute; right: 14px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: rgb(244 237 225 / .25); transition: background .4s, box-shadow .4s; }
.mod.on > .lift { transform: translateZ(12px); }
.mod.on .mf { background: linear-gradient(150deg, #3C5479, #26395A); box-shadow: inset 0 0 0 1.5px rgb(150 220 195 / .7), inset 0 1.5px 0 rgb(255 255 255 / .2), 0 0 40px rgb(95 180 155 / .35); }
.mod.on .led { background: #8FE3C3; box-shadow: 0 0 10px 2px rgb(143 227 195 / .7); }
.mf .ic3 { position: absolute; left: 14px; top: 12px; width: 16px; height: 16px; color: rgb(244 237 225 / .55); }
.mf .mt { position: absolute; left: 36px; top: 16px; font: 500 7.5px/1 var(--adaptum-font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(244 237 225 / .55); transition: color .4s; }
.mod.on .mf .mt { color: rgb(244 237 225 / .9); }
.mod [data-icon] .ico { width: 100%; height: 100%; }

/* raised parts */
.raise { position: absolute; transform-style: preserve-3d; }
.raise > i { position: absolute; inset: 0; border-radius: inherit; }
.raise > i:not(:last-child) { background: #0C1626; }
.raise > i:nth-child(1) { transform: translateZ(12px); } .raise > i:nth-child(2) { transform: translateZ(15px); }
.raise > i:last-child { transform: translateZ(18px); background: linear-gradient(150deg, #F4EDE1, #CFC6B6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }

/* 0 models: dial. Drag the knob (sections3d.js) and the provider it points at lights up. */
.dial { position: absolute; left: 33px; top: 26px; width: 84px; height: 84px; border-radius: 50%; transform: translateZ(10.5px);
  background: repeating-conic-gradient(rgb(244 237 225 / .4) 0 1.5deg, transparent 1.5deg 30deg); -webkit-mask: radial-gradient(circle, transparent 33px, #000 34px, #000 41px, transparent 42px); mask: radial-gradient(circle, transparent 33px, #000 34px, #000 41px, transparent 42px); }
.mlogos { position: absolute; inset: 0; transform: translateZ(10.5px); }
.mlogos i { position: absolute; left: 75px; top: 68px; width: 17px; height: 17px; margin: -8.5px; background: rgb(244 237 225 / .32);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  transform: rotate(var(--a)) translateY(-53px) rotate(calc(-1 * var(--a))) scale(.8); transition: background .3s, transform .45s cubic-bezier(.3,1.5,.4,1); }
.mlogos i.on { background: #F4EDE1; transform: rotate(var(--a)) translateY(-55px) rotate(calc(-1 * var(--a))) scale(1.12); }
.mod.on .mlogos i.on { background: #8FE3C3; }
.mf .mlabel { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 500 7.5px/1 var(--adaptum-font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(244 237 225 / .7); }
.knob { left: 47px; top: 40px; width: 56px; height: 56px; border-radius: 50%; cursor: grab; touch-action: none; }
.knob.drag { cursor: grabbing; }
.knob > i:last-child::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: var(--adaptum-viridian); }
.knob > i:last-child { transform: translateZ(18px) rotate(var(--kr, -120deg)); transition: transform .9s cubic-bezier(.3,1.4,.4,1); }
.knob.drag > i:last-child { transition: none; }
/* 1 usage: slider. --u is the allowance used (0–1): the tour sets it, and dragging the slider sets it. */
.mod { --u: .35; }
.mod.on { --u: .72; }
.track { position: absolute; left: 20px; right: 20px; top: 76px; height: 8px; border-radius: 8px; background: rgb(8 15 28 / .55); transform: translateZ(10.5px); cursor: pointer; touch-action: none; }
.track b { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(90deg, #2A8A6F, #8FE3C3); transform: scaleX(var(--u)); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1), background .4s; }
.track s, .pill3 s { position: absolute; top: 50%; width: 0; height: 0; }   /* axis ends, measured for dragging */
.track s:last-child { left: 100%; } .track s:first-of-type { left: 0; }
.cap { position: absolute; left: calc(20px + 110px * .85); top: 70px; width: 2px; height: 20px; background: rgb(244 237 225 / .6); transform: translateZ(10.5px); }
.slidek { left: 6px; top: 66px; width: 28px; height: 28px; border-radius: 9px; cursor: grab; touch-action: none; transform: translateX(calc(var(--u) * 110px)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.drag .slidek, .drag .track b, .drag .togk { transition: none; cursor: grabbing; }
.over .track b { background: linear-gradient(90deg, #B8803F, #E2A863); }
.usage3 { position: absolute; left: 20px; top: 34px; display: flex; gap: 5px; align-items: flex-end; height: 26px; transform: translateZ(10.5px); }
.usage3 i { width: 9px; border-radius: 2px; background: rgb(244 237 225 / .22); transition: background .5s; }
.mod.on .usage3 i:last-child { background: rgb(143 227 195 / .7); }
.mf .ufoot { position: absolute; left: 20px; right: 18px; bottom: 13px; display: flex; justify-content: space-between; font: 500 7.5px/1 var(--adaptum-font-text); color: rgb(244 237 225 / .7); }
.mf .ualert { position: absolute; right: 18px; top: 99px; font: 500 6.5px/1 var(--adaptum-font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgb(226 168 99 / .6); transition: color .3s; }
.over .mf .ualert { color: #E2A863; }
.mod.on .pct { color: #8FE3C3; }
.over .pct { color: #E2A863 !important; }
.acc em { display: grid; font-style: normal; }
.acc em > i { grid-area: 1 / 1; font-style: normal; text-align: right; transition: opacity .4s; }
.acc em > i:last-child { opacity: 0; }
.mod.on .acc em > i:first-child { opacity: 0; }
.mod.on .acc em > i:last-child { opacity: 1; }
/* 2 redaction: detected (amber) until the toggle redacts it. .flip is the toggle: the tour sets it, and a click or drag flips it. */
.lines3 { position: absolute; left: 16px; top: 36px; right: 12px; transform: translateZ(10.5px); display: grid; gap: 7px; font: 500 8px/1.3 var(--adaptum-font-text); color: rgb(244 237 225 / .75); }
.lines3 p { margin: 0; white-space: nowrap; }
.lines3 mark { color: #F4EDE1; background: rgb(226 168 99 / .32); box-shadow: inset 0 -1.5px #E2A863; border-radius: 2px; padding: 0 2px; transition: background .5s, color .5s, box-shadow .5s; }
.mod.flip .lines3 mark { color: transparent; background: #050B16; box-shadow: none; }
.pill3 { position: absolute; left: 41px; top: 86px; width: 68px; height: 30px; border-radius: 30px; background: rgb(8 15 28 / .6); transform: translateZ(10.5px); transition: background .5s; cursor: pointer; touch-action: none; }
.pill3 s:first-child { left: 15px; } .pill3 s:last-child { left: 53px; }
.mod.flip .pill3 { background: #1F7A60; }
.togk { left: 44px; top: 89px; width: 24px; height: 24px; border-radius: 50%; cursor: grab; touch-action: none; transform: translateX(calc(var(--t, 0) * 38px)); transition: transform .6s cubic-bezier(.3,1.3,.4,1); }
.mod.flip .togk { --t: 1; }
/* 3 what Ai sees: records, two attached */
.recs { position: absolute; left: 16px; top: 34px; right: 16px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; transform: translateZ(10.5px); }
.recs i { display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 7px; font: 500 6.5px/1 var(--adaptum-font-text); font-style: normal; color: rgb(244 237 225 / .62); background: rgb(244 237 225 / .1); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .14); transition: background .5s, box-shadow .5s, transform .5s, color .5s, opacity .5s; }
.recs b { display: block; width: 11px; height: 11px; color: rgb(244 237 225 / .6); transition: color .5s; }
.mod.on .recs i { opacity: .45; }
.mod.on .recs i.pick3 { opacity: 1; color: #F4EDE1; background: rgb(95 180 155 / .45); box-shadow: inset 0 0 0 1.5px #8FE3C3; transform: translateY(-3px); }
.mod.on .recs i.pick3 b { color: #8FE3C3; }
/* 4 memory: review one, remove one */
.mem3 { position: absolute; left: 16px; right: 12px; top: 36px; display: grid; justify-items: start; gap: 7px; transform: translateZ(10.5px); }
.mem3 i { display: flex; align-items: center; gap: 0; height: 17px; padding: 0 7px; border-radius: 5px; font: 500 7.5px/1 var(--adaptum-font-text); font-style: normal; white-space: nowrap; color: rgb(244 237 225 / .78); background: rgb(244 237 225 / .1); text-decoration: line-through transparent; transition: background .6s, color .6s, opacity .6s, text-decoration-color .6s, gap .6s; }
.mem3 b { display: block; width: 0; height: 9px; overflow: hidden; color: #8FE3C3; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.mod.on .mem3 i:nth-child(1) { gap: 4px; background: rgb(143 227 195 / .22); color: #F4EDE1; }
.mod.on .mem3 i:nth-child(1) b { width: 9px; }
.mod.on .mem3 i:nth-child(2) { opacity: .4; text-decoration-color: #E2A863; }
/* 5 access: team, level */
.acc { position: absolute; left: 16px; right: 14px; top: 34px; display: grid; gap: 7px; transform: translateZ(10.5px); }
.acc > span { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 6px; row-gap: 3px; align-items: center; }
.acc u { grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font: 600 5.5px/1 var(--adaptum-font-mono); color: #18253B; background: rgb(244 237 225 / .55); }
.acc b { font: 500 7.5px/1 var(--adaptum-font-text); color: rgb(244 237 225 / .8); }
.acc em { font: 500 6px/1 var(--adaptum-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8FE3C3; }
.acc s { grid-column: 2 / span 2; height: 4px; border-radius: 3px; background: rgb(244 237 225 / .14); position: relative; overflow: hidden; }
.acc s::after { content: ""; position: absolute; inset: 0; background: #8FE3C3; transform: scaleX(var(--a0)); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.mod.on .acc s::after { transform: scaleX(var(--a1)); }

@media (prefers-reduced-motion: reduce) { .t > b, .mod *, .mod > .lift { transition: none !important; } .picks .bar i.run { animation: none; } }
/* Phones: the scaled field sat low in its scene, leaving a gap above and running into the card's bottom padding. */
@media (max-width: 560px) { .tiles-scene { aspect-ratio: 1 / .66; } .tiles-fit { translate: 0 -20vw; } .console-scene { aspect-ratio: 1 / .66; } }

/* ---------- Data Vault: record graph ---------- */
.vault3 { padding: clamp(88px, 10vw, 140px) 0; }
.vault-scene { position: relative; width: 100%; aspect-ratio: 1 / .9; max-width: 660px; margin-inline: auto; perspective: 1700px; perspective-origin: 50% 30%; }
.vfit { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -250px 0 0 -260px; transform-style: preserve-3d; }
.vplane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--vpx, 58deg)) rotateZ(var(--vz, -45deg)); }
.vplane .floor { position: absolute; inset: 0; border-radius: 40px; background: rgb(24 37 59 / .045); box-shadow: inset 0 0 0 1px rgb(24 37 59 / .06); }
.vplane .shade { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(24 37 59 / .2), transparent); filter: blur(24px); transform: translateZ(-30px); }
.vlinks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(1px); }
.vlinks path { fill: none; stroke: var(--adaptum-viridian); stroke-width: 1.6; stroke-opacity: .45; stroke-dasharray: 3 6; transition: opacity .6s; }
.vlinks .flowdot { fill: var(--adaptum-viridian); }
.vlinks .g { transition: opacity .6s; }
.vn { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform-style: preserve-3d;
  translate: var(--tx, 0px) var(--ty, 0px); transition: translate 1s cubic-bezier(.2,.8,.2,1) var(--dl, 0ms), scale .36s cubic-bezier(.4,0,.2,1); }   /* translate (not transform) so the token scale never pulls positions inward */
.vault3.moving .vn { scale: .26; }   /* travel as small tokens so cubes never touch (sections3d.js) */
.vn > b { position: absolute; transition: transform .45s cubic-bezier(.2,.8,.2,1), background .6s; transition-delay: var(--dl, 0ms); }
.vn .f { inset: 0; border-radius: 0; transform: translateZ(var(--h)); background: #fff; box-shadow: inset 0 0 0 1px rgb(24 37 59 / .06); display: grid; place-items: center; }
.vn .fi { display: grid; place-items: center; transform: rotate(calc(var(--vz, -45deg) * -1)); transform-origin: 50% 50%; }
.vn .ws { left: 0; top: 100%; width: 100%; height: 100px; transform-origin: top; transform: rotateX(90deg) scaleY(var(--k)); background: #CFC6B5; }
.vn .ww { left: -100px; top: 0; width: 100px; height: 100%; transform-origin: right; transform: rotateY(90deg) scaleX(var(--k)); background: #E2DACB; }
.vn .f .ico { width: 30px; height: 30px; } .vn.vk-core .f .ico { width: 44px; height: 44px; }
.vn.vk-person .f .ico { color: #8A5A12; }
.vn .f .av { display: block; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(24 37 59 / .2); }
.vn.vk-doc3 .f .ico { color: #3B5B8A; }
.vn.vk-proj .f .ico { color: var(--adaptum-viridian); }
.vn.vk-core .f { background: linear-gradient(145deg, #2E9172, #17604C); box-shadow: none; }
.vn.vk-core .ws { background: #0E3A2F; } .vn.vk-core .ww { background: #155443; }
.vn.vk-core .f .ico { color: #fff; }
@media (max-width: 560px) { .vault-scene { aspect-ratio: 1 / .78; } }

/* Blocks: exact walls (no overshoot at the silhouette corners). An inner wall on the
   back diagonal, in the darker side colour, sits behind the front vertical edge so the
   antialiased seam between the two visible walls never shows the background. */
.t .wd, .vn .wd { left: 0; top: 0; width: 141.42%; height: 100px; transform-origin: 0 0; transform: rotateZ(45deg) rotateX(90deg) scaleY(var(--kd, 0)); }
.t .wd { background: #CFC6B5; } .t.lit .wd { background: #0E3A2F; } .t.mint .wd { background: #86AEA0; }
.vn .wd { background: #CFC6B5; } .vn.vk-core .wd { background: #0E3A2F; }

/* Faces use solid background-color only: gradients are images and can't transition, which made
   dropping tops flash transparent. A soft sheen sits on top as an overlay instead. */
.t .f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgb(255 255 255 / .16), rgb(0 0 0 / .06)); }

/* Angular background on the whole section, unique to each one, behind a free-floating 3D graphic.
   Large hard-edged facets in translucent bone tints (they work on white and on Bone) meet at an apex
   behind the graphic. One soft radial fade from that apex takes them out before the section's top
   and bottom edges. Shapes echo each section:
     Vault   a five-sided, off-balance pyramid (many records gathered at one point)
     Start   an isometric cube corner, three faces (one block to start)
     Control a wide prism split by two thin light beams (a console with signals running through it) */
.s3 { position: relative; isolation: isolate; --fx: 68%; --fy: 50%; }
.flip3 { --fx: 32%; }
.s3::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --d1: rgb(120 92 48 / .03); --d2: rgb(120 92 48 / .065); --d3: rgb(120 92 48 / .1); --l1: rgb(255 255 255 / .55);
  -webkit-mask: radial-gradient(96% 48% at var(--fx) 50%, #000 0%, rgb(0 0 0 / .78) 16%, rgb(0 0 0 / .5) 38%, rgb(0 0 0 / .24) 62%, rgb(0 0 0 / .08) 84%, transparent 100%);
  mask: radial-gradient(96% 48% at var(--fx) 50%, #000 0%, rgb(0 0 0 / .78) 16%, rgb(0 0 0 / .5) 38%, rgb(0 0 0 / .24) 62%, rgb(0 0 0 / .08) 84%, transparent 100%);
}
.vault3::before {
  background:
    radial-gradient(26% 36% at var(--fx) var(--fy), rgb(255 255 255 / .55), transparent 80%),
    conic-gradient(from 196deg at var(--fx) var(--fy), var(--d2) 0 17.8%, var(--l1) 18.1% 33.8%, var(--d1) 34.1% 55.8%, var(--d3) 56.1% 69.8%, var(--d1) 70.1% 88.8%, var(--d2) 89.1%);
}
.start3::before {
  background:
    radial-gradient(22% 30% at var(--fx) var(--fy), rgb(255 255 255 / .5), transparent 80%),
    conic-gradient(from -60deg at var(--fx) var(--fy), var(--l1) 0 33.2%, var(--d3) 33.5% 66.5%, var(--d1) 66.8% 99.7%, var(--l1) 100%);
}
.control3::before {
  background:
    radial-gradient(24% 34% at var(--fx) var(--fy), rgb(255 255 255 / .5), transparent 80%),
    conic-gradient(from 248deg at var(--fx) var(--fy), var(--d1) 0 11.8%, var(--l1) 12% 14.8%, var(--d2) 15% 46.8%, var(--l1) 47% 49.3%, var(--d3) 49.5% 61.8%, var(--d1) 62%);
}
@media (max-width: 960px) {
  .s3, .flip3 { --fx: 50%; --fy: 72%; }
  .s3::before { -webkit-mask: radial-gradient(130% 48% at 50% 55%, #000 0%, rgb(0 0 0 / .78) 16%, rgb(0 0 0 / .5) 38%, rgb(0 0 0 / .24) 62%, rgb(0 0 0 / .08) 84%, transparent 100%); mask: radial-gradient(130% 48% at 50% 55%, #000 0%, rgb(0 0 0 / .78) 16%, rgb(0 0 0 / .5) 38%, rgb(0 0 0 / .24) 62%, rgb(0 0 0 / .08) 84%, transparent 100%); }
}
/* How we start is a giant inset card rather than an edge-to-edge band. The top margin opens a page-colour gap so the card does not merge with the matching redaction band above. */
.start3 { margin-inline: clamp(10px, 1.6vw, 24px); margin-top: clamp(16px, 2.6vw, 40px); border-radius: clamp(22px, 2.6vw, 40px); overflow: clip; }
.vplane .floor, .tiles .floor { background: linear-gradient(135deg, rgb(255 255 255 / .6), rgb(24 37 59 / .06)); box-shadow: inset 0 0 0 1px rgb(24 37 59 / .06), inset 1px 1px 0 rgb(255 255 255 / .8); }
.s3 { overflow-x: clip; }
.start3 { overflow: clip; }

/* How we start: department tags (sections3d.js), 2D and anchored to the tops of tile columns. */
.dept-tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.dept { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--adaptum-ink); font: 500 12.5px/1 var(--adaptum-font-text); box-shadow: 0 1px 0 rgb(24 37 59 / .05), 0 8px 20px -10px rgb(24 37 59 / .45);
  opacity: 0; scale: .9; transition: opacity .45s ease, scale .45s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.dept::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9DC1B5; }
.dept.first { background: var(--adaptum-viridian); color: #fff; }
.dept.first::before { background: #BDE8D6; }
.dept.on { opacity: 1; scale: 1; }
@media (max-width: 560px) { .dept { font-size: 11px; padding: 5px 9px 5px 8px; } }

/* ---------- Models: route board (modelsSection in sections3d.js) ----------
   Vault blocks (.vn) on a Vault-style plane. Work tiles on the near edge, model tiles on the far edge,
   the private model inside a Viridian "your cloud" bay. Text lives in 2D tags pinned to the tiles. */
.models3 { padding: clamp(88px, 10vw, 140px) 0; }
.models-scene { position: relative; width: 100%; aspect-ratio: 1 / .86; max-width: 680px; margin-inline: auto; perspective: 1700px; perspective-origin: 50% 30%; }
.mfit { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -256px 0 0 -280px; transform-style: preserve-3d; pointer-events: none; }
.mfit .vn { pointer-events: auto; cursor: pointer; }
.mplane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--mpx, 58deg)) rotateZ(var(--vz, -45deg)); }
.mplane .floor { position: absolute; inset: 0; border-radius: 40px; background: linear-gradient(135deg, rgb(255 255 255 / .6), rgb(24 37 59 / .06)); box-shadow: inset 0 0 0 1px rgb(24 37 59 / .06), inset 1px 1px 0 rgb(255 255 255 / .8); }
.mplane .shade { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgb(24 37 59 / .2), transparent); filter: blur(24px); transform: translateZ(-30px); }
.mfence { position: absolute; left: calc(50% + 165px - 60px); top: calc(50% + 185px - 60px); width: 120px; height: 120px; border-radius: 22px; background: rgb(18 77 62 / .08); box-shadow: inset 0 0 0 1.5px rgb(18 77 62 / .3); transform: translateZ(1px); }
.mlinks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(1px); }
.mlinks path { fill: none; stroke: var(--adaptum-ink); stroke-width: 1.6; stroke-opacity: .38; stroke-dasharray: 3 6; }
.mlinks .priv path { stroke: var(--adaptum-viridian); stroke-opacity: .6; }
.mlinks .g { transition: opacity .6s; }
.mlinks .flowdot { fill: var(--adaptum-viridian); }
/* Allowance plate: a glassy sheet over the model column, at the allowance height (Usage item only). */
.mcap { position: absolute; left: calc(50% + 165px - 48px); top: calc(50% - 262px); width: 96px; height: 512px; border-radius: 14px; background: rgb(255 255 255 / .42); box-shadow: inset 0 0 0 1.5px rgb(24 37 59 / .42), 0 0 0 4px rgb(255 255 255 / .35);
  opacity: 0; transform: translateZ(calc(var(--cz, 120px) - 40px)); transition: opacity .5s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.models3[data-mode="1"].in .mcap { opacity: 1; transform: translateZ(var(--cz, 120px)); }
/* Blocks: the Vault faces, with a slower lift so usage columns rise like the How we start tiles.
   Model tiles have four looks, all solid colours that cross-fade (.6s):
     idle     white top, bone walls, grey mark
     routed   the How we start mint: pale top, sage walls, Ink mark (.on)
     just hit Viridian top, deep walls, white mark for 0.9 s after a route lands, then back to mint (.hit)
     private  always Viridian once routed (its own bay) */
.models3 .vn > b { transition: transform .8s cubic-bezier(.2,.8,.2,1), background-color .6s ease, box-shadow .6s ease; transition-delay: var(--dl, 0ms), 0ms, 0ms; }
.vn .mmk { display: block; width: 26px; height: 26px; background: var(--adaptum-ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background-color .6s ease; }
.vn.vk-model .f { background: #fff; }
.vn.vk-model .ws, .vn.vk-model .wd { background: #CFC6B5; } .vn.vk-model .ww { background: #E2DACB; }
.vn.vk-model:not(.on) .mmk { background: #8A93A3; }
.vn.vk-model.on .f { background: #D6E9E1; box-shadow: none; }
.vn.vk-model.on .ws, .vn.vk-model.on .wd { background: #86AEA0; } .vn.vk-model.on .ww { background: #A9CBBF; }
.vn.vk-model.hov:not(.on) .f { background: #F6F2EA; } .vn.vk-model.hov:not(.on) .mmk { background: var(--adaptum-ink); }
.vn.vk-model.on.hov .f { background: #E3F0EA; }
.vn.vk-model.hit .f, .vn.vk-priv.on .f { background: #23765F; box-shadow: none; }
.vn.vk-model.hit .mmk, .vn.vk-priv.on .mmk { background: #fff; }
.vn.vk-model.hit .ws, .vn.vk-model.hit .wd, .vn.vk-priv.on .ws, .vn.vk-priv.on .wd { background: #0E3A2F; }
.vn.vk-model.hit .ww, .vn.vk-priv.on .ww { background: #155443; }
.vn.vk-priv:not(.on) .f { background: #E6EFEA; } .vn.vk-priv:not(.on) .mmk { background: var(--adaptum-viridian); }
.vn.vk-task .f { background: #F6F2EA; }
.vn.vk-task .f .ico { width: 30px; height: 30px; color: #3B475B; }
.vn.vk-task.vk-core .f .ico { width: 30px; height: 30px; color: #fff; }
.vn.vk-task.vk-core .f { background: #23765F; box-shadow: none; }
.mlinks .g.hi path { stroke-opacity: .75; stroke-dasharray: none; }
.mlinks .senddot { fill: var(--adaptum-viridian); stroke: #fff; stroke-width: 2; }

/* 2D tags (same pill as the How we start departments). Position is a transform set every frame;
   fades use opacity and scale, and the little shake uses the separate translate property, so nothing
   fights the pinning. */
.mtags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mtags > * { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; opacity: 0; scale: .92; transform-origin: 30px 100%; transition: opacity .35s ease, scale .45s cubic-bezier(.2,.8,.2,1), background-color .3s ease, box-shadow .3s ease; }
.mtags > .on { opacity: 1; scale: 1; }
.mtags > .nope { animation: mnope .45s cubic-bezier(.3,0,.3,1); }
@keyframes mnope { 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } }
.mtag { appearance: none; border: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; background: #fff; color: var(--adaptum-ink);
  font: 500 12.5px/1 var(--adaptum-font-text); box-shadow: 0 1px 0 rgb(24 37 59 / .05), 0 8px 20px -10px rgb(24 37 59 / .45); }
.mtags > .mtag.on { pointer-events: auto; }
.mtag:hover { box-shadow: 0 1px 0 rgb(24 37 59 / .05), 0 10px 24px -10px rgb(24 37 59 / .55), inset 0 0 0 1px #9DC1B5; }
.touched .mtag.sel { box-shadow: 0 1px 0 rgb(24 37 59 / .05), 0 8px 20px -10px rgb(24 37 59 / .45), inset 0 0 0 1.5px var(--adaptum-viridian); }
.mtag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9DC1B5; }
.mtag .to { display: inline-grid; overflow: hidden; color: var(--adaptum-viridian); }
.mtag .to > span { display: inline-flex; align-items: center; gap: 5px; }
.mtag .to > .swap { animation: mswap .5s cubic-bezier(.2,.8,.2,1); }
@keyframes mswap { from { opacity: 0; translate: 0 70%; } }
.mtag .mmk { display: block; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mtag.priv { background: var(--adaptum-viridian); color: #fff; } .mtag.priv::before { background: #BDE8D6; } .mtag.priv .to { color: #BDE8D6; }
.mtag.priv:hover { box-shadow: 0 10px 24px -10px rgb(18 77 62 / .6); }
.mval, .mname { transform-origin: 50% 100%; }
.mval { padding: 4px 7px; border-radius: 6px; background: var(--adaptum-ink); color: #fff; font: 500 11px/1 var(--adaptum-font-mono); font-variant-numeric: tabular-nums; }
.mname { padding: 5px 9px; border-radius: 7px; background: var(--adaptum-ink); color: #fff; font: 500 12px/1 var(--adaptum-font-text); font-variant-numeric: tabular-nums; }
.mcap-t { padding: 4px 8px; border-radius: 6px; background: #fff; color: var(--adaptum-ink); box-shadow: inset 0 0 0 1px rgb(24 37 59 / .3); font: 500 11px/1 var(--adaptum-font-mono); transform-origin: 50% 100%; }
.mcloud-t { padding: 4px 8px; border-radius: 6px; background: #E6EFEA; color: var(--adaptum-viridian); font: 500 10.5px/1 var(--adaptum-font-mono); letter-spacing: .12em; text-transform: uppercase; transform-origin: 50% 0; }
.mteam { display: inline-flex; align-items: center; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -12px rgb(24 37 59 / .5); font: 500 12.5px/1 var(--adaptum-font-text); color: var(--adaptum-ink); }
.mteam img { width: 26px; height: 26px; border-radius: 50%; margin-right: -8px; box-shadow: 0 0 0 2px #fff; }
.mteam img:last-of-type { margin-right: 8px; }
@media (max-width: 960px) { .flip3 .wrap > .models-scene { order: 2; } }
@media (max-width: 560px) { .models-scene { aspect-ratio: 1 / .8; } .mtag { font-size: 11px; padding: 5px 9px 5px 8px; } .mtag .to .mmk { display: none; } }

/* Background: two long facets converging behind the board, like routes meeting at one point. */
.models3::before {
  background:
    radial-gradient(24% 34% at var(--fx) var(--fy), rgb(255 255 255 / .55), transparent 80%),
    conic-gradient(from 150deg at var(--fx) var(--fy), var(--d1) 0 21.8%, var(--l1) 22% 30.8%, var(--d3) 31% 52.8%, var(--d2) 53% 76.8%, var(--l1) 77% 79.8%, var(--d1) 80%);
}