/* About page (builder P). Prefixes: ab- (page), chk/lg/pl/one (principle demos), tl- (example dashboard).
   Uses the kit: .phero, .section, .section--line, .section__head, .label, .h2, .lead, .tag, .tags, .btn, .link, .points, .spot, .mono-l, .dot, .tdot, .sk-free helpers.
   Added here (could be promoted into the kit): the star map markers, the tabbed principle explorer and its four demos,
   the tabbed example dashboard, the dot-portrait frame and the industry cards with their line icons. */

/* ============================== hero: Queensland in dots ============================== */
.phero--about .phero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.phero--about .phero__h1 { font-size: clamp(42px, 5.6vw, 90px); }
.phero--about .phero__copy { padding-top: clamp(0px, 3vw, 48px); }
.ab-mapwrap { justify-self: end; width: 100%; max-width: 520px; }
.ab-map { position: relative; width: 100%; max-width: none; justify-self: stretch; aspect-ratio: 8 / 10; }
.ab-map__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-map__layer { position: absolute; inset: 0; pointer-events: none; }
.ab-map__cap { margin-top: 14px; text-align: center; }

.ab-map__tropic { position: absolute; left: var(--tx, 0px); top: var(--ty, 70%); width: var(--tw, 60%); height: 0; border-top: 1px dashed rgba(255, 255, 255, .22); opacity: 0; transition: opacity .8s .6s; }
.ab-map.is-placed .ab-map__tropic { opacity: 1; }
.ab-map__tropic b { position: absolute; left: 0; bottom: 7px; padding: 3px 6px 3px 0; background: rgba(5, 5, 5, .72); font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 245, 244, .5); white-space: nowrap; }

/* Brisbane, lit lime */
.ab-bne { position: absolute; left: var(--px, -99px); top: var(--py, -99px); width: 0; height: 0; opacity: 0; transition: opacity .6s; }
.ab-map.is-placed .ab-bne, .ab-map.is-placed .ab-pin { opacity: 1; }
.ab-bne::before { content: ""; position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(198, 244, 50, .34), rgba(198, 244, 50, .1) 38%, transparent 68%); mix-blend-mode: screen; }
.ab-bne__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(5, 5, 5, .85), 0 0 16px var(--lime), 0 0 40px rgba(198, 244, 50, .6); }
.ab-bne__ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid rgba(198, 244, 50, .7); border-radius: 50%; }
html[data-motion="on"] .ab-bne__ring { animation: ab-ring 2.8s ease-out infinite; }
@keyframes ab-ring { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.ab-bne__lbl { position: absolute; right: 18px; top: -11px; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border: 1px solid rgba(198, 244, 50, .55); border-radius: 999px; background: rgba(5, 5, 5, .9); font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }

/* industry markers: rings that open a label on hover, focus or tap */
.ab-pin { position: absolute; left: var(--px, -99px); top: var(--py, -99px); z-index: 1; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .6s; }
.ab-pin i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; background: #050505; transition: transform .45s var(--ease), border-color .3s, box-shadow .3s; }
.ab-pin i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; transition: background .3s; }
.ab-pin span { position: absolute; top: 50%; left: 100%; margin-left: 2px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(5, 5, 5, .95); font: 400 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-6px, -50%); transition: opacity .25s, transform .45s var(--ease); }
.ab-pin.is-left span { left: auto; right: 100%; margin: 0 2px 0 0; transform: translate(6px, -50%); }
.ab-pin:hover span, .ab-pin:focus-visible span, .ab-pin.is-open span { opacity: 1; transform: translate(0, -50%); }
.ab-pin:hover i, .ab-pin:focus-visible i, .ab-pin.is-open i { transform: scale(1.55); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.ab-pin:hover i::after, .ab-pin:focus-visible i::after, .ab-pin.is-open i::after { background: var(--lime); }
.ab-pin:focus-visible { outline: 0; }
.ab-pin:focus-visible i { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ============================== how we work: tabbed explorer ============================== */
.ab-pr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.ab-pr__list { display: flex; flex-direction: column; align-self: start; width: 100%; border-top: 1px solid var(--line); }
.ab-pr__tab { position: relative; display: flex; align-items: baseline; gap: 18px; width: 100%; padding: clamp(20px, 2.5vw, 34px) 4px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: 500 clamp(26px, 3vw, 44px)/1.05 var(--sans); letter-spacing: -.045em; color: rgba(245, 245, 244, .46); transition: color .3s, padding .5s var(--ease); }
.ab-pr__n { min-width: 2ch; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); transition: color .3s; }
.ab-pr__tab:hover { color: #fff; }
.ab-pr__tab[aria-selected="true"] { color: #fff; padding-left: 16px; }
.ab-pr__tab[aria-selected="true"] .ab-pr__n { color: var(--lime); }
.ab-pr__tab::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .5s var(--ease); }
.ab-pr__tab[aria-selected="true"]::after { opacity: 1; transform: none; }
.ab-pr__tab:focus-visible { outline-offset: -2px; }
.ab-pr__stage { position: relative; min-height: 470px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); overflow: hidden; }
.ab-pr__panel { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 32px); height: 100%; padding: clamp(22px, 3vw, 40px); }
.ab-pr__panel[hidden] { display: none; }
html[data-motion="on"] .ab-pr__panel:not([hidden]) { animation: rjg-tabin .6s var(--ease); }
.ab-pr__p { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: rgba(245, 245, 244, .78); }

/* demo 1: launch checklist */
.chk { padding: 6px 20px 4px; border: 1px solid var(--line); border-radius: 14px; background: #0a0a0a; }
.chk__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.chk__count { font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.chk.is-all .chk__count { color: var(--lime); }
.chk__list li + li { border-top: 1px solid var(--line); }
.chk__item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: 16px; color: rgba(245, 245, 244, .88); transition: color .3s; }
.chk__item[aria-pressed="false"] { color: var(--muted); }
.chk__box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 7px; transition: background .3s, border-color .3s, box-shadow .4s; }
.chk__box svg { width: 14px; height: 14px; fill: none; stroke: #050505; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .45s var(--ease); }
.chk__item[aria-pressed="true"] .chk__box { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(198, 244, 50, .4); }
.chk__item[aria-pressed="true"] .chk__box svg { opacity: 1; transform: none; }
.chk__item:hover .chk__box { border-color: rgba(255, 255, 255, .5); }

/* demo 2: change log */
.lg { border: 1px solid var(--line); border-radius: 14px; background: #0a0a0a; padding: 6px 20px 8px; }
.lg__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg__add { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(5, 5, 5, .78); cursor: pointer; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 244, .88); transition: background .3s, color .3s, border-color .3s; }
.lg__add i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.lg__add:hover { background: #fff; color: #050505; border-color: #fff; }
.lg__list li { display: grid; grid-template-columns: 8px 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; color: rgba(245, 245, 244, .84); }
.lg__list li:first-child { border-top: 0; }
.lg__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: background .5s, box-shadow .5s; }
.lg__list li.is-new .lg__dot { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.lg__list time { font: 400 10.5px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.lg__list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-motion="on"] .lg__list li.is-new { animation: ab-login .7s var(--ease); }
@keyframes ab-login { from { opacity: 0; transform: translateY(-10px); background: rgba(198, 244, 50, .1); } to { opacity: 1; transform: none; background: transparent; } }

/* demo 3: jargon / plain English */
.pl { border: 1px solid var(--line); border-radius: 14px; background: #0a0a0a; padding: 6px 20px 8px; }
.pl__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pl__sw { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.pl__sw button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 400 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: background .3s, color .3s; }
.pl__sw button:hover { color: #fff; }
.pl__sw button[aria-pressed="true"] { background: #fff; color: #050505; }
.pl__rows li { padding: 15px 0; border-top: 1px solid var(--line); }
.pl__rows li:first-child { border-top: 0; }
.pl__j { display: block; font: 400 13.5px/1.45 var(--mono); letter-spacing: -.01em; color: var(--muted); }
.pl__p { display: block; font: 500 clamp(16px, 1.5vw, 19px)/1.35 var(--sans); letter-spacing: -.02em; color: #fff; }
html.js .pl__rows li { display: grid; align-content: center; min-height: 76px; }
html.js .pl__rows li > span { grid-area: 1 / 1; transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease), visibility 0s; }
html.js .pl[data-state="plain"] .pl__j, html.js .pl[data-state="jargon"] .pl__p { opacity: 0; visibility: hidden; transform: translateY(-8px); filter: blur(5px); transition: opacity .4s var(--ease), transform .5s var(--ease), filter .4s var(--ease), visibility 0s .4s; }
html.js .pl[data-state="jargon"] .pl__p { transform: translateY(8px); }
html[data-motion="off"] .pl__rows li > span { transition: none !important; }

/* demo 4: one point of contact */
.one { border: 1px solid var(--line); border-radius: 14px; background: #0a0a0a; padding: 0 clamp(18px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }
.one__top { padding: 14px 0; border-bottom: 1px solid var(--line); }
.one__row { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; margin: clamp(30px, 4vw, 48px) 0; }
.one__node { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); font: 500 clamp(15px, 1.5vw, 18px)/1.2 var(--sans); letter-spacing: -.02em; transition: border-color .5s, box-shadow .6s; }
.one__tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .5s var(--ease); font-style: normal; }
.one__tick svg { width: 13px; height: 13px; fill: none; stroke: #050505; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.one.is-done .one__tick { opacity: 1; transform: none; }
.one.is-done .one__node--b { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(198, 244, 50, .25), 0 0 44px rgba(198, 244, 50, .14); }
.one__line { position: relative; height: 1px; background: var(--line-2); }
.one__line i { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); opacity: 0; }
.one.is-go .one__line i { animation: ab-travel 1.1s var(--ease) both; }
@keyframes ab-travel { from { left: 0; opacity: 1; } to { left: calc(100% - 7px); opacity: 1; } }
.one__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.one__out { min-height: 1.5em; margin-top: 18px; font: 400 12.5px/1.5 var(--mono); color: rgba(245, 245, 244, .85); }
.one__out.is-on::before { content: "> "; color: var(--lime); }

/* ============================== the tools we built ============================== */
.ab-tools__head { margin-bottom: clamp(40px, 5vw, 72px); }
.ab-tools__head .h2 { max-width: 15ch; }
.ab-tools__head .lead { margin-top: 28px; max-width: 62ch; }
.ab-tools__cap { margin-top: 16px; text-align: center; }

.tl { overflow: hidden; border: 1px solid var(--line-2); border-radius: 20px; background: #0a0a0a; box-shadow: 0 60px 120px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .14); }
.tl__bar { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.tl__url { margin: 0 auto 0 14px; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.tl__body { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 520px; }
.tl__side { display: flex; flex-direction: column; gap: 22px; padding: 20px 14px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .012); }
.tl__ws { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.tl__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #050505; font: 600 10px/1 var(--mono); }
.tl__wn { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.tl__nav { display: grid; gap: 2px; }
.tl__tab { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font-size: 13.5px; color: rgba(245, 245, 244, .6); transition: background .3s, color .3s; }
.tl__tab svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tl__tab:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.tl__tab[aria-selected="true"] { background: rgba(255, 255, 255, .09); color: #fff; }
.tl__tab[aria-selected="true"] svg { stroke: var(--lime); }
.tl__tab:focus-visible { outline-offset: -2px; }
.tl__live { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 0 8px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tl__main { min-width: 0; padding: 22px 24px 26px; }
.tl__panel[hidden] { display: none; }
html[data-motion="on"] .tl__panel:not([hidden]) { animation: rjg-tabin .55s var(--ease); }
.tl__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tl__top--in { margin-bottom: 14px; }
.tl__card { padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.tl__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tl__kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.tl__kpi b { margin-top: 8px; font: 500 clamp(26px, 2.6vw, 34px)/1 var(--sans); letter-spacing: -.045em; }
.tl__kpi small { font: 400 11px/1.2 var(--mono); color: rgba(245, 245, 244, .7); }
.tl__chart { width: 100%; height: 150px; overflow: visible; }
.tl__chart path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tl__chart .gl { stroke: rgba(255, 255, 255, .07); stroke-width: 1; stroke-dasharray: 2 4; }
.tl__chart .c1 { stroke: #fff; stroke-width: 2; }
.tl__chart .c2 { stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.tl__chart .c3 { stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.tl__chart .cd { fill: var(--lime); filter: drop-shadow(0 0 6px rgba(198, 244, 50, .9)); }
html[data-motion="on"] .tl__panel:not([hidden]) .tl__chart .lines { animation: ab-reveal 1.8s .15s cubic-bezier(.5, .1, .25, 1) both; }
@keyframes ab-reveal { from { clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px -8px -8px -8px); } }
.tl__leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font: 400 10.5px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.tl__leg span { display: inline-flex; align-items: center; gap: 7px; }
.tl__leg b { font-weight: 500; color: #fff; }
.tl__leg i { width: 14px; height: 2px; border-radius: 1px; }
.tl__leg .k1 { background: #fff; } .tl__leg .k2 { background: rgba(255, 255, 255, .45); } .tl__leg .k3 { background: rgba(255, 255, 255, .22); }
.tl__maps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.tl__hm { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 420px; }
.tl__hm i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font: 400 10.5px/1 var(--mono); font-style: normal; cursor: default; transition: box-shadow .2s, filter .2s; }
.tl__hm i:hover { box-shadow: 0 0 0 1.5px #fff; filter: brightness(1.15); z-index: 2; }
.tl__hm .c1 { background: var(--lime); color: #050505; font-weight: 500; }
.tl__hm .c2 { background: rgba(255, 255, 255, .52); color: #050505; }
.tl__hm .c3 { background: rgba(255, 255, 255, .17); color: rgba(255, 255, 255, .78); }
.tl__hm .c4 { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .52); }
html[data-motion="on"] .tl__panel:not([hidden]) .tl__hm i { animation: ab-cell .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes ab-cell { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.tl__tip { position: absolute; left: 0; top: 0; z-index: 6; padding: 7px 10px; border-radius: 8px; background: #fff; color: #050505; font: 500 11px/1.2 var(--mono); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%) translateY(-6px); transition: opacity .15s, transform .25s var(--ease); }
.tl__tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #fff; transform: rotate(45deg); border-radius: 1px; }
.tl__tip.is-on { opacity: 1; transform: translate(-50%, -100%) translateY(-10px); }
.tl__mapside p { max-width: 36ch; font-size: 15px; line-height: 1.5; color: rgba(245, 245, 244, .72); }
.tl__key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; font: 400 10.5px/1 var(--mono); color: var(--muted); }
.tl__key span { display: inline-flex; align-items: center; gap: 7px; }
.tl__key i { width: 10px; height: 10px; border-radius: 3px; }
.tl__key .k-lime { background: var(--lime); } .tl__key .k-w { background: rgba(255, 255, 255, .52); } .tl__key .k-d { background: rgba(255, 255, 255, .12); }
.tl__hint { margin-top: 22px; opacity: .7; }

.tl__revs li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.tl__revs li:first-child { border-top: 0; padding-top: 4px; }
.tl__rav { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.tl__rb { display: grid; gap: 8px; min-width: 0; }
.tl__stars svg { display: block; width: 80px; height: 14px; fill: rgba(255, 255, 255, .85); }
.sk { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.sk--w45 { width: 45%; } .sk--w50 { width: 50%; } .sk--w55 { width: 55%; } .sk--w60 { width: 60%; } .sk--w65 { width: 65%; } .sk--w70 { width: 70%; }
.sk--w75 { width: 75%; } .sk--w80 { width: 80%; } .sk--w85 { width: 85%; } .sk--w90 { width: 90%; }
.tl__rs { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 244, .8); }
.tl__rs--ok { color: var(--muted); }
.tl__note { margin-top: 12px; opacity: .7; }

.tl__log li { display: grid; grid-template-columns: 8px 100px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; color: rgba(245, 245, 244, .84); }
.tl__log li:first-child { border-top: 0; padding-top: 2px; }
.tl__log li > i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.tl__log li > i.dot { width: 6px; height: 6px; background: var(--lime); }
.tl__log time { font: 400 10.5px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.tl__log span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tl__care { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tl__cc { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.tl__ci { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border: 1px solid rgba(198, 244, 50, .5); border-radius: 50%; background: rgba(198, 244, 50, .1); color: var(--lime); }
.tl__ci svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl__cc b { font: 500 20px/1.1 var(--sans); letter-spacing: -.03em; }
.tl__cc small { font: 400 11.5px/1.4 var(--mono); color: rgba(245, 245, 244, .66); }
.tl__strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; }
.tl__strip i { height: 38px; border-radius: 5px; background: rgba(255, 255, 255, .42); }
.tl__strip i.is-last { background: var(--lime); box-shadow: 0 0 12px rgba(198, 244, 50, .5); }

.tl__rep { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tl__doc { display: grid; gap: 8px; padding: 22px 22px 24px; border: 1px solid var(--line-2); border-radius: 6px; background: #101010; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); transform: rotate(-1.2deg); }
.tl__dh { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 400 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 245, 244, .7); }
.tl__dt { margin-top: 8px; font: 500 13px/1.2 var(--sans); letter-spacing: -.01em; color: #fff; }
.tl__repside p { max-width: 34ch; font-size: 15px; line-height: 1.5; color: rgba(245, 245, 244, .72); }
.tl__tl { display: grid; gap: 8px; margin-top: 20px; }
.tl__tl li { display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tl__tl li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }

.ab-tools .points { margin-top: clamp(40px, 5vw, 64px); }

/* ============================== who you'll deal with ============================== */
.ab-who__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ab-ryan { margin: 0; }
.ab-ryan__art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background-color: var(--bg-2); background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.3px); background-size: 22px 22px; background-position: 11px 11px; }
.ab-ryan__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-ryan figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.ab-who__copy .h2 { max-width: 12ch; }
.ab-who__copy .lead { margin-top: 28px; }
.ab-who__ph { display: grid; gap: 12px; justify-items: start; max-width: 56ch; margin-top: 28px; padding: 20px 22px; border: 1px dashed var(--line-2); border-radius: 16px; }
.ab-who__ph p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.ab-who__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.4vw, 40px); }

/* ============================== industries ============================== */
.ab-ind__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ab-ind__card { position: relative; display: flex; flex-direction: column; min-height: 270px; padding: 24px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); overflow: hidden; transition: border-color .4s; }
.ab-ind__card:hover { border-color: var(--line-2); }
.ab-ind__ic { width: 88px; height: 88px; margin-bottom: auto; fill: none; stroke: rgba(255, 255, 255, .58); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: stroke .5s, transform .7s var(--ease); }
.ab-ind__ic .l { stroke: var(--lime); }
.ab-ind__ic .dim { stroke: rgba(255, 255, 255, .26); }
.ab-ind__card:hover .ab-ind__ic { stroke: #fff; transform: translateY(-4px); }
.ab-ind__n { position: absolute; right: 20px; top: 20px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); transition: color .4s; }
.ab-ind__card:hover .ab-ind__n { color: var(--lime); }
.ab-ind__card h3 { margin-top: 36px; font: 500 clamp(20px, 1.8vw, 25px)/1.1 var(--sans); letter-spacing: -.04em; }
html[data-motion="on"] .ab-ind__ic .hook { transform-box: view-box; transform-origin: 46px 14px; }
html[data-motion="on"] .ab-ind__card:hover .hook { animation: ab-swing 1.6s ease-in-out infinite alternate; }
html[data-motion="on"] .ab-ind__card:hover .ab-ind__ic--tree { transform-origin: 50% 95%; animation: ab-sway 2.2s ease-in-out infinite alternate; }
html[data-motion="on"] .ab-ind__card:hover .spark { animation: ab-flick .5s steps(2, end) infinite; }
html[data-motion="on"] .ab-ind__card:hover .puffs circle { animation: ab-puff 1.4s ease-out infinite; }
html[data-motion="on"] .ab-ind__card:hover .puffs circle:nth-child(2) { animation-delay: .25s; }
html[data-motion="on"] .ab-ind__card:hover .puffs circle:nth-child(3) { animation-delay: .5s; }
html[data-motion="on"] .ab-ind__ic .hat, html[data-motion="on"] .ab-ind__ic .needle { transform-box: view-box; transform-origin: 32px 32px; }
html[data-motion="on"] .ab-ind__card:hover .hat { animation: ab-sway 1.8s ease-in-out infinite alternate; transform-origin: 32px 46px; }
html[data-motion="on"] .ab-ind__card:hover .needle { animation: ab-needle 2.6s ease-in-out infinite alternate; }
@keyframes ab-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes ab-sway { from { transform: translateY(-4px) rotate(-3deg); } to { transform: translateY(-4px) rotate(3deg); } }
@keyframes ab-flick { 0% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ab-puff { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes ab-needle { from { transform: rotate(-28deg); } to { transform: rotate(36deg); } }

/* ============================== responsive ============================== */
@media (max-width: 1100px) {
  .ab-ind__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .ab-pr { grid-template-columns: 1fr; }
  .ab-pr__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .ab-pr__tab { padding: 18px 4px; font-size: clamp(21px, 3.6vw, 30px); gap: 12px; }
  .ab-pr__tab[aria-selected="true"] { padding-left: 4px; }
  .ab-pr__tab::after { right: 4px; }
  .ab-pr__stage { min-height: 0; }
}
@media (max-width: 899px) {
  .phero--about .phero__grid { grid-template-columns: 1fr; }
  .phero--about .phero__copy { padding-top: 0; }
  .ab-mapwrap { order: 2; justify-self: center; max-width: 400px; }
  .ab-who__grid { grid-template-columns: 1fr; }
  .ab-ryan { max-width: 360px; }
  .tl__body { grid-template-columns: 1fr; min-height: 0; }
  .tl__side { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .tl__side::-webkit-scrollbar { display: none; }
  .tl__ws, .tl__live { display: none; }
  .tl__nav { display: flex; gap: 4px; }
  .tl__tab { flex: none; height: 36px; padding: 0 12px; white-space: nowrap; }
  .tl__maps, .tl__rep { grid-template-columns: 1fr; }
  .tl__hm { margin-inline: auto; }
  .tl__doc { max-width: 320px; }
}
@media (max-width: 760px) {
  .ab-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-ind__card { min-height: 220px; padding: 20px 18px; }
  .tl__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tl__kpi { padding: 12px 10px; }
  .tl__kpi b { font-size: 22px; }
  .tl__kpi small { display: none; }
  .tl__care { grid-template-columns: 1fr; }
  .tl__url { display: none; }
  .tl__bar .tag { margin-left: auto; }
  .tl__main { padding: 16px; }
  .tl__log li { grid-template-columns: 8px minmax(0, 1fr); }
  .tl__log time { display: none; }
  .lg__list li { grid-template-columns: 8px minmax(0, 1fr); }
  .lg__list time { display: none; }
  .lg__list span, .tl__log span { white-space: normal; }
}
@media (max-width: 480px) {
  .ab-pr__list { grid-template-columns: 1fr; }
  .one__row { grid-template-columns: auto minmax(24px, 1fr) auto; }
  .one__node { padding: 12px 12px; font-size: 14px; }
  .ab-pin span { font-size: 9.5px; padding: 7px 10px; }
}