/* =============================================================
   NOUX — Build scene: browser → MacBook → dashboard (scroll)
   ============================================================= */
.build { height: 320vh; position: relative; background: var(--bone); }
.build-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* branded white stage with a soft warm field */
.bs-room {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  background:
    radial-gradient(55% 60% at 70% 18%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 65%),
    radial-gradient(40% 50% at 18% 70%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bone);
}
.bs-desk { display: none; }

/* browser that becomes a MacBook */
.bs-browser { position: absolute; left: 50%; top: 55%; width: min(720px, 58vw); z-index: 2; will-change: transform; }
.bs-screen {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 48px 100px -44px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: border 0.6s var(--ease), border-radius 0.6s var(--ease);
}
.build.ph2 .bs-screen { border: 12px solid #0E0E0E; border-radius: 22px; }
.bs-chrome {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border-bottom: 1px solid var(--line);
  transition: opacity 0.5s var(--ease);
}
.build.ph2 .bs-chrome { opacity: 0; }
.bs-dots { display: flex; gap: 5px; }
.bs-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.bs-dots i:first-child { background: var(--accent); }
.bs-url { margin-inline: auto; background: var(--bone-deep); border-radius: 100px; padding: 4px 20px; font-family: var(--sans); font-size: 12px; color: var(--ink-soft); }
.bs-frame { width: 100%; aspect-ratio: 1100 / 690; }
.bs-mac-base {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -24px;
  width: 126%; height: 17px; border-radius: 2px 2px 18px 18px;
  background: linear-gradient(180deg, #DCDCDE 0%, #A5A6A9 70%, #7E7F82 100%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.bs-mac-base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 13%; height: 7px; border-radius: 0 0 10px 10px; background: #8E8F92; }
.build.ph2 .bs-mac-base { opacity: 1; }

/* Atelier Linden — editorial interior-design studio (1100×690) */
.bs-site {
  background: #F6F1E8; color: #1A1614; font-family: var(--sans);
  width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
}

/* NAV — one restrained line, brand left with tiny location, links center, inquire right */
.bss-nav {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 22px 56px 20px; gap: 40px;
  border-bottom: 1px solid #EAE2D2;
}
.bss-brand { display: flex; align-items: baseline; gap: 18px; min-width: 0; white-space: nowrap; }
.bss-brand b {
  font-family: 'Libre Caslon Display', var(--serif);
  font-size: 24px; font-weight: 400; letter-spacing: 0.005em; color: #1A1614;
  white-space: nowrap;
}
.bss-place {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #8A8271;
  white-space: nowrap;
}
.bss-links { display: flex; gap: 30px; justify-content: center; }
.bss-links span {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: #4A423A;
}
.bss-inq {
  justify-self: end;
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: #1A1614;
  display: inline-flex; align-items: center; gap: 8px;
}
.bss-inq i { font-style: normal; font-size: 12px; }

/* MAIN — asymmetric editorial split: narrow copy, wide photo bleeding to the right edge */
.bss-main {
  display: grid; grid-template-columns: 0.72fr 1.4fr;
  gap: 0; align-items: stretch; min-height: 0;
}
.bss-copy {
  padding: 62px 44px 40px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.bss-eyebrow {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #8B6F47; font-weight: 500;
}
.bss-copy h3 {
  font-family: 'Libre Caslon Display', var(--serif);
  font-size: 52px; font-weight: 400; line-height: 1.02; letter-spacing: -0.012em;
  color: #1A1614; margin-top: 22px;
}
.bss-copy h3 em {
  font-style: italic; color: #6B5540; font-family: 'Libre Caslon Display', var(--serif);
}
.bss-copy .s {
  font-size: 14.5px; line-height: 1.7; color: #5C554A;
  margin-top: 24px; max-width: 32ch; font-weight: 400;
}
.bss-copy .cta {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin-top: 40px; padding-bottom: 6px;
  font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #1A1614;
  border-bottom: 1px solid #1A1614;
}
.bss-copy .cta i { font-style: normal; font-size: 12px; }

/* PHOTO — full-bleed to the right edge of the browser, caption overlays the image */
.bss-photo {
  margin: 0; position: relative; display: block; min-width: 0;
  padding: 0;
}
.bss-photo .ph {
  display: block; width: 100%; height: 100%; min-height: 320px; position: absolute; inset: 0;
  object-fit: cover; object-position: center;
}
.bss-photo .ph::after {
  /* subtle bottom gradient so the overlaid caption stays legible */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.bss-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 22px; gap: 24px;
}
.bss-photo .fc-title {
  font-family: 'Libre Caslon Display', var(--serif);
  font-size: 13px; font-style: italic; color: #F6F1E8; letter-spacing: 0;
  text-transform: none; font-weight: 400;
}
.bss-photo .fc-meta {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,241,232,0.78);
}

/* image-slot integration — designed fallback shows through */
.bss-photo .ph::part(frame) { background: transparent; }
.bss-photo .ph::part(ring) { display: none; }
.bss-photo .ph::part(empty) { color: rgba(246,241,232,0.0); }

/* FOOTER — project index strip, the calling card of every top interior studio */
.bss-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px 56px 20px;
  border-top: 1px solid #EAE2D2;
}
.bss-foot-label {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: #8A8271;
}
.bss-dots { display: flex; gap: 10px; justify-self: center; }
.bss-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #D6CCB8; display: inline-block;
}
.bss-dots i.on { background: #1A1614; }
.bss-foot-next {
  justify-self: end;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: #1A1614;
  display: inline-flex; align-items: center; gap: 6px;
}
.bss-foot-next i { font-style: normal; font-size: 12px; }

/* operations dashboard */
.bs-dash {
  position: absolute; top: 120px; right: 5vw; z-index: 3;
  width: min(330px, 28vw);
  background: color-mix(in srgb, var(--shadow) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--bone) 14%, transparent);
  border-radius: 16px;
  color: var(--bone);
  padding: 1.25rem 1.4rem 1.4rem;
  font-family: var(--sans);
  transform: translateX(130%); opacity: 0;
  box-shadow: 0 36px 80px -40px rgba(10,8,5,0.6);
  will-change: transform, opacity;
}
.bsd-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--bone) 55%, transparent); }
.bsd-head em { font-style: normal; color: var(--glow); display: inline-flex; align-items: center; gap: 0.4em; }
.bsd-head em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bsd-big { margin-top: 1rem; }
.bsd-big b { font-family: var(--serif); font-weight: 380; font-size: 2.4rem; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.bsd-big span { font-size: 0.82rem; color: color-mix(in srgb, var(--bone) 60%, transparent); }
.bsd-spark { width: 100%; height: 64px; margin-top: 0.9rem; color: var(--accent); }
.bsd-rows { margin-top: 0.9rem; border-top: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); }
.bsd-row { display: flex; justify-content: space-between; padding: 0.65rem 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 10%, transparent); font-size: 0.88rem; color: color-mix(in srgb, var(--bone) 75%, transparent); }
.bsd-row b { color: var(--bone); font-variant-numeric: tabular-nums; }

/* the story, told large: three beats with a live marker */
.bs-steps {
  position: absolute; top: calc(var(--nav-h) + 1.25rem); left: 5vw; z-index: 4;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.bs-kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.bs-steps p {
  font-family: var(--serif);
  font-weight: 390;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0.25;
  display: flex; align-items: center; gap: 0.65rem;
  transition: opacity 0.5s var(--ease);
}
.bs-steps p::before {
  content: ""; width: 0; height: 2.5px; border-radius: 2px;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}
.bs-steps p.on { opacity: 1; }
.bs-steps p.on::before { width: 1.7rem; }

/* static fallback: mobile + reduced motion */
.build.static { height: auto; }
.build.static .build-stick { position: static; height: auto; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; padding: clamp(3rem, 8vw, 5rem) 1rem; }
.build.static .bs-room, .build.static .bs-desk { display: none; }
.build.static .bs-browser { position: static; transform: none !important; width: min(680px, 94vw); }
.build.static .bs-screen { border: 8px solid #0E0E0E; border-radius: 18px; }
.build.static .bs-chrome { opacity: 1; }
.build.static .bs-mac-base { opacity: 1; }
.build.static .bs-dash { position: static; margin: 1.5rem 0 0; transform: none !important; opacity: 1 !important; width: min(340px, 94vw); }
.build.static .bs-steps { position: static; order: -1; align-items: center; }
.build.static .bs-steps p { opacity: 1; }
.build.static .bs-steps p::before { width: 1.7rem; }

/* ---------- Mobile: keep the scroll animation, adapt layout ---------- */
@media (max-width: 820px) {
  .build { height: 260vh; }
  .bs-browser { width: min(720px, 92vw); top: 44%; }
  .bs-dash {
    position: absolute;
    top: auto !important; right: auto;
    left: 4vw; right: 4vw; bottom: 3vh;
    width: auto; max-width: none;
    padding: 1rem 1.1rem 1.1rem;
    transform: translateY(130%);
  }
  .bsd-big b { font-size: 1.8rem; }
  .bsd-spark { height: 48px; }
  .bs-steps {
    left: 4vw; right: 4vw;
    top: calc(var(--nav-h) + 0.5rem);
    align-items: flex-start;
  }
  .bs-steps p { font-size: 1.1rem; line-height: 1.15; }
  /* At the "site is built" phase, condensed nav crowds inner site — hide inner nav links to keep it legible */
  .bss-nav { padding: 14px 18px; gap: 14px; }
  .bss-links { display: none; }
  .bss-brand b { font-size: 16px; }
  .bss-place { display: none; }
  .bss-copy { padding: 26px 18px 20px; }
  .bss-copy h3 { font-size: 26px; margin-top: 10px; }
  .bss-copy .s { font-size: 12px; margin-top: 12px; }
  .bss-copy .cta { margin-top: 18px; font-size: 9px; }
  .bss-foot { padding: 10px 18px 14px; }
  .bss-foot-label, .bss-foot-next { font-size: 8.5px; }
}