/* v67 · 2026-11-08 · How we made Bruce: glass, gel and fire colouring. One story, one big picture, no slider, no boxes. */

/* only the one storyline line runs down the page: no thick left rail on this block */
.rb-why.bf.lit,.rb-why.bf{box-shadow:none!important}

.rb-why.bf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(18px,3vw,40px)}
.bf-copy{min-width:0}
.bf-copy .eyebrow{display:inline-block}
.rb-why.bf h3{font-size:clamp(38px,5vw,70px);line-height:1;letter-spacing:-.045em;margin:14px 0 22px;color:#fbf3df}
.rb-why.bf h3 em{display:inline-block;font-family:"BBB Serif",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.025em;
  padding:0 .06em .14em 0;margin-bottom:-.14em;
  color:#f3d48a;background:linear-gradient(100deg,#fbe7b0 0,#f0c868 45%,#d9a03c 75%,#f6dc93 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}
.bf-p{max-width:52ch;margin:0 0 14px;color:#d8cfb8;font-size:clamp(15px,1.3vw,17.5px);line-height:1.62;text-wrap:pretty}
.bf-p:first-of-type{color:#efe6cf}
.bf .bf-chat{justify-content:flex-start;margin:20px 0 0}
.bf .bf-chat .chat-b{max-width:30em}

/* the picture */
.bf-art{margin:0;min-width:0}
.bf-fr{position:relative;aspect-ratio:16/10.5;border-radius:28px;overflow:hidden;isolation:isolate;cursor:pointer;
  background:#0b0806;box-shadow:0 0 0 1px rgba(255,226,154,.26),0 40px 90px -40px rgba(0,0,0,.95),0 0 120px -50px rgba(227,174,70,.35);
  -webkit-tap-highlight-color:transparent}
.bf-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:opacity,transform}
.bf-a{object-position:38% 42%;transform:scale(1.02);transition:opacity 1.6s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.bf-b{object-position:50% 40%;opacity:0;transform:scale(1.08);transition:opacity 1.6s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.bf-fr.awake .bf-a{opacity:0;transform:scale(1.1)}
.bf-fr.awake .bf-b{opacity:1;transform:scale(1.01)}
/* the edge catches the light, like the glass panes elsewhere on the site */
.bf-fr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 1px 0 rgba(255,246,220,.55),inset 0 0 0 1px rgba(255,236,190,.16),inset 0 -40px 60px -40px rgba(0,0,0,.6)}
/* fire sweep: a band of warm light crosses the picture whenever he wakes or settles */
.bf-sweep{position:absolute;inset:-10% -40%;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,196,96,.0) 40%,rgba(255,206,120,.42) 48%,rgba(255,240,200,.55) 50%,rgba(255,170,70,.30) 53%,transparent 62%);
  transform:translateX(-60%)}
.bf-fr.flash .bf-sweep{animation:bfSweep 1.7s cubic-bezier(.35,.1,.25,1) both}
@keyframes bfSweep{0%{opacity:0;transform:translateX(-60%)}18%{opacity:1}80%{opacity:.85}100%{opacity:0;transform:translateX(60%)}}

/* material tags: small glass pills pinned on the art */
.bf-tag{position:absolute;z-index:4;display:inline-flex;align-items:baseline;gap:7px;padding:8px 14px 8px 12px;border-radius:999px;
  font:600 13px/1 "BBB Sans",Arial,sans-serif;color:#fff6dd;white-space:nowrap;letter-spacing:.005em;
  background:linear-gradient(160deg,rgba(255,244,214,.22),rgba(255,236,190,.06) 55%,rgba(30,20,10,.18));
  -webkit-backdrop-filter:blur(12px) saturate(1.5) brightness(1.05);backdrop-filter:blur(12px) saturate(1.5) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,236,190,.42),0 12px 26px -14px rgba(0,0,0,.9);
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.bf-tag b{font:800 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ffe29a}
.bf-t1{left:5%;top:7%}
.bf-t2{right:5%;top:34%}
.bf-t3{right:9%;bottom:8%}
.bf-cap{margin:12px 4px 0;font:600 13px/1.4 "BBB Sans",Arial,sans-serif;color:#bfb293;text-align:right}

/* bloom-in, the same reveal the What-we-do cards use */
.bf-js .bf-copy>*{opacity:0;translate:0 22px;filter:blur(10px);
  transition:opacity 1s ease,translate 1.2s cubic-bezier(.16,.84,.24,1),filter 1s ease;transition-delay:calc(var(--k,0)*140ms)}
.bf-js .bf-copy>:nth-child(1){--k:0}.bf-js .bf-copy>:nth-child(2){--k:1}.bf-js .bf-copy>:nth-child(3){--k:2}
.bf-js .bf-copy>:nth-child(4){--k:3}.bf-js .bf-copy>:nth-child(5){--k:4}
.bf-js.in .bf-copy>*{opacity:1;translate:0 0;filter:none}
.bf-js .bf-fr{opacity:0;scale:.95;filter:blur(16px) brightness(.6);
  transition:opacity 1.2s ease .15s,scale 1.5s cubic-bezier(.16,.84,.24,1) .15s,filter 1.3s ease .15s}
.bf-js.in .bf-fr{opacity:1;scale:1;filter:none;animation:bfBloom 2.4s ease-out .35s backwards}
@keyframes bfBloom{
  0%{box-shadow:0 0 0 1px rgba(255,226,154,.26),0 40px 90px -40px rgba(0,0,0,.95),0 0 0 0 rgba(255,214,120,0)}
  40%{box-shadow:0 0 0 1px rgba(255,226,154,.5),0 40px 90px -40px rgba(0,0,0,.95),0 0 110px 6px rgba(255,214,120,.32)}
  100%{box-shadow:0 0 0 1px rgba(255,226,154,.26),0 40px 90px -40px rgba(0,0,0,.95),0 0 120px -50px rgba(227,174,70,.35)}}
.bf-js .bf-tag{opacity:0;translate:0 10px;filter:blur(6px);
  transition:opacity .8s ease,translate 1s cubic-bezier(.3,1.4,.5,1),filter .8s ease}
.bf-js.in .bf-tag{opacity:1;translate:0 0;filter:none}
.bf-js.in .bf-t1{transition-delay:1.1s}.bf-js.in .bf-t2{transition-delay:1.6s}.bf-js.in .bf-t3{transition-delay:2.1s}
.bf-js .bf-cap{opacity:0;transition:opacity 1s ease 2.4s}.bf-js.in .bf-cap{opacity:1}

/* tablet: stack, picture full width */
@media (max-width:980px){
  .rb-why.bf{grid-template-columns:1fr;gap:26px}
  .bf-p{max-width:60ch}
}
/* phones */
@media (max-width:560px){
  .rb-why.bf h3{font-size:clamp(36px,11vw,48px);margin:10px 0 16px}
  .bf-fr{aspect-ratio:4/4.3;border-radius:22px}
  .bf-a{object-position:30% 50%}
  .bf-b{object-position:50% 45%}
  .bf-tag{padding:7px 11px 7px 10px;font-size:12px;gap:6px}
  .bf-tag b{font-size:9.5px;letter-spacing:.16em}
  .bf-t1{left:4%;top:5%}
  .bf-t2{right:4%;top:40%}
  .bf-t3{right:5%;bottom:6%}
  .bf .bf-chat .chat-b{max-width:100%}
  .bf-cap{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .bf-js .bf-copy>*,.bf-js .bf-fr,.bf-js .bf-tag,.bf-js .bf-cap{opacity:1!important;translate:none!important;scale:none!important;filter:none!important;transition:none!important;animation:none!important}
  .bf-a,.bf-b{transition:opacity .2s linear!important;transform:none!important}
  .bf-fr.flash .bf-sweep{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .bf-tag{background:rgba(26,19,10,.92);-webkit-backdrop-filter:none;backdrop-filter:none}
}