/* Spotlight boards, group d: HPI, Precision Industries, Trent, Habitat, Bshaier Studio.
   Every rule is scoped to a .bd-* board class. Positions use cqw (board width = 100cqw, height = 56.25cqw). */

/* ---------- HPI: dark navy, profile phone + staggered columns ---------- */
.bd-hpi { --shot: rgba(0,0,0,.6); background: radial-gradient(ellipse 34% 60% at 18% 55%, rgba(240,122,16,.22), transparent 70%), radial-gradient(ellipse 60% 70% at 75% 30%, rgba(60,110,220,.14), transparent 70%), linear-gradient(160deg, #10224a, #070f22); }
.bd-hpi::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 2.4cqw); z-index: -1; }
.bd-hpi .g-phone { left: 5.4cqw; top: 4.2cqw; width: 24.6cqw; }
.bd-hpi .phone { box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 3cqw 6cqw -2cqw rgba(0,0,0,.75), 0 0 6cqw -2cqw rgba(240,122,16,.35); }
.bd-hpi .screen { background: #000; display: flex !important; flex-direction: column; }
.bd-hpi .prof { flex: none; color: #fff; padding: 3.6cqw 1.1cqw 0; }
.bd-hpi .prof .sk { display: block; height: .5cqw; border-radius: 1cqw; background: rgba(255,255,255,.22); }
.bd-hpi .prof .top { margin-bottom: 1.1cqw; }
.bd-hpi .prof .head { display: flex; align-items: center; gap: 1.4cqw; }
.bd-hpi .prof .head img { width: 5.2cqw; height: 5.2cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .18cqw #000, 0 0 0 .36cqw #F07A10; }
.bd-hpi .prof .stats { flex: 1; display: flex; justify-content: space-around; }
.bd-hpi .prof .stats span { display: grid; gap: .4cqw; justify-items: center; }
.bd-hpi .prof .stats b { width: 2cqw; height: .7cqw; border-radius: 1cqw; background: rgba(255,255,255,.75); }
.bd-hpi .prof .stats i { width: 3cqw; height: .45cqw; border-radius: 1cqw; background: rgba(255,255,255,.25); }
.bd-hpi .prof .bio { display: grid; gap: .45cqw; margin: 1.1cqw 0 .9cqw; }
.bd-hpi .prof .btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; }
.bd-hpi .prof .btns span { height: 1.7cqw; border-radius: .5cqw; background: rgba(255,255,255,.12); }
.bd-hpi .prof .btns span:first-child { background: #F07A10; }
.bd-hpi .prof .tabs { display: flex; margin: 1cqw -1.1cqw 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.bd-hpi .prof .tabs i { flex: 1; height: 1.8cqw; position: relative; }
.bd-hpi .prof .tabs i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9cqw; height: .9cqw; transform: translate(-50%,-50%); border: .12cqw solid rgba(255,255,255,.4); border-radius: .15cqw; }
.bd-hpi .prof .tabs i.on { box-shadow: inset 0 -.14cqw 0 #fff; }
.bd-hpi .prof .tabs i.on::after { border-color: #fff; }
.bd-hpi .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #000; }
.bd-hpi .pgrid .w-piece { aspect-ratio: 1; overflow: hidden; }
.bd-hpi .pgrid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-hpi .g-col { width: 18.8cqw; display: grid; gap: 1.8cqw; }
.bd-hpi .g-col .tile { aspect-ratio: 1; }
.bd-hpi .c1 { left: 35.6cqw; top: 4.4cqw; }
.bd-hpi .c2 { left: 56.2cqw; top: 11.4cqw; }
.bd-hpi .c3 { left: 76.8cqw; top: 4.4cqw; }

/* ---------- Precision Industries: pale steel, alternating stories and post columns ---------- */
.bd-pi { --shot: rgba(20,32,60,.38); background: radial-gradient(ellipse 50% 45% at 50% 52%, rgba(240,122,16,.16), transparent 70%), linear-gradient(170deg, #e7ebf1, #c9d1dc); }
.bd-pi::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(15,42,94,.18) 15%, rgba(15,42,94,.18) 85%, transparent); z-index: -1; }
.bd-pi .story { width: 17.2cqw; aspect-ratio: 9 / 16; border-radius: 1.4cqw; overflow: hidden; box-shadow: 0 2.6cqw 4.4cqw -1.8cqw rgba(15,30,60,.55), 0 0 0 1px rgba(255,255,255,.3); transition: transform .5s var(--ease); }
.bd-pi .story img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-pi .story:hover { transform: translateY(-.35cqw); }
.bd-pi .s1 { left: 5.8cqw; top: 5.4cqw; }
.bd-pi .s2 { left: 41.4cqw; top: 5.4cqw; }
.bd-pi .s3 { left: 77cqw; top: 5.4cqw; }
.bd-pi .g-col { width: 14.4cqw; display: grid; gap: 1.6cqw; top: 20.4cqw; }
.bd-pi .g-col .tile { aspect-ratio: 1; }
.bd-pi .c1 { left: 25cqw; }
.bd-pi .c2 { left: 60.6cqw; }

/* ---------- Trent: deep teal, stationery hero, web + posts, video still over card mockup ---------- */
.bd-trent { --shot: rgba(0,0,0,.55); background: radial-gradient(ellipse 36% 70% at 18% 50%, rgba(70,170,140,.18), transparent 70%), radial-gradient(ellipse 30% 50% at 88% 70%, rgba(78,154,147,.14), transparent 70%), linear-gradient(160deg, #0f2a24, #08171a); }
.bd-trent .g-hero { left: 4.4cqw; top: 4.4cqw; width: 30cqw; height: 47.4cqw; }
.bd-trent .g-web { left: 37.8cqw; top: 4.4cqw; width: 30.4cqw; border-radius: 1cqw; overflow: hidden; background: #f4f4f2; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); transition: transform .6s var(--ease); }
.bd-trent .g-web:hover { transform: scale(1.01); }
.bd-trent .chrome { display: flex; align-items: center; gap: .45cqw; height: 2.2cqw; padding: 0 .9cqw; background: #e6e5e1; }
.bd-trent .chrome i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #c9c7c1; }
.bd-trent .chrome .url { flex: 1; height: 1cqw; margin-left: 1cqw; border-radius: 1cqw; background: #f7f6f3; }
.bd-trent .g-web img { display: block; width: 100%; aspect-ratio: 1264 / 562; object-fit: cover; }
.bd-trent .g-posts { left: 37.8cqw; top: 22.2cqw; width: 30.4cqw; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4cqw; }
.bd-trent .g-posts .tile { aspect-ratio: 1; }
.bd-trent .g-card { left: 71.6cqw; top: 27.4cqw; width: 20cqw; height: 24.4cqw; }
.bd-trent .g-card img { object-position: 50% 45%; }
.bd-trent .g-phone { left: 78.4cqw; top: 4.4cqw; width: 17.2cqw; z-index: 2; }

/* ---------- Habitat: linen, portrait hero photo, wide photo, three posts ---------- */
.bd-hab { --shot: rgba(90,50,20,.32); background: radial-gradient(ellipse 45% 60% at 20% 40%, rgba(255,255,255,.55), transparent 70%), radial-gradient(ellipse 40% 50% at 85% 85%, rgba(168,88,42,.14), transparent 70%), linear-gradient(165deg, #f3ebdd, #e4d6bf); }
.bd-hab .photo { box-shadow: 0 2.4cqw 4.6cqw -2cqw rgba(80,45,15,.45), 0 0 0 1px rgba(0,0,0,.04); }
.bd-hab .g-hero { left: 4.4cqw; top: 4.4cqw; width: 36cqw; height: 47.4cqw; }
.bd-hab .g-hero img { object-position: 50% 50%; }
.bd-hab .g-wide { left: 43.6cqw; top: 4.4cqw; width: 52cqw; height: 25.3cqw; }
.bd-hab .g-wide img { object-position: 50% 62%; }
.bd-hab .g-tiles { left: 43.6cqw; top: 31.5cqw; width: 52cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.bd-hab .g-tiles .tile { aspect-ratio: 4 / 5; }

/* ---------- Bshaier Studio: white silk, post strip, portrait, story phone ---------- */
.bd-bsh { --shot: rgba(70,45,30,.30); background: radial-gradient(ellipse 40% 70% at 50% 45%, rgba(255,255,255,.7), transparent 70%), linear-gradient(160deg, #f4f1ec, #e2d9cf); }
.bd-bsh .photo { box-shadow: 0 2.4cqw 4.6cqw -2cqw rgba(60,35,20,.5), 0 0 0 1px rgba(0,0,0,.04); }
.bd-bsh .g-col { left: 10.4cqw; top: 4.6cqw; width: 14.6cqw; display: grid; gap: 1.6cqw; }
.bd-bsh .g-col .tile { aspect-ratio: 1; }
.bd-bsh .g-hero { left: 28.2cqw; top: 4.6cqw; width: 37.4cqw; height: 47cqw; }
.bd-bsh .g-hero img { object-position: 50% 35%; }
.bd-bsh .g-phone { left: 69.2cqw; top: 6.8cqw; width: 22cqw; }
.bd-bsh .phone { background: #1a1411; box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2.6cqw 5cqw -2cqw rgba(60,35,20,.6); }

/* ---------- phones: boards restack ---------- */


/* phone restacking removed at integration: boards keep their 16:9 composition and scale with the slide (cqw units). */