/* BIM SURE landing page (/bim-sure/). Builds on campaigns.css. */

.bs-page {
  --bs-blue: #2f9fe3;
  --bs-ok: #85a700;
  --bs-warn: #f39a1c;
  --bs-error: #e5533d;
}

.bs-brand {
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.bs-brand span {
  color: var(--bs-blue);
}

/* ---------- Hero ---------- */

.bs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

.bs-eyebrow {
  margin: 0 0 1rem;
  color: var(--cta-color);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bs-hero-copy h1 {
  margin: 0 0 1.6rem;
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 400;
  text-wrap: balance;
}

.bs-hero-copy .bs-brand {
  font-size: 1.12em;
}

.bs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 2.2rem 0 1.8rem;
}

.bs-button {
  display: inline-flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 1.1rem;
  padding: .85rem 1.3rem;
  border: 2px solid var(--cta-color);
  background: var(--cta-color);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: filter .18s ease, background .18s ease, color .18s ease;
}

.bs-button:hover {
  filter: brightness(1.08);
}

.bs-button:focus-visible {
  outline: 3px solid #222;
  outline-offset: 3px;
}

.bs-button svg {
  width: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.bs-button-ghost {
  background: transparent;
  color: #222;
  border-color: #222;
}

.bs-button-ghost:hover {
  background: #222;
  color: #fff;
  filter: none;
}

.bs-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #444;
  font-size: .95rem;
}

.bs-trust li {
  position: relative;
  padding-left: 1.5rem;
}

.bs-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: .9rem;
  height: .9rem;
  background: url("../images/check.svg") center / contain no-repeat;
}

/* ---------- Report mockup ---------- */

.bs-report {
  position: relative;
  margin: 0;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: #222;
  color: #fff;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .16);
}

.bs-report::before {
  content: "";
  position: absolute;
  inset: -.5rem -.5rem auto;
  height: .5rem;
  background: var(--cta-color);
}

.bs-report-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #3a3a3a;
}

.bs-brand-small {
  font-size: 1.25rem;
}

.bs-report-file {
  color: #aaa;
  font-size: .85rem;
}

.bs-report-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  align-items: center;
  padding: 1.4rem 0;
}

.bs-score {
  position: relative;
  width: 5.4rem;
  height: 5.4rem;
}

.bs-score svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.bs-score circle {
  fill: none;
  stroke-width: 4;
}

.bs-score circle:first-child {
  stroke: #3a3a3a;
}

.bs-score circle:last-child {
  stroke: var(--bs-warn);
  stroke-dasharray: var(--score) 100;
  stroke-linecap: butt;
}

.bs-score strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

.bs-report-label,
.bs-report-meta {
  display: block;
  color: #aaa;
  font-size: .85rem;
}

.bs-report-verdict {
  display: block;
  margin: .15rem 0 .25rem;
  color: var(--bs-warn);
  font-size: 1.45rem;
  line-height: 1.15;
}

.bs-report-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs-report-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 0 .72rem 1.4rem;
  border-top: 1px solid #333;
  position: relative;
  font-size: .98rem;
}

.bs-report-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  background: var(--bs-ok);
}

.bs-report-list li.is-warn::before { background: var(--bs-warn); }
.bs-report-list li.is-error::before { background: var(--bs-error); }

.bs-report-list b {
  white-space: nowrap;
  color: #ddd;
}

.bs-report-list .is-ok b { color: #bde633; }
.bs-report-list .is-warn b { color: #ffc070; }
.bs-report-list .is-error b { color: #ff9a8b; }

.bs-report figcaption {
  margin-top: 1rem;
  color: #888;
  font-size: .78rem;
}

/* ---------- Showcase gallery ---------- */

.bs-showcase {
  background: #fff;
}

.bs-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 2rem 1.6rem;
}

.bs-shot {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .9rem;
  margin: 0;
}

/* Matches the specificity of the site-wide img[width][height] rule. */
.bs-shot img[width][height] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #f4f4f4;
  border: 1px solid #ddd;
}

.bs-shot-3d {
  grid-column: 1;
  grid-row: 1;
}

.bs-shot-3d img[width][height] {
  height: auto;
  aspect-ratio: 1326 / 1000;
}

.bs-shot-pdf {
  grid-column: 2;
  grid-row: 1 / 3;
}

.bs-shot-pdf img[width][height] {
  object-fit: contain;
  background: #fff;
}

.bs-shot-result {
  grid-column: 1;
  grid-row: 2;
}

.bs-shot-result img[width][height] {
  height: auto;
  aspect-ratio: 1296 / 336;
  object-fit: contain;
}

.bs-shot figcaption {
  color: #444;
  font-size: .95rem;
  line-height: 1.45;
}

.bs-shot figcaption strong {
  display: block;
  color: #111;
  font-size: 1.08rem;
}

.bs-credit {
  margin: 1.6rem 0 0;
  color: #666;
  font-size: .82rem;
}

.bs-credit a {
  color: inherit;
}

/* ---------- Sections ---------- */

.bs-section {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.bs-section .wrapper {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.bs-section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bs-section-head h2,
.bs-contact-title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 400;
  text-wrap: balance;
}

.bs-section-head p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #333;
}

/* Problem: statement left, issues right */

.bs-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.bs-problem-grid h2 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 400;
  text-wrap: balance;
}

.bs-problem-list {
  display: grid;
  gap: 1.8rem;
  margin: 0;
  padding-top: 1.8rem;
  border-top: 2px solid #222;
}

.bs-problem-list dt {
  margin-bottom: .35rem;
  font-size: 1.3rem;
  font-weight: 700;
}

.bs-problem-list dd {
  margin: 0;
  max-width: 34rem;
  line-height: 1.5;
  color: #333;
}

/* Roadmap */

.bs-how {
  background: #fff;
}

.bs-roadmap {
  --bs-marker: 1.15rem;
  position: relative;
}

.bs-roadmap-phases {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem;
}

.bs-phase-start { grid-column: 1 / 3; }
.bs-phase-loop { grid-column: 3 / 7; }

.bs-phase {
  padding-bottom: .7rem;
  border-bottom: 2px solid #cfcfcf;
  color: #555;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bs-phase-loop {
  border-bottom-color: var(--cta-color);
  color: var(--cta-color);
}

.bs-roadmap-track {
  position: relative;
  height: 3px;
  margin-top: 2.4rem;
  background: #dcdcdc;
  overflow: hidden;
}

.bs-roadmap-fill {
  position: absolute;
  inset: 0;
  background: var(--cta-color);
  transform-origin: left center;
}

.bs-roadmap-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem;
  margin: calc((var(--bs-marker) + 3px) / -2) 0 0;
  padding: 0;
  list-style: none;
}

.bs-roadmap-marker {
  display: block;
  width: var(--bs-marker);
  height: var(--bs-marker);
  margin-bottom: 1.4rem;
  border: 3px solid var(--cta-color);
  background: #fff;
  transition: background .3s ease, transform .3s ease;
}

.bs-roadmap-list .is-goal .bs-roadmap-marker {
  background: var(--cta-color);
  transform: scale(1.35);
  transform-origin: left center;
}

.bs-roadmap-list h3 {
  margin: 0 0 .45rem;
  font-size: 1.2rem;
  line-height: 1.2;
}

.bs-roadmap-list p {
  margin: 0;
  color: #333;
  font-size: .98rem;
  line-height: 1.45;
}

.bs-roadmap-meta {
  display: inline-block;
  margin-top: .8rem;
  padding: .2rem .55rem;
  background: #eff7d2;
  color: #3d4d00;
  font-size: .82rem;
  font-weight: 700;
}

/* Animation only when JS is active and motion is welcome:
   the line fills from start to goal, each milestone appears as it is reached. */
@media (prefers-reduced-motion: no-preference) {
  .bs-roadmap.is-ready .bs-roadmap-fill {
    transform: scaleX(0);
    transition: transform 2.2s cubic-bezier(.16, 1, .3, 1);
  }

  .bs-roadmap.is-ready .bs-roadmap-list li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i) * .3s);
  }

  .bs-roadmap.is-ready .bs-roadmap-marker {
    background: #fff;
    border-color: #cfcfcf;
    transition: border-color .3s ease, background .3s ease;
    transition-delay: calc(var(--i) * .3s + .2s);
  }

  .bs-roadmap.is-ready.is-visible .bs-roadmap-fill {
    transform: none;
  }

  .bs-roadmap.is-ready.is-visible .bs-roadmap-list li {
    opacity: 1;
    transform: none;
  }

  .bs-roadmap.is-ready.is-visible .bs-roadmap-marker {
    border-color: var(--cta-color);
  }

  .bs-roadmap.is-ready.is-visible .is-goal .bs-roadmap-marker {
    background: var(--cta-color);
  }
}

.bs-features {
  background: #222;
  color: #fff;
}

.bs-features-grid {
  display: block;
}

.bs-features .bs-section-head p {
  color: #cfcfcf;
}

.bs-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #3a3a3a;
  border: 1px solid #3a3a3a;
}

.bs-feature-list li {
  padding: 1.8rem 1.6rem 1.9rem;
  background: #222;
  color: #cfcfcf;
  line-height: 1.45;
  transition: background .25s ease;
}

.bs-feature-list li:hover {
  background: #2a2a2a;
}

.bs-feature-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.2rem;
  place-items: center;
  background: rgba(133, 167, 0, .14);
  color: #a9cf1c;
}

.bs-feature-icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

.bs-feature-list strong {
  display: block;
  margin-bottom: .3rem;
  color: #fff;
  font-size: 1.12rem;
}

/* Privacy / hosting */

.bs-privacy-grid {
  display: grid;
  grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.bs-privacy-badge {
  display: grid;
  max-width: 21rem;
  gap: .35rem;
  padding: 2rem 1.8rem 0;
  background: #222;
  color: #fff;
  box-shadow: 0 1.2rem 2.5rem rgba(34, 34, 34, .14);
}

.bs-privacy-icon {
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: 1.2rem;
  place-items: center;
  background: var(--cta-color);
  color: #fff;
}

.bs-privacy-icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

.bs-privacy-badge strong {
  font-size: 1.45rem;
  line-height: 1.15;
}

.bs-privacy-badge > span:not([class]) {
  color: #bbb;
}

.bs-flag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: .45rem;
  margin: 1.8rem -1.8rem 0;
}

.bs-flag i:nth-child(1) { background: #111; }
.bs-flag i:nth-child(2) { background: #dd0000; }
.bs-flag i:nth-child(3) { background: #ffce00; }

.bs-privacy h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 400;
}

.bs-privacy-lead {
  max-width: 40rem;
  margin: 0 0 2.2rem;
  font-size: 1.15rem;
  line-height: 1.55;
}

.bs-privacy-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs-privacy-points li {
  padding-left: 1.7rem;
  background: url("../images/check.svg") left .2rem / 1rem no-repeat;
  color: #333;
  line-height: 1.45;
}

.bs-privacy-points strong {
  display: block;
  margin-bottom: .2rem;
  color: #111;
  font-size: 1.1rem;
}

.bs-contact-facts {
  display: grid;
  gap: .8rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.bs-register-hint {
  display: grid;
  gap: .9rem;
  margin-top: 2.4rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid #d6d6d6;
}

.bs-register-hint p {
  margin: 0;
  line-height: 1.5;
  color: #333;
}

.bs-register-hint strong {
  display: block;
  margin-bottom: .2rem;
  color: #111;
}

.bs-text-link {
  justify-self: start;
  color: #222;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--cta-color);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

.bs-text-link:hover {
  color: var(--cta-color);
}

.bs-contact-facts li {
  padding-left: 1.7rem;
  background: url("../images/check.svg") left .2rem / 1rem no-repeat;
  font-weight: 600;
}

/* ---------- Contact / access form ---------- */

.bs-contact {
  scroll-margin-top: var(--nav-height);
  background: #fff;
  border-top: 6px solid var(--cta-color);
}

.bs-note {
  margin-top: 1.4rem;
}

/* ---------- FAQ ---------- */

.bs-faq-list {
  max-width: 54rem;
  border-top: 1px solid #ccc;
}

.bs-faq-list details {
  border-bottom: 1px solid #ccc;
}

.bs-faq-list summary {
  position: relative;
  padding: 1.2rem 3rem 1.2rem 0;
  font-size: 1.15rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.bs-faq-list summary::-webkit-details-marker {
  display: none;
}

.bs-faq-list summary::after {
  content: "+";
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cta-color);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
}

.bs-faq-list details[open] summary::after {
  content: "–";
}

.bs-faq-list summary:focus-visible {
  outline: 2px solid var(--cta-color);
  outline-offset: 2px;
}

.bs-faq-list details p {
  max-width: 46rem;
  margin: 0 0 1.3rem;
  line-height: 1.55;
  color: #333;
}

/* ---------- Responsive ---------- */

@media (max-width: 1050px) {
  .bs-hero-grid,
  .bs-problem-grid {
    grid-template-columns: 1fr;
  }

  .bs-report {
    max-width: 34rem;
  }

  .bs-roadmap-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2.8rem;
  }

  .bs-roadmap-phases,
  .bs-roadmap-track {
    display: none;
  }

  .bs-roadmap-list {
    margin-top: 0;
  }
}

@media (max-width: 800px) {
  .bs-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .bs-shot-3d,
  .bs-shot-pdf,
  .bs-shot-result {
    grid-column: auto;
    grid-row: auto;
  }

  .bs-shot img[width][height],
  .bs-shot-result img[width][height] {
    height: auto;
    aspect-ratio: auto;
    object-fit: initial;
  }

  .bs-feature-list,
  .bs-privacy-points,
  .bs-privacy-grid {
    grid-template-columns: 1fr;
  }

  .bs-privacy-badge {
    max-width: none;
  }

  /* Vertical roadmap */
  .bs-roadmap-list {
    position: relative;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    padding-left: 2.4rem;
  }

  .bs-roadmap-list::before {
    content: "";
    position: absolute;
    left: calc(var(--bs-marker) / 2 - 1.5px);
    top: .3rem;
    bottom: .3rem;
    width: 3px;
    background: var(--cta-color);
  }

  .bs-roadmap-list li {
    position: relative;
  }

  .bs-roadmap-marker {
    position: absolute;
    left: -2.4rem;
    top: .1rem;
    margin: 0;
  }
}

@media (max-width: 560px) {
  .bs-hero-actions .bs-button {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-button,
  .bs-feature-list li,
  .bs-roadmap-marker {
    transition: none;
  }
}