/* Mockup additions on top of site.css + custom.css (live-site build).
   Same tokens as the live site: 1rem = 10px at 1440 wide and scales with the window,
   accent #ff7d55, background-grey #f1f1f1, lighter-grey #e7e7e7, darker-grey #959595, Aeonik 400/500. */

/* ---------- Products dropdown under the nav pill ---------- */
.mock-drop { position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translate(-50%, -0.6rem);
  width: 30rem; padding: 0.3rem; border-radius: 1.5rem; background: rgb(231 231 231 / .92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: 0.3rem; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.mock-drop.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .25s ease; }
.mock-drop-item { display: flex; align-items: center; gap: 1.1rem; min-height: 4.4rem; padding: 0 1.3rem; border-radius: 1.2rem; background: #fff; transition: background .2s; }
.mock-drop-item:hover { background: rgb(255 255 255 / .6); }
.mock-drop-item:hover .project-icon svg path { fill: #ff7d55; }
.mock-ic { width: 1.7rem; height: 1.7rem; flex: none; display: inline-block; }
.mock-drop-txt { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 1rem; }
.mock-sub { margin-right: 1.6rem; }

/* ---------- Home ---------- */
.bd-vision { padding-top: 12rem; padding-bottom: 10rem; }
.bd-sec-pad { padding-top: 6rem; padding-bottom: 6rem; }
.bd-cta { padding-top: 8rem; padding-bottom: 10rem; }
.bd-news { padding-top: 8rem; padding-bottom: 10rem; }
.bd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; margin-top: 2rem; }
.bd-tilewrap { display: flex; flex-direction: column; gap: 1rem; }
.bd-tile { position: relative; display: block; height: 60rem; border-radius: 2rem; overflow: hidden; isolation: isolate; background: #dadada; }
.bd-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.bd-tile:hover img { transform: scale(1.03); }
.bd-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / .55) 100%); }
.bd-tile-top { position: absolute; top: 2rem; left: 2rem; }
.bd-chip { display: inline-flex; align-items: center; gap: 0.6rem; height: 3.6rem; padding: 0 1.3rem; border-radius: 1.2rem; background: rgb(255 255 255 / .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #000; }
.bd-chip-ic { width: 1.7rem; height: 1.7rem; display: inline-block; }
.bd-chip .project-icon svg path { fill: #000; }
.bd-tile-bottom { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.bd-tile-txt { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.bd-tile-line { opacity: .85; }
.bd-tile-go { width: 4.2rem; height: 4.2rem; flex: none; border-radius: 1.5rem; background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.bd-tile-go > span { width: 3.6rem; height: 3.6rem; border-radius: 1.2rem; background: rgb(255 255 255 / .2); display: flex; align-items: center; justify-content: center; transition: background .3s; }
.bd-tile:hover .bd-tile-go > span { background: #ff7d55; }
.bd-tile-actions { display: flex; gap: 1rem; }

/* ---------- Product pages: white panel, as on the live project pages ---------- */
.bd-ppage { padding: 1rem; }
.bd-panel { background: #fff; border-radius: 1.5rem; padding: 1rem; }
.bd-phero { width: 100%; height: 54rem; object-fit: cover; border-radius: 1rem; display: block; }
.bd-pin { padding: 2.5rem 1rem 1rem; }
.bd-pstatement { color: rgb(149 149 149); margin: 0.6rem 0 4rem; }
.bd-psec { border-top: 1px solid rgb(231 231 231); margin-top: 6rem; padding-top: 2rem; }
.bd-psec > h2 { margin-bottom: 2rem; }
.bd-spec { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid rgb(218 218 218); }
.bd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bd-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bd-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-card { background: rgb(241 241 241); border-radius: 1.5rem; padding: 0.6rem; display: flex; flex-direction: column; }
.bd-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.1rem; display: block; }
.bd-card-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.bd-specs { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; }
.bd-card.noimg .bd-specs { margin-top: 0; }
.bd-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.bd-cap { display: flex; flex-direction: column; gap: 0.6rem; padding-right: 2rem; }
.bd-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bd-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; display: block; }
.bd-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.bd-gallery.two img:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
.bd-pcontact { border-top: 1px solid rgb(231 231 231); margin-top: 6rem; padding: 6rem 0 4rem; display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center; }
.bd-next { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2rem 1rem 1rem; }
.bd-next:hover .bd-next-in { background: #fff; }

@media (max-width: 1023px) {
  .bd-cards.three, .bd-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-tile { height: 50rem; }
}
@media (max-width: 767px) {
  .bd-tiles, .bd-cards, .bd-cards.three, .bd-cards.four, .bd-gallery, .bd-caps { grid-template-columns: 1fr; }
  .bd-tile { height: 44rem; }
  .bd-phero { height: 26rem; }
  .bd-gallery img:first-child { aspect-ratio: 4 / 3; }
  .bd-vision { padding-top: 8rem; padding-bottom: 6rem; }
  .bd-next .text-h1 { font-size: 4rem; }
}