:root{--ink:#0f172a;--paper:#f3f4f1;--amber:#fbbf24;--muted:#475569;--line:#ced2cc;--header:80px}*{box-sizing:border-box}html{background:var(--paper);scroll-padding-top:var(--header)}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}a{color:inherit}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #a4510b;outline-offset:5px}.skip{position:fixed;top:-100px;left:16px;background:var(--amber);padding:12px 20px;z-index:20}.skip:focus{top:12px}.header{position:fixed;inset:0 0 auto;z-index:10;height:var(--header);padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:rgba(243,244,241,.96);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:20px;letter-spacing:-.8px;font-weight:800;white-space:nowrap}.brand svg{width:32px;height:32px;fill:var(--amber)}.brand path{stroke:var(--ink);stroke-width:2.5;fill:none}.brand-end{font-weight:400}.header-right{display:flex;align-items:center;gap:36px}.prototype-label,.eyebrow,.card-top,.stage-bottom,.chapters,.product-shot figcaption{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:1.3px;font-weight:500}.demo{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:44px;padding:12px 20px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:13px;font-weight:700}.demo:hover{background:#334155}.demo span{color:var(--amber);font-size:18px}.journey{height:calc(100svh - var(--header));margin-top:var(--header)}.enhanced .journey{height:350svh}.stage{height:calc(100svh - var(--header));min-height:560px;position:sticky;top:var(--header);overflow:hidden;background:#e4e7e2}.scene,.scene canvas,.poster{position:absolute;inset:0;width:100%;height:100%;display:block}.poster{object-fit:cover}.scene canvas{opacity:0;transition:opacity .4s}.rendered .scene canvas{opacity:1}.rendered .poster{visibility:hidden}.intro{position:absolute;top:13%;left:6%;max-width:560px;transition:opacity .25s,transform .4s}.eyebrow{margin:0 0 26px;display:flex;align-items:center;gap:10px}.eyebrow>span{width:6px;height:6px;background:#966500}.intro h1{font-size:clamp(42px,5.3vw,84px);font-weight:500;letter-spacing:-.065em;line-height:1.03;margin:0 0 28px}.lede{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 26px}.text-link{font-size:13px;text-underline-offset:7px;font-weight:700;display:inline-flex;align-items:center;gap:22px;min-height:44px}.approach{position:absolute;left:6%;bottom:22%;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;pointer-events:none}.approach>p:last-child{font-size:clamp(30px,4vw,62px);line-height:1.05;letter-spacing:-.05em;margin:0}.approach .eyebrow{margin-bottom:18px}.stage[data-beat="approach"] .intro,.stage[data-beat="arrival"] .intro{opacity:0;visibility:hidden;transform:translateY(-12px)}.stage[data-beat="approach"] .approach{opacity:1;transform:none}.bay-label{position:absolute;left:34%;top:48%;font:10px ui-monospace,monospace;letter-spacing:1px;padding:9px 12px;background:var(--ink);color:white;opacity:0;transition:opacity .2s}.bay-label span{display:inline-block;width:5px;height:5px;margin-right:8px;background:var(--amber)}.stage[data-revealed="true"] .bay-label{opacity:1}.handoff{position:absolute;right:6%;top:9%;width:345px;padding:24px;background:var(--paper);border:1px solid #c2c8c1;box-shadow:0 20px 55px #182b2320;animation:card-in .4s both}.handoff[hidden]{display:none}@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);padding-bottom:17px;border-bottom:1px solid var(--line)}.handoff h2{font-size:30px;line-height:1.08;letter-spacing:-1.2px;font-weight:500;margin:22px 0 14px}.assignment{font-size:11px;display:flex;justify-content:space-between;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}.task-events{list-style:none;padding:0;margin:18px 0}.task-events li{display:flex;gap:12px;margin:16px 0}.event-mark{flex-shrink:0;width:23px;height:23px;border:1px solid #aeb5ad;display:grid;place-items:center;font:9px ui-monospace,monospace}.task-events strong{font-size:12px;font-weight:700}.task-events p{font-size:11px;color:var(--muted);margin:1px 0}.blocked .event-mark{background:var(--amber);border-color:var(--amber)}blockquote{font-size:12px;margin:10px 0 0;border-left:2px solid var(--amber);padding-left:10px}.card-footer{font-size:11px;color:var(--muted);padding-top:14px;border-top:1px solid var(--line);margin:0}.stage-bottom{position:absolute;bottom:82px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.8px}.scene-note{display:flex;gap:7px;align-items:center}.status-dot{width:5px;height:5px;border-radius:50%;background:#647363}.motion{background:var(--paper);border:1px solid #aeb5ad;padding:12px;cursor:pointer;font-size:10px;min-height:44px}.scroll-cue span{margin-left:18px}.chapters{position:absolute;bottom:0;left:6%;right:6%;display:flex;gap:34px;border-top:1px solid #aeb5ad;height:64px;align-items:stretch}.chapters a{position:relative;text-decoration:none;text-transform:uppercase;display:flex;gap:12px;align-items:center;color:var(--muted);min-width:115px}.chapters a span{font-size:9px}.chapters a[aria-current]{color:var(--ink)}.chapters a[aria-current]:before{content:"";position:absolute;top:-2px;height:3px;width:100%;background:#946300}.product{max-width:1320px;margin:auto;padding:120px 6% 96px;display:grid;grid-template-columns:1.1fr .85fr;gap:60px 100px;scroll-margin-top:25px}.product-intro h2{font-size:clamp(38px,4.5vw,64px);line-height:1.05;letter-spacing:-3px;font-weight:500;margin:0 0 28px}.product-intro>p:not(.eyebrow){color:var(--muted);max-width:450px;font-size:16px}.product-intro .illustration-note{font-size:12px!important;margin:26px 0}.product-intro .demo{margin-top:10px}.product-shot{margin:0;grid-row:span 2;text-align:center}.product-shot img{display:block;width:min(100%,320px);height:auto;margin:0 auto 24px;border:1px solid var(--line);border-radius:20px;box-shadow:16px 24px 0 #e4e7e2}.product-shot figcaption{font-size:9px;color:var(--muted)}.plain-story{border-top:1px solid var(--line);padding-top:24px}.plain-story h3{font-weight:500;font-size:22px;letter-spacing:-.5px}.plain-story ol{padding-left:20px}.plain-story li{font-size:13px;color:var(--muted);padding-left:8px;margin:14px 0}.plain-story strong{color:var(--ink)}footer{padding:30px 6%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}footer .brand{font-size:16px}.static .journey{height:calc(100svh - var(--header))}.static .chapters,.static .scroll-cue{display:none}.static .stage-bottom{bottom:24px}.static .stage{min-height:560px}
@media(min-width:1600px){.intro{top:16%}.handoff{top:15%;right:10%}}
@media(max-width:900px){.prototype-label{display:none}.handoff{right:4%;width:315px;padding:20px}.bay-label{left:19%}.product{gap:45px}.stage-bottom{left:4%;right:4%}.scroll-cue{display:none}.intro{left:5%}.chapters{left:5%;right:5%}}
@media(max-width:600px){:root{--header:68px}.header{padding:0 5%}.brand{font-size:16px;gap:6px}.brand svg{width:25px;height:25px}.header .demo{font-size:11px;padding:9px 12px;gap:10px}.stage{min-height:600px}.enhanced .journey{height:370svh}.intro{top:6%;left:6%;right:6%}.intro h1{font-size:46px;line-height:1.02;margin-bottom:16px}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:18px}.lede{font-size:13px;line-height:1.6;margin-bottom:10px}.text-link{font-size:11px}.stage-bottom{bottom:66px;font-size:8px;left:6%;right:6%}.scene-note{max-width:160px}.motion{font-size:9px;padding:8px}.chapters{height:54px;gap:0;justify-content:space-between;left:6%;right:6%}.chapters a{min-width:0;font-size:9px;gap:7px;width:29%}.approach{top:7%;bottom:auto}.approach>p:last-child{font-size:38px}.handoff{top:auto;bottom:124px;right:6%;left:6%;width:auto;padding:16px 20px}.card-top{font-size:8px;padding-bottom:10px}.handoff h2{font-size:24px;margin:12px 0 10px}.handoff h2 br{display:none}.assignment{font-size:10px;margin:8px 0;padding-bottom:10px}.task-events{margin:10px 0}.task-events li{margin:10px 0;gap:10px}.task-events strong{font-size:11px}.task-events p{font-size:10px}.card-footer{font-size:10px;padding-top:10px}.card-footer br{display:none}blockquote{font-size:11px;margin-top:6px}.bay-label{left:6%;top:9%;font-size:9px}.product{grid-template-columns:1fr;padding:72px 7%;gap:48px}.product-shot{grid-row:auto;order:3}.product-intro h2{letter-spacing:-2px}.product-intro>p:not(.eyebrow){font-size:15px}.plain-story{order:2}footer{gap:20px;flex-wrap:wrap}footer>span{display:none}.static .stage{min-height:600px}.static .journey{height:600px}.static .stage-bottom{bottom:20px}}
@media(max-width:350px){.brand{font-size:14px}.header .demo{font-size:10px}.intro h1{font-size:40px}.handoff{padding:14px}.handoff h2{font-size:22px}.card-top{letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(max-height:650px){.static .journey{height:650px}.static .stage{height:650px;position:relative;top:0;min-height:0}.static .intro{top:8%}.static .stage-bottom{bottom:24px}}

/* Chapter controls require the enhanced scroll timeline. */
.chapters{display:none}.enhanced .chapters{display:flex}.journey{min-height:560px}
@media(max-width:600px){.journey{min-height:600px}}

.static .journey{height:auto}.static .stage{position:relative;top:0}
@media(max-width:600px){.poster{width:720px;height:450px;inset:auto auto 32px calc(50% - 420px);object-fit:contain}}

/* The illustrated handoff leads into ordinary HTML product and contact content. */
.site-nav { display:flex; gap:26px; align-items:center; font-size:12px; font-weight:700; }
.site-nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.site-nav a:hover, footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.section-shell { width:min(1160px, 88%); margin-inline:auto; }
.section-lede { max-width:42ch; color:#cbd5e1; font-size:17px; line-height:1.7; }
.crew-section { background:var(--ink); color:var(--paper); padding-block:96px; scroll-margin-top:var(--header); }
.crew-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:96px; align-items:center; }
.crew-section .eyebrow { color:#fbbf24; max-width:36ch; line-height:1.7; }
.crew-copy h2, .questions-heading h2, .contact-section h2 { font-size:clamp(34px, 4.2vw, 58px); font-weight:500; line-height:1.08; letter-spacing:-.045em; margin:0 0 24px; }
.crew-details { margin:32px 0 0; }
.crew-details > div { display:grid; grid-template-columns:112px 1fr; gap:24px; padding:20px 0; border-top:1px solid #354155; }
.crew-details dt { color:var(--amber); font-size:13px; font-weight:700; }
.crew-details dd { margin:0; font-size:14px; color:#cbd5e1; max-width:40ch; }
.super-shot { margin:0; text-align:center; }
.super-shot img { display:block; width:min(100%, 300px); height:auto; margin:0 auto 24px; border:1px solid #465064; border-radius:20px; }
.super-shot figcaption { font:9px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:1.3px; color:#cbd5e1; }
.questions-section { display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; padding-block:112px; scroll-margin-top:var(--header); }
.questions-heading .eyebrow { color:var(--muted); }
.questions-heading h2 { font-size:clamp(32px, 3.5vw, 46px); }
.questions-list details { border-top:1px solid #bec5bc; }
.questions-list details:last-child { border-bottom:1px solid #bec5bc; }
.questions-list summary { position:relative; padding:22px 28px 22px 0; list-style:none; cursor:pointer; font-size:15px; font-weight:700; }
.questions-list summary::-webkit-details-marker { display:none; }
.questions-list summary::after { content:'+'; position:absolute; right:0; top:17px; font-size:22px; font-weight:400; color:#815600; }
.questions-list details[open] summary::after { content:'−'; }
.questions-list p { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.75; }
.questions-list a, .contact-section a { text-underline-offset:4px; }
summary:focus-visible { outline:3px solid #a4510b; outline-offset:5px; }
.contact-section { padding-block:80px; border-top:1px solid #c7cdc2; background:#e3e8dd; scroll-margin-top:var(--header); }
.contact-layout { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:80px; }
.contact-section h2 { font-size:clamp(34px, 4.2vw, 58px); }
.contact-section p:not(.eyebrow) { color:#475569; font-size:15px; max-width:42ch; }
.contact-actions { justify-self:end; }
.demo-amber { background:var(--amber); color:var(--ink); padding:16px 22px; }
.demo-amber:hover { background:#f5c344; }
.demo-amber span { color:var(--ink); }
.contact-email { display:block; width:fit-content; margin-top:22px; font-size:17px; font-weight:700; overflow-wrap:anywhere; }
.contact-actions p { margin-top:28px; }
footer { gap:24px; flex-wrap:wrap; }
footer nav { display:flex; flex-wrap:wrap; gap:24px; }
footer nav a { display:inline-flex; min-height:44px; align-items:center; }
footer small { font-size:11px; }
.crew-section a:focus-visible { outline-color:var(--amber); }
@media(max-width:1100px) { .header-right { gap:20px; } .site-nav { gap:16px; } .crew-layout { gap:56px; } .questions-section { gap:44px; } }
@media(max-width:850px) { .site-nav { display:none; } .crew-layout { gap:40px; } .crew-details > div { grid-template-columns:1fr; gap:6px; } .questions-section { grid-template-columns:1fr; gap:36px; } .contact-layout { gap:40px; } }
@media(max-width:600px) {
  .section-shell { width:86%; }
  .crew-section { padding-block:64px; }
  .crew-layout { grid-template-columns:1fr; gap:44px; }
  .crew-section .eyebrow { font-size:9px; max-width:32ch; }
  .crew-details > div { grid-template-columns:100px 1fr; gap:16px; }
  .crew-details dd { font-size:13px; }
  .section-lede { font-size:15px; }
  .questions-section { padding-block:64px; }
  .questions-list summary { font-size:14px; }
  .contact-section { padding-block:64px; }
  .contact-layout { grid-template-columns:1fr; gap:24px; }
  .contact-actions { justify-self:start; }
  footer nav { gap:20px; }
  footer small { width:100%; }
}

/* "Made by" credit: the Robinson Digital Studio star mark and serif wordmark, on its own footer row. */
.made-by { flex-basis:100%; display:flex; align-items:center; gap:8px; margin:0; padding-top:20px; border-top:1px solid var(--line); }
.made-by svg { width:14px; height:14px; flex:none; fill:#197c9d; }
.studio-name { font-family:Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size:14px; color:var(--ink); }