/* Matching stone and wood studies on a single continuous optical image plane. */
.bco-material-story{padding:clamp(48px,6vw,90px) 0 clamp(50px,6vw,80px)}
.mf-head{display:flex;align-items:end;justify-content:space-between;gap:28px}
.mf-head .bco-scene-intro{max-width:35ch;margin:0}
.mf-layout{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:clamp(32px,6vw,90px);align-items:center;margin-top:42px}
.mf-stage{position:relative;aspect-ratio:1.06;min-width:0;overflow:hidden;isolation:isolate;background:#eae7e1;box-shadow:0 24px 65px -48px rgba(10,10,10,.44)}
.mf-slide{position:absolute;inset:0;margin:0;background:#eae7e1}
.mf-slide[hidden]{display:none}
.mf-slide img{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:cover;object-position:center;box-sizing:border-box;border-radius:0;transition:none!important}
.mf-copy{min-width:0}
.mf-caption .eyebrow{font-size:11px;margin-bottom:19px}
.mf-caption h3{font:italic 400 clamp(36px,4.2vw,64px)/1.08 var(--font-display);letter-spacing:-.025em;min-height:2.16em;max-width:none}
.mf-caption p:not(.eyebrow){font-size:clamp(17px,1.15vw,22px);line-height:1.65;margin-top:20px;color:var(--ink-60);max-width:31ch;min-height:5em}
.mf-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.mf-controls[hidden]{display:none!important}
.mf-arrow,.mf-dot,.mf-pause{font:500 12px/1 var(--font-body);background:none;border:0;color:var(--ink);cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;padding:8px}
.mf-arrow{font-size:24px;border:1px solid var(--ink-14);border-radius:50%;transition:background .3s var(--ease),transform .3s var(--ease)}
.mf-arrow:hover{background:var(--ink-06);transform:translateY(-2px)}
.mf-dots{display:flex;gap:0;margin:0 8px}
.mf-dot{min-width:32px;padding:8px 4px}
.mf-dot::after{content:"";width:20px;height:2px;background:#d0cbc2;transition:background .3s var(--ease),transform .3s var(--ease)}
.mf-dot[aria-pressed=true]::after{background:#554d42;transform:scaleY(2)}
.mf-pause{margin-left:4px;text-decoration:underline;text-underline-offset:5px;color:#675f54}
.mf-controls button:focus-visible{outline:2px solid #544c42;outline-offset:3px}
.mf-actions{display:flex;flex-direction:column;align-items:start;gap:10px;margin-top:26px}
.mf-note{font-size:12px;line-height:1.65;color:var(--ink-60);max-width:43ch;margin-top:24px}

.mf-stage[data-loading=true]::after{content:"";position:absolute;bottom:0;left:0;width:25%;height:2px;background:#8a7b63;opacity:.65}
@media(min-width:1800px){.mf-caption h3{font-size:72px}.mf-note{font-size:14px}}
@media(max-width:800px){.mf-head{display:block}.mf-head .bco-scene-intro{margin-top:20px}.mf-layout{grid-template-columns:1fr;gap:26px;margin-top:30px}.mf-stage{aspect-ratio:1.06;max-height:75svh}.mf-caption h3{font-size:clamp(36px,8vw,48px);max-width:none}.mf-caption p:not(.eyebrow){min-height:4.95em;max-width:39ch;font-size:17px}.mf-caption .eyebrow{margin-bottom:12px}.mf-controls{margin-top:12px}.mf-actions{margin-top:20px}.mf-note{max-width:45ch}.mf-dot{min-width:34px}.mf-dots{margin:0 3px}}
@media(prefers-reduced-motion:reduce){.mf-arrow,.mf-dot::after{transition:none}.mf-arrow:hover{transform:none}.mf-canvas{display:none!important}}
@media print{.mf-layout{display:block}.mf-stage{position:static;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:auto}.mf-slide,.mf-slide[hidden]{display:block;position:relative;aspect-ratio:1}.mf-controls,.mf-canvas{display:none!important}}

/* Catalogue cards react with depth, without a crimson perimeter or image crop. */
#view-surfaces .pagetile:hover .pagetile-inner,#view-surfaces .pagetile:focus-visible .pagetile-inner{transform:translateY(-7px);box-shadow:0 30px 54px -26px rgba(10,10,10,.48),0 0 0 1px rgba(10,10,10,.08)}
#view-surfaces .pagetile-inner{background:#fff}
#view-surfaces .pagetile-inner img{transition:transform .7s var(--ease);transform-origin:center;object-fit:contain}
#view-surfaces .pagetile:hover .pagetile-inner img,#view-surfaces .pagetile:focus-visible .pagetile-inner img{transform:translateY(-2px) scale(.986)}
#view-surfaces .pagetile:focus-visible{outline:2px solid #554d42;outline-offset:7px;border-radius:var(--r)}
/* Reconstruct each original overview tile from the same unedited composition.
   The image below retains the intrinsic aspect; the exact hit-map crops can lift independently. */
#view-surfaces .surf-material-grid>img{visibility:hidden}
#view-surfaces .surf-material-hotspot{background:#fff;transition:transform .65s var(--ease),filter .65s var(--ease);transform-origin:center}
#view-surfaces .surf-material-hotspot::before{content:"";display:block;position:absolute;inset:0;background-image:url('/assets/bco_web_material_grid_transparent_1536x717_20260718.png');background-size:450.45045% auto;background-position:var(--mf-crop-x) var(--mf-crop-y);background-repeat:no-repeat;pointer-events:none}
#view-surfaces .surf-material-hotspot--top{--mf-crop-y:0%}
#view-surfaces .surf-material-hotspot--bottom{--mf-crop-y:95.08255%}
#view-surfaces .surf-material-hotspot--c1{--mf-crop-x:3.849614%}
#view-surfaces .surf-material-hotspot--c2{--mf-crop-x:35.14653%}
#view-surfaces .surf-material-hotspot--c3{--mf-crop-x:66.443445%}
#view-surfaces .surf-material-hotspot--c4{--mf-crop-x:97.74036%}
#view-surfaces .surf-material-hotspot::after{display:none}
#view-surfaces .surf-material-hotspot:hover,#view-surfaces .surf-material-hotspot:focus-visible{transform:translateY(-5px);filter:drop-shadow(0 12px 13px rgba(10,10,10,.1));z-index:2}
#view-surfaces .surf-material-hotspot:focus-visible{outline:2px solid #554d42;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#view-surfaces .pagetile-inner,#view-surfaces .pagetile-inner img,#view-surfaces .surf-material-hotspot{transition:none}#view-surfaces .pagetile:hover .pagetile-inner,#view-surfaces .pagetile:hover .pagetile-inner img,#view-surfaces .surf-material-hotspot:hover{transform:none}}

/* One continuous optical plane; the original image remains the semantic fallback. */
.mf-stage canvas.mf-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.mf-stage canvas.mf-canvas[hidden]{display:none}
.mf-stage[data-renderer="webgl"] .mf-slide{opacity:0!important}
.mf-stage[data-renderer="webgl"] .mf-slide[hidden]{display:none}
.mf-slide{will-change:transform,opacity}
[data-material-kind="wood"] .mf-slide img{object-position:center 62%}
.mf-progress{height:1px;width:100%;margin-top:28px;background:rgba(83,73,59,.15);overflow:hidden}
.mf-progress span{display:block;width:100%;height:100%;background:#8a7b63;transform:scaleX(0);transform-origin:left}
.mf-caption h3{min-height:2.16em}
.bco-material-story+.bco-material-story{border-top:1px solid var(--ink-14)}
@media(prefers-reduced-motion:reduce){.mf-progress{visibility:hidden}.mf-slide{will-change:auto}}

@media print{.mf-stage[data-renderer="webgl"] .mf-slide,.mf-stage[data-renderer="webgl"] .mf-slide[hidden]{visibility:visible!important;display:block!important;opacity:1!important;transform:none!important}.mf-progress{display:none}}

@media print{.bco-material-story .mf-slide,.bco-material-story .mf-slide[hidden]{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important}}