/* ═══════════════════════════════════════════════════════════════════════════
   labs.rzv.studio — bento.css   THE COLLECTION
   One bento of every element worth showing, website and dashboard side by
   side, on demo data. The tile material is the dashboard's .widget-tile
   (focus.html) — the same recipe bio.css ports as .bw-tile — so dashboard
   widgets sit in it natively. Widget CSS below is lifted from
   ~/rzv-dashboard/focus.html with ids turned into classes; the line ranges
   are noted above each block so a change there can be carried here.
   ═══════════════════════════════════════════════════════════════════════ */

/* dashboard tokens base.css does not define */
.bento{--node-grey:color-mix(in srgb,var(--text) 24%,var(--bg));--done:#4ADE80}

/* ── the grid: four columns, square-ish rows, dense packing ── */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(clamp(210px,19vw,290px),auto);
  grid-auto-flow:dense;gap:clamp(12px,1.4vw,18px)}
.bento .w-2x1{grid-column:span 2}
.bento .w-1x2{grid-row:span 2}
.bento .w-2x2{grid-column:span 2;grid-row:span 2}
@media (max-width:1080px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(clamp(220px,40vw,300px),auto)} }
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .bento .w-2x1,.bento .w-2x2{grid-column:auto}
  .bento .w-1x2,.bento .w-2x2{grid-row:auto}
  .bento .bt{min-height:250px}
  .bento .bt.w-2x2{min-height:420px}
}

/* ── the tile (focus.html .widget-tile / bio.css .bw-tile) ── */
.bt{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-tile);padding:18px;overflow:hidden;
  transition:border-color .3s ease,background .3s ease}
.bt::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(150% 150% at var(--mx,50%) var(--my,50%),var(--tile-sheen),rgba(255,255,255,.04) 28%,rgba(255,255,255,.012) 55%,transparent 82%);
  transition:opacity .45s var(--ease)}
.bt:hover{border-color:var(--border-hi);background:var(--card-hi)}
.bt:hover::before{opacity:.55}
.bt > *{position:relative;z-index:1}
.bt-head{display:flex;align-items:center;gap:8px;flex:none;margin-bottom:14px}
.bt-head .overline{margin:0;color:var(--text)}
.bt-tag{margin-left:auto;flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 7px;line-height:1.4}
.bt-tag.dash{color:var(--muted)}
.bt-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;position:relative}
.bt-foot{flex:none;margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--dim);line-height:1.5}
.bt-foot b{font-weight:400;color:var(--muted)}
.bt-cta{cursor:pointer}

/* a perf-sections .bk dropped into a tile: the tile IS the card */
.bt .bk{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;flex:1;display:flex;flex-direction:column;min-height:0}
.bt .bk::before,.bt .bk::after{display:none}
.bt .bk-title{display:none}
.bt .fnl{flex:1;justify-content:center}
.bt .fnl-svg{height:clamp(84px,9vw,132px)}
.bt .snk{flex:1}
.bt .cell{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;flex:1}
.bt .cell::before,.bt .cell::after{display:none}
.bt .cell.xl .cell-num{font-size:clamp(34px,3.4vw,46px)}
.bt .cell-spark{position:relative;height:64px}
.bt .donut-wrap{margin:0 auto}

/* ══ POMODORO — focus.html:1541-1630 (core) + 208-230 (tile sizing) ═════════ */
.bt-pomo .bt-body{container-type:size}
.pomo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@property --pomo-ang{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --sec-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sec-b{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --green-sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.pomo-ring-wrap{position:relative;--ring-inset:10%;--sec-inset:21.5%;
  width:min(104cqw,104cqh);height:min(104cqw,104cqh)}
.pomo-sec{position:absolute;inset:var(--sec-inset);border-radius:50%;--sec-a:0deg;--sec-b:0deg;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:conic-gradient(from 0deg,transparent 0deg var(--sec-a),var(--node-grey) var(--sec-a) var(--sec-b),transparent var(--sec-b) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
@keyframes pomoSecWipe{0%{--sec-a:0deg;--sec-b:0deg}50%{--sec-a:0deg;--sec-b:360deg}100%{--sec-a:360deg;--sec-b:360deg}}
.pomo-ring-wrap.running .pomo-sec{opacity:.9}
@keyframes pomoSweep{to{--green-sweep:360deg}}
.pomo-ring-wrap.running .pomo-ring{animation:pomoSweep 3s linear infinite}
@media(prefers-reduced-motion:reduce){.pomo-ring-wrap.running .pomo-ring{animation:none}}
.pomo-ring{position:absolute;inset:var(--ring-inset);border-radius:50%;--pomo-ang:0deg;--green-sweep:0deg;
  background:conic-gradient(from var(--green-sweep),var(--done),#86EFAC,#C7F9D9,#86EFAC,var(--done));
  -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 83%);mask:radial-gradient(closest-side,transparent 82%,#000 83%)}
.pomo-ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 var(--pomo-ang),color-mix(in srgb,var(--text) 13%,var(--bg)) var(--pomo-ang) 360deg)}
.pomo-center{position:absolute;inset:0;z-index:1}
.pomo-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:min(16.6cqw,16.6cqh);font-weight:500;letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1;z-index:2;cursor:ns-resize;text-shadow:0 2px 14px rgba(8,8,12,.72)}
.pomo-time .num-roll{display:inline-flex;white-space:nowrap}
.pomo-time .num-slot{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:bottom;transition:transform .3s var(--ease),opacity .25s var(--ease)}
.pomo-center.split .num-slot.s-m{transform:translateX(-12px)}
.pomo-center.split .num-slot.s-s{transform:translateX(12px)}
.pomo-center.split .num-slot.s-c{opacity:0}
.pomo-time .num-strip{display:block}
.pomo-time .num-d{display:block;height:1em;line-height:1;text-align:center;font-variant-numeric:tabular-nums;font-size:inherit}
.pomo-mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.pomo-mid .pc-btn{opacity:0;transition:opacity .25s var(--ease),color .2s var(--ease)}
.pomo-center.split .pomo-mid .pc-btn{opacity:1;pointer-events:auto}
.pomo-ctl{position:absolute;left:0;right:0;top:calc(50% + min(13cqw,13cqh));display:flex;align-items:center;justify-content:center;gap:14px;z-index:3;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.pomo:hover .pomo-ctl,.pomo:focus-within .pomo-ctl{opacity:1;pointer-events:auto}
@media(hover:none){.pomo.ctl-open .pomo-ctl{opacity:1;pointer-events:auto}}
.pc-btn{padding:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dim);background:none;border:none;transition:color .2s var(--ease),transform .15s var(--ease)}
.pc-btn:hover{color:var(--text);transform:scale(1.1)}
.pc-btn:active{transform:scale(.9)}
.pc-btn.primary{color:var(--text)}
.pc-btn svg{width:15px;height:15px}
.pc-play svg{transform:translateX(1px)}

/* ══ HABITS — focus.html:515-540 ══════════════════════════════════════════ */
.habit-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px}
.habit-dow span{text-align:center;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em;color:var(--dim)}
.habit-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.habit-day{position:relative;aspect-ratio:1;width:74%;max-width:56px;justify-self:center;align-self:center;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-family:var(--mono);color:var(--muted);border-radius:50%;cursor:pointer;user-select:none;
  transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.habit-day:hover{background:var(--surface-2);color:var(--text)}
.habit-day:active{transform:scale(.88)}
.habit-day.great{background:rgba(74,222,128,.52);color:var(--text)}
.habit-day.good{background:rgba(74,222,128,.20);color:var(--text)}
.habit-day.bad{background:rgba(248,113,113,.20);color:var(--text)}
.habit-day.awful{background:rgba(248,113,113,.52);color:var(--text)}
.habit-day.today{box-shadow:inset 0 0 0 1.5px var(--border-hi)}
.habit-day.today:is(.great,.good,.bad,.awful){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}

/* ══ WELLNESS SPARK — focus.html:1512-1540 + 491-504 ══════════════════════ */
.wellness-spark{position:relative;height:64px;cursor:crosshair}
.wellness-spark svg{width:100%;height:100%;display:block;overflow:visible}
.wellness-spark path.line-pos{filter:drop-shadow(0 0 5px rgba(74,222,128,.45))}
.wellness-spark path.line-neg{filter:drop-shadow(0 0 5px rgba(248,113,113,.45))}
.wellness-spark svg line.wspark-zero{stroke:var(--border-hi);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.wellness-spark .spark-head{position:absolute;width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px;pointer-events:none;opacity:0}
.wl-delta{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:100px;line-height:1.5;
  font-variant-numeric:tabular-nums;color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.wl-delta.up{color:#4ADE80;background:rgba(74,222,128,.14);border-color:transparent}
.wl-delta.down{color:#F87171;background:rgba(248,113,113,.14);border-color:transparent}

/* ══ SLEEP — focus.html:624-668 ═══════════════════════════════════════════ */
.sleep-dot{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none;
  background:color-mix(in srgb,var(--text) 10%,transparent);border:1px solid var(--border);color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .18s var(--ease)}
.sleep-dot svg{width:15px;height:15px;display:block}
.sleep-dot:hover{border-color:var(--border-hi);color:var(--text)}
.sleep-dot:active{transform:scale(.92)}
.sleep-dot.on{background:#fff;border-color:transparent;color:var(--bg)}
.sleep-dot.on .chip-ico .ci-p,.sleep-dot.on .chip-ico .ci-s,.sleep-dot.on .chip-ico .ci-r{opacity:0}
.sleep-dot.on .chip-ico .ci-reg{opacity:1}
.sleep-top{display:flex;align-items:center;gap:12px;margin-bottom:auto}
.sleep-live{font-family:var(--mono);font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sleep-live small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.sleep-bars{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:64px;margin-top:14px}
.sleep-bars .sb-col{position:relative;height:100%;display:flex;align-items:flex-end}
.sleep-bars .sb-fill{width:4px;margin:0 auto;border-radius:3px;background:linear-gradient(100deg,#DDD9FF,#FFD9EE 45%,#D5F6FF 85%);box-shadow:0 0 8px rgba(221,217,255,.28);opacity:.16;transform-origin:50% 100%}
.sleep-bars .sb-target{position:absolute;left:0;right:0;border-top:1px dashed var(--border-hi);opacity:.5;pointer-events:none}
.sleep-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.sleep-dow span{text-align:center;font-family:var(--mono);font-size:9px;font-weight:600;color:var(--dim)}

/* ══ MOOD — focus.html:1423-1440 ══════════════════════════════════════════ */
.mood-face{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.03em;color:var(--text);line-height:1;margin-bottom:auto}
.mood-face.stable{color:#4ADE80}
.mood-face.off{color:#F87171}
.mood-chart{position:relative;height:72px;margin-top:14px}
.mood-chart svg{width:100%;height:100%;display:block;overflow:visible}
.mood-chart .mc-base{stroke:var(--border-hi);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.mood-chart .mc-band{stroke-linecap:round;stroke:var(--text);opacity:.3}
.mood-chart .mc-band.stable{stroke:#4ADE80;opacity:.65}
.mood-chart .mc-band.off{stroke:#F87171;opacity:.75}
.mood-chart .mc-dot{fill:var(--text);opacity:.9}

/* ══ PRAYER STARS — focus.html:1708-1722, gradients 1985-1993 ══════════════ */
.pray-list{position:relative;display:flex;flex-direction:column;justify-content:space-around;flex:1}
.pray-list::before{content:'';position:absolute;left:4.5px;top:12px;bottom:12px;width:1px;background:var(--border-hi)}
.prayer-node{display:flex;align-items:center;gap:13px;padding:5px 0;cursor:pointer;user-select:none}
.pr-ic-wrap{position:relative;width:10px;height:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:50%;box-shadow:0 0 0 5px var(--card);transition:transform .25s var(--ease-spring)}
.bt:hover .pr-ic-wrap{background:var(--card-hi);box-shadow:0 0 0 5px var(--card-hi)}
.pr-ic{width:10px;height:10px}
.pr-base{fill:var(--node-grey)}
.pr-fill{opacity:0;transition:opacity .45s var(--ease)}
.prayer-node.done .pr-fill{opacity:1}
.prayer-node .pr-name{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pr-time{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.prayer-node:hover .pr-ic-wrap{transform:scale(1.25)}

/* ══ RZV INDEX RING — client-page.css:134-150 ═════════════════════════════ */
.cp-ring{position:relative;width:min(100%,170px);aspect-ratio:1;margin:0 auto}
.cp-ring svg{width:100%;height:100%;display:block;overflow:visible}
.cp-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.cp-ring-num{font-family:var(--mono);font-size:40px;font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}

/* ══ ORBS (orb.js) ════════════════════════════════════════════════════════ */
.orb-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;flex:1}
.orb-cell{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.orb-cell .orb-host{display:grid;place-items:center;height:56px}
.orb-cell span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.orb-cell:hover span{color:var(--text)}

/* ══ DAILY BRIEF PLAYER — focus.html:752-923 (tile shell) ══════════════════ */
.brief-tile{padding:0}
.brf-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.brf-bg .brief-play-aurora{opacity:.85;filter:blur(40px) saturate(1.5) brightness(.95)}
.brf-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.15),rgba(8,8,10,.72))}
:is(.brief-play,.brf-bg) .brief-play-aurora{position:absolute;inset:-24%;display:block;pointer-events:none;filter:blur(7px) saturate(1.5) brightness(1.1)}
:is(.brief-play,.brf-bg) .brief-play-aurora i{position:absolute;mix-blend-mode:screen;border-radius:50%;will-change:transform}
:is(.brief-play,.brf-bg) .brief-play-aurora .p1{width:124%;height:110%;left:-41%;bottom:-41%;background:radial-gradient(circle closest-side,rgba(6,78,59,1),rgba(6,78,59,.82) 22%,rgba(6,78,59,.5) 42%,rgba(6,78,59,.22) 60%,rgba(6,78,59,.06) 78%,rgba(6,78,59,0) 92%);animation:bpaDrift 9s ease-in-out infinite}
:is(.brief-play,.brf-bg) .brief-play-aurora .p2{width:104%;height:92%;left:-3%;bottom:3%;background:radial-gradient(circle closest-side,rgba(5,150,105,1),rgba(5,150,105,.8) 22%,rgba(5,150,105,.48) 42%,rgba(5,150,105,.2) 60%,rgba(5,150,105,.05) 78%,rgba(5,150,105,0) 92%);animation:bpaDrift 7s ease-in-out infinite reverse}
:is(.brief-play,.brf-bg) .brief-play-aurora .p3{width:98%;height:86%;left:37%;bottom:-31%;background:radial-gradient(circle closest-side,rgba(52,211,153,1),rgba(52,211,153,.78) 22%,rgba(52,211,153,.46) 42%,rgba(52,211,153,.19) 60%,rgba(52,211,153,.05) 78%,rgba(52,211,153,0) 92%);animation:bpaDrift 11s ease-in-out infinite}
:is(.brief-play,.brf-bg) .brief-play-aurora .p4{width:108%;height:96%;left:25%;top:-25%;background:radial-gradient(circle closest-side,rgba(16,185,129,1),rgba(16,185,129,.8) 22%,rgba(16,185,129,.48) 42%,rgba(16,185,129,.2) 60%,rgba(16,185,129,.05) 78%,rgba(16,185,129,0) 92%);animation:bpaDrift 8s ease-in-out infinite reverse}
:is(.brief-play,.brf-bg) .brief-play-aurora .p5{width:92%;height:84%;left:-26%;bottom:14%;background:radial-gradient(circle closest-side,rgba(110,231,183,1),rgba(110,231,183,.76) 22%,rgba(110,231,183,.44) 42%,rgba(110,231,183,.18) 60%,rgba(110,231,183,.04) 78%,rgba(110,231,183,0) 92%);animation:bpaDrift 10s ease-in-out infinite}
:is(.brief-play,.brf-bg) .brief-play-aurora .p6{width:96%;height:86%;left:8%;bottom:-44%;background:radial-gradient(circle closest-side,rgba(4,120,87,1),rgba(4,120,87,.8) 22%,rgba(4,120,87,.48) 42%,rgba(4,120,87,.2) 60%,rgba(4,120,87,.05) 78%,rgba(4,120,87,0) 92%);animation:bpaDrift 12s ease-in-out infinite reverse}
@keyframes bpaDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(14%,-10%) scale(1.12)}66%{transform:translate(-10%,8%) scale(.94)}}
@media(prefers-reduced-motion:reduce){:is(.brief-play,.brf-bg) .brief-play-aurora i{animation:none}}
.brief-play{position:absolute;top:18px;left:18px;width:46px;height:46px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:all .25s var(--ease);z-index:2}
.brief-play:hover{background:var(--surface-hi);border-color:var(--border-hi);transform:scale(1.05)}
.brief-play:active{transform:scale(.95)}
.brief-play>svg{position:relative;z-index:1;width:15px;height:15px;display:block}
.brief-play.is-play>svg{margin-left:2px}
.brief-play.playing{border-color:transparent;color:#fff;background:color-mix(in srgb,var(--bg) 86%,transparent)}
.brief-play.playing .brief-play-aurora{transform:scale(calc(1 + .16*var(--bp,0)));
  filter:blur(calc(7px - 2px*var(--bp,0))) saturate(calc(1.5 + .5*var(--bp,0))) brightness(calc(1.1 + .35*var(--bp,0)))}
.brief-kicker{position:absolute;top:22px;right:18px;z-index:2}
.brief-meta{position:absolute;left:0;right:0;bottom:6px;padding:0 18px 12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.brief-line{font-size:clamp(15px,1.4vw,19px);font-weight:400;letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brief-times{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.brief-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);z-index:2;cursor:pointer}
.brief-fill{height:100%;width:0;background:linear-gradient(90deg,#FFFFFF,#DDD9FF 40%,#FFD9EE 70%,#D5F6FF);box-shadow:0 0 10px rgba(221,217,255,.6)}

/* ══ WEBSITE PIECES ══════════════════════════════════════════════════════ */
.bt-center{display:grid;place-items:center;flex:1}
.bt .pearl{--pearl-size:min(46cqw,120px)}
.bt-pearl .bt-body{container-type:inline-size}
.bt-au{position:absolute;inset:-1px;z-index:0;border-radius:inherit;overflow:hidden}
.bt-au .au{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:5/4;transform:translate(-50%,-50%);--au-o:.75}
.bt-words .hero-title{font-size:clamp(1.05rem,1.9vw,1.75rem);max-width:none;margin:0;text-align:left;width:100%;line-height:1.25}
.bt-words .hero-title .hero-row{display:block!important;white-space:nowrap;margin:0!important}
.bt-words .hero-title .hero-row + .hero-row{margin-top:.2em!important}
.bt .dot-slot{width:132px;height:132px;cursor:pointer}
.bt-chips{display:flex;flex-wrap:wrap;gap:8px;align-content:center}
.bt-chips .chip{--chip-s:15px}

/* the slot under each lab card (brand-style specimens below the bento) */
.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--brand-gap,22px)}
.lab-grid .wide{grid-column:span 2}
@media (max-width:1080px){ .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .lab-grid{grid-template-columns:minmax(0,1fr)} .lab-grid .wide{grid-column:auto} }
.lab-fig{margin:0;min-width:0;display:block;color:inherit;text-decoration:none}
.lab-fig .brand-stage{aspect-ratio:16/10;display:grid;place-items:center;transition:border-color .3s var(--ease)}
.lab-fig.wide .brand-stage{aspect-ratio:16/7.5}
.lab-fig:hover .brand-stage{border-color:var(--border-hi)}
.lab-fig iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.lab-fig iframe.in{opacity:1}
.lab-fig .lab-open{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro,10px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.lab-fig:hover .lab-open{color:var(--text)}
.lab-fig .brand-cap{flex-wrap:nowrap}
.lab-fig .brand-cap-spec{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lab-fig .brand-cap .overline,.lab-fig .lab-open{flex:none;white-space:nowrap}


/* ═══ ONE BENTO (Oct 2026): everything below lives in the same grid ═══════ */
.bento .w-full{grid-column:1 / -1}
.bt-anchor{position:absolute;top:calc(-1 * (var(--header-h,72px) + 70px));left:0;width:1px;height:1px;pointer-events:none}
.bt-go{flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  border:1px solid var(--border-hi);border-radius:var(--r-pill);padding:2px 8px;line-height:1.4;transition:color .2s,border-color .2s,background .2s}
.bt-go:hover{color:var(--bg);background:var(--text);border-color:var(--text)}
.bt-head .bt-tag + .bt-go{margin-left:6px}
.bt-note{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--dim);margin-left:10px}

/* the site's bio bento, dissolved into this grid (its .bw-grid wrapper has no box) */
.bento .bw-grid{display:contents}
.bento .bw{aspect-ratio:auto!important;grid-column:auto;grid-row:auto;min-height:0}
.bento .bw.w-2x1{grid-column:span 2}
.bento .bw.w-2x2{grid-column:span 2;grid-row:span 2}
.bento .bw-tile{height:100%}
@media (max-width:1080px){ .bento .bw.w-1x1{grid-column:auto} }
@media (max-width:640px){ .bento .bw.w-1x1,.bento .bw.w-2x1{grid-column:1 / -1} .bento .bw-tile{min-height:250px} }

/* glass objects, staged the way /brand/ stages them (brand.css .brand-obj-host) */
.bt-glass .bt-body{justify-content:stretch}
.glass-stage{position:relative;flex:1;min-height:180px;border-radius:calc(var(--r-tile) - 8px);border:1px solid var(--border);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%,rgba(129,140,248,.12),transparent 60%),var(--bg-2)}
.bento .bt-glass{min-height:clamp(300px,24vw,360px)}
@media (max-width:640px){ .bento .bt-glass{min-height:380px} }
.glass-word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:clamp(44px,5vw,72px);letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:.85;pointer-events:none}
.bt-ribbon .bt-body{align-items:flex-start;gap:16px}
.ribbon-line{margin:0;font-size:clamp(1.3rem,2.2vw,2rem);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.bt-ribbon{background:radial-gradient(120% 140% at 100% 0%,rgba(129,140,248,.16),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(244,114,182,.10),transparent 60%),var(--card)}

/* small site pieces */
.bt-roll{align-items:center;gap:14px}
.bt-roll .brand-roll{font-size:clamp(34px,3.6vw,48px)}
.lp-mesh{position:absolute;inset:-18px;opacity:1;--m1:#4F46E5;--m2:#F472B6;--m3:#22D3EE;border-radius:inherit}
#tMesh{overflow:hidden}
.bt-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;flex:1}
.bt-swatches i{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px;border-radius:12px;background:var(--c);
  font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.82);text-transform:uppercase;min-height:120px}
.bt-swatches i b{font-weight:700;color:#fff}
@media (max-width:640px){ .bt-swatches{grid-template-columns:repeat(3,minmax(0,1fr))} .bt-swatches i{min-height:80px} }
.lp-btns{display:flex;flex-direction:column;gap:12px;align-items:center}
.bt-tiltcard{width:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;box-sizing:border-box;min-height:140px;
  background:radial-gradient(90% 80% at 20% 100%,rgba(79,70,229,.28),transparent 60%),radial-gradient(70% 70% at 90% 0%,rgba(34,211,238,.18),transparent 60%),var(--card)}
.bt-tiltcard .overline{margin:0}
.bt-tilt-t{font-size:1.1rem;font-weight:300;letter-spacing:-.01em}
.bt-burger{display:inline-flex!important;transform:scale(1.5)}

/* full-width tiles that hold a whole site section */
.bt-flush{padding:0}
.bt-head--pad{padding:18px 18px 0;margin-bottom:0}
.bento #offer{padding-block:clamp(16px,2.4vw,32px) clamp(20px,3vw,40px)}
.bento #offer > .wrap,.bento #clients > .wrap{max-width:none}
.bento #chips{padding-block:clamp(16px,2vw,28px) clamp(20px,3vw,36px)}
.bento #clients{padding-block:clamp(10px,2vw,24px) clamp(20px,3vw,36px)}

/* link lists */
.bt-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;align-content:center}
.bt-links a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;font-size:.92rem;font-weight:300}
.bt-links a span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);align-self:center;white-space:nowrap}
.bt-links a:hover span{color:var(--text)}
@media (max-width:640px){ .bt-links{grid-template-columns:minmax(0,1fr)} }
.w-full .bt-links{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){ .w-full .bt-links{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .w-full .bt-links{grid-template-columns:minmax(0,1fr)} }

/* modal + icon tiles (site sections copied in by build-labs.py) */
.bento #services{padding-block:clamp(12px,2vw,24px) clamp(18px,2.6vw,32px)!important}
.bento #services > .wrap{max-width:none}
.bt-journey{display:block}
.bt-journey .brand-tl{margin:0}
.bento .brand-grid--ico{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}

/* ── mixed spans for the lower bento (Oct 2026) ── */
.bento .w-3{grid-column:span 3}
.bento .w-3x3{grid-column:span 3;grid-row:span 3}
@media (max-width:1080px){ .bento .w-3,.bento .w-3x3{grid-column:1 / -1;grid-row:auto} }

/* ── TRAVEL tiles (dash/travel.css + focus.html .widget-label) ── */
.bento .widget-label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:18px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bento .trv-tile{margin:0}
.bento .trv-map-tile{padding:0}
.bento .trv-map{flex:1;min-height:420px}
.bento .trv-map .widget-label{color:var(--text)}
.bento .trv-clocks{flex:1;align-items:center}
#tTrvLine .pl{flex:1;display:flex;flex-direction:column;justify-content:center}
#tJourney .brand-tl,#tJourney .jn-timeline{width:100%}
@media (max-width:640px){ .bento .trv-map{min-height:330px} }
/* icons: a denser specimen so the tile holds the set in two rows of the bento */
.bento .brand-grid--ico{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:12px}
.bento .brand-ico-box .chip-ico{width:34px;height:34px}
.bento .brand-ico figcaption{font-size:8.5px;letter-spacing:.08em}
/* journey: the whole bio timeline in one column */
#tJourney .bt-body{justify-content:flex-start;overflow:auto;max-height:100%}
#tJourney .jn-entry{margin:0}
.bento .bp-mail{display:none}   /* links to the owner's mailbox — meaningless on a public demo */