/* ===================================================================
   BIM Experience — self-contained stylesheet (MOBILE-FIRST)
   Aesthetic: precision instrument / engineering blueprint, warm light.
   Display: Barlow Condensed · Body: Barlow · Numerals: IBM Plex Mono.
   Scoped under body.bim — does NOT load global style.css.
   =================================================================== */

:root {
  --bim-bg:       #F4F1ED;   /* warm cream base */
  --bim-bg-2:     #ECE7DF;   /* deeper cream */
  --bim-surface:  #FFFFFF;
  --bim-ink:      #14171C;   /* deep charcoal text */
  --bim-mid:      #5A636E;   /* secondary text */
  --bim-faint:    #9AA0A8;   /* tertiary */
  --bim-line:     #E2DCD3;   /* hairlines */
  --bim-orange:   #F5820A;   /* ProRent accent */
  --bim-orange-d: #C96400;   /* accent for text on light (AA) */
  --bim-grid:     rgba(20, 23, 28, .05);
  --bim-shadow:   0 18px 50px -24px rgba(20, 23, 28, .35);
  --bim-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --bim-cond:     'Barlow Condensed', sans-serif;
  --bim-body:     'Barlow', system-ui, sans-serif;
  --bim-ease:     cubic-bezier(.4, 0, .2, 1);

  --bim-bar-h:    54px;
  --bim-ledger-h: 98px;
  --nav-h:        64px;   /* shared site nav height */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
}

body.bim {
  font-family: var(--bim-body);
  color: var(--bim-ink);
  background: var(--bim-bg);
  background-image:
    linear-gradient(var(--bim-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bim-grid) 1px, transparent 1px);
  background-size: 30px 30px;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── TOP BAR ──────────────────────────────────────────── */

.bim-bar {
  flex: 0 0 var(--bim-bar-h);
  height: var(--bim-bar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid var(--bim-line);
  z-index: 50;
}

.bim-bar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--bim-ink);
  margin-right: auto;
}
.bim-bar__logo { height: 26px; width: auto; display: block; }
.bim-bar__brandtext {
  font-family: var(--bim-cond);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 1px;
}
.bim-bar__brandtext span { color: var(--bim-orange-d); }

/* instrument readout */
.bim-readout {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 30;
  font-family: var(--bim-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--bim-faint);
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(255, 255, 255, .72);
  padding: 3px 10px;
  border: 1px solid var(--bim-line);
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.bim-readout__num { color: var(--bim-orange-d); font-weight: 600; font-size: .95rem; }
.bim-readout__sep { opacity: .5; }

.bim-bar__back {
  font-family: var(--bim-cond);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--bim-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--bim-ease);
}
.bim-bar__back:hover { color: var(--bim-orange-d); }

/* ── STAGE & PANELS ───────────────────────────────────── */

.bim-stagewrap {
  position: relative;
  height: calc(100svh - var(--nav-h));
  margin-top: var(--nav-h);              /* sits below the fixed site nav */
  overflow: hidden;
}
/* 3D point-cloud layer sits behind the chapter content */
.bim-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--bim-ease);
}
.bim-3d.is-on { opacity: 1; }
/* readability scrim — opaque cream on the text side, clear over the cloud.
   only visible while a 3D scene is active. */
.bim-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--bim-ease);
  /* mobile: fuller veil (text is centred) — cloud stays a faint backdrop */
  background: linear-gradient(180deg,
    rgba(244, 241, 237, .86) 0%,
    rgba(244, 241, 237, .80) 58%,
    rgba(244, 241, 237, .42) 100%);
}
.bim-3d.is-on ~ .bim-scrim { opacity: 1; }
.bim-stage {
  position: absolute;
  inset: 0 0 var(--bim-ledger-h) 0;   /* leave room for the ledger overlay */
  z-index: 2;
  overflow: hidden;
}

.bim-panel {
  position: absolute;
  inset: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateX(36px);
  transition: opacity .5s var(--bim-ease), transform .5s var(--bim-ease);
  pointer-events: none;
}
.bim-panel::-webkit-scrollbar { width: 0; }
.bim-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}
.bim-panel.leave-left  { transform: translateX(-36px); opacity: 0; }
.bim-panel.leave-right { transform: translateX(36px);  opacity: 0; }
.bim-panel.enter-right { transform: translateX(36px);  opacity: 0; }
.bim-panel.enter-left  { transform: translateX(-36px); opacity: 0; }

.bim-panel__watermark {
  position: absolute;
  top: 4px;
  right: 8px;
  font-family: var(--bim-mono);
  font-weight: 600;
  font-size: clamp(120px, 38vw, 300px);
  line-height: .8;
  color: var(--bim-ink);
  opacity: .045;
  pointer-events: none;
  user-select: none;
}

.bim-article {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}
.bim-article__head { margin-bottom: 22px; }
.bim-article__hero { margin: 0 0 26px; }
.bim-article__body > * { margin-top: 22px; }
.bim-article__body > *:first-child { margin-top: 0; }

/* staggered reveal on the active panel */
.bim-panel.is-active .bim-panel__kicker      { animation: bim-rise .55s var(--bim-ease) both .05s; }
.bim-panel.is-active .bim-panel__title       { animation: bim-rise .55s var(--bim-ease) both .12s; }
.bim-panel.is-active .bim-panel__lead        { animation: bim-rise .55s var(--bim-ease) both .20s; }
.bim-panel.is-active .bim-panel__interaction { animation: bim-rise .55s var(--bim-ease) both .28s; }
@keyframes bim-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.bim-panel__kicker {
  font-family: var(--bim-cond);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--bim-orange-d);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.bim-panel__kit {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border: 1px solid var(--bim-line);
  border-radius: 8px;
  background: var(--bim-surface);
  color: var(--bim-orange-d);
}
.bim-panel__kit svg { width: 17px; height: 17px; }

.bim-panel__title {
  font-family: var(--bim-cond);
  font-weight: 900;
  font-size: clamp(2.2rem, 8.5vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.bim-panel__lead {
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  line-height: 1.55;
  color: var(--bim-mid);
  max-width: 580px;
  margin: 0;
}
/* key points list */
.bim-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.bim-points li {
  position: relative;
  padding-left: 24px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--bim-mid);
}
.bim-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 8px; height: 8px;
  border: 1.5px solid var(--bim-orange);
  border-radius: 2px;
}

/* body content blocks */
.bim-p { font-size: clamp(1rem, 2.4vw, 1.08rem); line-height: 1.7; color: var(--bim-mid); max-width: 740px; margin: 0; }
.bim-p b { color: var(--bim-ink); font-weight: 600; }
.bim-h {
  font-family: var(--bim-cond); font-weight: 800;
  font-size: clamp(1.3rem, 4vw, 1.65rem); text-transform: uppercase; letter-spacing: .5px;
  color: var(--bim-ink); margin: 0; display: flex; align-items: center;
}
.bim-h::before { content: ""; width: 22px; height: 2px; background: var(--bim-orange); margin-right: 12px; flex: 0 0 auto; }

/* numbered process steps (intro) */
.bim-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bim-step {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 16px;
  background: var(--bim-surface); border: 1px solid var(--bim-line);
  border-left: 3px solid var(--bim-orange); border-radius: 10px;
}
.bim-step__n { font-family: var(--bim-mono); font-size: .78rem; color: var(--bim-orange-d); font-weight: 600; }
.bim-step__h { font-family: var(--bim-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--bim-ink); }
.bim-step__p { font-size: .88rem; color: var(--bim-mid); margin-left: auto; text-align: right; }

/* two-column feature (Trimble / Drone) */
.bim-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.bim-col { background: var(--bim-surface); border: 1px solid var(--bim-line); border-radius: 14px; padding: 20px; }
.bim-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bim-col__icon {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--bim-orange); color: #fff; flex: 0 0 auto;
}
.bim-col__icon svg { width: 21px; height: 21px; }
.bim-col__title { font-family: var(--bim-cond); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: var(--bim-ink); margin: 0; }
.bim-col__sub { font-size: .9rem; color: var(--bim-mid); margin: 0 0 12px; font-weight: 500; }
.bim-col__p { font-size: .92rem; line-height: 1.6; color: var(--bim-mid); margin: 0; }
.bim-col .bim-points { margin-top: 0; }
.bim-col .bim-points li { font-size: .9rem; }

/* hero + body image sizing */
.bim-hero-media { width: 100%; }
.bim-hero-media.bim-media img, .bim-hero-media .bim-media img, .bim-hero-media.bim-slider img { max-height: 38vh; }
.bim-body-img img { max-height: 36vh; }

/* media frame */
.bim-media {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bim-line);
  background: var(--bim-surface);
  box-shadow: var(--bim-shadow);
}
.bim-media.is-dark { background: #0d1014; border-color: #23262c; }
.bim-media.is-contain { background: var(--bim-bg-2); }
.bim-media.is-contain img { object-fit: contain; padding: 8px; }
.bim-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 30vh;            /* mobile cap — desktop raises it */
}
.bim-media__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  font-family: var(--bim-mono);
  font-size: .66rem;
  letter-spacing: .4px;
  color: #fff;
  padding: 20px 12px 9px;
  background: linear-gradient(to top, rgba(8, 10, 14, .8), transparent);
}
.bim-media__cap--accent { color: #ffce9c; }

/* before / after slider */
.bim-slider {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bim-line);
  box-shadow: var(--bim-shadow);
  background: var(--bim-surface);
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.bim-slider.is-dark { background: #0d1014; border-color: #23262c; }
.bim-slider img { display: block; width: 100%; height: 100%; object-fit: cover; max-height: 26vh; pointer-events: none; }
.bim-slider__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.bim-slider__top img { position: absolute; inset: 0; }
.bim-slider__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--bim-orange); transform: translateX(-1px);
  cursor: ew-resize;
}
.bim-slider__handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bim-orange); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem; line-height: 1;
}
.bim-slider__handle span::before { content: "\2194"; }
.bim-slider__handle:focus-visible { outline: 2px solid var(--bim-orange); outline-offset: 2px; }
.bim-slider__tag {
  position: absolute; top: 8px;
  font-family: var(--bim-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .5px;
  color: #fff; background: rgba(8, 10, 14, .6); padding: 3px 7px; border-radius: 4px; pointer-events: none;
}
.bim-slider__tag--a { left: 8px; }
.bim-slider__tag--b { right: 8px; }

/* heatmap colour legend (mm deviation key) — drag the bar to probe */
.bim-heatmap { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.bim-heatmap .bim-media { min-width: 0; }
.bim-scale { display: flex; flex-direction: column; gap: 8px; }
.bim-scale__title { font-family: var(--bim-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .5px; color: var(--bim-faint); text-align: center; line-height: 1.25; }
.bim-scale__body { display: flex; gap: 9px; align-items: stretch; }
.bim-scale__bar {
  position: relative; width: 14px; min-height: 158px; border-radius: 7px;
  border: 1px solid var(--bim-line);
  background: linear-gradient(to bottom, #e23b2e 0%, #f5820a 22%, #f2d23a 38%, #36c46b 50%, #2bbbd6 64%, #2f6ee0 100%);
}
.bim-scale__marker {
  position: absolute; left: 50%; top: var(--p); transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--bim-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.bim-scale__keys { display: flex; flex-direction: column; justify-content: space-between; list-style: none; margin: 0; padding: 1px 0; }
.bim-scale__keys li { display: flex; align-items: baseline; gap: 5px; }
.bim-scale__keys b { font-family: var(--bim-mono); font-size: .72rem; color: var(--bim-ink); min-width: 28px; }
.bim-scale__keys span { font-size: .62rem; color: var(--bim-mid); }
.bim-scale__readout { text-align: center; font-family: var(--bim-mono); font-size: .7rem; color: var(--bim-mid); padding-top: 5px; border-top: 1px solid var(--bim-line); }
.bim-scale__val { color: var(--bim-orange-d); font-size: .88rem; }
.bim-scale__lbl { color: var(--bim-mid); }

/* contact block */
.bim-contact { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.bim-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--bim-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  padding: 13px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--bim-line);
  color: var(--bim-ink);
  background: var(--bim-surface);
  transition: all .2s var(--bim-ease);
}
.bim-btn:hover { border-color: var(--bim-orange); color: var(--bim-orange-d); transform: translateY(-1px); }
.bim-btn--primary { background: var(--bim-orange); border-color: var(--bim-orange); color: #fff; }
.bim-btn--primary:hover { background: var(--bim-orange-d); color: #fff; }
.bim-btn--ghost { background: transparent; }
.bim-contact__addr { font-size: .82rem; color: var(--bim-faint); margin: 6px 0 0; }

/* ── COORDINATE LEDGER (navigator) ────────────────────── */

.bim-ledger {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--bim-ledger-h);
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, .9);
  border-top: 1px solid var(--bim-line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
  backdrop-filter: blur(8px);
}

.bim-ledger__arrow {
  flex: 0 0 auto;
  width: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bim-mid);
  transition: color .2s var(--bim-ease), opacity .2s var(--bim-ease);
}
.bim-ledger__arrow:hover:not(:disabled) { color: var(--bim-orange-d); }
.bim-ledger__arrow:disabled { opacity: .25; cursor: default; }

/* the scroll-snap filmstrip */
.bim-ledger__track {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.bim-ledger__track::-webkit-scrollbar { display: none; }
/* the ruler baseline */
.bim-ledger__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 13px;
  height: 1px;
  background: var(--bim-line);
  pointer-events: none;
}

.bim-cell {
  flex: 0 0 76px;
  scroll-snap-align: center;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  color: var(--bim-mid);
  transition: color .25s var(--bim-ease);
}
/* tick mark on the baseline */
.bim-cell::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 13px;
  width: 1px;
  height: 8px;
  background: var(--bim-line);
  transform: translate(-50%, 50%);
  transition: all .25s var(--bim-ease);
}
.bim-cell__icon {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border: 1px solid var(--bim-line);
  border-radius: 9px;
  background: var(--bim-surface);
  transition: all .25s var(--bim-ease);
}
.bim-cell__icon svg { width: 17px; height: 17px; }
.bim-cell__num {
  font-family: var(--bim-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--bim-faint);
  transition: color .25s var(--bim-ease);
}
.bim-cell__label {
  font-family: var(--bim-cond);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

.bim-cell:hover .bim-cell__icon { border-color: var(--bim-faint); transform: translateY(-2px); }
.bim-cell:hover { color: var(--bim-ink); }

/* passed chapters */
.bim-cell.is-done { color: var(--bim-mid); }
.bim-cell.is-done .bim-cell__icon { border-color: var(--bim-orange); color: var(--bim-orange-d); }
.bim-cell.is-done::after { background: var(--bim-orange); opacity: .4; }

/* active chapter */
.bim-cell.is-active { color: var(--bim-ink); }
.bim-cell.is-active .bim-cell__icon {
  background: var(--bim-orange);
  border-color: var(--bim-orange);
  color: #fff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 18px -8px var(--bim-orange);
}
.bim-cell.is-active .bim-cell__num { color: var(--bim-orange-d); font-weight: 600; }
.bim-cell.is-active .bim-cell__label { font-weight: 800; }
.bim-cell.is-active::after { height: 13px; width: 2px; background: var(--bim-orange); }

/* ── TABLET+ ENHANCEMENTS ─────────────────────────────── */

@media (min-width: 768px) {
  :root { --bim-bar-h: 62px; --bim-ledger-h: 110px; }
  /* desktop: horizontal scrim — solid under the text (left), clear over the cloud (right) */
  .bim-scrim {
    background: linear-gradient(95deg,
      var(--bim-bg) 0%,
      rgba(244, 241, 237, .98) 30%,
      rgba(244, 241, 237, .55) 50%,
      rgba(244, 241, 237, 0) 68%);
  }
  .bim-bar { gap: 18px; padding: 0 24px; }
  .bim-bar__logo { height: 30px; }
  .bim-bar__brandtext { font-size: 1.15rem; }
  /* desktop: info column hugs the left, right side stays clear for the 3D model */
  .bim-article { max-width: 720px; margin: 0; padding: 40px 28px 56px clamp(28px, 6vw, 80px); }
  .bim-panel__watermark { top: 0; right: clamp(20px, 5vw, 60px); font-size: clamp(220px, 26vw, 380px); }
  .bim-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .bim-hero-media.bim-media img, .bim-hero-media .bim-media img, .bim-hero-media.bim-slider img { max-height: 50vh; }
  .bim-body-img img { max-height: 46vh; }
  .bim-contact { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bim-panel__kit { width: 34px; height: 34px; }
  .bim-panel__kit svg { width: 19px; height: 19px; }
  .bim-cell { flex-basis: 104px; }
  .bim-cell__icon { width: 36px; height: 36px; }
  .bim-cell__icon svg { width: 20px; height: 20px; }
  .bim-cell__num { font-size: .72rem; }
  .bim-cell__label { font-size: .82rem; }
}

/* desktop: all cells fit, centre the strip (no scroll needed) */
@media (min-width: 1100px) {
  .bim-ledger__track { justify-content: center; }
  .bim-cell { flex-basis: 128px; }
}

/* ── MOBILE: 3D as a visible centred backdrop, content scrolls over it ── */
@media (max-width: 760px) {
  .bim-scrim { display: none; }                 /* let the centred cloud show */
  .bim-3d { opacity: 1; inset: 0 0 auto 0; height: 44vh; }  /* 3D lives in the top only */
  .bim-article {
    position: relative;
    margin-top: 43vh;                           /* content starts right below the 3D */
    background: var(--bim-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 34px -18px rgba(20, 23, 28, .3);
    padding: 26px 18px 64px;
  }
  .bim-article::before {                        /* soft top edge of the rising sheet */
    content: "";
    position: absolute; left: 0; right: 0; top: -28px; height: 28px;
    background: linear-gradient(to bottom, transparent, var(--bim-bg));
    pointer-events: none;
  }
  .bim-panel__watermark { display: none; }      /* avoid clutter behind the cloud */
}

@media (prefers-reduced-motion: reduce) {
  .bim-panel, .bim-cell, .bim-cell__icon { transition: opacity .01ms linear !important; }
  .bim-panel.is-active * { animation: none !important; }
}