.cases-page { --case-blue:#2323e8; }
.cases-page :focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.cases-page .site-header { background:var(--paper); }
.cases-page .desktop-nav { gap:clamp(1rem,2vw,2rem); }
.cases-page [aria-current="page"] { color:var(--blue); }
.case-kicker { display:flex; align-items:center; gap:.7rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.case-kicker::before { content:""; width:.55rem; height:.55rem; background:var(--blue); border-radius:50%; flex-shrink:0; }
.case-index-hero { padding-top:10rem; padding-bottom:4rem; }
.case-index-heading { display:grid; grid-template-columns:1.5fr 1fr; gap:3rem; align-items:end; margin-top:2.5rem; }
.case-index-heading h1 { margin:0; font-size:clamp(4rem,8.5vw,9rem); line-height:.89; letter-spacing:-.075em; }
.case-index-heading h1 em,.case-section h2 em,.case-contact h2 em { font:italic .97em Georgia,serif; letter-spacing:-.055em; }
.case-index-heading p { max-width:28rem; margin:0 0 .35rem auto; font-size:clamp(1.05rem,1.5vw,1.45rem); line-height:1.55; color:#464741; }
.case-feature { padding-top:1rem; padding-bottom:5rem; }
.case-feature-link { display:grid; grid-template-columns:1.1fr 1fr; min-height:39rem; background:var(--ink); color:var(--paper); border-radius:1rem; overflow:hidden; }
.case-feature-image { position:relative; overflow:hidden; background:#b9b2a4; min-height:30rem; }
.case-feature-image>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 40%; transition:transform .8s var(--ease); }
.case-feature-link:hover .case-feature-image>img { transform:scale(1.035); }
.case-image-index { position:absolute; top:1.5rem; left:1.5rem; background:var(--paper); color:var(--ink); padding:.5rem .8rem; border-radius:2rem; font-size:.65rem; }
.case-feature-copy { display:flex; flex-direction:column; padding:clamp(2rem,4vw,5rem); }
.case-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.case-tags span { font-size:.65rem; line-height:1.3; letter-spacing:.025em; padding:.5rem .75rem; border:1px solid currentColor; border-radius:2rem; }
.case-feature-copy h2 { margin:auto 0 1.6rem; font-size:clamp(2.6rem,4.6vw,5rem); letter-spacing:-.065em; line-height:.96; }
.case-feature-copy p { margin:0 0 2.6rem; color:#c3c4bb; font-size:1.1rem; line-height:1.6; max-width:27rem; }
.case-feature-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:1.6rem; border-top:1px solid #4b4d44; font-size:.85rem; }
.case-arrow { display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:50%; background:var(--signal); color:var(--ink); font-size:1.6rem; transition:transform .3s; }
.case-feature-link:hover .case-arrow { transform:rotate(45deg); }
.case-coming { padding-top:2rem; padding-bottom:5rem; border-top:1px solid var(--line); }
.case-coming-head { display:flex; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.case-coming-head p { margin:0; font-size:.85rem; color:#56574f; }
.case-coming-row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:1.5rem 0; border-top:1px solid var(--line); }
.case-coming-row h2 { font-size:clamp(2rem,3.4vw,3.5rem); letter-spacing:-.055em; margin:0; }
.case-coming-row span { color:#56574f; font-size:.75rem; }
.case-detail-hero { padding-top:8rem; padding-bottom:0; }
.case-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:3rem; font-size:.7rem; color:#55564f; }
.case-breadcrumbs a:hover { text-decoration:underline; }
.case-hero-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.case-hero-top .case-tags { margin:0; }
.case-detail-hero h1 { font-size:clamp(4rem,10.5vw,11.4rem); line-height:.86; letter-spacing:-.08em; margin:3rem 0 2.4rem; font-weight:500; }
.case-hero-description { display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-bottom:3rem; }
.case-hero-description h2 { font-size:clamp(1.65rem,3vw,3rem); letter-spacing:-.045em; line-height:1.12; margin:0; max-width:34rem; font-weight:500; }
.case-hero-description p { margin:0 0 1.5rem; max-width:33rem; color:#464741; font-size:1.1rem; line-height:1.6; }
.case-hero-image { position:relative; height:clamp(25rem,56vw,46rem); overflow:hidden; border-radius:1rem; background:#b9b2a4; }
.case-hero-image>img { width:100%; height:100%; object-fit:cover; object-position:center 43%; }
.case-hero-image::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.65)); pointer-events:none; }
.case-hero-image .case-hero-brand { position:absolute; z-index:1; left:2.5rem; bottom:2.5rem; width:min(52%,37rem); height:auto; filter:brightness(0) invert(1); }
.case-image-caption { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; color:#57584f; font-size:.65rem; line-height:1.5; }
.case-facts { margin:1.5rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.case-facts>div { padding:1.6rem 1.2rem 1.6rem 0; }
.case-facts dt { font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:#64655c; margin-bottom:.7rem; }
.case-facts dd { margin:0; font-size:.95rem; line-height:1.5; }
.case-toc { position:relative; top:0; z-index:20; display:flex; gap:2rem; align-items:center; padding-top:1.15rem; padding-bottom:1.15rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); font-size:.75rem; }
.case-toc>span { color:#64655c; margin-right:auto; }
.case-toc a:hover { color:var(--blue); }
.case-section { padding-top:clamp(4rem,7vw,8rem); padding-bottom:clamp(4rem,7vw,8rem); scroll-margin-top:4rem; }
.case-section-head { display:grid; grid-template-columns:1fr 2.1fr; gap:3rem; }
.case-section-head h2 { font-size:clamp(2.5rem,5vw,5.3rem); line-height:1.02; letter-spacing:-.06em; margin:0 0 2rem; font-weight:500; }
.case-reading { max-width:42rem; font-size:1.1rem; line-height:1.7; color:#464741; }
.case-reading p { margin:0 0 1.3rem; }
.case-reading p:last-child { margin-bottom:0; }
.case-challenge { border-bottom:1px solid var(--line); }
.case-decision { padding:2rem; border-left:3px solid var(--blue); margin-top:2.5rem; background:#e8e8e0; }
.case-decision span { font-size:.65rem; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); }
.case-decision p { font-size:1.25rem; line-height:1.5; color:var(--ink); margin:.8rem 0 0; }
.case-scope { background:var(--ink); color:var(--paper); }
.case-scope .case-kicker::before { background:var(--signal); }
.case-scope-intro { max-width:38rem; color:#b8b9b0; font-size:1.05rem; line-height:1.6; margin:0 0 3rem; }
.case-work-list { margin-left:calc(100% / 3.1 + 1rem); }
.case-work-item { display:grid; grid-template-columns:2rem 1fr 1.25fr; gap:1.5rem; border-top:1px solid #3f4137; padding:1.8rem 0; }
.case-work-item>span { color:var(--signal); font-size:.75rem; padding-top:.4rem; }
.case-work-item h3 { margin:0; font-size:clamp(1.1rem,1.65vw,1.6rem); line-height:1.25; letter-spacing:-.035em; font-weight:500; }
.case-work-item p { margin:0; color:#b8b9b0; font-size:.95rem; line-height:1.65; }
.case-product-story { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,7vw,8rem); align-items:center; }
.case-product-frame { padding:2.5rem; background:#e6e4da; border-radius:1rem; }
.case-product-frame img { max-height:38rem; width:100%; object-fit:cover; object-position:center; }
.case-product-copy h2 { margin:1.8rem 0; font-size:clamp(2.4rem,4vw,4.3rem); letter-spacing:-.055em; line-height:1.04; }
.case-product-copy p { color:#464741; font-size:1.05rem; line-height:1.7; }
.case-result { background:#e7e9e0; }
.case-result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; }
.case-result-item { border-top:1px solid #bfc3b4; padding-top:1.7rem; }
.case-result-item>span { color:#4a4e42; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; }
.case-result-item h3 { font-size:clamp(1.5rem,2.3vw,2.5rem); line-height:1.1; letter-spacing:-.045em; margin:1.4rem 0 1rem; font-weight:500; }
.case-result-item p { color:#4c5045; font-size:1rem; line-height:1.65; margin:0; }
.case-sales { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; margin-top:3rem; padding:2.5rem; background:var(--ink); color:var(--paper); border-radius:1rem; }
.case-sales strong { display:block; color:var(--signal); font-size:clamp(4rem,8vw,8rem); line-height:1; letter-spacing:-.07em; }
.case-sales h3 { font-size:1.35rem; font-weight:500; }
.case-sales p { color:#bfc1b5; line-height:1.65; font-size:.95rem; }
.case-sales details { font-size:.85rem; }
.case-sales summary { cursor:pointer; text-decoration:underline; text-underline-offset:.25rem; }
.case-quote { background:var(--case-blue); color:white; }
.case-quote .case-kicker::before { background:var(--signal); }
.case-quote-layout { display:grid; grid-template-columns:1fr 2.1fr; gap:3rem; }
.case-quote blockquote { margin:0; }
.case-quote blockquote p { font-size:clamp(1.75rem,3.3vw,3.5rem); line-height:1.22; letter-spacing:-.04em; margin:0 0 2rem; }
.case-quote cite { font-style:normal; font-size:.95rem; }
.case-quote cite small { display:block; margin-top:.4rem; color:#d5d5ff; }
.case-quote-reserved { border-top:1px solid #7777f3; padding-top:2rem; }
.case-quote-reserved h2 { font-size:clamp(2.5rem,5vw,5rem); font-weight:500; letter-spacing:-.055em; line-height:1.05; margin:0 0 1.5rem; }
.case-quote-reserved p { color:#e0e0ff; margin:0; max-width:25rem; line-height:1.65; }
.case-contact { padding-top:6rem; padding-bottom:6rem; }
.case-contact-layout { display:grid; grid-template-columns:1.5fr 1fr; align-items:end; gap:3rem; }
.case-contact h2 { margin:1.8rem 0 0; font-size:clamp(2.8rem,5vw,5.5rem); line-height:1; font-weight:500; letter-spacing:-.06em; }
.case-contact p { margin:0 0 1.8rem; color:#464741; font-size:1.05rem; line-height:1.65; max-width:29rem; }
.case-contact .button { min-width:15rem; }
.case-back-link { display:inline-block; margin-top:2.5rem; font-size:.8rem; border-bottom:1px solid currentColor; padding-bottom:.3rem; }
@media(min-width:1700px) { .cases-page main { max-width:1800px; margin:auto; } }
@media(max-width:1000px) {
.case-feature-link { min-height:34rem; } .case-feature-copy { padding:2rem; }
.case-work-item { grid-template-columns:1.6rem 1fr; } .case-work-item p { grid-column:2; } .case-toc { gap:1.3rem; }
}
@media(max-width:760px) {
.case-index-hero { padding-top:8rem; padding-bottom:2.5rem; }
.case-index-heading,.case-hero-description,.case-section-head,.case-quote-layout,.case-product-story,.case-contact-layout,.case-sales { grid-template-columns:1fr; gap:1.8rem; }
.case-index-heading { margin-top:1.8rem; } .case-index-heading p { margin:0; }
.case-index-heading h1 { font-size:clamp(3.6rem,13.5vw,6rem); }
.case-feature-link { grid-template-columns:1fr; } .case-feature-image { min-height:28rem; }
.case-feature-copy { padding:2rem 1.5rem; } .case-feature-copy h2 { font-size:3.1rem; margin-top:1.5rem; }
.case-feature-copy p { font-size:1rem; } .case-coming-head { flex-direction:column; gap:1rem; }
.case-detail-hero { padding-top:7rem; } .case-breadcrumbs { margin-bottom:2rem; }
.case-detail-hero h1 { font-size:clamp(3.7rem,12.4vw,6.5rem); margin:2rem 0; letter-spacing:-.075em; }
.case-hero-description { margin-bottom:2rem; } .case-hero-description h2 { font-size:2rem; }
.case-hero-image { height:32rem; } .case-hero-image .case-hero-brand { width:calc(100% - 3rem); left:1.5rem; bottom:1.7rem; }
.case-image-caption { flex-direction:column; gap:.2rem; }
.case-facts { grid-template-columns:1fr 1fr; } .case-facts>div { padding:1.2rem .7rem 1.2rem 0; border-bottom:1px solid var(--line); }
.case-toc { position:static; justify-content:space-between; gap:.7rem; font-size:.7rem; padding-top:1rem; padding-bottom:1rem; }
.case-toc>span { display:none; } .case-work-list { margin-left:0; }
.case-decision,.case-product-frame { padding:1.5rem; } .case-result-grid { grid-template-columns:1fr; gap:2rem; }
.case-result-item h3 { margin-top:1rem; font-size:2rem; } .case-result-item p { max-width:35rem; }
.case-reading { font-size:1rem; } .case-sales { padding:1.5rem; }
.case-contact { padding-top:4rem; padding-bottom:4rem; } .case-coming-row { align-items:center; }
}
@media(prefers-reduced-motion:reduce) { .cases-page *,.cases-page *::before,.cases-page *::after { scroll-behavior:auto!important; transition:none!important; } }


/* Device frames are CSS; their screens use unaltered captures of the live shop. */
.case-showcase { padding-top:clamp(4rem,7vw,8rem); padding-bottom:clamp(4rem,7vw,8rem); scroll-margin-top:4rem; }
.case-showcase-head { display:grid; grid-template-columns:1fr 2.1fr; gap:3rem; margin-bottom:3rem; }
.case-showcase-head h2 { margin:0 0 1.4rem; font-size:clamp(2.6rem,5vw,5.3rem); line-height:1.02; letter-spacing:-.06em; font-weight:500; }
.case-showcase-head h2 em { font:italic .97em Georgia,serif; letter-spacing:-.055em; }
.case-showcase-head p { max-width:39rem; margin:0; color:#464741; font-size:1.05rem; line-height:1.65; }
.case-device-stage { position:relative; isolation:isolate; padding:clamp(2rem,5vw,6rem); border-radius:1rem; overflow:hidden; }
.case-device-stage-primary { background:#2222e8; color:white; }
.case-stage-meta { display:flex; justify-content:space-between; gap:1rem; margin-bottom:3rem; font-size:.65rem; line-height:1.5; text-transform:uppercase; letter-spacing:.07em; }
.case-stage-meta span:last-child { color:#d9d9ff; }
.case-device-composition { position:relative; padding:0 10% 3.5% 1%; }
.case-screen { display:block; position:relative; background:#e8e5de; text-decoration:none; }
.case-screen img { width:100%; height:auto; display:block; }
.case-screen:focus-visible { outline-color:var(--signal); }
.case-screen-hint { display:flex; align-items:center; gap:.5rem; position:absolute; right:1rem; bottom:1rem; padding:.55rem .85rem; border-radius:3rem; color:var(--paper); background:#11120fe8; font-size:.65rem; opacity:0; transform:translateY(.3rem); transition:opacity .2s,transform .2s; }
.case-screen:hover .case-screen-hint,.case-screen:focus-visible .case-screen-hint { opacity:1; transform:none; }
.case-device-laptop { position:relative; padding:.8rem .8rem 1.1rem; border:1px solid #52534b; background:#1b1c19; border-radius:1rem 1rem .5rem .5rem; box-shadow:0 1.5rem 2.5rem #09094855; }
.case-device-laptop::before { content:""; position:absolute; left:50%; top:.3rem; width:.22rem; height:.22rem; border-radius:50%; background:#62645b; }
.case-device-laptop::after { content:""; position:absolute; left:-5%; bottom:-.65rem; width:110%; height:.8rem; border-radius:.1rem .1rem 50% 50%; background:linear-gradient(#c7c9c3,#888b83); box-shadow:0 .2rem .2rem #09094830; }
.case-device-laptop .case-screen { overflow:hidden; border-radius:.25rem; aspect-ratio:1440/960; }
.case-device-laptop img { height:100%; object-fit:cover; object-position:top; }
.case-device-phone { position:relative; width:23%; padding:.55rem; background:#161714; border:1px solid #65665e; border-radius:2.2rem; box-shadow:0 1.5rem 3rem #09094866; }
.case-device-phone .case-screen { overflow:hidden; border-radius:1.65rem; aspect-ratio:390/844; }
.case-device-phone img { height:100%; object-fit:cover; object-position:top; }
.case-device-phone::before { content:""; position:absolute; z-index:2; width:25%; height:.25rem; background:#76786e; left:37.5%; top:.17rem; border-radius:2rem; }
.case-device-composition>.case-device-phone { position:absolute; z-index:3; right:0; bottom:0; transform:rotate(4deg); }
.case-device-stage-caption { display:flex; justify-content:space-between; gap:1rem; color:#e1e1ff; font-size:.65rem; line-height:1.6; margin-top:3rem; }
.case-screen-caption { display:grid; grid-template-columns:3rem 1fr auto; align-items:baseline; gap:1rem; padding:1.2rem 0 0; }
.case-screen-caption>span { color:#65675c; font-size:.65rem; }
.case-screen-caption h3 { margin:0 0 .55rem; font-size:1.15rem; line-height:1.4; font-weight:500; letter-spacing:-.025em; }
.case-screen-caption p { margin:0; color:#5b5d52; font-size:.85rem; line-height:1.6; max-width:34rem; }
.case-screen-caption>a { font-size:.7rem; text-decoration:underline; text-underline-offset:.25rem; white-space:nowrap; }
.case-screen-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem 2rem; margin-top:3.5rem; }
.case-screen-figure { min-width:0; margin:0; }
.case-browser-frame { padding:2rem clamp(1rem,2.5vw,3rem) 0; background:#e4e3d9; border-radius:.8rem; overflow:hidden; }
.case-browser-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid #d5d4cc; border-bottom:0; border-radius:.45rem .45rem 0 0; padding:.65rem .9rem; background:#f6f5f0; color:#5a5c51; font-size:.55rem; }
.case-browser-dots { display:flex; gap:.25rem; }
.case-browser-dots i { display:block; width:.3rem; height:.3rem; border:1px solid #b4b7ab; border-radius:50%; }
.case-browser-frame>.case-screen { border:1px solid #d5d4cc; aspect-ratio:1440/1060; overflow:hidden; box-shadow:0 1rem 2rem #11120f14; }
.case-browser-frame>.case-screen img { height:100%; object-fit:cover; object-position:top; }
.case-showcase-wide { margin-top:3.5rem; }
.case-showcase-wide .case-browser-frame { padding:clamp(1.5rem,5vw,5rem); }
.case-showcase-wide .case-browser-frame>.case-screen { aspect-ratio:1440/1000; }
.case-responsive-story { background:#e6e7de; }
.case-responsive-scene { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,5vw,6rem); align-items:center; }
.case-responsive-devices { position:relative; padding:1rem 12% 3rem 0; }
.case-device-tablet { padding:.8rem; border:1px solid #73756c; border-radius:1.7rem; background:#181a16; box-shadow:0 2rem 3rem #1a221c24; }
.case-device-tablet .case-screen { overflow:hidden; aspect-ratio:834/1112; border-radius:.95rem; }
.case-device-tablet img { height:100%; object-fit:cover; object-position:top; }
.case-responsive-devices>.case-device-phone { position:absolute; z-index:2; width:38%; right:0; bottom:0; transform:rotate(-5deg); }
.case-responsive-copy .case-kicker { margin-bottom:1.6rem; }
.case-responsive-copy h2 { font-size:clamp(2.5rem,4vw,4.5rem); line-height:1.05; font-weight:500; letter-spacing:-.055em; margin:0 0 1.8rem; }
.case-responsive-copy p { max-width:28rem; margin:0 0 1.5rem; font-size:1.05rem; color:#484c40; line-height:1.7; }
.case-mobile-details { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:4rem; }
.case-mobile-panel { margin:0; background:#f2f1ea; padding:2.5rem; border-radius:.8rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.case-mobile-panel .case-device-phone { width:100%; max-width:15rem; box-shadow:0 1.3rem 2rem #171b1226; }
.case-mobile-panel figcaption span { display:block; margin-bottom:1rem; color:#686d5b; font-size:.65rem; letter-spacing:.08em; }
.case-mobile-panel figcaption h3 { font-size:1.4rem; letter-spacing:-.035em; font-weight:500; line-height:1.25; margin:0 0 1rem; }
.case-mobile-panel figcaption p { color:#565d4a; font-size:.9rem; line-height:1.6; margin:0; }
.case-lightbox { position:fixed; width:min(96vw,1700px); max-width:none; max-height:94vh; padding:0; border:1px solid #63675b; border-radius:.7rem; background:#f2f1ea; color:#11120f; }
.case-lightbox::backdrop { background:#11120fdf; backdrop-filter:blur(7px); }
.case-lightbox-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 1.4rem; border-bottom:1px solid #d6d9cc; }
.case-lightbox-header p { margin:0; font-size:.85rem; }
.case-lightbox-header button { background:#11120f; color:#f2f1ea; border:0; border-radius:2rem; padding:.65rem 1rem; font-size:.8rem; cursor:pointer; }
.case-lightbox-body { overflow:auto; max-height:calc(94vh - 5rem); background:#e5e6de; }
.case-lightbox-body img { display:block; max-width:100%; height:auto; margin:auto; }
html.case-lightbox-open { overflow:hidden; }
@media(max-width:1000px) {
.case-mobile-panel { padding:1.5rem; gap:1.2rem; }
.case-mobile-panel figcaption h3 { font-size:1.15rem; }
.case-mobile-panel figcaption p { font-size:.8rem; }
}
@media(max-width:760px) {
.case-showcase-head,.case-responsive-scene { grid-template-columns:1fr; gap:1.5rem; }
.case-device-stage { padding:2rem 1rem; margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); border-radius:0; }
.case-stage-meta { font-size:.55rem; margin-bottom:2rem; }
.case-device-composition { padding:0 12% 12% 3%; }
.case-device-laptop { padding:.3rem .3rem .45rem; border-radius:.45rem .45rem .2rem .2rem; }
.case-device-laptop::before { top:.08rem; width:.1rem; height:.1rem; }
.case-device-laptop::after { height:.4rem; bottom:-.35rem; }
.case-device-composition>.case-device-phone { width:28%; padding:.22rem; border-radius:.85rem; transform:rotate(3deg); }
.case-device-composition>.case-device-phone .case-screen { border-radius:.6rem; }
.case-device-composition>.case-device-phone::before { top:.05rem; height:.12rem; }
.case-device-stage-caption { margin-top:2rem; font-size:.6rem; flex-direction:column; gap:.4rem; }
.case-screen-grid,.case-mobile-details { grid-template-columns:1fr; gap:2.5rem; }
.case-screen-caption { grid-template-columns:1.8rem 1fr; gap:.6rem; }
.case-screen-caption>a { grid-column:2; margin-top:.4rem; }
.case-browser-frame { padding:1.5rem 1rem 0; }
.case-browser-frame>.case-screen { aspect-ratio:1440/1060; }
.case-showcase-wide .case-browser-frame { padding:1.5rem 1rem; }
.case-screen-hint { display:none; }
.case-responsive-devices { max-width:35rem; padding-right:16%; }
.case-responsive-devices>.case-device-phone { width:39%; }
.case-responsive-copy h2 { margin-top:1rem; font-size:2.8rem; }
.case-mobile-panel { padding:2rem 1.5rem; gap:1.5rem; }
.case-mobile-panel figcaption h3 { font-size:1.35rem; }
.case-mobile-panel figcaption p { font-size:.9rem; }
.case-lightbox { width:96vw; max-height:94dvh; }
.case-lightbox-header { padding:.8rem; }
.case-lightbox-header p { font-size:.7rem; }
.case-toc { overflow-x:auto; justify-content:flex-start; white-space:nowrap; }
.case-toc a { flex-shrink:0; }
}



/* Platform migration: real logo assets with a readable source and destination. */
.case-platform-migration { display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(1.5rem,3vw,3.5rem); align-items:center; margin:0 0 3rem; padding:clamp(1.5rem,3vw,3rem); border:1px solid #d7d9ce; border-radius:1rem; background:#e9eae2; }
.case-platform-eyebrow { display:block; margin-bottom:1rem; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:#555b4c; }
.case-platform-summary h2 { margin:0 0 1rem; font-size:clamp(1.6rem,2.25vw,2.6rem); font-weight:500; line-height:1.12; letter-spacing:-.045em; }
.case-platform-summary p { margin:0; max-width:29rem; color:#4c5344; font-size:.95rem; line-height:1.65; }
.case-platform-flow { display:grid; grid-template-columns:minmax(0,1fr) 2.6rem minmax(0,1fr); gap:clamp(.5rem,1.2vw,1.2rem); align-items:center; }
.case-platform-node { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:1.4rem 1rem; border:1px solid #d3d7c8; border-radius:.65rem; background:#f6f6ef; }
.case-platform-node>span { font-size:.65rem; color:#535b48; line-height:1.5; }
.case-platform-wordmark { display:flex; align-items:center; justify-content:center; gap:.55rem; min-height:3rem; margin-top:1rem; }
.case-platform-wordmark .case-platform-woo { display:block; width:100%; max-width:13rem; height:auto; }
.case-platform-wordmark .case-platform-shopify { display:block; flex-shrink:0; width:clamp(1.5rem,2.4vw,2.25rem); height:auto; }
.case-platform-wordmark strong { font-size:clamp(1.4rem,2.45vw,2.7rem); font-weight:650; line-height:1; letter-spacing:-.06em; }
.case-platform-destination { border-color:#b9c79a; background:#e0eabb; }
.case-platform-direction { display:grid; place-items:center; height:2.6rem; border:1px solid #c4cbbc; border-radius:50%; font-size:1.5rem; }
.case-feature-platforms { display:flex; align-items:center; gap:1rem; margin:0 0 1.6rem; }
.case-feature-platforms>.case-platform-woo { display:block; width:8.4rem; height:auto; filter:brightness(0) invert(1); }
.case-feature-direction { color:var(--signal); font-size:1.35rem; }
.case-feature-shopify { display:flex; align-items:center; gap:.4rem; font-size:1.35rem; font-weight:600; letter-spacing:-.045em; }
.case-feature-shopify img { width:1.6rem; height:1.6rem; filter:brightness(0) invert(1); }
@media(max-width:1000px) {
.case-platform-migration { grid-template-columns:1fr; }
.case-platform-summary h2 br { display:none; }
.case-platform-summary p { max-width:43rem; }
.case-platform-flow { max-width:45rem; width:100%; }
}
@media(max-width:760px) {
.case-platform-migration { padding:1.3rem 1rem; margin-bottom:2rem; gap:1.5rem; }
.case-platform-summary h2 { font-size:1.7rem; }
.case-platform-flow { grid-template-columns:minmax(0,1fr) 1.7rem minmax(0,1fr); gap:.4rem; }
.case-platform-node { padding:.8rem .6rem; }
.case-platform-node>span { font-size:.6rem; }
.case-platform-wordmark { gap:.3rem; min-height:2rem; margin-top:.75rem; }
.case-platform-wordmark strong { font-size:clamp(1.05rem,4.9vw,1.8rem); }
.case-platform-wordmark .case-platform-shopify { width:1.2rem; }
.case-platform-direction { height:1.7rem; font-size:1.1rem; }
.case-feature-platforms { gap:.8rem; }
.case-feature-platforms>.case-platform-woo { width:7.5rem; }
.case-feature-shopify { font-size:1.25rem; }
}

/* Brand accents share the original editorial layout. */
[data-case-brand="maugo"] .case-device-stage-primary { background:#554235; }
[data-case-brand="anka"] .case-device-stage-primary { background:#1c459b; }
[data-case-brand="maugo"] .case-hero-image>img { object-position:center; }
[data-case-brand="anka"] .case-hero-image>img { object-position:center 47%; }
.case-related { padding-top:2rem; padding-bottom:5rem; }
.case-related-links { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
.case-related-links>a { display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:center; padding:1.5rem 0; border-top:1px solid var(--line); }
.case-related-links>a>span { font-size:clamp(1.5rem,2.5vw,2.8rem); line-height:1.1; letter-spacing:-.045em; }
.case-related-links small { grid-row:2; color:#555b4b; font-size:.75rem; }
.case-related-links i { grid-column:2; grid-row:1/3; font-style:normal; font-size:1.8rem; }
.case-related-links>a:hover { color:var(--blue); }
@media(max-width:760px) { .case-related-links { grid-template-columns:1fr; gap:.5rem; } }

/* Case index: one editorial lead and two distinct jewellery projects. */
.case-index-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.case-index-edition { display:flex; align-items:center; gap:2rem; color:#5f6355; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.case-index-edition>span { color:var(--blue); font-size:1.4rem; }
.case-index-intro>p { margin:0; max-width:29rem; }
.case-index-facts { display:flex; gap:2rem; margin-top:1.7rem; font-size:.7rem; color:#555b4b; }
.case-index-facts>span { display:flex; align-items:baseline; gap:.6rem; }
.case-index-facts strong { font-size:1.7rem; line-height:1; letter-spacing:-.055em; color:var(--ink); font-weight:500; }
.case-sector-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.case-sector-filter { display:flex; flex-wrap:wrap; gap:.5rem; }
.case-sector-filter[hidden],.case-project[hidden] { display:none!important; }
.case-sector-filter button { display:flex; gap:.55rem; align-items:center; min-height:2.8rem; padding:.65rem 1rem; border:1px solid #cfd1c5; border-radius:3rem; background:transparent; color:var(--ink); font:inherit; font-size:.78rem; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.case-sector-filter button>span { margin-left:.25rem; font-size:.6rem; opacity:.65; }
.case-sector-filter button>svg { width:1.1rem; height:1.1rem; }
.case-sector-filter button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.case-sector-filter button:hover { border-color:var(--ink); }
.case-sector-filter button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.case-sector-count { margin:0 0 0 auto; color:#5e6454; font-size:.7rem; }
.case-index-gallery { padding-top:0; padding-bottom:3rem; }
.case-project-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
.case-project { min-width:0; --project-bg:#e9e1d5; --project-ink:#2e261f; --project-muted:#605142; --project-line:#c9baa7; --project-accent:#66513d; --project-arrow-ink:#fff; }
.case-project--lead { grid-column:1/-1; --project-bg:#141612; --project-ink:#f2f1ea; --project-muted:#c0c4b5; --project-line:#454a3d; --project-accent:var(--signal); --project-arrow-ink:#11120f; }
.case-project--anka { --project-bg:#e3e9f4; --project-ink:#183266; --project-muted:#475a7e; --project-line:#bbc7df; --project-accent:#214eaa; --project-arrow-ink:#fff; }
.case-index-gallery .case-project-link { display:flex; flex-direction:column; min-height:0; height:100%; color:var(--project-ink); background:var(--project-bg); border:1px solid #11120f0c; border-radius:1rem; overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease); }
.case-index-gallery .case-project--lead .case-project-link { display:grid; grid-template-columns:1.16fr 1fr; min-height:37rem; }
.case-project-visual { position:relative; aspect-ratio:4/3; overflow:hidden; background:#b8ad9c; }
.case-project-visual>img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.case-project-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0002,transparent 30%,transparent 70%,#0004); }
.case-project--lead .case-project-visual { aspect-ratio:auto; min-height:37rem; }
.case-project--lead .case-project-visual>img { position:absolute; inset:0; object-position:center 40%; }
.case-project--anka .case-project-visual>img { object-position:center 63%; }
.case-project-visual-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; position:absolute; z-index:1; top:1.25rem; left:1.25rem; right:1.25rem; }
.case-project-number { color:white; font-size:.65rem; letter-spacing:.045em; text-shadow:0 1px 8px #0008; }
.case-sector-badge { display:inline-flex; align-items:center; gap:.45rem; flex-shrink:0; background:#f6f5efed; color:#20251a; border:1px solid #ffffff80; border-radius:3rem; padding:.5rem .85rem; font-size:.7rem; }
.case-sector-badge svg { display:block; width:1.15rem; height:1.15rem; }
.case-project-visual-note { position:absolute; z-index:1; bottom:1.25rem; left:1.5rem; color:white; font-size:.62rem; letter-spacing:.06em; }
.case-project-copy { display:flex; flex-direction:column; flex:1; padding:clamp(1.5rem,3vw,3rem); }
.case-project-category { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.65rem; letter-spacing:.07em; text-transform:uppercase; color:var(--project-muted); }
.case-project-category>span:last-child { font-size:1.1rem; }
.case-project-copy h2 { font-size:clamp(2.4rem,4.1vw,4.6rem); line-height:1.02; letter-spacing:-.06em; font-weight:500; min-height:2.04em; margin:1.7rem 0 1.2rem; }
.case-project--lead .case-project-copy h2 { min-height:0; font-size:clamp(3rem,5.8vw,6.4rem); line-height:.98; margin:2.7rem 0 1.5rem; }
.case-project-copy .case-project-scope { margin:0 0 1.8rem; color:var(--project-muted); font-size:.7rem; line-height:1.6; }
.case-project-copy .case-project-description { margin:0 0 2.3rem; max-width:32rem; color:var(--project-muted); font-size:1rem; line-height:1.7; }
.case-project-copy .case-feature-platforms { margin-bottom:1.4rem; gap:.85rem; }
.case-project-copy .case-feature-platforms>.case-platform-woo { width:7.6rem; filter:none; }
.case-project-copy .case-feature-shopify { font-size:1.25rem; }
.case-project-copy .case-feature-shopify img { width:1.4rem; height:1.4rem; filter:none; }
.case-project-copy .case-feature-direction { color:var(--project-ink); }
.case-project--lead .case-feature-platforms>.case-platform-woo,.case-project--lead .case-feature-shopify img { filter:brightness(0) invert(1); }
.case-project-copy .case-feature-bottom { margin-top:auto; border-color:var(--project-line); font-size:.78rem; }
.case-project-copy .case-arrow { width:2.8rem; height:2.8rem; font-size:1.4rem; color:var(--project-arrow-ink); background:var(--project-accent); }
.case-index-gallery .case-project-link:hover .case-arrow,.case-index-gallery .case-project-link:focus-visible .case-arrow { transform:translate(3px,-3px); }
.case-index-motion [data-case-reveal] { transition:opacity .65s var(--ease),transform .65s var(--ease); }
.case-index-motion [data-case-reveal]:not(.is-visible) { opacity:0; transform:translateY(24px); }
@media(hover:hover) and (pointer:fine) {
.case-index-gallery .case-project-link:hover { transform:translateY(-4px); box-shadow:0 1.2rem 2.5rem #14161213; }
.case-project-link:hover .case-project-visual>img { transform:scale(1.035); }
}
@media(max-width:1000px) {
.case-project-grid { gap:1.3rem; }
.case-project-copy { padding:1.6rem; }
.case-project-copy h2 { font-size:2.6rem; }
.case-project-copy .case-feature-platforms { gap:.65rem; }
.case-project-copy .case-feature-platforms>.case-platform-woo { width:6.6rem; }
.case-project-copy .case-feature-shopify { font-size:1.15rem; }
.case-project-copy .case-project-scope { min-height:2.6em; }
}
@media(max-width:760px) {
.case-index-edition { display:none; }
.case-index-facts { margin-top:1.5rem; gap:1.7rem; }
.case-sector-tools { margin-top:2rem; gap:1rem; }
.case-sector-count { width:100%; margin:0; font-size:.65rem; }
.case-sector-filter { gap:.4rem; }
.case-sector-filter button { padding:.6rem .7rem; font-size:.7rem; gap:.35rem; min-height:2.6rem; }
.case-sector-filter button>svg { width:1rem; height:1rem; }
.case-project-grid { grid-template-columns:minmax(0,1fr); gap:1.7rem; }
.case-index-gallery .case-project--lead .case-project-link { display:flex; min-height:0; }
.case-project--lead .case-project-visual { aspect-ratio:4/3; min-height:0; }
.case-project-visual-top { top:1rem; left:1rem; right:1rem; }
.case-project-number { font-size:.6rem; }
.case-sector-badge { padding:.4rem .65rem; font-size:.65rem; }
.case-project-copy h2,.case-project--lead .case-project-copy h2 { min-height:0; font-size:clamp(2.2rem,9.4vw,3.6rem); line-height:1.04; margin:1.5rem 0 1rem; }
.case-project-copy .case-project-scope { min-height:0; font-size:.65rem; margin-bottom:1.5rem; }
.case-project-copy .case-project-description { font-size:.95rem; margin-bottom:1.8rem; }
.case-project-copy .case-feature-platforms>.case-platform-woo { width:7rem; }
.case-project-copy .case-feature-shopify { font-size:1.2rem; }
}
@media(prefers-reduced-motion:reduce) {
.case-index-motion [data-case-reveal],.case-index-motion [data-case-reveal]:not(.is-visible) { opacity:1; transform:none; transition:none; }
.case-index-gallery .case-project-link,.case-project-visual>img,.case-project-copy .case-arrow { transform:none!important; transition:none!important; }
}