/* Editorial project content; scoped to the case-study surface. */
.case-study .case-section { margin-block:clamp(56px,8vw,112px);min-width:0; }
.case-study .case-section > h2,.case-study .case-feature-copy h2 { margin:0 0 18px;font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.14;text-wrap:balance; }
.case-study .case-section p { max-width:68ch;line-height:1.65;margin:0 0 24px; }
.case-study .case-section > p { max-width:660px; }
.case-study .case-figure { margin:0;min-width:0; }
.case-study .case-figure img { display:block;width:100%;height:auto;border-radius:8px; }
.case-study .case-figure figcaption { margin:12px 0 0;font-size:13px;line-height:1.5; }
.case-study .case-images { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start; }
.case-study .case-images[data-layout="full"],.case-study .case-images[data-layout="contained"] { grid-template-columns:minmax(0,1fr); }
.case-study .case-images[data-layout="contained"] { max-width:860px;margin-inline:auto; }
.case-study .case-images[data-layout="horizontal"] { display:flex;overflow-x:auto;gap:24px;padding-bottom:16px;scroll-snap-type:x proximity; }
.case-study .case-images[data-layout="horizontal"] > figure { flex:0 0 75%;scroll-snap-align:start; }
.case-study .case-section-mobile .case-images > figure { flex-basis:clamp(180px,28%,320px); }
.case-study .case-section-feature { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center; }
.case-study .case-section-feature[data-layout="image-right"] { grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); }
.case-study .case-section-feature[data-layout="image-right"] > .case-images { order:2; }
.case-study .case-section-feature[data-layout="full"] { grid-template-columns:minmax(0,1fr); }
.case-study .case-section-chips { display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none; }
.case-study .case-section-chips li { font-size:12px;border:1px solid var(--line);border-radius:5px;padding:6px 9px; }
.case-study .case-research-items { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px; }
.case-study .case-research-item h3 { margin:24px 0 10px;font-size:22px;font-weight:500;letter-spacing:-.015em; }
.case-study .case-research-item h4 { margin:24px 0 8px;font-size:15px; }
.case-study .case-placeholder { min-height:220px;display:grid;place-items:center;padding:32px;border:1px dashed var(--line);border-radius:8px;text-align:center;font-size:14px; }
.case-study .case-placeholder-note { font-size:14px;border:1px dashed var(--line);padding:20px;border-radius:8px; }
.case-study .case-annotated { position:relative; }
.case-study .case-hotspot { position:absolute;z-index:2;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;border:1px solid #fff;background:#202020;color:#fff;font:500 14px 'Geist',sans-serif;cursor:pointer;box-shadow:0 4px 12px #0003;transition:transform 180ms ease-out; }
.case-study .case-hotspot:hover { transform:translate(-50%,-50%) scale(1.08); }
.case-study .case-hotspot:focus-visible { outline:3px solid #fff;outline-offset:3px; }
.case-study .case-annotation-region { position:absolute;pointer-events:none;border:2px solid #202020;background:#ffffff20;border-radius:4px;z-index:1; }
.case-study .case-annotation-panel { position:absolute;z-index:3;width:min(320px,calc(100% - 16px));padding:20px;background:var(--bg,#202020);color:var(--ink,#fff);border:1px solid var(--line,#555);border-radius:8px;animation:case-panel-in 160ms ease-out both; }
.case-study .case-annotation-panel[hidden],.case-study .case-annotation-region[hidden] { display:none; }
.case-study .case-annotation-panel h3 { font-size:17px;margin:0 0 8px;line-height:1.3; }
.case-study .case-annotation-panel p { margin:0;font-size:14px;line-height:1.5; }
.case-study .case-annotation-panel .case-figure { margin-top:16px; }
.case-study .case-annotation-category { display:block;font-size:12px;margin-top:12px; }
.case-study .case-comparison { position:relative; }
.case-study .case-comparison:not([data-mode="static"]) .case-comparison-before { position:absolute;inset:0 0 auto;clip-path:inset(0 calc(100% - var(--comparison,50%)) 0 0); }
.case-study .case-comparison:not([data-mode="static"]) .case-comparison-before img { height:100%;object-fit:cover; }
.case-study .case-comparison:not([data-mode="static"]) .case-comparison-before { height:calc(100% - 72px); }
.case-study .case-comparison:not([data-mode="static"]) .case-figure figcaption { position:absolute;top:12px;margin:0;padding:5px 9px;background:#202020;color:white;border-radius:4px; }
.case-study .case-comparison-after figcaption { right:12px; }.case-study .case-comparison-before figcaption { left:12px; }
.case-study .case-comparison-control { display:flex;flex-direction:column;gap:8px;margin-top:20px;font-size:13px;height:52px; }
.case-study .case-comparison input { width:100%;min-height:24px;margin:0;accent-color:var(--ink);cursor:ew-resize; }
.case-study .case-comparison[data-mode="static"] { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
.case-study .case-comparison[data-mode="static"] .case-comparison-before { order:-1; }
.case-study .is-case-pending { opacity:0;transform:translateY(16px);transition:opacity 420ms ease-out,transform 420ms cubic-bezier(.22,1,.36,1); }
.case-study .is-case-visible { opacity:1;transform:none; }
@keyframes case-panel-in { from { opacity:0;transform:translateY(5px); }to { opacity:1;transform:none; } }
@media(max-width:700px){
 .case-study .case-section-feature,.case-study .case-section-feature[data-layout="image-right"],.case-study .case-research-items { grid-template-columns:minmax(0,1fr); }
 .case-study .case-section-feature[data-layout="image-right"] > .case-images { order:0; }
 .case-study .case-images { gap:16px; }
 .case-study .case-section-mobile .case-images { display:flex;overflow-x:auto;padding-bottom:16px; }.case-study .case-section-mobile .case-images > figure { flex:0 0 70%; }
 .case-study .case-images[data-layout="split"] { grid-template-columns:minmax(0,1fr); }
 .case-study .case-hotspot { width:44px;height:44px; }
 .case-study .case-comparison[data-mode="static"] { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce){ .case-study .is-case-pending { opacity:1;transform:none;transition:none; }.case-study .case-hotspot { transition:none; }.case-study .case-annotation-panel { animation:none; } }
/* Optional, content-driven layout variants. */
.case-study .case-feature-label,.case-study .case-research-label { font-size:13px;line-height:1.4;margin:0 0 14px; }
.case-study .case-section-mobile .case-images[data-layout="three"] { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start; }
.case-study .case-section-mobile .case-images[data-layout="prominent"] { display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center; }
.case-study .case-research-items[data-layout="considerations"] { counter-reset:consideration;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px; }
.case-study .case-research-items[data-layout="considerations"] .case-research-item { border-top:1px solid var(--line);padding-top:18px; }
.case-study .case-research-item[data-kind="exploration"] { grid-column:1/-1; }
.case-study .case-figure { overflow:hidden; }
.case-study .case-figure img { transition:filter 220ms ease-out; }
@media(hover:hover) and (pointer:fine){.case-study .case-figure:hover img { filter:brightness(1.025); }}
@media(max-width:700px){
 .case-study .case-section-mobile .case-images[data-layout="three"] { gap:10px; }
 .case-study .case-section-mobile .case-images[data-layout="prominent"] { grid-template-columns:1fr 1fr; }
 .case-study .case-section-mobile .case-images[data-layout="prominent"] .case-figure:first-child { grid-column:1/-1;width:70%;justify-self:center; }
 .case-study .case-research-items[data-layout="considerations"] { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce){.case-study .case-figure img { transition:none; }}
.case-study .case-comparison[data-mode="static"] img { aspect-ratio:var(--case-comparison-aspect,auto);object-fit:cover; }
.case-study .case-annotation-region:not([hidden]) { animation:case-region-in 160ms ease-out; }
@keyframes case-region-in { from { opacity:0; }to { opacity:1; } }
@media(prefers-reduced-motion:reduce){.case-study .case-annotation-region { animation:none!important; }}
.case-study .case-comparison-divider { position:absolute;z-index:2;left:var(--comparison,50%);top:0;bottom:72px;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px #20202055;cursor:ew-resize;touch-action:none; }
.case-study .case-comparison-handle { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#202020;border:1px solid #20202055; }

/* White inset frames for the updated project design images in either theme. */
.case-study :is(.case-figure,.case-hero-visual):has(> img:is([src*="Case Studies/rieker/"],[src*="Case Studies/jewellery/"],[src*="/prototype/"])) { box-sizing:border-box;padding:clamp(16px,2.4vw,32px);background:#fff;border:1px solid var(--line);border-radius:12px; }

/* Mobile screen and text share one scroll-bound grid row. */
@media(min-width:701px){
 .case-study #mobile-shopping { grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start; }
 .case-study #mobile-shopping > .case-images { width:min(100%,360px);justify-self:center; }
 .case-study #mobile-shopping > .case-feature-copy { position:sticky;top:clamp(32px,10vh,120px);align-self:start; }
 .case-study #mobile-shopping.is-case-pending { transform:none; }
}
.case-study .case-figure:has(>video),.case-safety-media { box-sizing:border-box;padding:clamp(16px,2.4vw,32px);background:#fff;border:1px solid var(--line);border-radius:12px;min-width:0; }
.case-study .case-figure video { display:block;width:100%;height:auto;border-radius:8px; }
@font-face { font-family:'Safety Oswald';src:url('Assets/Case Studies/bikers/prototype/oswald.ttf') format('truetype');font-weight:400;font-display:swap; }
@font-face { font-family:'Safety Nunito';src:url('Assets/Case Studies/bikers/prototype/nunito-regular.ttf') format('truetype');font-weight:400;font-display:swap; }
@font-face { font-family:'Safety Nunito';src:url('Assets/Case Studies/bikers/prototype/nunito-bold.ttf') format('truetype');font-weight:700;font-display:swap; }
.case-safety-stage { position:relative;aspect-ratio:1600/500;overflow:hidden;border-radius:8px;background:#241c14; }
.case-safety-canvas { position:absolute;width:1600px;height:500px;transform:scale(var(--safety-scale,1));transform-origin:0 0;overflow:hidden;color:#fff; }
.case-safety-photo { position:absolute;max-width:none;width:113.62%;height:242.43%;left:-6.81%;top:-43.72%;transition:width .5s ease-out,height .5s ease-out,left .5s ease-out,top .5s ease-out; }
.case-safety-shade { position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent 51.625%); }
.case-safety-copy { position:absolute;left:-290px;top:56px;width:201px;display:flex;flex-direction:column;gap:31px;opacity:0;transition:left .5s ease-out,opacity .5s ease-out; }
.case-study .case-safety-copy h3 { width:206px;margin:0;font:400 31px/1 'Safety Oswald',sans-serif; }
.case-study .case-safety-copy p { margin:0;max-width:none;width:387px;font:400 16px/1.3 'Safety Nunito',sans-serif; }
.case-safety-copy img { display:block; }
.case-safety-actions { position:absolute;left:999px;top:387px;width:1440px;display:flex;justify-content:flex-end;gap:12px;opacity:0;transition:left .5s ease-out,opacity .5s ease-out; }
.case-safety-actions span { display:block;background:#fff;color:#1d1d1b;padding:18px 22px;font:700 16px/1.3 'Safety Nunito',sans-serif;white-space:nowrap; }
.case-safety-actions span:last-child { background:#e30613;color:#fff;border:1px solid #ffffff80; }
.case-safety-stage.is-revealed .case-safety-photo { width:100%;height:213.36%;left:0;top:-29.18%; }
.case-safety-stage.is-revealed .case-safety-copy { left:80px;opacity:1; }
.case-safety-stage.is-revealed .case-safety-actions { left:80px;opacity:1; }
.case-safety-replay { display:block;margin-top:14px;border:1px solid #20202040;border-radius:6px;padding:8px 12px;background:#fff;color:#202020;font:inherit;font-size:12px;cursor:pointer; }
.case-safety-replay:focus-visible,.case-safety-stage:focus-visible { outline:2px solid #202020;outline-offset:4px; }
@media(prefers-reduced-motion:reduce){.case-safety-photo,.case-safety-copy,.case-safety-actions{transition:none;}}

.case-safety-stage.is-resetting :is(.case-safety-photo,.case-safety-copy,.case-safety-actions) { transition:none!important; }

/* Product-page overlay follows the source prototype's 300ms move-in. */
.case-details-media{min-width:0;}
.case-details-stage{position:relative;aspect-ratio:1600/985;overflow:hidden;border-radius:8px;background:#fff;isolation:isolate;}
.case-study .case-details-media{padding:clamp(16px,2.5vw,32px);border:1px solid var(--line);border-radius:12px;background:#fff;}
.case-details-product{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.case-details-shade{position:absolute;inset:0;border:0;background:rgb(0 0 0 / .25);opacity:0;visibility:hidden;transition:opacity 300ms ease-out,visibility 300ms;}
.case-details-panel{position:absolute;inset:0 0 0 auto;width:37.75%;transform:translateX(101%);transition:transform 300ms ease-out;background:#fff;}
.case-details-panel>img{display:block;width:100%;height:100%;object-fit:fill;}
.case-details-close{position:absolute;right:5%;top:2%;width:24px;height:24px;padding:0;border:0;background:#fff;color:#222;font:20px/1 sans-serif;cursor:pointer;}
.case-details-stage.is-open .case-details-shade{opacity:1;visibility:visible;}
.case-details-stage.is-open .case-details-panel{transform:translateX(0);}
.case-details-toggle{display:block;margin:16px auto 0;padding:10px 18px;border:1px solid #ccc;border-radius:6px;background:white;color:#222;font:inherit;cursor:pointer;}
@media(prefers-reduced-motion:reduce){.case-details-panel,.case-details-shade{transition:none;}}

.case-study .case-section-feature[data-layout="image-right"]>.case-details-media{order:2;}
@media(max-width:760px){.case-study .case-section-feature[data-layout="image-right"]>.case-details-media{order:0;}}