/* ─────────────────────────────────────────────────────────────────────────────
show.css: the seven "show, don't tell" patterns for the Commercial pages
(BC-KIT, builtos.com Commercial Pages plan, approved as recommended 2026-11-11).
The founder: "make the commercial pages original theme but restructured a bit using clever mixing
and matching … that page is useless and shows a giant header and logos for no reason with no context".
Nothing here is a new look. Each pattern is two kit sections put together (kit.md codes):
P1 .bo-op split opener PH words + the HERO-HOME film card and its thumbnail strip
P2 .bo-mt media-text BB-SEC head + MEDIA-TEXT body, 55/45, sides swap (--rev)
P3 .bo-scr product screen the PRODUCT-CARDS frame (white, 22 px) around a real app screen
P4 .bo-fc film card bo-film: a mid-film poster, the title-free -loop inline, the -cut
in the lightbox (show.js)
P5 .bo-hs render + hotspots numbered green dots on a real render; labels on a laptop, the list
under it on a phone (show.js lights the dot in view)
P6 .bo-proof proof strip LOGO-MARQUEE (grey, ≤96×24) + two counters
P7 .bo-trio screen trio STEP-CARDS / FILMS-ROW with three real pictures; a sideways rail
on a phone (rails.js / rails.css: bleed, fade, no scrollbar)
+ .bo-head BADGE-TITLE the jkd-badge pill over a 48 px bold + light title
Copy the markup from /_kit/show (public/_kit/show/index.html, noindex, out of the sitemap and the menus).
Load on a page with:
(P1, P4)
rails.css + rails.js (P1 rail, P7)
This file is cached for 30 days: bump ?v= on every page when it changes.
Colours are the theme's tokens (--jkd-*), so the light/dark toggle works; the only literal colours are the
kit's greens (#00ff85 on dark, #00874a / #007a40 on light) and the dark insides of the film cards, which are
dark in both schemes, as the theme draws them. Every motion stops under prefers-reduced-motion.
───────────────────────────────────────────────────────────────────────────── */
:root{--show-g:#00ff85;--show-eye:#00ff85;--show-sh:none;--show-card:var(--jkd-bg-secondary,#1c1c1c)}
:root[data-color-scheme="light"]{--show-g:#00874a;--show-eye:#007a40;
--show-sh:0 1px 2px rgba(20,22,26,.05),0 18px 44px -24px rgba(20,22,26,.16)}
/* one column for every pattern: the theme's 1100 px content width plus its gutter */
.bo-op__in,.bo-mt .bb-in,.bo-show-in,.bo-proof__in{box-sizing:border-box;width:100%;
max-width:calc(var(--jkd-container-xl,1100px) + var(--jkd-container-padding,30px)*2);
margin:0 auto;padding:0 var(--jkd-container-padding,30px)}
@media(max-width:767px){.bo-op__in,.bo-mt .bb-in,.bo-show-in,.bo-proof__in{padding:0 var(--jkd-container-padding-mobile,20px)}}
/* the theme's global img rule (max-width:100%;width:auto) and its swiper/gallery resets stay out */
:is(.bo-op,.bo-mt,.bo-scr,.bo-fc,.bo-hs,.bo-proof,.bo-trio) img{margin:0;max-height:none;min-width:0}
/* a plain section of any pattern below the opener: the BB-SEC rhythm */
.bo-show-sec{padding:clamp(56px,7vw,104px) 0}
/* ══ BADGE-TITLE (.bo-head) ══════════════════════════════════════════════════
Case studies
Bold half light half
…
*/
.bo-head{max-width:760px}
.bo-head--c{margin-left:auto;margin-right:auto;text-align:center}
.bo-head .jkd-badge{display:inline-flex;width:auto;height:30px;margin:0 0 18px;background:var(--jkd-accent,#00ff85);
border-color:var(--jkd-accent,#00ff85);color:#0b0b0b}
.bo-head .jkd-badge .badge-icon{display:none}
.bo-head h2{margin:0;font-size:var(--jkd-font-h3-size,48px);line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--jkd-heading)}
.bo-head h2 span{font-weight:300;color:var(--jkd-text)}
.bo-head p{margin:16px 0 0;color:var(--jkd-text);max-width:62ch}
.bo-head--c p{margin-left:auto;margin-right:auto}
@media(max-width:767px){.bo-head h2{font-size:var(--jkd-font-h3-size-mobile,28px)}}
/* the dark caption chip every film card and render carries (bottom left) */
.bo-chip{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px);
padding:7px 13px;border-radius:999px;background:rgba(18,18,18,.78);color:#fff;font-size:14px;line-height:1.2;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.bo-chip::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#00ff85}
.bo-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){.bo-chip{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:5px 10px;font-size:12px}}
/* ══ P1 SPLIT OPENER (.bo-op) ═════════════════════════════════════════════════
Words left (lockup, 56 px two-tone H1, one line, Book a Call + one more, breadcrumb); the film card
right with "01 / 04", a chip and a strip of thumbnails that switch it. On a phone: words, ONE button,
then the card and the strip, all on the first screen. Replaces BB-HDR / PH on a Commercial page. */
.bo-op{position:relative;padding:calc(var(--jkd-nav-top,30px) + var(--jkd-nav-height,55px) + clamp(36px,4.4vw,64px)) 0 clamp(40px,5vw,72px)}
.bo-op__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,4.2vw,56px);align-items:center}
.bo-op__words{min-width:0}
.bo-op__words>.bo-lk{margin:0 0 22px}
.bo-op__h{margin:0;font-size:clamp(44px,4.4vw,56px);line-height:1.02;font-weight:600;letter-spacing:-.025em;color:var(--jkd-heading);text-wrap:balance}
.bo-op__h em{font-style:normal;color:var(--show-g)}
.bo-op__h .fw-thin,.bo-op__h .bo-op__lt{font-weight:300;color:var(--jkd-text)}
.bo-op__sub{margin:18px 0 0;max-width:46ch;font-size:18px;line-height:1.38;color:var(--jkd-text);text-wrap:pretty}
/* E1: a small FOCUS-COUNTERS row inside the words (318 assets logged · 1 hotel) */
.bo-op__mini{display:flex;gap:34px;margin:22px 0 0}
.bo-op__mini b{display:block;font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.02em;color:var(--jkd-heading)}
.bo-op__mini span{display:block;margin-top:4px;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--jkd-text)}
.bo-op__btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.bo-op__btns .jkd-btn{margin:0}
.bo-op__btns button.jkd-btn{font:inherit;font-size:var(--jkd-font-btn-size,16px);cursor:pointer}
.bo-op__words .jkd-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:26px 0 0;font-size:14px;line-height:1.3;color:var(--jkd-text)}
.bo-op__words .jkd-breadcrumbs a{color:var(--jkd-text);text-decoration:none}
.bo-op__words .jkd-breadcrumbs a:hover{color:var(--jkd-heading)}
.bo-op__words .jkd-breadcrumbs .breadcrumb_last{color:var(--jkd-heading)}
.bo-op__words .jkd-breadcrumbs .bc-sep{display:inline-flex;opacity:.6;font-size:11px}
.bo-op__media{min-width:0}
.bo-op__cap{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.08em;text-transform:uppercase;color:var(--jkd-text)}
.bo-op__card{position:relative;aspect-ratio:16/9;border-radius:var(--jkd-br-lg,15px);overflow:hidden;background:#0d0f0e;
border:1px solid hsla(0,0%,100%,.1);box-shadow:0 30px 60px -28px rgba(0,0,0,.55);isolation:isolate}
:root[data-color-scheme="light"] .bo-op__card{border-color:rgba(20,22,26,.08);box-shadow:0 30px 60px -30px rgba(20,22,26,.32)}
.bo-op__film{position:absolute;inset:0;margin:0}
.bo-op__film>video,.bo-op__film>.bo-film__poster,.bo-op__still{position:absolute;inset:0;width:100%!important;height:100%!important;
object-fit:cover!important;object-position:var(--op-pos,center)!important;display:block}
.bo-op__still{z-index:2}
.bo-op__still[hidden]{display:none}
.bo-op__card .bo-film__play{z-index:5}
.bo-op__watch{position:absolute;right:14px;top:14px;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 11px;border:0;border-radius:999px;
background:#fff;color:#111;font:500 13px/1 var(--jkd-font-family);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.bo-op__watch svg{width:11px;height:11px;fill:currentColor}
.bo-op__watch:hover{background:#00ff85}
.bo-op__watch:focus-visible{outline:2px solid #00ff85;outline-offset:3px}
.bo-op__watch[hidden]{display:none}
/* the strip: one row; four share the width; more than five run sideways (rails.js bleeds and fades it) */
.bo-op__rail{display:flex;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.bo-op__rail--many{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.bo-op__rail--many::-webkit-scrollbar{display:none}
.bo-op__thumb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;margin:0;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;
background:var(--jkd-bg-secondary);color:var(--jkd-heading);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;
box-shadow:0 0 0 1px var(--jkd-border);transition:border-color .2s,opacity .2s}
.bo-op__rail--many .bo-op__thumb{flex:0 0 calc((100% - 40px) / 5.4)} /* five and a peek of the sixth, under the fade */
.bo-op__thumb img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/10;object-fit:cover!important;object-position:var(--op-pos,center)}
.bo-op__thumb span{display:block;padding:5px 7px 6px;font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-op__thumb:hover{border-color:var(--jkd-border-active)}
.bo-op__thumb[aria-pressed="true"]{border-color:var(--jkd-accent,#00ff85);box-shadow:none}
.bo-op__thumb:focus-visible{outline:2px solid var(--show-g);outline-offset:2px}
/* BO-CAROUSEL: a strip of more than five is a real carousel, on the card's column and never past it (rails.js
fades only a side with more to see, and no longer bleeds it). show.js adds the ‹ › row under it, in the theme's
carousel button (BO-ARROWS: jkd-testimonials .bot-wrp, 44 px, dimmed at each end), mouse drag, and keeps the
picked building in view. Trackpad, shift-wheel and swipe are the browser's own. */
.bo-op__rail--many{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:3px 0;margin-top:9px;cursor:grab;
-webkit-user-select:none;user-select:none}
.bo-op__rail--many.is-drag{cursor:grabbing;scroll-snap-type:none}
.bo-op__rail--many .bo-op__thumb img{-webkit-user-drag:none}
.bo-op__rail--many .bo-op__thumb:focus-visible{outline-offset:-4px}
.bo-op .bo-op__rail--many[data-bo-more]{--bo-fade:clamp(20px,3vw,40px)}
.bo-op__nav{display:flex;justify-content:flex-end;gap:10px;margin:10px 0 0}
.bo-op__nav[hidden]{display:none}
.bo-op__arrow{width:44px;height:44px;padding:0;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
font-size:17px;background-color:var(--jkd-outline-bg);border:1px solid var(--jkd-border);color:var(--jkd-heading);
transition:background-color .25s ease,border-color .25s ease,opacity .25s ease}
:root[data-color-scheme="light"] .bo-op__arrow{background-color:var(--jkd-bg-secondary)} /* white, like the thumbnails: on the grain a bare ring read as nothing */
.bo-op__arrow:hover:not(:disabled){background-color:var(--jkd-outline-bg-hover);border-color:var(--jkd-border-active)}
.bo-op__arrow:focus-visible{outline:2px solid var(--jkd-accent);outline-offset:3px}
.bo-op__arrow:disabled{opacity:.34;cursor:default}
@media(max-width:1024px){.bo-op__in{grid-template-columns:1fr}.bo-op__words{max-width:640px}}
@media(max-width:767px){
.bo-op{padding:calc(var(--jkd-nav-height-mobile,50px) + 46px) 0 36px}
.bo-op__in{gap:22px}
.bo-op__words>.bo-lk{margin-bottom:14px}
.bo-op__h{font-size:clamp(32px,9.2vw,40px);letter-spacing:-.02em}
.bo-op__sub{margin-top:12px;font-size:16px}
.bo-op__mini{gap:24px;margin-top:14px}.bo-op__mini b{font-size:24px}
.bo-op__btns{margin-top:18px}
.bo-op__btns>:not(:first-child){display:none} /* one button on a phone */
.bo-op__words .jkd-breadcrumbs,.bo-op__cap{display:none}
.bo-op__card{border-radius:13px}
.bo-op__watch{right:10px;top:10px;padding:6px 11px 6px 9px;font-size:12px}
.bo-op__rail{gap:6px;margin-top:8px}
.bo-op__rail--many{margin-top:5px}
.bo-op__nav{margin-top:8px}
.bo-op__rail--many .bo-op__thumb{flex:0 0 calc((100% - 24px) / 4.4)}
.bo-op__thumb{border-radius:7px}
.bo-op__thumb span{padding:3px 5px 4px;font-size:11px}
}
/* ══ P2 MEDIA-TEXT RHYTHM (.bo-mt) ════════════════════════════════════════════
…
…
… …
…
then ONE of: ol.bo-mt__list · ul.bo-mt__chips · p.bb-key
The picture takes 55 %, the words 45 %; --rev puts the picture on the right. On a phone the picture is first. */
.bo-mt.bb-sec{padding:clamp(56px,7vw,104px) 0;border-top:0}
.bo-mt .bb-in{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(32px,4.4vw,64px);align-items:center}
.bo-mt--rev .bb-in{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.bo-mt--rev .bo-mt__media{order:2}
.bo-mt__media{min-width:0}
.bo-mt__words{min-width:0}
.bo-mt .bb-eye{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;font-weight:400;letter-spacing:1.25px;
text-transform:uppercase;color:var(--show-eye)}
.bo-mt .bb-eye::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jkd-accent,#00ff85)}
.bo-mt .bb-h{margin:0;font-size:clamp(34px,3.6vw,44px);line-height:1.08;font-weight:500;letter-spacing:-.02em;color:var(--jkd-heading);text-wrap:balance}
.bo-mt .bb-h span{font-weight:300;color:var(--jkd-text)}
.bo-mt .bb-sub{margin:16px 0 0;max-width:52ch;color:var(--jkd-text)}
.bo-mt .bb-key{margin:22px 0 0;padding:14px 18px;border-left:3px solid var(--jkd-accent,#00ff85);border-radius:0 12px 12px 0;
background:var(--jkd-bg-secondary);font-size:16px;line-height:1.4;color:var(--jkd-heading)}
.bo-mt .bb-key span{color:var(--jkd-text)}
.bo-mt .bo-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.bo-mt__list{list-style:none;counter-reset:mt;margin:22px 0 0;padding:0;display:grid;gap:12px}
.bo-mt__list li{counter-increment:mt;display:grid;grid-template-columns:24px 1fr;gap:10px 12px;align-items:start;font-size:16px;line-height:1.3;color:var(--jkd-heading)}
.bo-mt__list li::before{content:counter(mt);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
background:var(--jkd-accent,#00ff85);color:#0b0b0b;font-size:12px;font-weight:600;line-height:1}
.bo-mt__list li::before{grid-row:1/span 2}
.bo-mt__list li b{grid-column:2;display:block;font-weight:500}
.bo-mt__list li span{grid-column:2;display:block;margin-top:-8px;font-size:14.5px;color:var(--jkd-text)}
.bo-mt__list li.is-on::before{background:#111;color:#00ff85;box-shadow:0 0 0 4px rgba(0,255,133,.3)}
.bo-mt__chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.bo-mt__chips li{padding:7px 12px;border:1px solid var(--jkd-border);border-radius:10px;background:var(--jkd-bg-secondary);font-size:14px;color:var(--jkd-heading)}
@media(max-width:899px){
.bo-mt .bb-in,.bo-mt--rev .bb-in{grid-template-columns:1fr;gap:26px}
.bo-mt--rev .bo-mt__media{order:0}
.bo-mt .bb-h{font-size:clamp(28px,7.6vw,34px)}
}
/* ══ P3 PRODUCT-SCREEN CARD (.bo-scr) ═════════════════════════════════════════
The PRODUCT-CARDS frame (white, 22 px; #1c1c1c in dark) around a real app screen, cropped below the app's
top bar (BC-ASSETS: commercial/scr--.webp, 1280x694; -640 beside it). A caption names the building and what is open,
with the building's logo at 22 px. Not .bo-pc itself: the home's .bo-pc is a whole-card link with hover lift. */
.bo-scr{position:relative;margin:0;padding:10px;border:1px solid var(--jkd-border);border-radius:22px;background:var(--jkd-bg-secondary);box-shadow:var(--show-sh)}
.bo-scr__shot{position:relative;display:block;overflow:hidden;border-radius:13px;aspect-ratio:var(--scr-ar,1280/694);background:var(--jkd-dark)}
.bo-scr__shot img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--scr-pos,center top)}
.bo-scr__shot picture{display:block;width:100%;height:100%}
/* --phone: a with the 4:5 phone crop (scr--asset-phone.webp) as its ≤767 px source */
@media(max-width:767px){.bo-scr__shot--phone{aspect-ratio:4/5}}
.bo-scr figcaption{position:relative;display:block;min-height:22px;padding:12px 6px 3px 38px;font-size:14px;line-height:1.35;color:var(--jkd-heading)}
.bo-scr figcaption img{position:absolute;left:6px;top:11px;width:22px!important;height:22px!important;object-fit:contain!important}
.bo-scr figcaption span{color:var(--jkd-text)}
:root:not([data-color-scheme="light"]) .bo-scr figcaption img{filter:grayscale(1) invert(1) brightness(1.6)}
@media(max-width:767px){.bo-scr{padding:8px;border-radius:18px}.bo-scr__shot{border-radius:11px}.bo-scr figcaption{font-size:13px}}
/* ══ P4 FILM CARD (.bo-fc) ════════════════════════════════════════════════════
…
The poster is a frame from the middle of the film (BC-ASSETS M1), never the dark title card. The title-free
loop plays inline; the cut, with its titles, opens in the lightbox (show.js) from the card or ▶ Play. */
.bo-fc{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--jkd-br-lg,15px);overflow:hidden;background:#0d0f0e;
border:1px solid var(--jkd-border);box-shadow:var(--show-sh);cursor:pointer;isolation:isolate}
.bo-fc>video,.bo-fc>.bo-film__poster{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--fc-pos,center);display:block}
.bo-fc__open{position:absolute;right:14px;top:14px;z-index:5;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 11px;border:0;border-radius:999px;
background:#fff;color:#111;font:500 13px/1 var(--jkd-font-family);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background-color .2s}
.bo-fc__open svg{width:11px;height:11px;fill:currentColor}
.bo-fc:hover .bo-fc__open,.bo-fc__open:hover{background:#00ff85}
.bo-fc__open:focus-visible{outline:2px solid #00ff85;outline-offset:3px}
.bo-fc .bo-film__play{z-index:5}
.bo-fc--tall{aspect-ratio:4/5}
@media(max-width:767px){.bo-fc{border-radius:13px}.bo-fc__open{right:10px;top:10px;padding:6px 11px 6px 9px;font-size:12px}}
/* the lightbox show.js builds on the first open: the cut, whole, with its own controls */
.bo-show-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(12px,3vw,40px);border:0;
background:rgba(4,6,5,.9);color:#fff;display:none;align-items:center;justify-content:center;z-index:100003}
.bo-show-lb[open]{display:flex}
.bo-show-lb::backdrop{background:transparent}
.bo-show-lb__box{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,calc((100vh - 140px) * 16 / 9),1440px)}
.bo-show-lb__box video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.bo-show-lb__row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.bo-show-lb__t{margin:0;font-size:15px;color:rgba(255,255,255,.8)}
.bo-show-lb__x{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;
background:rgba(255,255,255,.08);color:#fff;font:500 14px/1 var(--jkd-font-family);cursor:pointer}
.bo-show-lb__x:hover{background:rgba(255,255,255,.16)}
.bo-show-lb__x:focus-visible{outline:2px solid #00ff85;outline-offset:3px}
/* ══ P5 RENDER WITH HOTSPOTS (.bo-hs) ═════════════════════════════════════════
Numbered green dots (the jkd-badge green) at x/y % on a real render (BC-ASSETS M7 holds the positions).
The lit dot shows its small white label on a laptop; on a phone the labels hide and the numbered list
under the render takes over. show.js lights a dot on hover/focus, and lights the one whose item
([data-hs] in the same section, e.g. a P2 list or a timeline row) is in the middle of the screen. */
.bo-hs{position:relative;margin:0;padding:10px;border:1px solid var(--jkd-border);border-radius:22px;background:var(--jkd-bg-secondary);box-shadow:var(--show-sh)}
.bo-hs__stage{position:relative;border-radius:13px;overflow:hidden;aspect-ratio:var(--hs-ar,16/9);background:var(--jkd-dark)}
.bo-hs__stage>img{display:block;width:100%!important;height:100%!important;object-fit:cover!important}
.bo-hs__dot{position:absolute;left:var(--x);top:var(--y);z-index:2;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;
background:#00ff85;color:#0b0b0b;font:600 13px/30px var(--jkd-font-family);text-align:center;cursor:pointer;
box-shadow:0 0 0 6px rgba(0,255,133,.28),0 4px 10px rgba(0,0,0,.25);transition:background-color .2s,color .2s,box-shadow .2s}
.bo-hs__dot.is-on{z-index:3;background:#111;color:#00ff85;box-shadow:0 0 0 6px rgba(0,255,133,.5),0 4px 12px rgba(0,0,0,.3)}
.bo-hs__dot:focus-visible{outline:2px solid #fff;outline-offset:4px}
.bo-hs__dot.is-on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(0,255,133,.7);animation:bo-hs-ping 1.8s ease-out infinite}
@keyframes bo-hs-ping{from{transform:scale(1);opacity:1}to{transform:scale(1.9);opacity:0}}
.bo-hs__lbl{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);display:none;width:max-content;max-width:220px;padding:8px 11px;
border-radius:10px;background:#fff;color:#111;font:400 13px/1.25 var(--jkd-font-family);text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.2);pointer-events:none}
.bo-hs__lbl b{display:block;font-weight:500}
.bo-hs__dot--l .bo-hs__lbl{left:auto;right:calc(100% + 12px)}
.bo-hs__dot.is-on .bo-hs__lbl{display:block}
.bo-hs__list{display:none;list-style:none;margin:0;padding:12px 6px 2px;gap:9px}
.bo-hs__list li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:14.5px;line-height:1.3;color:var(--jkd-heading);cursor:pointer}
.bo-hs__list li::before{content:attr(data-hs);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#00ff85;color:#0b0b0b;
font-size:12px;font-weight:600;line-height:1}
.bo-hs__list li.is-on::before{background:#111;color:#00ff85}
.bo-hs__list li span{display:block;color:var(--jkd-text);font-size:13.5px}
.bo-hs__list b{font-weight:500}
@media(max-width:767px){
.bo-hs{padding:8px;border-radius:18px}
.bo-hs__stage{border-radius:11px}
.bo-hs__dot{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:11px;line-height:24px;box-shadow:0 0 0 4px rgba(0,255,133,.3),0 3px 8px rgba(0,0,0,.25)}
.bo-hs__dot .bo-hs__lbl,.bo-hs__dot.is-on .bo-hs__lbl{display:none}
.bo-hs__list{display:grid}
}
/* ══ P6 PROOF STRIP (.bo-proof) ═══════════════════════════════════════════════
One thin band after the product sections, before the questions: a line, the nine logos in grey (24 px tall,
at most 96 px wide) moving slowly, and two counters. The second
is the marquee's copy (aria-hidden). */
.bo-proof{padding:clamp(34px,4vw,48px) 0;border-top:1px solid var(--jkd-border);border-bottom:1px solid var(--jkd-border)}
.bo-proof__in{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center}
.bo-proof__lbl{margin:0;font-size:15px;line-height:1.35;color:var(--jkd-heading)}
.bo-proof__lbl a{display:block;margin-top:3px;font-size:13.5px;color:var(--show-eye);text-decoration:none}
.bo-proof__lbl a:hover{text-decoration:underline}
.bo-proof__logos{display:flex;overflow:hidden;min-width:0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bo-proof__track{display:flex;flex:none;align-items:center;gap:40px;margin:0;padding:0 20px;list-style:none;animation:bo-proof-run 38s linear infinite}
.bo-proof__logos:hover .bo-proof__track{animation-play-state:paused}
@keyframes bo-proof-run{to{transform:translateX(-100%)}}
.bo-proof__track li{flex:none;display:flex;align-items:center;height:24px}
.bo-proof__track img{display:block;width:auto!important;height:24px!important;max-width:96px!important;object-fit:contain!important;
filter:grayscale(1);opacity:.6}
:root:not([data-color-scheme="light"]) .bo-proof__track img{filter:grayscale(1) invert(1) brightness(1.5);opacity:.55}
.bo-proof__nums{display:flex;gap:26px;margin:0}
.bo-proof__nums div{display:flex;flex-direction:column-reverse}
.bo-proof__nums dd{margin:0;font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.02em;color:var(--jkd-heading);font-variant-numeric:tabular-nums}
.bo-proof__nums dt{margin-top:4px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--jkd-text)}
@media(max-width:899px){
.bo-proof__in{grid-template-columns:1fr;gap:18px}
}
@media(prefers-reduced-motion:reduce){
.bo-proof__track{animation:none;flex-wrap:wrap;flex:1 1 auto;row-gap:16px;padding:0}
.bo-proof__track[aria-hidden]{display:none}
.bo-proof__logos{-webkit-mask-image:none;mask-image:none}
}
/* ══ P7 SCREEN TRIO (.bo-trio) ════════════════════════════════════════════════
Three real pictures (the model, an asset, the CapEx plan) in the STEP-CARDS form: a picture with a small
label, a title, one line. Replaces chips and tiles that only had icons or logos. A sideways rail on a phone. */
.bo-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin:clamp(30px,3.4vw,44px) 0 0;padding:0;list-style:none}
.bo-trio--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bo-trio__card{min-width:0;margin:0}
.bo-trio__shot{position:relative;display:block;overflow:hidden;margin:0 0 14px;border:1px solid var(--jkd-border);border-radius:12px;aspect-ratio:var(--scr-ar,1280/694);background:var(--jkd-dark)}
.bo-trio__shot>img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--scr-pos,center)}
.bo-trio__tag{position:absolute;left:10px;top:10px;z-index:2;padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.92);color:#111;
font:400 10.5px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.bo-trio__card h3{margin:0 0 6px;font-size:19px;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--jkd-heading)}
.bo-trio__card p{margin:0;font-size:15px;line-height:1.4;color:var(--jkd-text)}
@media(max-width:767px){
.bo-trio,.bo-trio--4{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.bo-trio::-webkit-scrollbar{display:none}
.bo-trio__card{flex:0 0 78%;scroll-snap-align:start}
}
/* reduced motion: nothing moves by itself */
@media(prefers-reduced-motion:reduce){
.bo-op__thumb,.bo-hs__dot,.bo-fc__open{transition:none}
.bo-hs__dot.is-on::after{animation:none;opacity:0}
}
/* ══ PHONE PASS (BC-6) ════════════════════════════════════════════════════════
Measured at 390 on every Commercial page (decision 7: card rows on a phone are sideways rails). Laptops keep
their grids and stacks; nothing here applies above 899 px.
1. RAILS. Rows of cards that stacked one under the other become the theme's sideways rail (rails.js bleeds and
fades them; the selectors are listed there too): the nine-render stack on /commercial (A7) and /commercial/3d
(B7), the two agent cards (A4), and the industry pages' result cards (E4) and case cards (E5).
The nine-render stack: a rail, not a compact grid. A two-up grid of nine shrinks each render to 170 px and the
record's headline to five lines; the rail keeps the render the size of the screen and still takes 2,600 px off. */
@media(max-width:767px){
.jkd-portfolio.stacked-rows .grid-inner,
.bo-agents--cm .bo-agents__grid,
#page-ind .bo-rec,
#page-ind .bo-arch--wide{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch;
gap:14px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
-webkit-overflow-scrolling:touch;padding-bottom:4px}
:is(.jkd-portfolio.stacked-rows .grid-inner,.bo-agents--cm .bo-agents__grid,#page-ind .bo-rec,#page-ind .bo-arch--wide)::-webkit-scrollbar{display:none}
.jkd-portfolio.stacked-rows .grid-inner>*,
.bo-agents--cm .bo-agents__grid>*,
#page-ind .bo-rec>*,
#page-ind .bo-arch--wide>*{flex:0 0 82%;min-width:0;margin:0!important;scroll-snap-align:start}
/* the theme's column puts it at flex-start, which sizes a sideways row to all nine cards at once */
.jkd-portfolio.stacked-rows .grid-inner{transform:none!important;align-self:stretch;min-width:0}
.jkd-portfolio.stacked-rows .grid-inner>.portfolio-item>*{flex-shrink:0}
/* the card's words are a column on a phone; in a row of equal-height cards a 100% basis would take the card's height */
.jkd-portfolio.stacked-rows .grid-inner .portfolio-body{flex-wrap:nowrap}
.jkd-portfolio.stacked-rows .grid-inner .portfolio-body>*{flex:0 0 auto}
/* the agent cards are long chats: the rail keeps both the same height, so the shorter one grows to match */
.bo-agents--cm .bo-agent{flex-basis:86%}
/* E5's "all nine" card stands as tall as its neighbours, its logos centred in it */
#page-ind .bo-arch--wide .bo-arch__all{display:flex;flex-direction:column;justify-content:center}
}
/* 2. P5 ON A PHONE: the numbered list sits right under the render. A P2 section whose picture is a render with
hotspots and whose words carry the list reads: eyebrow, title, line, render, list, then the rest. */
@media(max-width:899px){
.bo-mt:has(.bo-mt__media .bo-hs):has(.bo-mt__words .bo-mt__list) .bb-in{gap:0}
.bo-mt:has(.bo-mt__media .bo-hs):has(.bo-mt__words .bo-mt__list) .bo-mt__words{display:contents}
.bo-mt:has(.bo-mt__media .bo-hs):has(.bo-mt__words .bo-mt__list) .bo-mt__media{order:1;margin:24px 0 0}
.bo-mt:has(.bo-mt__media .bo-hs):has(.bo-mt__words .bo-mt__list) .bo-mt__list{order:2;margin-top:18px}
.bo-mt:has(.bo-mt__media .bo-hs):has(.bo-mt__words .bo-mt__list) .bo-mt__list~*{order:3}
.bo-mt:has(.bo-mt__media .bo-hs) .bb-eye{justify-self:start}
}
/* 3. THE TIMELINE'S MOMENTS (A3): each record picture is a thumbnail beside its moment, not a second full-width
picture under the render; the four moments stop being four screens tall. */
@media(max-width:768px){
.bo-tl .exp-timelines .exp-item .exp-header{display:grid;grid-template-columns:minmax(0,1fr) 116px;column-gap:14px;row-gap:6px;align-items:start}
.bo-tl .exp-timelines .exp-item .exp-header .exp-logo{grid-column:1;width:auto}
.bo-tl .exp-timelines .exp-item .exp-header .exp-info{grid-column:1}
.bo-tl .bo-exp-shot{grid-column:2;grid-row:1/span 2;width:116px;max-width:none;margin:0;border-radius:9px}
}
/* 4. A CASE STUDY'S PREVIOUS / NEXT: side by side, not two full-width tiles */
@media(max-width:767px){
.single-project .portfolio-nav .nav-inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.single-project .portfolio-nav .nav-item:not(.nav-archive) a{gap:6px;padding:0 10px 10px!important;min-height:44px}
.single-project .portfolio-nav .nav-item img.bmd__img--card{width:calc(100% + 20px)!important}
.single-project .portfolio-nav .nav-item .nav-text{font-size:14px}
}
/* 5. TAPS AND TEXT: every control 44 px, no text under 12 px */
@media(max-width:767px){
.jkd-btn.jkd-btn-md,.jkd-btn.jkd-btn-sm,.jkd-process-steps .step-button,.bo-cta{min-height:44px}
.jkd-process-steps .steps-nav .step-dot{min-height:44px}
/* small pills over a picture keep their look; their hit area grows to 44 */
.bo-op__watch::after,.bo-fc__open::after{content:"";position:absolute;inset:-8px -4px}
.bo-hs__dot::before{content:"";position:absolute;inset:-10px;border-radius:50%}
/* a dot near the render's edge was half cut off at this size (Fitness, 1 at y 5 %): on a phone each dot stays a
whole hit area inside the render, at most a few pixels from its spot */
.bo-hs__dot{left:clamp(22px,var(--x),calc(100% - 22px));top:clamp(22px,var(--y),calc(100% - 22px))}
/* links that stand on their own line */
.bo-cs-back,.bo-iq__go,.bo-cs-more,#page-ind .bo-arch__two a,#page-ind .bo-more a,.bo-agents__ways a,
.bo-proof__lbl a,.bo-mt .bo-more a{display:inline-flex;align-items:center;min-height:44px}
.bo-trio__tag{font-size:12px}
.bo-op__thumb span,.bo-op__mini span,.bo-proof__nums dt{font-size:12px}
.jkd-process-steps .steps-nav .step-dot .bo-step-n{font-size:12px!important}
.jkd-process-steps .top-line .meta,.bo-dk-vs span,.bo-cs-eye span,.bmd__ttl,.bmd__dur{font-size:12px!important}
/* the industries grid: the mall, data centre and stadium cards' one link (to the answer page) */
#page-ind .bo-arch .portfolio-industry a{display:inline-flex;align-items:center;min-height:44px}
/* a case study's "Same building" row: its link is the row's only control */
.bo-cs-about strong>a[href^="/portfolio/"]{display:inline-flex;align-items:center;min-height:44px}
.bo-step__n,.bo-step__tool,.cpc__eyebrow,.cpc__watch,.bo-agent__for{font-size:12px!important}
}
/* ══ LAST LOOK (BC-LOOK) ══════════════════════════════════════════════════════
6. NO TEXT UNDER 12 PX AT ANY WIDTH. BC-6 set these at 12 on a phone only; at 1280 they were still 9.5-11.5 px
(the opener's "01 / 04" line, trio tags, the pipeline's tool line, the industries rail's eyebrow and building,
proof counters, the case study's eyebrow and film caption, and /portfolio's tab counts and card lines). */
.bo-op__cap span,.bo-trio__tag,.bo-op__mini span,.bo-proof__nums dt,
.jkd-process-steps .steps-nav .step-dot .bo-step-n,.bo-dk-vs span,.bo-cs-eye span,
.bmd__ttl,.bmd__dur,.bo-step__n,.bo-step__tool,.cpc__eyebrow,.cpc__watch,.cpc__watch b,.bo-agent__for,.bo-exp-tag,
.bo-cs-tab span,.bo-cs-card__meta span{font-size:12px!important}
/* the number in a small hotspot dot (11 px where the dot shrinks to 24 px) */
@media(max-width:767px){.bo-hs__dot{font-size:12px!important}}
/* 7. /portfolio's industry tabs: 44 px at every width, as they already are on a phone */
.bo-cs-tab{min-height:44px}
/* 8. the active dot's ping ring grows to 1.9x (68 px across on a phone) and was catching taps meant for the next dot */
.bo-hs__dot.is-on::after{pointer-events:none}