/* Four connected workshop areas, scoped to this section only. */
.unified-design .workshop-areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;align-items:start}
.workshop-areas .areas-intro{padding:14px 20px 0 0;min-width:0}.unified-design .workshop-areas h2{font-size:clamp(30px,3vw,43px);line-height:1.05;margin:14px 0 24px}.workshop-areas .areas-intro p{font-size:17px;line-height:1.45;margin:0 0 20px;text-wrap:pretty}.workshop-areas .areas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.workshop-areas .area-card{border-radius:12px;overflow:hidden;min-width:0;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}.workshop-areas .area-card:hover{transform:translateY(-4px);box-shadow:0 18px 28px -24px #003c4380}.workshop-areas .area-yellow{background:#FFEB98;color:#003C43}.workshop-areas .area-petrol{background:#003C43;color:#fffaf0}.workshop-areas .area-cream{background:#fffaf0;color:#003C43}.workshop-areas .area-orange{background:#F5A21B;color:#003C43}.workshop-areas .area-art{height:164px;position:relative;padding:12px 16px 0;overflow:hidden}.workshop-areas .area-index{position:absolute;left:20px;top:16px;font-size:10px;font-weight:900;opacity:.65}.workshop-areas .area-drawing{width:100%;height:150px;display:block}.workshop-areas .area-copy{padding:18px 26px 26px}.unified-design .workshop-areas .area-copy h3{font-size:28px;line-height:1.08;margin:0 0 14px;text-wrap:balance}.workshop-areas .area-copy p{font-size:16px;line-height:1.4;margin:0;text-wrap:pretty}.workshop-areas .area-float{animation:area-hover 6s ease-in-out infinite;transform-origin:center}.workshop-areas .area-card:nth-child(2) .area-float{animation-delay:-1.5s}.workshop-areas .area-card:nth-child(3) .area-float{animation-delay:-3s}.workshop-areas .area-card:nth-child(4) .area-float{animation-delay:-4.5s}@keyframes area-hover{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}
@media(max-width:1100px){.unified-design .workshop-areas{gap:20px;grid-template-columns:1fr 2fr}.workshop-areas .areas-intro{padding-right:0}.unified-design .workshop-areas h2{font-size:32px}.workshop-areas .areas-intro p{font-size:16px}.unified-design .workshop-areas .area-copy h3{font-size:25px}.workshop-areas .area-copy{padding:16px 20px 24px}.workshop-areas .area-art{height:145px}.workshop-areas .area-drawing{height:132px}}
@media(max-width:900px){.unified-design .workshop-areas{grid-template-columns:1fr}.workshop-areas .areas-intro{padding:0;max-width:730px}.unified-design .workshop-areas h2{margin-top:12px;margin-bottom:18px}.workshop-areas .areas-intro p{margin-bottom:14px}}
@media(max-width:600px){.workshop-areas .areas-grid{grid-template-columns:1fr;gap:10px}.workshop-areas .area-art{height:160px}.workshop-areas .area-drawing{height:150px}.workshop-areas .area-copy{padding:18px 26px 26px}.unified-design .workshop-areas .area-copy h3{font-size:28px}.workshop-areas .area-copy p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.workshop-areas .area-float{animation:none}.workshop-areas .area-card{transition:none}}

/* Quiet photographic cards, with isolated subjects over each card's own color. */
.unified-design .workshop-areas{gap:16px;align-items:stretch}
.workshop-areas .areas-intro{background:#003C43;color:#fffaf0;border-radius:12px;overflow:hidden;padding:32px;position:relative;isolation:isolate}
.workshop-areas .areas-intro:before{content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/hom-workshop-cinema-v1.png') center 32%/cover no-repeat;opacity:.38}
.workshop-areas .areas-intro:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#003c4355 0%,#003c43b0 65%,#003c4320 100%)}
.unified-design .workshop-areas .areas-intro h2{color:#fffaf0;font-size:clamp(29px,2.8vw,40px);margin:14px 0 24px;line-height:1.06}
.workshop-areas .areas-intro h2 span{color:#FFEB98}.workshop-areas .areas-intro .eyebrow{color:#FFEB98}.workshop-areas .areas-intro p{font-size:16px;line-height:1.5;color:#f1f5ed;margin-bottom:20px}
.workshop-areas .areas-grid{gap:12px}.workshop-areas .area-card{border:1px solid #003c4312;box-shadow:none;position:relative;transition:transform .3s}.workshop-areas .area-card:hover{transform:translateY(-3px);box-shadow:none}
.workshop-areas .area-yellow{background:#fffaf0;color:#003C43}.workshop-areas .area-petrol{background:#003C43;color:#fffaf0}.workshop-areas .area-cream{background:#FFEB98;color:#003C43}.workshop-areas .area-orange{background:#fffaf0;color:#003C43}
.workshop-areas .area-art{height:180px;padding:0;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;background:none}
.workshop-areas .area-index{left:24px;top:22px;font-size:11px;opacity:.45}
.workshop-areas .area-subject{height:174px;width:240px;max-width:80%;object-fit:contain;object-position:center bottom;display:block;margin:0 18px 0 0;animation:subject-breathe 8s ease-in-out infinite;transform-origin:center bottom;mask-image:linear-gradient(#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(#000 90%,transparent 100%)}
.workshop-areas .area-copy{padding:15px 26px 28px}.unified-design .workshop-areas .area-copy h3{font-size:26px;line-height:1.1;margin-bottom:12px}.workshop-areas .area-copy p{font-size:16px;line-height:1.4}.workshop-areas .area-card:nth-child(2) .area-subject{animation-delay:-2s}.workshop-areas .area-card:nth-child(3) .area-subject{animation-delay:-4s}.workshop-areas .area-card:nth-child(4) .area-subject{animation-delay:-6s}
@keyframes subject-breathe{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
@media(max-width:1100px){.workshop-areas .areas-intro{padding:26px}.unified-design .workshop-areas .areas-intro h2{font-size:31px}.workshop-areas .area-copy{padding:14px 22px 25px}.unified-design .workshop-areas .area-copy h3{font-size:25px}}
@media(max-width:900px){.workshop-areas .areas-intro{max-width:none;padding:30px}.workshop-areas .areas-intro:before{background-position:center 37%}.workshop-areas .areas-intro p{max-width:650px}}
@media(max-width:600px){.workshop-areas .areas-intro{padding:28px}.workshop-areas .area-art{height:175px}.workshop-areas .area-copy{padding:15px 26px 28px}.unified-design .workshop-areas .area-copy h3{font-size:27px}.workshop-areas .area-subject{height:169px;width:240px}}
@media(prefers-reduced-motion:reduce){.workshop-areas .area-subject{animation:none}.workshop-areas .area-card{transition:none}}

/* Keep the introduction at the foot of its photographic card. */
.workshop-areas .areas-intro{display:flex;flex-direction:column;justify-content:flex-end;padding-top:180px}
.workshop-areas .areas-intro> *{flex-shrink:0}
.workshop-areas .areas-intro p:last-child{margin-bottom:0}
.workshop-areas .areas-intro:before{opacity:.72}
.workshop-areas .areas-intro:after{background:linear-gradient(180deg,#003c4310 0%,#003c4350 24%,#003c43e8 52%,#003c43 100%)}