/* Grok Batch 2. Additive candidate; existing wide-screen B-type dimensions retained. */
:root{--b2-panel:#E9E2D7;--b2-radius:8px;--b2-shadow:0 20px 40px -24px rgba(40,30,20,.18)}
.b2-photo{isolation:isolate;overflow:visible}
.b2-photo .photo-seat{position:relative;isolation:isolate;margin-right:24px;margin-bottom:24px}
.b2-photo .photo-seat::before{content:"";position:absolute;inset:24px -24px -24px 24px;background:var(--b2-panel);border-radius:var(--b2-radius);z-index:-1}
.b2-photo .ed-in{border-radius:var(--b2-radius);box-shadow:var(--b2-shadow);clip-path:none!important;mask:none!important;-webkit-mask:none!important;overflow:hidden}
.b2-photo .ed-in::before{display:none}
.b2-photo .ed-in img{object-fit:cover;object-position:var(--photo-focus,50% 65%);transform:none}
.b2-photo:not(.b2-pinned) .ed-in img{width:100%;height:auto;aspect-ratio:4/3}
.b2-photo figcaption{margin-top:1rem;line-height:1.6}
.b2-photo-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:4rem 2.5rem!important;align-items:start!important}
.b2-photo-grid>*{grid-column:span 7;min-width:0;margin-top:0}
.b2-photo-grid>*:nth-child(4n+2),.b2-photo-grid>*:nth-child(4n+3){grid-column:span 5;margin-top:80px}
.b2-photo-grid>*:nth-child(4n+2) .ed-in img,.b2-photo-grid>*:nth-child(4n+3) .ed-in img{aspect-ratio:4/5}
.b2-photo-grid.b2-mirror>*:first-child{grid-column:span 5;margin-top:80px}
.b2-photo-grid.b2-mirror>*:nth-child(2){grid-column:span 7;margin-top:0}
.b2-photo-grid.b2-mirror>*:first-child .ed-in img{aspect-ratio:4/5}
.b2-photo-grid.b2-mirror>*:nth-child(2) .ed-in img{aspect-ratio:4/3}
/* Full-width group photographs cannot be safely cover-cropped to either class.
   Retain the requested frame ratio, but contain the complete photograph. */
.b2-photo.b2-people .ed-in{background:var(--tile)}
.b2-photo.b2-people .ed-in img{object-fit:contain!important;aspect-ratio:4/3!important;transform:none!important}
.b2-photo-grid>*:nth-child(2).b2-people .ed-in img{aspect-ratio:4/5!important}
.process-grid .b2-photo figcaption,#cards .b2-photo figcaption{display:none}
.process-grid article>.cap,#cards li>.cap{margin-top:0}
.b2-stepcard{position:relative;z-index:2;background:var(--paper);margin:-64px 2rem 1.25rem;padding:1.25rem 1.5rem;max-width:calc(100% - 4rem);width:fit-content}
.b2-stepcard h3{margin:.5rem 0 0;font-size:clamp(1.6rem,2vw,2.5rem);line-height:1.15}
.b2-stepcard .num{font-size:.875rem;line-height:1.5}
.process-grid .cap>p,.process-grid .cap>.hard{margin-inline:2rem}
.b2-pinned .photo-seat{margin-right:24px;margin-bottom:24px}
.b2-pinned .b2-stepcard{margin:-64px 1.5rem 1rem;padding:.75rem 1rem;max-width:calc(100% - 3rem)}
.b2-pinned .b2-stepcard strong{font:500 1rem/1.4 var(--sans);display:block}
.b2-pinned .b2-stepcard span{font:400 .75rem/1.5 var(--mono)}
.b2-pinned figcaption{margin-top:.5rem}
/* Already-visible defaults: animation is applied only when an observer fires. */
@keyframes b2-enter{from{opacity:.35;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes b2-image{from{transform:scale(1.04)}to{transform:scale(1)}}
.b2-photo.b2-enter{animation:b2-enter 700ms ease-out both}
.b2-photo.b2-enter:not(.b2-people):not(.b2-pinned) .ed-in img{animation:b2-image 700ms ease-out both}

.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.category-tile{display:block;color:var(--ink);text-decoration:none;min-width:0}
.category-tile .category-image{background:#F0EBE3;padding:.75rem;aspect-ratio:1;display:block;overflow:hidden;border-radius:6px}
.category-tile img{width:100%;height:100%;object-fit:contain;display:block}
.category-tile h3{font-size:1.5rem;line-height:1.2;margin:1rem 0 .4rem}
.category-tile p{font-size:1rem;line-height:1.5;margin:0;color:var(--mid)}
.category-tile:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
.category-tile:hover h3{text-decoration:underline;text-underline-offset:.2em}
.view-large{display:inline-flex;min-height:44px;align-items:center;gap:.5rem;text-decoration:underline;text-underline-offset:.2em;font-size:.875rem;line-height:1.4;color:var(--ink);padding:.5rem 0}
.card .view-large{padding:.5rem 1rem}.dev-large{margin-top:1rem}
.choose-entry{display:block;margin:1.5rem 0;padding:1.25rem;background:var(--tile);border:1px solid var(--stone);border-radius:4px;cursor:pointer;font-size:1rem;line-height:1.55}
.choose-entry input{width:1.125rem;height:1.125rem;vertical-align:middle;margin-right:.5rem;accent-color:var(--copper)}
.choose-entry small{display:block;margin-top:.5rem;color:var(--mid);font-size:.875rem}
.project-details{margin:1.5rem 0;border-block:1px solid var(--stone)}
.project-details summary{padding:1rem 0;cursor:pointer;font-size:1.125rem;min-height:48px}
.project-details .two{padding-block:.5rem 1.5rem;gap:1.25rem}
.project-details input,.project-details select{width:100%;font:inherit;min-height:48px;background:var(--paper);border:1px solid var(--stone);padding:.75rem;color:var(--ink)}
.b2-after{margin-top:2rem}.b2-after ol{padding-left:1.5rem;line-height:1.7}.b2-after p{font-size:.875rem;line-height:1.6;color:var(--mid)}
.lightbox{border:0;padding:1rem;background:var(--paper);color:var(--ink);max-width:95vw;max-height:95vh;width:fit-content}
.lightbox::backdrop{background:rgba(20,20,20,.8)}
.lightbox img{display:block;max-width:88vw;max-height:78vh;object-fit:contain;margin:1rem auto}
.lightbox button{font:inherit;min-height:44px;padding:.5rem 1rem;border:1px solid var(--stone);background:var(--paper);color:var(--ink);cursor:pointer}
.lightbox p{max-width:65ch;line-height:1.6;margin:.75rem 0}
[id]{scroll-margin-top:calc(var(--hh) + 1.5rem)}
@media(max-width:900px){
 .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}.category-tile h3{font-size:1.25rem}.category-tile p{font-size:.875rem}
 .b2-photo-grid{grid-template-columns:1fr!important;gap:3rem!important}
 .b2-photo-grid>*,.b2-photo-grid.b2-mirror>*{grid-column:1!important;margin-top:0!important}
 .b2-photo .photo-seat{margin-right:24px}
 .b2-photo-grid .b2-photo.b2-people .ed-in img{aspect-ratio:auto!important}
 .b2-stepcard{margin:-64px 1rem 1rem;padding:1rem;max-width:calc(100% - 2rem)}
 .process-grid .cap>p,.process-grid .cap>.hard{margin-inline:1rem}
 .project-details .two{grid-template-columns:1fr}.b2-after ol{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.b2-photo.b2-enter,.b2-photo.b2-enter .ed-in img{animation:none!important;transform:none!important}}

/* No coloured lighting blend over the factory hero. The existing neutral text scrim remains for legibility. */
.hero .spec,.hero .spec2{display:none}
.b2-pinned .frame img{transform:scale(1.04);transition:clip-path 700ms ease,opacity 700ms ease,transform 700ms ease}
.b2-pinned .frame img.on{transform:scale(1)}

.b2-no-observer .rv{opacity:1;transform:none}
.b2-no-observer .rv-clip .ed-in{clip-path:none!important}
.b2-no-observer .story{display:none}
.b2-no-observer .cards{display:block}

/* Keep every face and raised hand, but remove artificial fixed-ratio matting. */
body[data-page="about"] .b2-people .ed-in img,
body[data-page="about"] .ed-in img[data-original="assets/p1/about-designers.webp"]{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;transform:none!important}
body[data-page="about"] .b2-photo-grid>.b2-people:nth-child(2){margin-top:2.5rem}
@media(max-width:900px){body[data-page="about"] .b2-photo-grid>.b2-people:nth-child(2){margin-top:0}}

/* sizes=auto enables size containment: declare the exact source ratio instead of auto. */
body[data-page="about"] .sec.wrap .b2-photo-grid .b2-photo.b2-people .ed-in img[data-original="assets/p1/about-team-workshop.webp"]{aspect-ratio:1600/995!important}
body[data-page="about"] .sec.wrap .b2-photo-grid .b2-photo.b2-people .ed-in img[data-original="assets/p1/about-team-office.webp"]{aspect-ratio:900/703!important}
body[data-page="about"] .sec.wrap .b2-photo .ed-in img[data-original="assets/p1/about-designers.webp"]{aspect-ratio:1600/900!important}

/* R6 photo candidate A: preserve the complete designer photograph and its source ratio. */
body[data-page="about"] #design-team .split{align-items:start}
body[data-page="about"] #design-team .split>.lead{align-self:start}
body[data-page="about"] #design-team .photo-seat{margin-right:8px;margin-bottom:8px}
body[data-page="about"] #design-team .photo-seat::before{inset:8px -8px -8px 8px}