/* Services: the 22 ways to build, by the bot who leads them. The factory
   method's fixed stage (generated locked-camera scenes, Kling clips scrubbed
   by scroll) with a scrolling catalogue column over a left-hand shade, so a
   list of 22 reads at the reader's pace. On a phone the stage is a band under
   the top bar and the column flows beneath it. Type and colours as on the
   team page: Bits amber, Bytes violet, Bots cyan. */
:root{color-scheme:dark;--sc-canvas:#050914;--sc-ink:#f2f6fd;--sc-ink-soft:#b8c7db;--sc-accent:#9be5ff;--sc-font-text:Inter,Arial,sans-serif;--sc-font-display:"Inter Tight",Arial,sans-serif;--ink:#f2f6fd;--muted:#b8c7db;--dim:#94a6c0;--line:#a6bcdb2e;--bots:#9be5ff;--bytes:#c2a0fa;--bits:#ffc27b;--accent:#dfe8f5;--team:#dfe8f5;--mast:var(--bbb-nav-h,72px);--gutter:4.5vw;--col:min(46vw,640px);--band:300px}
html{scroll-behavior:auto}
body{margin:0;background:#050914;color:var(--ink);font:16px/1.5 Inter,Arial,sans-serif;position:relative}
body[data-bot=bits]{--accent:var(--bits)}body[data-bot=bytes]{--accent:var(--bytes)}body[data-bot=bots]{--accent:var(--bots)}
[data-bot=bits]{--team:var(--bits)}[data-bot=bytes]{--team:var(--bytes)}[data-bot=bots]{--team:var(--bots)}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:5px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a8e9ff;outline-offset:5px}
.skip{position:fixed;left:20px;top:-80px;z-index:200;background:#fff;color:#07111d;padding:12px 20px}.skip:focus{top:15px}

/* The top bar is the shared include: /site/nav.js and /site/nav.css. Its
   measured height is --bbb-nav-h, which --mast follows. */

/* The stage and the shade the column reads over */
.sc-world__seg>img,.sc-world__seg>video{object-fit:cover;object-position:center}
.is-motion .sc-world{overflow:hidden}
.shade,.band-fade{display:none}
.is-motion .shade{display:block;position:fixed;left:0;top:0;bottom:0;width:60vw;max-width:1000px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#050914fa 0%,#050914ec 76%,#05091470 90%,#05091400 100%)}

/* The column: absolute over the engine's scroll track in motion mode, normal
   flow in the still version */
#page{position:relative;z-index:3}
.is-motion #page{position:absolute;top:0;left:0;right:0}
.is-motion #catalogue>section{padding-left:var(--gutter)}
.is-motion #catalogue>section>*{max-width:var(--col)}
.is-motion .scene{display:none}
.scene{margin:0;background:#050914}.scene img{display:block;width:100%;height:auto}

.location,.role{display:block;margin:0 0 16px;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--team)}
.hero{padding:calc(var(--mast) + 11vh) 0 0;min-height:112vh}
.hero h1{margin:0 0 20px;font:700 clamp(46px,6.2vw,96px)/1 "Inter Tight",Arial,sans-serif;letter-spacing:-.045em;text-wrap:balance}
.hero .lead{font:500 clamp(18px,1.6vw,24px)/1.35 "Inter Tight",Arial,sans-serif;letter-spacing:-.01em;color:#eef4fd;margin:0 0 14px}
.hero p{max-width:46ch;color:#c0cedf;font-size:clamp(14px,1.12vw,17px);line-height:1.6;margin:0}
.jumps{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.jumps a{display:flex;flex-direction:column;gap:4px;padding:10px 14px 11px;border:1px solid #a6bcdb3a;border-radius:6px;background:#091320cc;text-decoration:none;min-width:150px}
.jumps a b{font:600 13px/1 "Inter Tight",Arial,sans-serif;color:var(--team)}
.jumps a span{font:500 11px/1.3 "JetBrains Mono",monospace;color:#9fb4cc}
.jumps a:hover{border-color:var(--team)}

/* A station: its heading, then its services as rows */
.team{padding:22vh 0 8vh}
.station h2,.closing h2{margin:0;font:700 clamp(36px,4.2vw,64px)/1.02 "Inter Tight",Arial,sans-serif;letter-spacing:-.045em;text-wrap:balance}
.rows{margin:28px 0 0;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line);position:relative}
.row summary{list-style:none;display:grid;grid-template-columns:16px 34px 1fr 20px;grid-template-areas:"g n name m" ". . pitch m";column-gap:12px;row-gap:3px;align-items:center;padding:15px 0 14px;cursor:pointer}
.row summary::-webkit-details-marker{display:none}
.block{grid-area:g;width:13px;height:13px;border-radius:3px;align-self:start;margin-top:6px;background:linear-gradient(160deg,#ffffffe0,color-mix(in srgb,var(--team) 70%,#fff) 40%,var(--team) 100%);border:1px solid #ffffffb0;box-shadow:0 0 10px color-mix(in srgb,var(--team) 70%,transparent),inset 0 0 4px #ffffff80}
.row .n{grid-area:n;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--team);align-self:start;margin-top:7px}
.row .name{grid-area:name;font:600 clamp(18px,1.5vw,22px)/1.2 "Inter Tight",Arial,sans-serif;letter-spacing:-.02em;color:#eef4fd}
.row .pitch{grid-area:pitch;font-size:13.5px;color:var(--dim);line-height:1.4}
.row .mark{grid-area:m;width:20px;height:20px;position:relative;align-self:start;margin-top:3px;opacity:.7}
.row .mark::before,.row .mark::after{content:"";position:absolute;left:4px;right:4px;top:9px;height:2px;background:#dfe8f5;border-radius:2px;transition:transform .2s}
.row .mark::after{transform:rotate(90deg)}
.row[open] .mark::after{transform:rotate(0)}
.row summary:hover .name,.row[open] .name{color:#fff}
.row[open]::before{content:"";position:absolute;left:-16px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--team)}
.detail{padding:2px 0 22px 62px}
.detail p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:#c6d3e4;max-width:52ch}
.inc{margin:0 0 16px}
.inc b{display:block;font:600 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#9fb4cc;margin:0 0 9px}
.inc span{display:inline-block;margin:0 6px 6px 0;padding:6px 10px;border:1px solid #a6bcdb33;border-radius:999px;font:500 11.5px/1 "JetBrains Mono",monospace;color:#dfe8f5}
.talk{display:inline-flex;align-items:center;gap:18px;padding:10px 13px;background:#f2f6fd;color:#0a1220;border-radius:4px;font-size:12px;font-weight:700;text-decoration:none}
.talk:hover{background:var(--team)}

/* Before we begin, and the closing */
.faq{padding:12vh 0 0}
.faq h2{font:700 clamp(28px,2.8vw,40px)/1.05 "Inter Tight",Arial,sans-serif;letter-spacing:-.035em;margin:0 0 18px}
.faq details{border-top:1px solid var(--line)}.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:14px 30px 14px 0;font:600 15.5px/1.35 "Inter Tight",Arial,sans-serif;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:11px;font:400 20px/1 Inter,Arial,sans-serif;color:#9fb4cc}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:#c6d3e4;max-width:56ch}
.closing{padding:12vh 0 14vh}
.closing h2{margin-bottom:16px}
.closing p{font-size:clamp(14px,1.12vw,17px);line-height:1.6;color:#c0cedf;margin:0;max-width:44ch}
.end-cta{display:inline-flex;align-items:center;gap:22px;padding:12px 15px;background:#f2f6fd;color:#0a1220;border-radius:4px;font-size:12px;text-decoration:none;font-weight:700;margin-top:23px}
.end-cta:hover{background:var(--accent)}
.end-links{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0 0!important;font-size:12px!important;color:#c2d0e4!important}

/* Journey rail: Bits -> Bytes -> Bots */
.journey-rail{position:fixed;z-index:65;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:28px;align-items:center;padding:12px 25px 15px;background:#07111eea;border:1px solid #758ca43b;border-radius:40px;box-shadow:0 9px 22px #0005}
.journey-rail button{border:0;background:none;color:#8ba1bb;font-size:10px;display:flex;align-items:center;gap:8px;padding:4px 0;min-height:24px}
.journey-rail button i{height:5px;width:5px;border:1px solid #8ba1bb;border-radius:50%}
.journey-rail button[aria-current=step]{color:#f0f7ff}
.journey-rail button[data-jump=bits][aria-current=step] i{background:var(--bits);border-color:var(--bits)}
.journey-rail button[data-jump=bytes][aria-current=step] i{background:var(--bytes);border-color:var(--bytes)}
.journey-rail button[data-jump=bots][aria-current=step] i{background:var(--bots);border-color:var(--bots)}
.route-line{position:absolute;bottom:7px;left:28px;right:28px;height:1px;background:#62758950;overflow:hidden}
.route-line i{display:block;width:100%;height:100%;background:#b8dcec;transform:scaleX(0);transform-origin:left}
body:not(.is-motion) .journey-rail,body:not(.is-motion) #experience{display:none}

/* Still version: scene bands inline, the same column in normal flow */
body:not(.is-motion) .hero{padding:0 6vw 56px;min-height:0}
body:not(.is-motion) .hero>.scene{margin:0 -6vw 44px;max-width:none}
body:not(.is-motion) .team{padding:0 6vw 70px}
body:not(.is-motion) .team>.scene{margin:0 -6vw 32px}
body:not(.is-motion) .team>.station,body:not(.is-motion) .team>.rows,body:not(.is-motion) .faq,body:not(.is-motion) .closing,body:not(.is-motion) .hero>*{max-width:880px}
body:not(.is-motion) .faq,body:not(.is-motion) .closing{padding-left:0;padding-right:0}
.quiet-footer{padding:30px 6vw 60px;display:flex;justify-content:space-between;gap:25px;font-size:13px;border-top:1px solid #5c708b44}
.quiet-footer>span{color:#9eb2ca}.quiet-footer>a:first-child{font-weight:bold}.quiet-footer a{text-decoration:none}
.is-motion .quiet-footer{padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:84px}

@media(max-width:1050px){.journey-rail{gap:22px}}
@media(max-width:860px){
  :root{--gutter:20px;--col:none;--band:420px;--bbb-cue-max-h:calc(.72*var(--band) - 32px)}/* the scroll prompt stays inside the fixed band, above the row of blocks (y .72 of the band) */
  /* The stage is a band: the whole frame height under the top bar, cropped to
     the featured bot. It stays above the scrolling column (commit 84bc202), so
     the rows pass under the scene. Only the hero's kicker and heading sit over
     it (owner request, 26 Oct: "play behind the text instead of cutting it
     off"): the column's stacking context is opened so those two can rise above
     the band, placed over the frame's dark upper third, clear of the featured
     bot (frame rows 47-66%) and the blocks (72-87%). */
  .is-motion .sc-world{bottom:auto;height:calc(var(--mast) + var(--band));z-index:4}
  .is-motion .sc-world__seg>img,.is-motion .sc-world__seg>video{top:var(--mast);height:calc(100% - var(--mast));object-position:64% center}
  .is-motion .sc-world__seg[data-for=line]>img,.is-motion .sc-world__seg[data-for=line]>video{object-position:50% center}
  .is-motion .shade{display:none}
  .is-motion .band-fade{display:block;position:fixed;left:0;right:0;top:calc(var(--mast) + var(--band) - 64px);height:64px;z-index:5;pointer-events:none;background:linear-gradient(#05091400,#050914)}
  .is-motion #page{padding-top:calc(var(--mast) + var(--band));z-index:auto}
  .is-motion #catalogue>section{padding-left:20px;padding-right:20px}
  .is-motion #catalogue>section>*{max-width:none}
  .is-motion .hero{padding:22px 20px 0;min-height:0;position:relative}
  .hero{display:flex;flex-direction:column}
  .hero .location,.hero h1{position:absolute;left:20px;right:20px;margin:0;z-index:6}
  .is-motion .hero .location{top:calc(22px - var(--band))}
  .is-motion .hero h1{top:calc(50px - var(--band))}
  .hero h1::before{content:"";position:absolute;z-index:-1;inset:-30px -20px -34px -20px;border-radius:40px;background:radial-gradient(ellipse 70% 60% at 42% 48%,#050914d9,#050914a6 45%,#05091400 72%);pointer-events:none}
  /* Still view: the poster is a tall band with the same heading over it */
  body:not(.is-motion) .hero{position:relative}
  body:not(.is-motion) .hero>.scene img{height:var(--band);object-fit:cover;object-position:50% center}
  body:not(.is-motion) .hero .location{top:22px}
  body:not(.is-motion) .hero h1{top:50px}
  .hero h1{font-size:42px}.hero .lead{font-size:17px}.hero p{font-size:14px}
  .jumps{gap:6px}.jumps a{min-width:0;flex:1 1 calc(50% - 6px);padding:9px 11px}
  .is-motion .team{padding:64px 20px 10px}
  .station h2,.closing h2{font-size:34px}
  .row summary{grid-template-columns:13px 30px 1fr 20px;column-gap:10px}.row .name{font-size:18px}.row .pitch{font-size:13px}.detail{padding-left:53px}
  .row[open]::before{left:-12px}
  .faq{padding-top:56px}.closing{padding:56px 0 70px}
  .journey-rail{bottom:12px;left:112px;right:12px;transform:none;gap:8px;padding:9px 16px 12px;justify-content:space-between}.journey-rail button{font-size:9px;gap:5px}.journey-rail button i{width:4px;height:4px}
  body:not(.is-motion) .hero{padding:0 20px 36px}body:not(.is-motion) .hero>.scene{margin:0 -20px 28px}body:not(.is-motion) .team{padding:0 20px 44px}body:not(.is-motion) .team>.scene{margin:0 -20px 22px}
  .quiet-footer{flex-direction:column;font-size:12px;gap:15px;padding-left:20px;padding-right:20px}.is-motion .quiet-footer{padding-bottom:90px}
}
@media(max-width:860px) and (max-height:720px){:root{--band:360px}}
@media(max-height:650px) and (min-width:861px){.hero{padding-top:calc(var(--mast) + 6vh)}.hero h1{font-size:52px}.team{padding-top:16vh}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]){scroll-behavior:auto}html:not([data-motion=on]) .row .mark::before,html:not([data-motion=on]) .row .mark::after{transition:none}}