.case-route { --design-accent:#3157ff; }
.case-route[data-project=leadscout] { --design-accent:#ceff48; }
.case-route[data-project=soma] { --design-accent:#8b64ff; }
.case-route[data-project=marshall] { --design-accent:#1557ff; }
.case-route[data-project=wedding] { --design-accent:#899874; }
.case-route[data-project=money] { --design-accent:#ceff48; }
.case-route[data-project=sync] { --design-accent:#a8eedb; }
.case-route .work-detail-nav { padding:22px 4.1%; background:#08090d; color:#f8f5ef; border-bottom:1px solid #ffffff24; }
.case-route .work-detail-intro { min-height:680px; max-width:none; padding:80px 4.1%; display:grid; grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr); gap:6%; align-items:center; background:#08090d; color:#f8f5ef; }
.case-cover-copy { min-width:0; }
.case-route .work-detail-intro h1 { max-width:none; margin:22px 0; font-size:clamp(68px,7vw,120px); letter-spacing:-.055em; line-height:.93; overflow-wrap:normal; }
.case-cover-tagline { max-width:20ch; font-size:clamp(28px,2.65vw,46px); font-weight:750; line-height:1.05; letter-spacing:-.04em; color:var(--design-accent); white-space:pre-line; }
.case-cover-summary { max-width:40ch; margin-top:28px; font-size:18px; line-height:1.45; color:inherit; opacity:.72; }
.case-cover-role { margin-top:48px; font:600 11px/1.5 var(--font-mono); text-transform:uppercase; }
.case-cover-screen { min-width:0; transform:rotate(-2deg); }
.case-cover-screen img { display:block; width:100%; height:auto; box-shadow:0 22px 65px #0004; }
.case-live-link,.design-outbound { display:inline-flex; margin-top:26px; padding:14px 20px; border:1px solid currentColor; border-radius:0; font:700 12px/1.3 var(--font-mono); }
.case-live-link:hover,.design-outbound:hover { background:var(--design-accent); color:#101114; }
.case-route[data-project=marshall] .work-detail-intro { background:#f5f5f7; color:#14151a; }
.case-route[data-project=soma] .work-detail-intro { background:#0b0913; }
.case-route[data-project=wedding] .work-detail-intro { background:#2b3429; }
.case-route[data-project=wedding] .case-cover-tagline { color:#cba3a0; font:italic 40px/.95 var(--font-accent); }
.case-route[data-project=money] .case-cover-screen img { width:46%; max-height:560px; object-fit:contain; margin:auto; }
.case-route[data-project=money] .work-detail-intro { background:#0a0d0a; }
.case-route[data-project=studiooo] .work-detail-intro { display:none; }
.design-case { color:#111114; background:#f3efe5; }
.design-section { position:relative; overflow:hidden; padding:clamp(64px,7vw,116px) 4.1%; }
.design-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr); column-gap:8%; align-items:start; margin-bottom:48px; }
.design-heading > span { grid-column:1/-1; margin-bottom:26px; font:700 11px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.design-heading h2 { font-size:clamp(42px,4.7vw,80px); line-height:.98; letter-spacing:-.055em; font-weight:800; }
.design-heading > p { max-width:40ch; font-size:clamp(17px,1.6vw,25px); line-height:1.4; }
.design-paper { background:#f3efe5; }
.design-dark { background:#101011; color:#f5f5f3; }
.design-blue { background:#3157ff; color:white; }
.design-orange { background:#ff704f; color:#121214; }
.design-lime { background:#ceff48; color:#111; }
.design-soma-night { background:#100d1a; color:#eae5ff; }
.design-soma-blue { background:#2549ff; color:#fff; }
.design-marshall-paper { background:#f5f5f7; }
.design-wedding-paper { background:#f3ead6; color:#313a2d; }
.design-wedding-rose { background:#e88b9d; color:#30382b; }
.design-wedding-ink { background:#293329; color:#f3ead6; }
.design-wedding-sage { background:#899874; color:#fff7e7; }
.design-sync-mint { background:#a8eedb; color:#111820; }
.design-sync-night { background:#111820; color:#edf7f2; }
.design-shot { margin:0; min-width:0; }
.design-shot img { width:100%; height:auto; display:block; }
.design-shot figcaption { margin-top:15px; font:500 11px/1.4 var(--font-mono); opacity:.7; }
.design-shot + .design-shot { margin-top:42px; }
.design-section .design-shot { max-width:1320px; margin-inline:auto; }
.design-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none; }
.design-steps li { min-width:0; padding-top:24px; border-top:1px solid currentColor; }
.design-steps small { font:600 12px/1 var(--font-mono); }
.design-steps h3 { margin:28px 0 20px; font-size:clamp(24px,2.8vw,44px); line-height:1; letter-spacing:-.045em; }
.design-steps p { max-width:28ch; font-size:15px; line-height:1.5; opacity:.75; }
.design-marshall .design-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.design-brand-split { display:grid; grid-template-columns:1fr 1.1fr; gap:8%; align-items:center; }
.design-brand-split .design-heading { display:block; }
.design-brand-split .design-heading>span { display:block; }
.design-brand-split .design-heading>p { margin-top:28px; font-size:20px; }
.design-zipka-mark { width:110px; height:84px; object-fit:contain; }
.design-swatches { display:flex; gap:10px; margin-top:24px; }
.design-swatches i { display:block; width:56px; height:56px; background:var(--swatch); border:1px solid #0002; }
.design-two-paths { display:grid; grid-template-columns:1fr 1fr; gap:8%; }
.design-two-paths>div { border-top:1px solid #0003; padding-top:24px; }
.design-two-paths span { font:700 11px/1 var(--font-mono); text-transform:uppercase; color:#7357cd; }
.design-two-paths h3 { margin-top:24px; font-size:clamp(32px,3.5vw,58px); line-height:1.05; letter-spacing:-.05em; }
.design-wave { display:flex; gap:8px; align-items:center; height:120px; margin-top:70px; }
.design-wave i { flex:1; height:var(--wave); background:#aaa1cd; animation:designWave 2.3s ease-in-out infinite alternate; animation-delay:var(--delay); transform-origin:center; }
@keyframes designWave { to { transform:scaleY(.3); opacity:.4; } }
.design-note { margin-top:28px; font:500 12px/1.6 var(--font-mono); opacity:.64; }
.design-radar { position:absolute; right:2%; top:2%; width:220px; aspect-ratio:1; opacity:.15; pointer-events:none; }
.design-radar i { position:absolute; border:1px solid #ceff48; border-radius:50%; inset:0; }
.design-radar i:nth-child(2) { inset:20%; }.design-radar i:nth-child(3){inset:40%;}
.design-radar b { position:absolute; left:50%; top:0; width:1px; height:50%; background:#ceff48; transform-origin:bottom; animation:radarScan 6s linear infinite; }
@keyframes radarScan { to { transform:rotate(360deg); } }
.wedding-original-devices { display:grid; grid-template-columns:1fr 180px; gap:40px; align-items:center; max-width:1260px; margin:auto; }
.wedding-original-devices video { display:block; width:100%; border:5px solid #30382b; border-radius:20px; }
.wedding-design-phones { display:grid; grid-template-columns:repeat(3,minmax(0,220px)); justify-content:center; gap:7%; }
.wedding-design-phones .design-shot+.design-shot { margin:0; }
.wedding-design-phones img { width:100%; }
.wedding-original-cards { display:flex; justify-content:center; align-items:center; gap:8%; padding:20px 0 45px; }
.wedding-original-cards .wedding-guest-card { position:relative; width:min(35%,350px); flex:none; aspect-ratio:420/594; }
.wedding-original-cards .wedding-card-side { border:0; border-radius:0; box-shadow:0 20px 48px #302c292b; }
.wedding-original-cards .wedding-card-side img { object-fit:contain; }
.wedding-original-cards .wedding-card-hint { opacity:1; transform:translate(-50%,0); bottom:-34px; font-size:10px; }
.wedding-original-cards .wedding-guest-card:hover { z-index:3; }
.money-simple-flow { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.money-simple-flow>span { padding:28px; background:#111; color:#fff; min-width:0; flex:1; font:700 clamp(18px,2.3vw,36px)/1.2 var(--font-mono); }
.money-simple-flow small { display:block; margin-top:24px; font-size:12px; font-weight:400; opacity:.6; }
.money-design-screens { display:grid; grid-template-columns:repeat(2,minmax(0,340px)); justify-content:center; gap:10%; }
.money-design-screens .design-shot+.design-shot { margin:0; }
.sync-cover-art { display:grid; gap:24px; align-items:center; justify-items:center; }
.sync-cover-art span { display:block; padding:25px; width:70%; border:1px solid #a8eedb55; background:#a8eedb10; color:#a8eedb; font:600 24px/1.2 var(--font-mono); }
.sync-cover-art i { font-size:34px; color:#a8eedb; transform:rotate(90deg); }
.sync-demo { max-width:1050px; margin:auto; padding:40px; border:1px solid #a8eedb66; background:#1b252c; }
.sync-demo .design-note { margin-top:0; }
.sync-demo nav { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.sync-demo button { border:1px solid #a8eedb66; padding:14px 18px; background:none; color:inherit; cursor:pointer; min-height:44px; }
.sync-demo button[aria-pressed=true],.sync-demo-action { background:#a8eedb!important; color:#111820!important; }
.sync-demo-file { display:flex; align-items:center; gap:22px; padding:45px 0; }
.sync-demo-file>span { font-size:58px; color:#a8eedb; }
.sync-demo-file p { margin-top:10px; opacity:.6; font-size:14px; }
.sync-demo-file i { flex:1; text-align:center; font-size:32px; }
.sync-demo [data-sync-status] { min-height:3em; margin-top:25px; font-size:16px; line-height:1.5; }
.sync-demo[data-state=conflict] .sync-copy-symbol { color:#ffbd80; }
.sync-demo[data-state=conflict] .sync-copy-symbol::after { content:'?'; }.sync-demo[data-state=conflict] .sync-copy-symbol { font-size:0; }.sync-demo[data-state=conflict] .sync-copy-symbol::after { font-size:58px; }
.studio-public-links { display:flex; flex-wrap:wrap; gap:20px 32px; padding:40px 5%; background:#0b0b13; color:#d8b3ff; font:600 12px/1.4 var(--font-mono); }
.case-route .work-detail-footer { min-height:300px; padding:65px 4.1%; }
.case-route .work-detail-footer a { font-size:clamp(38px,6vw,96px); }
.image-zoom { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.image-zoom:focus-visible { outline:3px solid currentColor; outline-offset:6px; }
.case-image-dialog { max-width:94vw; max-height:94dvh; padding:45px 16px 16px; border:0; background:#f3efe5; }
.case-image-dialog::backdrop { background:#000d; }
.case-image-dialog img { max-width:88vw; max-height:80dvh; width:auto; height:auto; object-fit:contain; }
.case-image-dialog button { position:absolute; right:12px; top:8px; border:0; background:none; font-size:25px; cursor:pointer; min-width:44px; min-height:36px; }
@media(max-width:700px) {
 .case-route .work-detail-nav { padding:18px 20px; grid-template-columns:1fr auto; }
 .case-route .work-detail-intro { padding:62px 20px; min-height:0; grid-template-columns:1fr; gap:45px; }
 .case-route .work-detail-intro h1 { font-size:clamp(53px,14vw,85px); margin:22px 0; overflow-wrap:anywhere; }
 .case-cover-tagline { font-size:30px; }
 .case-cover-summary { font-size:16px; margin-top:20px; }
 .case-cover-role { margin-top:30px; }
 .case-route[data-project=wedding] .case-cover-tagline { font-size:32px; }
 .case-cover-screen { transform:none; }
 .design-section { padding:62px 20px; }
 .design-heading { grid-template-columns:1fr; gap:24px; margin-bottom:34px; }
 .design-heading>span { margin-bottom:0; }
 .design-heading h2 { font-size:clamp(36px,10vw,58px); line-height:1; }
 .design-heading>p { font-size:17px; }
 .design-steps,.design-marshall .design-steps { grid-template-columns:1fr 1fr; gap:32px 20px; }
 .design-steps h3 { font-size:25px; margin:18px 0; overflow-wrap:anywhere; }
 .design-steps p { font-size:14px; }
 .design-brand-split { grid-template-columns:1fr; gap:35px; }
 .design-brand-split .design-heading>p { font-size:17px; }
 .design-swatches i { width:44px; height:44px; }
 .design-two-paths { gap:24px; }
 .design-two-paths h3 { font-size:25px; }
 .design-wave { gap:3px; height:80px; margin-top:35px; }
 .wedding-original-devices { grid-template-columns:1fr 72px; gap:12px; }
 .wedding-original-devices video { border-width:2px; border-radius:8px; }
 .wedding-design-phones { gap:4%; }
 .wedding-original-cards { flex-direction:column; gap:75px; }
 .wedding-original-cards .wedding-guest-card { width:min(100%,350px); }
 .money-simple-flow { flex-direction:column; align-items:stretch; }
 .money-simple-flow b { align-self:center; transform:rotate(90deg); }
 .money-simple-flow>span { padding:24px; font-size:25px; }
 .money-design-screens { gap:20px; }
 .sync-cover-art { display:none; }
 .sync-demo { padding:22px 16px; }
 .sync-demo nav { gap:8px; }
 .sync-demo nav button { padding:10px; font-size:12px; }
 .sync-demo-file { gap:10px; padding:32px 0; }
 .sync-demo-file>span { font-size:38px; }
 .sync-demo-file b { font-size:12px; }.sync-demo-file i { font-size:24px; }
 .sync-demo-file p { font-size:12px; }
 .sync-demo[data-state=conflict] .sync-copy-symbol::after { font-size:38px; }
 .case-route .work-detail-footer { min-height:230px; padding:55px 20px; }
}
@media(prefers-reduced-motion:reduce) {
 .design-wave i,.design-radar b { animation:none; }
 .wedding-card-inner { transition:none; }
}
.case-route .work-detail-gallery { display:block; min-width:0; }
.design-case,.design-case>section { width:100%; min-width:0; }
.design-two-paths>div { min-width:0; }
@media(max-width:360px) { .design-two-paths h3 { font-size:22px; } }
.wedding-letter-transcript { max-width:740px; margin:30px auto 0; padding-top:22px; border-top:1px solid #30382b40; }
.wedding-letter-transcript summary { cursor:pointer; min-height:44px; font:600 13px/1.4 var(--font-mono); }
.wedding-letter-transcript p { margin-top:18px; font-size:17px; line-height:1.7; }