/* design-build: an empty page lays itself out against its column guides, one of two booking buttons is dropped,
   the page takes the brand, and each part is marked with its job. Prefix .hero-design-build / .db-
   Sizes here are set so the whole frame sits inside the viewport when the chapter is scrolled to reading
   position at 1440x900 (motion audit 2026-09-19, point 5: the chapter has to be legible at natural size and
   the composition has to be on screen while it composes). */
.hero-design-build .db-stage{padding:clamp(10px,1.2vw,16px) clamp(18px,2.4vw,32px) 40px;min-height:0;display:flex;align-items:center}
.hero-design-build .db-frame{position:relative;width:100%;border-radius:14px;overflow:visible;background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -38px rgba(13,13,13,.4)}
.hero-design-build .db-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--bg-2);border-radius:14px 14px 0 0}
.hero-design-build .db-bar > i{width:8px;height:8px;border-radius:50%;background:var(--bg-3)}
/* block, not flex, so the address can end in an ellipsis when the bar is narrow (an anonymous flex item cannot);
   line-height centres it in the 22 px pill as align-items did */
.hero-design-build .db-url{flex:1;min-width:0;margin-left:8px;height:22px;display:block;line-height:20px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-design-build .db-gen{font-size:12px;color:var(--text-2);white-space:nowrap}
/* how long the page has been building, ticking with the replay. Empty until the module fills it, so the
   still page (no scripts, reduced motion) carries no stopwatch at all. */
.hero-design-build .db-time{display:inline-flex;align-items:center;justify-content:flex-end;min-width:40px;height:20px;padding:0 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.hero-design-build .db-time:empty{display:none}
.hero-design-build .is-still .db-time{display:none}
.hero-design-build .db-page{position:relative;display:grid;gap:8px;padding:10px;border-radius:0 0 14px 14px;background:#fff;transition:background .6s var(--ease)}
/* the column guides the empty frame is laid out against; faded out once the brand lands */
.hero-design-build .db-guides{position:absolute;inset:10px;z-index:0;display:grid;grid-template-columns:repeat(12,1fr);opacity:0;pointer-events:none}
.hero-design-build .db-guides i{border-left:1px dashed var(--line-control)}
.hero-design-build .db-guides i:last-child{border-right:1px dashed var(--line-control)}
.hero-design-build .db-blk{position:relative;z-index:1;border-radius:10px;transition:background .6s var(--ease),border-color .6s var(--ease)}
.hero-design-build .db-nav{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--line-control)}
.hero-design-build .db-logo{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--bg-3);transition:background .6s var(--ease)}
.hero-design-build .db-logo img{width:16px;height:16px;opacity:0;transition:opacity .6s var(--ease)}
.hero-design-build .db-nm{font-size:12px;color:transparent;background:var(--bg-3);border-radius:4px;transition:color .3s var(--ease),background .6s var(--ease);font-family:'Instrument Serif',Georgia,serif}
.hero-design-build .db-lk{margin-left:auto;display:flex;gap:6px}
.hero-design-build .db-lk i{width:20px;height:4px;border-radius:2px;background:var(--bg-3)}
.hero-design-build .db-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;padding:12px;border:1px dashed var(--line-control)}
.hero-design-build .db-hero-copy{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.hero-design-build .db-h{margin:0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(22px,2.2vw,34px);line-height:1;color:transparent;background:var(--bg-3);border-radius:6px;transition:color .3s var(--ease),background .6s var(--ease)}
/* the headline once it has been set: the placeholder bar gives way to the real line */
.hero-design-build .db-h.is-set{color:var(--ink);background:transparent}
/* the headline is set line by line through masks (section.js); at line-height 1 a mask the size of the line
   clipped the tail of the y in "you", so each mask's clip box reaches below its line and gives it back */
.hero-design-build .db-line-mask{padding-bottom:.12em;margin-bottom:-.12em}
/* the layout guide the headline snaps onto, a hairline under it that runs past the text column */
.hero-design-build .db-mid{flex:none;height:1px;margin:-4px -12px -5px;background:#C8703A;opacity:0}
.hero-design-build .db-sub{display:grid;gap:5px;margin:0}
.hero-design-build .db-sub i{height:5px;border-radius:3px;background:var(--bg-3)}
.hero-design-build .db-sub i+i{width:70%}
.hero-design-build .db-btn{align-self:flex-start;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-size:13px;white-space:nowrap;color:transparent;background:var(--bg-3);transition:color .5s var(--ease),background .5s var(--ease)}
/* the two candidates for the one next step: both readable while the choice is open, the kept one in the brand */
.hero-design-build .db-btn.is-cand{color:var(--ink)}
.hero-design-build .db-btn.is-chosen{color:#171311;background:#C8703A}
.hero-design-build .db-btn-ghost{opacity:0;color:var(--text-2)}
.hero-design-build .is-still .db-btn-ghost{display:none}
.hero-design-build .db-img{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.hero-design-build .db-img img,.hero-design-build .db-proof img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.hero-design-build .db-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:0;border:0}
.hero-design-build .db-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border-radius:10px;border:1px dashed var(--line-control)}
.hero-design-build .db-proof span{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--bg-3)}
.hero-design-build .db-cal{padding:8px 10px;border-radius:10px;border:1px dashed var(--line-control)}
.hero-design-build .db-cal p{margin:0 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);transition:color .3s var(--ease)}
.hero-design-build .db-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hero-design-build .db-days i{height:12px;border-radius:3px;background:var(--bg-3);transition:background .6s var(--ease)}
.hero-design-build .db-foot{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px dashed var(--line-control)}
.hero-design-build .db-foot-nm{font-size:12px;color:transparent;background:var(--bg-3);border-radius:4px;font-family:'Instrument Serif',Georgia,serif;transition:color .3s var(--ease),background .6s var(--ease)}
.hero-design-build .db-chat{position:absolute;right:14px;bottom:-14px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:12px;color:var(--text-2);background:#fff;border:1px dashed var(--line-control);box-shadow:0 10px 24px -12px rgba(13,13,13,.3);transition:background .6s var(--ease),color .3s var(--ease)}
.hero-design-build .db-chat i{width:7px;height:7px;border-radius:50%;background:var(--line-control)}

/* the loop's reset: the dressed page is not un-dressed in front of the visitor, it is cut back to an empty
   frame in one frame. Without this the 0.6s colour transitions run backwards and the chapter opens on a grey
   slab instead of a white page with guides. Set for about 80ms by the timeline, on .db-stage beside is-skin. */
.hero-design-build .is-cut .db-frame *{transition-duration:0s}

/* dressed in the brand */
.hero-design-build .is-skin .db-page{background:#171311}
.hero-design-build .is-skin .db-nav,.hero-design-build .is-skin .db-hero,.hero-design-build .is-skin .db-proof,.hero-design-build .is-skin .db-cal,.hero-design-build .is-skin .db-foot{border-color:transparent}
.hero-design-build .is-skin .db-hero,.hero-design-build .is-skin .db-cal,.hero-design-build .is-skin .db-proof,.hero-design-build .is-skin .db-foot{background:#221B17}
.hero-design-build .is-skin .db-logo{background:transparent}
.hero-design-build .is-skin .db-logo img,.hero-design-build .is-skin .db-img img,.hero-design-build .is-skin .db-proof img{opacity:1}
.hero-design-build .is-skin .db-nm,.hero-design-build .is-skin .db-foot-nm{color:#F7F2EC;background:transparent}
.hero-design-build .is-skin .db-lk i,.hero-design-build .is-skin .db-sub i{background:rgba(247,242,236,.2)}
.hero-design-build .is-skin .db-h{color:#F7F2EC;background:transparent}
.hero-design-build .is-skin .db-btn{color:#171311;background:#C8703A}
.hero-design-build .is-skin .db-cal p{color:#9FB3B5}
.hero-design-build .is-skin .db-days i{background:rgba(247,242,236,.1)}
.hero-design-build .is-skin .db-days i.o{background:rgba(200,112,58,.55)}
.hero-design-build .is-skin .db-days i.is-pick{background:#F7F2EC}
.hero-design-build .is-skin .db-chat{background:#F7F2EC;color:#171311;border-color:transparent}
.hero-design-build .is-skin .db-chat i{background:#1DBF73}

/* the marks: a numbered pin on each part, the matching point lights in the copy */
.hero-design-build [data-pin]{transition:box-shadow .35s var(--ease)}
.hero-design-build [data-pin].is-lit{box-shadow:0 0 0 2px #C8703A,0 0 0 7px rgba(200,112,58,.22)}
.hero-design-build .db-pin{position:absolute;left:0;top:0;z-index:5;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#C8703A;color:#171311;font-family:var(--font-mono);font-size:11px;box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(13,13,13,.35);transform:scale(0)}
.hero-design-build .is-still .db-pin{transform:none}

/* the one to three word label that names what each marked part does for conversion. Positioned in JS
   next to its target (place()), never more than one lit at a time so labels never overlap. */
.hero-design-build .db-tag{position:absolute;left:0;top:0;z-index:6;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-family:var(--font-sans,Inter,sans-serif);font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1;white-space:nowrap;color:#171311;background:#F7F2EC;box-shadow:0 8px 20px -10px rgba(13,13,13,.45),0 0 0 1px rgba(23,19,17,.08);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.hero-design-build .db-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#C8703A;flex:none}
.hero-design-build .db-tag.is-on{opacity:1;transform:translateY(0)}
.hero-design-build .is-still .db-tag{opacity:1;transform:none}
@media (max-width:900px){
  .hero-design-build .db-stage{min-height:0;padding:16px 12px 40px}
  .hero-design-build .db-h{font-size:22px}
  .hero-design-build .bt-points{margin-top:16px}
  .hero-design-build .db-tag{font-size:11px;height:22px;padding:0 8px;gap:5px}
  .hero-design-build .db-time{display:none}
}
/* phones: no window buttons on a phone's browser, so the three dots give their width to the address, and the
   build status drops a size so "Choosing the next step" leaves the address readable */
@media (max-width:560px){
  .hero-design-build .db-bar > i{display:none}
  .hero-design-build .db-url{margin-left:0}
  .hero-design-build .db-gen{font-size:10px}
}