/* BusyDayKit portfolio case studies: privacy-safe independent showcase.
   Theme: the page chrome follows html[data-theme]. The dark values below are the original showcase colours;
   the light block gives the same layout a light page. Product screenshots and the hero scene panel stay dark in both themes (they are illustrations of dark UIs). */
.portfolio-hero,.portfolio-privacy,.portfolio-case-nav,.portfolio-gallery,.portfolio-case{
  --pf-grid:rgba(81,170,255,.2);
  --pf-ink:#fff; --pf-ink2:#edf8ff; --pf-mut:#c6d7e9; --pf-mut2:#bfcede; --pf-soft:#8fb0cb; --pf-index:#b5c7d8;
  --pf-orange:#ffac3f; --pf-link:#c5e6ff; --pf-eyebrow:#ffb94d;
  --pf-band:#0d2239; --pf-band-line:#244462; --pf-nav:#091b32; --pf-nav-line:#294969;
  --pf-nav-a:#b6cbdf; --pf-nav-a-line:#28435f; --pf-nav-on:#1b3e5b; --pf-nav-on-ink:#fff;
  --pf-page:#061426; --pf-page2:#0a1c33; --pf-case-line:#1d3b56; --pf-rule:#30455c; --pf-story-line:#355b77;
  --pf-card:#0e263e; --pf-card-line:#2b4560; --pf-card-p:#b9cbdb; --pf-card-li:#d9e7f3;
  --pf-outcome:#102840; --pf-outcome-line:#365674; --pf-outcome-p:#e8f4ff;
  --pf-shield:#467097; --pf-enlarge:#a7ddff; --pf-enlarge-hover:#fff; --pf-shadow:0 25px 80px #0005;
}
html[data-theme="light"] :is(.portfolio-hero,.portfolio-privacy,.portfolio-case-nav,.portfolio-gallery,.portfolio-case){
  --pf-grid:rgba(37,105,237,.16);
  --pf-ink:#071634; --pf-ink2:#0a1e41; --pf-mut:#40547c; --pf-mut2:#40547c; --pf-soft:#5c6b82; --pf-index:#40547c;
  --pf-orange:#b8510a; --pf-link:#0a5fa8; --pf-eyebrow:#b8510a;
  --pf-band:#e8f0fb; --pf-band-line:#cfdcf0; --pf-nav:rgba(245,248,254,.96); --pf-nav-line:#d3dff0;
  --pf-nav-a:#33476d; --pf-nav-a-line:#cbd8ee; --pf-nav-on:#fff; --pf-nav-on-ink:#071634;
  --pf-page:#f5f7fc; --pf-page2:#edf2fb; --pf-case-line:#d6e0f1; --pf-rule:#d3dff0; --pf-story-line:#b9c9e4;
  --pf-card:#fff; --pf-card-line:#d6e0f1; --pf-card-p:#40547c; --pf-card-li:#1b2f55;
  --pf-outcome:#fff; --pf-outcome-line:#cfdcf0; --pf-outcome-p:#0a1e41;
  --pf-shield:#9db4d8; --pf-enlarge:#0a5fa8; --pf-enlarge-hover:#071634; --pf-shadow:0 22px 60px rgba(9,29,66,.16);
}
/* text-safe version of each case's accent: the raw accent is bright (made for dark); mixed toward navy it reads on the light page */
html[data-theme="light"] .portfolio-case{--case-accent-t:color-mix(in srgb,var(--case-accent) 42%,#0a1e41)}
.portfolio-case{--case-accent-t:var(--case-accent)}
.portfolio-hero{position:relative;overflow:hidden;padding:90px 0 86px;color:var(--pf-ink2);isolation:isolate}.portfolio-hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.23;background-image:linear-gradient(var(--pf-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pf-grid) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent,#000 85%)}.portfolio-hero-inner{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.78fr);gap:clamp(24px,5vw,80px);align-items:center;position:relative;z-index:1}.portfolio-hero h1{color:var(--pf-ink);font-size:clamp(3.2rem,6.3vw,6.7rem);line-height:1.05;letter-spacing:-.06em;margin:18px 0 26px}.portfolio-hero h1 em{color:var(--pf-orange);font-style:normal}.portfolio-hero p:not(.eyebrow){max-width:650px;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.75;color:var(--pf-mut)}.portfolio-hero-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:32px}.portfolio-quiet-link{color:var(--pf-link);font-weight:750;text-decoration:underline;text-underline-offset:6px}.portfolio-hero-visual{background:linear-gradient(150deg,#122f4e,#0b1e37);border:1px solid #315f89;border-radius:28px;padding:31px;box-shadow:0 24px 90px #0006;display:flex;flex-direction:column;gap:16px;transform:rotate(2deg);max-width:465px}.portfolio-scene-note{font-size:11px;letter-spacing:2.5px;color:#9bc5e6;font-weight:800;margin:0 0 6px}.portfolio-hero-node{background:#112840;border:1px solid #335475;padding:18px 21px;border-radius:14px;color:#e4efff;font-size:20px;font-weight:800;display:flex;justify-content:space-between;gap:10px;align-items:center}.portfolio-hero-node span{color:#ffb447}.portfolio-hero-node.highlighted{background:#144363;border-color:#2abaff;box-shadow:0 0 30px #217ec83d}.portfolio-privacy{background:var(--pf-band);color:var(--pf-mut);border-top:1px solid var(--pf-band-line);border-bottom:1px solid var(--pf-band-line)}.portfolio-privacy .wrap{display:flex;gap:18px;align-items:center;padding-top:21px;padding-bottom:21px;line-height:1.7;font-size:15px}.portfolio-privacy strong{color:var(--pf-eyebrow)}.portfolio-shield{display:grid;place-items:center;border:1px solid var(--pf-shield);border-radius:16px;color:var(--pf-eyebrow);min-width:46px;height:46px;font-size:26px}.portfolio-case-nav{background:var(--pf-nav);position:sticky;top:var(--header-height,74px);z-index:11;border-bottom:1px solid var(--pf-nav-line)}.portfolio-case-nav .wrap{display:flex;overflow-x:auto;scrollbar-width:thin;gap:7px;padding-top:13px;padding-bottom:13px}.portfolio-case-nav a{flex:0 0 auto;border:1px solid var(--pf-nav-a-line);border-radius:11px;padding:10px 12px;color:var(--pf-nav-a);font-size:12px;text-decoration:none;font-weight:750;white-space:nowrap}.portfolio-case-nav a:hover,.portfolio-case-nav a:focus-visible,.portfolio-case-nav a.is-active{background:var(--pf-nav-on);color:var(--pf-nav-on-ink);border-color:#ffae42}.portfolio-case-nav a span{margin-left:7px}.portfolio-gallery{background:var(--pf-page)}.portfolio-case{scroll-margin-top:145px;padding:clamp(70px,8vw,125px) 0;border-bottom:1px solid var(--pf-case-line);position:relative;color:var(--pf-ink2);overflow:hidden}.portfolio-case:nth-child(even){background:var(--pf-page2)}.portfolio-case:before{content:"";position:absolute;right:-17vw;top:5%;width:50vw;height:50vw;max-width:630px;max-height:630px;border-radius:50%;background:radial-gradient(circle,var(--case-accent),transparent 70%);opacity:.045;pointer-events:none}.portfolio-case-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.15fr);gap:clamp(32px,5.5vw,86px);align-items:start}.portfolio-case-copy{position:sticky;top:170px}.portfolio-case-index{display:flex;justify-content:space-between;align-items:center;color:var(--pf-index);border-bottom:1px solid var(--pf-rule);padding-bottom:20px;font-size:13px;font-weight:800;letter-spacing:.06em;gap:18px}.portfolio-case-index span:first-child{color:var(--case-accent-t);font-size:20px}.portfolio-case-eyebrow{font-size:12px;letter-spacing:2.2px;color:var(--case-accent-t);font-weight:900;margin:34px 0 14px}.portfolio-case-copy h2{color:var(--pf-ink);font-size:clamp(2.25rem,3.7vw,4.05rem);letter-spacing:-.048em;line-height:1.12;margin:0 0 31px}.portfolio-story{display:grid;gap:24px}.portfolio-story>div{border-left:2px solid var(--pf-story-line);padding-left:20px}.portfolio-story>div:nth-child(2){border-color:var(--case-accent)}.portfolio-story-label,.portfolio-outcome span{font-size:11px;letter-spacing:2px;color:var(--case-accent-t);font-weight:900}.portfolio-story p,.portfolio-outcome p{line-height:1.77;color:var(--pf-mut2);font-size:16px;margin:11px 0 0}.portfolio-outcome{margin-top:28px;border:1px solid var(--pf-outcome-line);background:var(--pf-outcome);border-radius:16px;padding:20px 22px}.portfolio-outcome p{color:var(--pf-outcome-p);font-weight:600}.portfolio-stack{font-size:13px;color:var(--pf-soft);margin-top:24px}.portfolio-case-link{display:inline-flex;align-items:center;gap:18px;margin-top:30px;color:#061425;background:#ffb144;border-radius:12px;padding:15px 22px;font-weight:850;text-decoration:none}.portfolio-case-link:hover{background:#ffd37e;color:#061425;transform:translateY(-2px)}.portfolio-preview{--pf-enlarge:#a7ddff;--pf-enlarge-hover:#fff;border:1px solid #385775;background:#0b1b30;border-radius:24px;overflow:hidden;box-shadow:var(--pf-shadow)}.portfolio-preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#102741;padding:16px 18px;border-bottom:1px solid #304c65;color:#b9c9d9;font-size:10px;font-weight:850;letter-spacing:1.4px}.portfolio-preview-top span:first-child{display:flex;gap:5px;align-items:center}.portfolio-preview-top i{height:6px;width:6px;background:var(--case-accent);border-radius:50%;display:inline-block}.portfolio-preview-top i:nth-child(2){opacity:.5}.portfolio-preview-top i:nth-child(3){opacity:.25;margin-right:12px}.portfolio-slide{margin:0}.portfolio-slide[hidden]{display:none!important}.portfolio-slide img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;background:#091a2e}.portfolio-slide figcaption{display:flex;justify-content:space-between;gap:16px;padding:18px 20px 6px;color:#f0f7ff;font-size:13px;font-weight:750}.portfolio-slide figcaption span{color:#8fa9c1;font-weight:550;font-size:11px}.portfolio-slide-tools{display:flex;align-items:center;gap:12px;padding:13px 20px 19px}.portfolio-slide-tools>span{font-size:10px;letter-spacing:1.7px;color:#8eabc4;font-weight:800;margin-right:auto}.portfolio-slide-controls,.portfolio-arrow-controls{display:flex;align-items:center;gap:6px}.portfolio-slide-dot,.portfolio-prev,.portfolio-next{color:#c8dbea;background:#112e49;border:1px solid #355771;border-radius:9px;min-width:38px;min-height:38px;cursor:pointer}.portfolio-slide-dot[aria-pressed="true"]{color:#0c1a2b;background:var(--case-accent);border-color:var(--case-accent);font-weight:900}.portfolio-prev:hover,.portfolio-next:hover{border-color:#9ac9e8;background:#1c405d}.portfolio-case-details{margin-top:23px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.portfolio-case-details>div{padding:24px 25px;border:1px solid var(--pf-card-line);border-radius:19px;background:var(--pf-card)}.portfolio-case-details h3{font-size:17px;color:var(--pf-ink);margin:0 0 10px}.portfolio-case-details p{color:var(--pf-card-p);font-size:14px;line-height:1.76;margin:0}.portfolio-case-details ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.portfolio-case-details li{display:flex;align-items:start;gap:9px;color:var(--pf-card-li);font-size:14px;line-height:1.45}.portfolio-case-details li:before{content:'✓';color:var(--case-accent-t);font-weight:800}.portfolio-next-step{padding:92px 0;background:radial-gradient(circle at 80% 15%,#154376,#071426 60%);color:#fff}.portfolio-next-step .wrap{display:flex;align-items:center;justify-content:space-between;gap:35px}.portfolio-next-step h2{font-size:clamp(2rem,3.7vw,3.5rem);line-height:1.12;margin:10px 0}.portfolio-next-step p:not(.eyebrow){color:#c1d6e8;max-width:590px;line-height:1.7}
@media(max-width:1050px){.portfolio-case-grid{grid-template-columns:1fr;gap:36px}.portfolio-case-copy{position:static}.portfolio-case-copy h2{max-width:760px}.portfolio-story{grid-template-columns:1fr 1fr}.portfolio-hero-inner{grid-template-columns:1fr}.portfolio-hero-visual{max-width:none;transform:none;flex-direction:row;flex-wrap:wrap}.portfolio-scene-note{flex-basis:100%}.portfolio-hero-node{flex:1;min-width:170px;font-size:16px}.portfolio-case-nav{top:68px}}
@media(max-width:700px){.portfolio-hero{padding:65px 0 58px}.portfolio-hero h1{font-size:clamp(2.85rem,10vw,4.4rem)}.portfolio-hero-visual{padding:18px;gap:9px;flex-direction:column}.portfolio-hero-node{padding:12px;font-size:15px;min-width:0}.portfolio-privacy .wrap{font-size:13px}.portfolio-case-nav{top:66px}.portfolio-case-nav a span{display:none}.portfolio-case{padding:62px 0;scroll-margin-top:105px}.portfolio-case-copy h2{font-size:clamp(2.12rem,9vw,3rem)}.portfolio-story{grid-template-columns:1fr}.portfolio-case-details{grid-template-columns:1fr;gap:12px}.portfolio-case-details>div{padding:20px}.portfolio-slide figcaption{font-size:12px;flex-wrap:wrap;padding:12px 12px 2px}.portfolio-preview-top{padding:12px;font-size:9px}.portfolio-slide-tools{padding:12px;gap:5px}.portfolio-slide-tools>span{display:none}.portfolio-slide-controls{margin-right:auto}.portfolio-next-step .wrap{flex-direction:column;align-items:start}.portfolio-next-step{padding:68px 0}}
@media(prefers-reduced-motion:no-preference){.portfolio-hero-visual{animation:portfolioBob 8s ease-in-out infinite}@keyframes portfolioBob{0%,100%{translate:0 0}50%{translate:0 -9px}}.portfolio-case-link{transition:transform .2s ease,background .2s ease}}

.portfolio-enlarge{color:var(--pf-enlarge);font-weight:800;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}.portfolio-enlarge:hover{color:var(--pf-enlarge-hover)}.portfolio-case a:focus-visible,.portfolio-case button:focus-visible{outline:3px solid #ffac3f;outline-offset:3px}