/* A little idea becomes a whole world. Quiet construction, with character. */
:root {
  --bg:#101113; --surface:#191b1f; --surface-2:#25282d;
  --ink:#f5f6f8; --muted:#a5a9b1; --line:#34383f;
  --accent:#80b4ff; --accent-solid:#2563d4; --accent-soft:#19283d;
  --mint:#80b4ff; --header:rgba(16,17,19,.86); --draft:#668abd;
}
:root[data-theme=light] {
  --bg:#fff; --surface:#f5f6f8; --surface-2:#e9ecf0;
  --ink:#20242a; --muted:#636a75; --line:#d6dae0;
  --accent:#245db5; --accent-solid:#2563d4; --accent-soft:#eaf1fc;
  --mint:#245db5; --header:rgba(255,255,255,.88); --draft:#82a6d8;
}
html { scroll-padding-top:155px; }
.brand-dot { color:var(--accent); }
.header-cta:hover,.idea-form button:hover,.primary-button:hover { background:#1e54b8; border-color:#1e54b8; }
.hero { position:relative; isolation:isolate; padding-top:40px; padding-bottom:25px; }
.hero:before { content:none; }
.hero h1 { font-size:clamp(62px,5.7vw,83px); line-height:1.06; letter-spacing:-.055em; }
.hero-imagination { color:var(--ink); }
.hero-description { margin-block:18px; font-size:20px; }
.idea-form { max-width:432px; background:color-mix(in srgb,var(--surface),transparent 15%); border-color:var(--line); }
.hero .form-caption { display:none; }
.hero-construction { max-width:900px; margin:18px auto 0; }
.construction-stage { position:relative; width:100%; min-width:0; aspect-ratio:1000/510; }
.character-note { position:absolute; right:-1%; top:24%; width:125px; color:var(--muted); font-size:12px; line-height:1.35; text-align:left; transform:rotate(4deg); pointer-events:none; }
.assembly-controls { display:flex; align-items:center; justify-content:center; gap:18px; position:relative; z-index:10; }
.assembly-steps { display:flex; gap:4px; padding:5px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface),transparent 20%); border-radius:30px; }
.assembly-steps button { min-height:40px; border:0; border-radius:23px; background:transparent; color:var(--muted); font-size:12px; font-weight:500; padding:9px 17px; display:flex; gap:8px; align-items:center; }
.assembly-steps button>span { font-size:10px; opacity:.6; font-variant-numeric:tabular-nums; }
.assembly-steps button[aria-pressed=true] { background:var(--surface-2); color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent),transparent 35%); }
.assembly-steps button:hover { color:var(--ink); background:var(--surface-2); }
.assembly-steps button[aria-pressed=true]:hover { background:var(--surface-2); color:var(--accent); }
.assembly-replay { border:1px solid var(--line); border-radius:50%; width:46px; height:46px; background:var(--surface); color:var(--accent); display:grid; place-items:center; padding:0; }
.assembly-replay svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.assembly-replay:hover { background:var(--surface-2); }
.assembly-replay:disabled { opacity:.38; }
.assembly-caption { font-size:13px; color:var(--muted); margin:15px auto 0; min-height:38px; max-width:420px; line-height:1.5; }
.hero-bottom { margin-top:21px; }
/* This small face carries the character into the page's chapter navigation. */
.build-nav { position:sticky; top:64px; z-index:80; background:var(--header); border-top:1px solid var(--line); border-bottom:1px solid var(--line); backdrop-filter:blur(20px); }
.build-nav-inner { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:25px; }
.build-nav-intro { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--muted); white-space:nowrap; }
.little-idea { display:flex; gap:5px; align-items:center; justify-content:center; width:28px; height:30px; border-radius:11px 13px 11px 12px; background:linear-gradient(135deg,#f1f3f6,#b7bdc6); box-shadow:inset 1px 1px 2px #fff,inset -1px -1px 1px #80b4ff; transform:rotate(-8deg); }
.little-idea i { height:5px; width:3px; border-radius:5px; background:#303843; transform:rotate(8deg); }
.build-nav-links { display:flex; align-items:center; gap:32px; }
.build-nav-links a { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; padding-block:19px; }
.build-nav-links a>span { font-size:10px; color:var(--muted); }
.build-nav-links a:hover,.build-nav-links a[aria-current=step] { color:var(--accent); }
.build-nav-progress { position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent); width:100%; transform:scaleX(var(--build-progress,0)); transform-origin:left; }
.section { padding-block:115px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:500; letter-spacing:.015em; }
.section-heading { position:relative; }
#possibilities .heading-aside { max-width:380px; }
.capability-art { --bg:#f5f6f8; --surface:#fff; --surface-2:#e9ecf0; --ink:#303843; --muted:#66717e; --line:#b9c1cc; --accent:#346cb8; --accent-soft:#edf0f4; --mint:#346cb8; background:var(--bg); box-shadow:0 20px 60px rgba(12,16,22,.08); }
.world-example { background:var(--surface); }
.world-example>div { --line:#727b88; --muted:#aeb6c2; --ink:#dfe3e9; --accent:#80b4ff; --accent-soft:#25282d; --mint:#80b4ff; }
[data-theme=light] .world-example>div { --line:#b9c1cc; --muted:#66717e; --ink:#303843; --accent:#346cb8; --accent-soft:#edf0f4; --mint:#346cb8; }
.connections { --bg:#f5f6f8; --surface:#fff; --surface-2:#e9ecf0; --ink:#20242a; --muted:#636a75; --line:#d6dae0; --accent:#245db5; --accent-solid:#2563d4; --accent-soft:#edf0f4; --mint:#346cb8; --draft:#82a6d8; background:var(--bg); }
.connections .eyebrow { color:var(--accent); }
.connection-options label:has(input:checked) { border-color:#7ca3dc; background:#fff; }
.system-node,.system-core { box-shadow:0 12px 22px rgba(25,35,50,.065); }
.node-glyph { color:#346cb8; }
.system-logo { color:#636a75; }
.end-to-end { background:var(--surface); }
.engineering-grid { gap:0 42px; }
.engineering-item { position:relative; padding:32px 0 34px; border-top-color:transparent; }
.engineering-item:before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); transform-origin:left; }
.engineering-item .sketch-symbol { font-size:29px; color:var(--accent); }
.engineering-item h3 { font-size:22px; }
.engineering-item p { font-size:16px; }
.speed-number>div span { color:var(--ink); }
.speed-number svg { stroke:var(--accent); }
.delivery-tabs button[aria-selected=true]>span { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.delivery-tabs button::before { background:var(--accent); }
.delivery-panel { border:1px solid var(--line); background:var(--surface); }
.start-heading .idea-word { color:var(--ink); }
.brief-builder { border:1px solid var(--line); }
/* Construction happens to surfaces and illustrations; all real copy stays available. */
.js .reveal,.js .reveal:not(.is-visible) { opacity:1; transform:none; transition:none; }
.ink-art .floaty,.ink-art .blink { animation:none; }
[data-assemble] { --part-index:0; }
.assembly-surface { position:relative; isolation:isolate; }
.assembly-surface:after { content:""; position:absolute; inset:-7px; border:1px dashed var(--draft); border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; }
.assembly-ready .assembly-surface.is-assembled:after { animation:construction-outline 2.8s ease both; }
.assembly-ready .capability-art.is-assembled .ink-art .draw,
.assembly-ready .world-example.is-assembled .ink-art .draw { animation:construction-stroke 2.8s cubic-bezier(.3,.1,.15,1) both; }
.assembly-ready .capability-art.is-assembled .ink-art rect,
.assembly-ready .world-example.is-assembled .ink-art rect { animation:construction-fill 2.2s ease both; }
.assembly-ready .engineering-grid.is-assembled .engineering-item,
.assembly-ready .working-options.is-assembled>article,
.assembly-ready .faq-list.is-assembled>details { animation:construction-piece 1.35s cubic-bezier(.18,.7,.2,1) calc(var(--part-index)*.11s) both; }
.assembly-ready .engineering-grid.is-assembled .engineering-item:before { animation:construction-rule 1.5s ease calc(var(--part-index)*.12s) both; }
.assembly-ready .delivery.is-assembled .delivery-tabs button { animation:construction-piece 1.5s cubic-bezier(.18,.7,.2,1) calc(var(--part-index)*.15s) both; }
.assembly-ready .delivery.is-assembled .delivery-panel { animation:construction-piece 1.6s cubic-bezier(.18,.7,.2,1) .5s both; }
.assembly-ready .system-canvas.is-assembled .system-node,
.assembly-ready .system-canvas.is-assembled .system-core { animation:construction-node 1.8s cubic-bezier(.18,.7,.2,1) calc(var(--part-index)*.16s) both; }
.assembly-ready .system-canvas.is-assembled .system-wires path:not(.flow-path) { stroke-dasharray:1; stroke-dashoffset:0; animation:construction-stroke 2.6s cubic-bezier(.3,.1,.15,1) .4s both; }
.assembly-ready .system-canvas .flow-path { animation-duration:7s; }
.assembly-ready .speed-number.is-assembled svg path { stroke-dasharray:1; animation:construction-stroke 2s ease both; }
.assembly-ready .speed-number.is-assembled>div>span { animation:construction-piece 1.7s cubic-bezier(.18,.7,.2,1) both; }
.assembly-ready .brief-builder.is-assembled .field,
.assembly-ready .brief-builder.is-assembled .brief-services { animation:construction-piece 1.4s ease calc(var(--part-index)*.08s) both; }
@keyframes construction-outline { 0% { opacity:.9; clip-path:inset(0 100% 0 0); } 38% { opacity:.7; clip-path:inset(0); } 100% { opacity:0; clip-path:inset(0); } }
@keyframes construction-stroke { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes construction-fill { 0% { opacity:.18; translate:0 13px; } 100% { opacity:1; translate:none; } }
@keyframes construction-piece { from { translate:0 22px; } to { translate:none; } }
@keyframes construction-node { from { translate:0 27px; scale:.91; } to { translate:none; scale:1; } }
@keyframes construction-rule { from { transform:scaleX(0); } to { transform:scaleX(1); } }
[data-page-hidden=true] *,[data-assembly-offscreen] * { animation-play-state:paused!important; }
[data-assembly-complete] *,[data-motion=paused] [data-assemble] * { animation:none!important; translate:none!important; scale:1!important; }
[data-assembly-complete] .draw,[data-assembly-complete] .system-wires path:not(.flow-path),[data-motion=paused] .draw,[data-motion=paused] .system-wires path:not(.flow-path) { stroke-dashoffset:0!important; }
[data-assembly-complete].assembly-surface:after,[data-motion=paused] .assembly-surface:after { animation:none!important; opacity:0; }
[data-assembly-complete] .engineering-item:before,[data-motion=paused] .engineering-item:before { animation:none!important; transform:none; }
@media(max-width:1100px) {
  .hero h1 { font-size:clamp(58px,6.2vw,75px); }
  .character-note { right:-2%; font-size:11px; width:105px; }
  .build-nav-links { gap:22px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:139px; }
  .hero { padding-top:37px; }
  .hero h1 { font-size:clamp(37px,6.8vw,55px); letter-spacing:-.05em; }
  .hero-description { font-size:18px; margin-block:21px; }
  .hero-construction { margin-top:34px; margin-inline:-9px; }
  .construction-stage { aspect-ratio:1000/590; }
  .character-note { top:2%; right:27%; text-align:right; width:115px; font-size:10px; }
  .assembly-controls { gap:10px; margin-top:20px; }
  .assembly-steps { gap:0; padding:4px; }
  .assembly-steps button { min-height:38px; font-size:11px; padding:8px 10px; }
  .assembly-steps button>span { display:none; }
  .assembly-replay { width:42px; height:42px; }
  .assembly-caption { max-width:305px; font-size:12px; margin-top:13px; min-height:38px; }
  .hero-bottom { margin-top:15px; }
  .build-nav { top:60px; }
  .build-nav-inner { min-height:56px; justify-content:center; }
  .build-nav-intro { display:none; }
  .build-nav-links { width:100%; justify-content:space-between; gap:10px; }
  .build-nav-links a { gap:5px; font-size:11px; padding-block:17px; }
  .build-nav-links a>span { font-size:9px; }
  .section { padding-block:83px; }
  .engineering-grid { gap:0 28px; }
  .engineering-item { padding-block:27px; }
  .engineering-item h3 { font-size:21px; }
  .engineering-item p { font-size:15px; }
  .assembly-surface:after { inset:-5px; }
}
@media(max-width:380px) {
  .hero h1 { font-size:34px; }
  .hero-description { font-size:16px; }
  .assembly-steps button { padding-inline:8px; font-size:10px; }
  .assembly-controls { gap:8px; }
  .assembly-replay { width:38px; height:38px; }
  .build-nav-links a { font-size:10px; }
  .build-nav-links a>span { display:none; }
  .character-note { right:29%; }
}
@media(prefers-reduced-motion:reduce) {
  [data-assemble] * { animation:none!important; translate:none!important; scale:1!important; }
  .assembly-surface:after { animation:none!important; opacity:0!important; }
  .engineering-item:before { animation:none!important; transform:none!important; }
  .system-wires path:not(.flow-path),.draw { stroke-dashoffset:0!important; }
}