/* Fybr · Development. Loads after base.css and pull.css. */

/* ---------- one build, told as you scroll ---------- */
/* The stage sticks behind the page from the hero to the last stage; the flow scrolls over it.
   Phones: the stage pins across the top of the screen and the copy passes beneath it. */
.dev-build{position:relative;background:#0B1520;--stage-h:100svh}
.dev-build__stage{position:sticky;top:0;height:var(--stage-h);overflow:hidden;z-index:0}
.dev-build__scene{position:absolute;inset:0;transform-origin:50% 60%}
/* the photograph's own box (3:2), sized to cover the stage like object-fit: cover */
.dev-build__plate{position:absolute;top:50%;left:50%;width:max(100%,calc(var(--stage-h) * 1.5));aspect-ratio:3/2;transform:translate(-50%,-50%)}
.dev-build__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.js .dev-build__photo{opacity:0;transition:opacity .45s var(--ease-out)}   /* shown once, whole (a progressive JPEG sharpens in passes) */
.js .dev-build.has-photo .dev-build__photo{opacity:1}
.dev-build__state{position:absolute;opacity:0;transition:opacity .9s var(--ease-out)}
.dev-build__state--frame{left:5.2083%;top:53.5156%;width:90.4948%;height:41.0156%;filter:saturate(.9)}   /* build.json crop */
.dev-build__state--dusk{inset:0;width:100%;height:100%;object-fit:cover}
.dev-build[data-step="2"] .dev-build__state--frame{opacity:1}
.dev-build[data-step="3"] .dev-build__state--dusk{opacity:1}
.dev-drawing{position:absolute;inset:0;width:100%;height:100%;transition:opacity .9s var(--ease-out)}
.js .dev-drawing{--draw:0}   /* undrawn until the script places it; without this the finished plan flashes on load */
.js .dev-build:not([data-drawn]) .dev-drawing{visibility:hidden}   /* and nothing of it shows until the reader scrolls */
.dev-build.has-scene .dev-drawing{display:none}   /* the scene draws the plan; the SVG is only the fallback */
.dev-drawing path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--draw, 1) - var(--t0)) / (var(--t1) - var(--t0)), 1))}
.dev-drawing__core path{stroke:#F2C98A;stroke-width:1.6;vector-effect:non-scaling-stroke}
.dev-drawing__glow path{stroke:#E8B873;stroke-width:5;opacity:.45;vector-effect:non-scaling-stroke}
.dev-build[data-step="3"] .dev-drawing{opacity:0}
.dev-build__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s var(--ease-out)}
.dev-build.is-built .dev-build__canvas{opacity:1}
.dev-build.is-built .dev-drawing{opacity:0}
.dev-build__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,16,.84) 0%,rgba(6,10,16,.6) 30%,rgba(6,10,16,.1) 56%,rgba(6,10,16,0) 70%),linear-gradient(0deg,rgba(6,10,16,.55),rgba(6,10,16,0) 32%),linear-gradient(180deg,rgba(6,10,16,.5),rgba(6,10,16,0) 22%)}
/* the stage you're at, written over the sea: one at a time, following the build */
.dev-build__labels{position:absolute;left:52%;right:4%;top:41%;height:3em;pointer-events:none}
.dev-build__labels p{position:absolute;inset:0;margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.6rem);letter-spacing:-.01em;color:#F4F7FA;text-shadow:0 2px 24px rgba(6,10,16,.55);opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out)}
.dev-build[data-show][data-step="1"] [data-label="1"],.dev-build[data-show][data-step="2"] [data-label="2"],.dev-build[data-show][data-step="3"] [data-label="3"]{opacity:1;transform:none}
.dev-build .scene-caption{position:absolute;right:var(--gutter);bottom:18px}

.dev-build__flow{position:relative;z-index:1;margin-top:calc(-1 * var(--stage-h))}
.dev-build__hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--header-h) + 90px) var(--gutter) clamp(64px,11vh,120px)}
.dev-build__hero h1{font-size:clamp(3rem,6.2vw,6.2rem);line-height:.98;letter-spacing:-.035em;margin:22px 0 24px;max-width:13ch}
.dev-build__hero .deck{font-size:clamp(1.02rem,1.2vw,1.15rem);color:#D6DEE7;max-width:32rem;margin:0 0 30px;line-height:1.55}
.dev-build__cue{margin:34px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
.dev-build__cue span{display:inline-block;margin-left:6px;color:var(--brass)}
.dev-build__intro{padding-top:14vh;padding-bottom:22vh;max-width:none}
.dev-build__intro h2{font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.03em;margin-bottom:20px}
.dev-build__intro p{color:#D6DEE7;max-width:30rem;line-height:1.6}
.dev-build__chapters{padding-bottom:40vh}
.dev-stage{width:min(500px,42vw);margin-bottom:62vh;padding:clamp(24px,2.4vw,36px);background:rgba(8,12,17,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-soft);border-radius:6px}
.dev-stage:last-child{margin-bottom:0}
.dev-stage .stage-kicker{color:var(--brass)}
.dev-stage h3{font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.04;letter-spacing:-.025em;margin:14px 0 12px}
.dev-stage__caption{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.dev-stage__summary{color:#D0D8E1;margin-bottom:22px;line-height:1.6}
.dev-stage__status{margin:-8px 0 22px;padding-left:12px;border-left:2px solid var(--teal);color:var(--ink-mid);font-size:.9rem;line-height:1.5}

/* ---------- the model: the deeper demonstration ---------- */
.pull--dev{background:var(--deep)}
.pull--dev .owner-view{width:min(280px,38%)}
.pull--dev .owner-view dl{gap:11px}
.pull--dev .owner-view dd span{font-size:1.35rem}
.pull-controls--dev{grid-template-columns:1fr 1fr}
.pull-mix{grid-column:1/-1;border:0;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pull-mix legend{width:100%;display:flex;justify-content:space-between;gap:16px;padding:0;margin-bottom:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
.pull-mix legend output{letter-spacing:.02em;text-transform:none;color:var(--ink);font-size:.74rem}
.pull-mix label{position:relative;cursor:pointer}
.pull-mix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pull-mix span{display:inline-block;border:1px solid var(--line);border-radius:3px;padding:9px 12px;font-size:.82rem;color:var(--ink-mid);transition:border-color .16s var(--ease-out),color .16s var(--ease-out),background-color .16s var(--ease-out)}
.pull-mix label:hover span{color:var(--ink);border-color:var(--ink-low)}
.pull-mix input:checked + span{color:#152029;background:var(--brass);border-color:var(--brass)}
.pull-mix input:focus-visible + span{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- buying into a project, and the questions ---------- */
.dev-investors{padding:clamp(90px,10vw,150px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.dev-investors__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}
.dev-investors h2{font-size:clamp(2.3rem,4vw,3.8rem);line-height:1;letter-spacing:-.03em;margin:20px 0 22px}
.dev-investors p{color:var(--ink-mid);max-width:34rem;line-height:1.65;margin-bottom:20px}
.dev-investors__work{padding-top:clamp(0px,4vw,60px)}
.dev-investors__work h3{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:16px}
.dev-faq{padding:clamp(80px,9vw,140px) 0;background:var(--deep);border-top:1px solid var(--line-soft)}
.dev-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);align-items:start}
.dev-faq h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.03em}

@media (max-width:1080px){
  .dev-investors__grid,.dev-faq__grid{grid-template-columns:1fr}
  .dev-stage{width:min(520px,100%)}
}
@media (max-width:760px){
  /* phones: the stage pins across the top, framed on the building; the copy scrolls beneath it */
  .dev-build{--stage-h:min(48svh,460px)}
  .dev-build__stage{z-index:2}   /* the copy passes beneath it */
  .dev-build__plate{left:72%;transform:translate(-72%,-50%)}
  .dev-build__shade{background:linear-gradient(0deg,#0B1520 0%,rgba(11,21,32,.55) 9%,rgba(11,21,32,0) 22%),linear-gradient(180deg,rgba(6,10,16,.6),rgba(6,10,16,0) 24%)}
  .dev-build__labels{left:6%;right:6%;top:39%}
  .dev-build__labels p{font-size:1.45rem}
  .dev-build .scene-caption{top:calc(var(--header-h) + 12px);bottom:auto}
  .dev-build .scene-caption{font-size:.66rem}
  .dev-build__flow{margin-top:0}
  .dev-build__hero{min-height:0;padding:6px var(--gutter) 40px}
  .dev-build__hero h1{font-size:clamp(2.6rem,11.5vw,3.8rem);margin:14px 0 16px}
  .dev-build__hero .deck{margin-bottom:22px}
  .dev-build__intro{padding-top:30px;padding-bottom:40px}
  .dev-build__chapters{padding-bottom:30px}
  .dev-stage{width:auto;margin-bottom:28svh;background:rgba(8,12,17,.6)}
  .pull--dev .owner-view{width:auto}
  .pull-controls--dev{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .dev-build__state,.dev-drawing{transition:opacity .3s linear}
  .dev-build__labels p{transform:none;transition:opacity .3s linear}
}