.clickmoney-visual,.core-defense-visual,.catalog-visual{background:#e9e6df;height:480px;position:relative}
.device-pair{position:relative;width:340px;height:370px;margin-top:25px}
.device-pair img{position:absolute;display:block;width:174px;height:auto;border:5px solid #252525;border-radius:20px;box-shadow:0 16px 24px #20212024;transition:transform .6s var(--ease-out)}
.device-main{left:10px;top:-15px;transform:rotate(-7deg);z-index:2}.device-secondary{right:0;top:12px;transform:rotate(7deg)}
.case-arrow{position:absolute;right:23px;bottom:17px;font-size:24px;color:var(--ink)}
.case-link{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0;font-size:14px;color:var(--blue)}
.project-copy .case-hint{font-size:12px;margin-top:0}
.case-intro{padding-top:30px}.back-link{display:block;color:var(--muted);font-size:13px;margin-bottom:42px}.case-intro>.eyebrow{display:block}
.case-intro h1{font-size:clamp(42px,6.3vw,82px);line-height:1.1;letter-spacing:-3px;margin:24px 0}
.case-lead{font-size:21px;line-height:1.6;max-width:700px;color:var(--muted)}
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:40px 0 0}
.case-facts dt{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.case-facts dd{font-size:14px;margin:12px 0 0;line-height:1.5}
.case-editorial{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:25px}.case-editorial h2{font-size:32px;margin:0}.case-editorial p{font-size:15px;line-height:1.8;margin:0 0 18px;color:var(--muted)}
.screen-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:30px;background:#e9e6df;border-radius:12px}
.screen-gallery figure{margin:0;min-width:0}.screen-gallery img{display:block;width:100%;height:auto;border:5px solid #252525;border-radius:20px;background:black;box-shadow:0 8px 20px #20212014}
.screen-gallery figcaption{padding:20px 0 0;font-size:13px;line-height:1.6}.screen-gallery figcaption b,.screen-gallery figcaption span{display:block}.screen-gallery figcaption span{color:var(--muted);font-size:12px;margin-top:6px}
.case-demo{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.case-demo h2{margin:22px 0}.case-demo p{line-height:1.8;color:var(--muted);max-width:430px}.video-frame{padding:24px;background:#e9e6df;border-radius:12px;display:flex;justify-content:center}.video-frame video{display:block;max-width:300px;width:100%;height:auto;border-radius:16px;background:black}.demo-transcript{font-size:13px;line-height:1.9;color:var(--muted);padding-left:18px;margin-top:26px}
.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}.decision-grid article{border-top:1px solid var(--line);padding:28px 0}.decision-grid h3{font:500 24px/1.3 Manrope,sans-serif;letter-spacing:-.6px;margin:18px 0}.decision-grid p{font-size:14px;color:var(--muted);line-height:1.8}.decision-grid .decision-stack{font-size:11px;color:var(--blue)}
.case-summary{padding-bottom:85px}.case-summary h2{margin:22px 0}.case-summary>p{max-width:720px;color:var(--muted);line-height:1.8}
@media(hover:hover) and (pointer:fine){.clickmoney-visual:hover .device-main,.core-defense-visual:hover .device-main,.catalog-visual:hover .device-main{transform:rotate(-4deg) translateY(-3px)}.clickmoney-visual:hover .device-secondary,.core-defense-visual:hover .device-secondary,.catalog-visual:hover .device-secondary{transform:rotate(4deg) translateY(-3px)}.case-link:hover{color:#192fa7}.screen-gallery a:hover img{outline:2px solid var(--blue);outline-offset:3px}}
@media(max-width:760px){.clickmoney-visual,.core-defense-visual,.catalog-visual{height:430px}.device-pair{width:300px;height:340px}.device-pair img{width:152px}.case-intro h1{font-size:43px;letter-spacing:-1.7px}.case-intro{padding-top:20px}.case-lead{font-size:17px}.case-facts{grid-template-columns:1fr 1fr;gap:24px 16px}.case-editorial{grid-template-columns:1fr;gap:24px}.case-editorial h2{font-size:28px}.screen-gallery{grid-template-columns:1fr;padding:24px;gap:40px}.screen-gallery figure{width:min(100%,300px);margin:auto}.case-demo{grid-template-columns:1fr;gap:25px}.decision-grid{grid-template-columns:1fr}.video-frame video{max-width:280px}}
@media(prefers-reduced-motion:reduce){.device-pair img{transition:none}.clickmoney-visual:hover .device-main,.core-defense-visual:hover .device-main,.catalog-visual:hover .device-main{transform:rotate(-7deg)}.clickmoney-visual:hover .device-secondary,.core-defense-visual:hover .device-secondary,.catalog-visual:hover .device-secondary{transform:rotate(7deg)}}

.core-defense-visual,.core-defense-page .screen-gallery,.core-defense-page .video-frame{background:#e6e5ed}.catalog-visual{background:#e2e7e3}.case-hint a,.decision-link{color:var(--blue)}.case-hint a:hover,.decision-link:hover{color:#192fa7}.decision-link{display:inline-block;margin-top:6px;font-size:13px;border-bottom:1px solid currentColor;padding-bottom:2px}


/* Theme tokens for project cards and case pages. */
:root{--card-clickmoney:#e9e6df;--card-core:#e6e5ed;--card-catalog:#e2e7e3;--device-border:#252525;--link-hover:#192fa7;--accent-clickmoney:#a94e17;--accent-core:#5b55b8;--accent-catalog:#356948;--glow-clickmoney:#ff9b54;--glow-core:#9d95ff;--glow-catalog:#8fc29d;--glow-opacity:.42}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--card-clickmoney:#1d1c19;--card-core:#1b1a22;--card-catalog:#181d1a;--device-border:#3a3b38;--link-hover:#a9b4ff;--accent-clickmoney:#f0915a;--accent-core:#a9a3f5;--accent-catalog:#8fc29d;--glow-opacity:.26}}
:root[data-theme=dark]{--card-clickmoney:#1d1c19;--card-core:#1b1a22;--card-catalog:#181d1a;--device-border:#3a3b38;--link-hover:#a9b4ff;--accent-clickmoney:#f0915a;--accent-core:#a9a3f5;--accent-catalog:#8fc29d;--glow-opacity:.26}

.clickmoney-visual,.clickmoney-page .screen-gallery,.clickmoney-page .video-frame,.screen-gallery,.video-frame{background:var(--card-clickmoney)}
.core-defense-visual,.core-defense-page .screen-gallery,.core-defense-page .video-frame{background:var(--card-core)}
.catalog-visual{background:var(--card-catalog)}
.device-pair img,.screen-gallery img{border-color:var(--device-border)}
.case-hint a:hover,.decision-link:hover{color:var(--link-hover)}
@media(hover:hover) and (pointer:fine){.case-link:hover{color:var(--link-hover)}}

/* Per-project accent: eyebrow and hover details pick up the app's own colour. */
.clickmoney-project{--accent:var(--accent-clickmoney);--glow:var(--glow-clickmoney)}
.core-defense-project{--accent:var(--accent-core);--glow:var(--glow-core)}
.catalog-project{--accent:var(--accent-catalog);--glow:var(--glow-catalog)}
.project-copy .eyebrow{color:var(--accent,var(--ink))}
.case-link,.tags span{transition:border-color 260ms ease,color 200ms ease}

/* Soft glow behind the phones. */
.clickmoney-visual::before,.core-defense-visual::before,.catalog-visual::before{content:'';position:absolute;z-index:-1;left:50%;top:52%;width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:var(--glow-opacity);filter:blur(24px);transform:translate(-50%,-50%);transition:opacity 500ms ease,transform 700ms var(--ease-out)}

/* Scroll parallax is set by motion.js through the individual `translate` property, so hover transforms stay animated. */
.device-main{translate:0 var(--py-a,0px)}
.device-secondary{translate:0 var(--py-b,0px)}

@media(hover:hover) and (pointer:fine){
 .project:hover .case-link{border-top-color:var(--accent,var(--line))}
 .project:hover .tags span{border-color:var(--accent,#c4c8c0)}
 .clickmoney-visual:hover::before,.core-defense-visual:hover::before,.catalog-visual:hover::before{opacity:calc(var(--glow-opacity) + .2);transform:translate(-50%,-50%) scale(1.08)}
 .clickmoney-visual:hover .device-main,.core-defense-visual:hover .device-main,.catalog-visual:hover .device-main{transform:rotate(-10deg) translate(-12px,-6px)}
 .clickmoney-visual:hover .device-secondary,.core-defense-visual:hover .device-secondary,.catalog-visual:hover .device-secondary{transform:rotate(10deg) translate(12px,-6px)}
}
@media(prefers-reduced-motion:reduce){.device-main,.device-secondary{translate:none}}
@media(prefers-reduced-motion:reduce){
 .clickmoney-visual:hover .device-main,.core-defense-visual:hover .device-main,.catalog-visual:hover .device-main{transform:rotate(-7deg)}
 .clickmoney-visual:hover .device-secondary,.core-defense-visual:hover .device-secondary,.catalog-visual:hover .device-secondary{transform:rotate(7deg)}
 .clickmoney-visual:hover::before,.core-defense-visual:hover::before,.catalog-visual:hover::before{transform:translate(-50%,-50%)}
}


/* Offer Catalog case study. */
.catalog-page .screen-gallery{background:var(--card-catalog)}
.case-actions{margin-top:34px}
.arch{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.arch-diagram{background:var(--card-catalog);border-radius:12px;padding:34px 28px;display:flex;flex-direction:column;gap:18px}
.arch-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arch-node{padding:14px 16px;border:1px solid var(--flow-border);background:var(--flow-bg);border-radius:8px;font-size:13px;line-height:1.35}
.arch-node small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.arch-node.strong{background:var(--flow-active);color:var(--flow-active-ink);border-color:var(--flow-active)}
.arch-node.ghost{background:transparent;border-style:dashed;font-size:12px;color:var(--muted)}
.arch-arrow{font-size:11px;color:var(--flow-arrow);white-space:nowrap}
.arch-arrow::before{content:attr(data-label) " →"}
.arch-under{padding-left:calc(16px + 100px)}
.arch-modules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.arch-modules li{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.5}
.arch-modules b{display:inline-block;min-width:70px;color:var(--ink);font:500 13px ui-monospace,SFMono-Regular,Menlo,monospace}
.code-panel{border-radius:12px;overflow:hidden;background:#171817;color:#e8e7e2;margin-bottom:46px;border:1px solid #2a2c29}
.code-head{display:flex;justify-content:space-between;padding:12px 18px;font-size:11px;letter-spacing:.4px;color:#9a9d96;border-bottom:1px solid #2a2c29}
.code-panel pre{margin:0;padding:20px 18px 22px;overflow-x:auto;font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4}
.code-panel code{white-space:pre}
.case-proof{margin:0;border-top:1px solid var(--line)}
.case-note{max-width:720px;color:var(--muted);line-height:1.8;font-size:14px;margin:24px 0 0}
.limits{margin:0 0 28px;padding-left:20px;max-width:760px;color:var(--muted);line-height:1.8}
.limits li{margin-bottom:6px}
@media(max-width:900px){.arch{grid-template-columns:1fr}.arch-under{padding-left:0}}
@media(max-width:760px){.arch-diagram{padding:24px 18px}.arch-row{flex-direction:column;align-items:stretch}.arch-arrow{text-align:center}.arch-arrow::before{content:"↓ " attr(data-label)}.code-panel pre{font-size:11.5px}}
/* Vertical flow on every width: reads top to bottom without awkward wrapping. */
.arch-row{flex-direction:column;align-items:stretch;gap:8px}
.arch-arrow{text-align:center}
.arch-arrow::before{content:"↓ " attr(data-label)}
.arch-under{padding-left:0;flex-direction:row;flex-wrap:wrap}
.arch-under .arch-node{flex:1 1 200px}
.arch-node{text-align:center}
@media(max-width:760px){.code-panel pre{font-size:12px}}


/* Notes: article pages, index and the home page list. */
.note{max-width:760px;padding-bottom:70px}
.note .back-link{margin-bottom:36px}
.note h1{font-size:clamp(38px,5.4vw,64px);line-height:1.1;letter-spacing:-2.4px;margin:22px 0 20px}
.note-lead{font-size:19px;line-height:1.6;color:var(--muted);margin:0 0 42px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.note-body{font-size:17px;line-height:1.8}
.note-body p{margin:0 0 22px}
.note-body h2{font-size:28px;letter-spacing:-.9px;margin:46px 0 16px}
.note-body ol,.note-body ul{padding-left:22px;margin:0 0 22px}
.note-body li{margin-bottom:10px}
.note-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.note-body :not(pre)>code{font:.88em ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.note-body .code-panel{margin:6px 0 28px}
.notes-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.notes-list a{display:grid;grid-template-columns:150px 1fr 24px;gap:6px 30px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:color 200ms ease}
.notes-list .note-date{grid-row:1/3;font-size:11px;letter-spacing:.6px;color:var(--muted);font-variant-numeric:tabular-nums}
.notes-list b{font:500 24px/1.3 Manrope,sans-serif;letter-spacing:-.6px;color:var(--ink-strong)}
.notes-list .note-desc{grid-column:2;font-size:14px;line-height:1.6;color:var(--muted)}
.notes-list i{grid-column:3;grid-row:1;font-style:normal;color:var(--muted);transition:transform 280ms var(--ease-out),color 200ms ease}
.notes-home{padding-bottom:90px}
.notes-home .section-head p a{margin-left:4px}
@media(hover:hover) and (pointer:fine){.notes-list a:hover b{color:var(--blue)}.notes-list a:hover i{color:var(--blue);transform:translate(3px,-3px)}}
@media(max-width:760px){.notes-list a{grid-template-columns:1fr 20px;gap:8px 12px;padding:22px 0}.notes-list .note-date{grid-row:auto;grid-column:1}.notes-list b{grid-column:1;font-size:20px}.notes-list .note-desc{grid-column:1}.notes-list i{grid-column:2;grid-row:1/4;align-self:center}.note-body{font-size:16px}.note-body h2{font-size:24px}.note-lead{font-size:17px}.note h1{letter-spacing:-1.6px}}
@media(prefers-reduced-motion:reduce){.notes-list a:hover i{transform:none}}
/* Align the article with the site grid (same left edge as the header) and keep a readable measure. */
.note{max-width:none;padding-left:6%;padding-right:6%}
.note>*{max-width:760px}
.note .note-body{max-width:720px}

/* Note layout: reading column plus a sticky sidebar on wide screens. */
.note>.note-layout{max-width:none}
.note-layout{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:0 clamp(48px,7vw,110px);align-items:start}
.note-aside{position:sticky;top:36px;padding-top:6px}
.note-aside-inner{display:flex;flex-direction:column;gap:14px;padding-left:24px;border-left:1px solid var(--line)}
.note-aside .eyebrow{color:var(--muted);font-size:10px}
.note-aside .eyebrow+*{margin-top:-4px}
.toc{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.toc a{position:relative;display:block;padding:7px 0 7px 26px;font-size:13px;line-height:1.45;color:var(--muted);transition:color 200ms ease}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:8px;font-size:10px;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.toc a::after{content:'';position:absolute;left:-25px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--blue);transform:scaleY(0);transition:transform 260ms var(--ease-out)}
.toc a[aria-current="true"]{color:var(--ink-strong)}
.toc a[aria-current="true"]::after{transform:scaleY(1)}
.note-links{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.note-links a{font-size:13px;color:var(--blue)}
.note-aside-meta{margin:6px 0 0;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.note-body h2{scroll-margin-top:24px}
@media(hover:hover) and (pointer:fine){.toc a:hover{color:var(--ink-strong)}.note-links a:hover{color:var(--link-hover)}}
@media(max-width:1100px){.note-layout{grid-template-columns:minmax(0,1fr)}.note-aside{display:none}}
@media(prefers-reduced-motion:reduce){.toc a::after{transition:none}}
@media print{.note-aside{display:none}}

/* Notes index: breathing room before the contact block, tighter gap under the intro. */
.notes-list-section{padding-top:20px;padding-bottom:90px}
@media(max-width:760px){.notes-list-section{padding-bottom:60px}}
.note{padding-bottom:90px}
/* Experience already ends with generous bottom padding; don't stack another full section gap on top. */
.experience+.notes-home{padding-top:0}

/* Home: compact cards for smaller shipped apps. */
:root{--card-zephyr:#e1e6e2;--card-future:#e8e3ef}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--card-zephyr:#171c19;--card-future:#1d1a23}}
:root[data-theme=dark]{--card-zephyr:#171c19;--card-future:#1d1a23}
.zephyr-page .screen-gallery,.zephyr-card .more-shot{background:var(--card-zephyr)}
.future-lines-page .screen-gallery,.future-lines-card .more-shot{background:var(--card-future)}
.more-apps{padding:20px 0 50px;border-bottom:1px solid var(--line);margin-bottom:22px}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:24px}
.more-app{display:flex;flex-direction:column;gap:22px;color:inherit}
.more-shot{display:block;overflow:hidden;border-radius:12px;transition:box-shadow 450ms ease}
.more-shot img{display:block;width:100%;height:auto;transition:transform 600ms var(--ease-out,ease)}
.more-copy{display:flex;flex-direction:column;gap:10px}
.more-copy b{font:500 22px/1.25 Manrope,sans-serif;letter-spacing:-.5px;color:var(--ink-strong,var(--ink))}
.more-copy>span:not(.tags):not(.more-link){color:var(--muted);font-size:14px;line-height:1.65}
.more-copy .tags{margin:2px 0 0}
.more-link{font-size:13px;color:var(--blue)}
@media(hover:hover) and (pointer:fine){.more-app:hover .more-shot{box-shadow:0 12px 30px #20212010}.more-app:hover .more-shot img{transform:scale(1.03)}.more-app:hover .more-link{color:var(--link-hover)}}
@media(prefers-reduced-motion:reduce){.more-shot img{transition:none}.more-app:hover .more-shot img{transform:none}}
@media(max-width:900px){.more-grid{grid-template-columns:1fr;gap:28px}}
.case-showcase{padding-top:0}.case-showcase img{display:block;width:100%;height:auto;border-radius:12px}