/* WEB — standalone case studies | v1.6 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--black:#090b10;--white:#f6f8f3;--soft:#b5bcc3;--accent:#c9ff73;--focus:#c9ff73}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--black);color:var(--white);font-family:Manrope,Inter,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}body[data-theme="aura"]{--project:#b6808e;--project-light:#e6c4cd;--project-bg:#5b323f}body[data-theme="north"]{--project:#ccd3b7;--project-light:#eff2e6;--project-bg:#333d33}body[data-theme="pulse"]{--project:#fa6a50;--project-light:#ffd6b5;--project-bg:#61271d}body[data-theme="store"]{--project:#c9ff73;--project-light:#e8ffd1;--project-bg:#2d663f}
a{color:inherit;text-decoration:none}button{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:5px}img{max-width:100%;display:block}.wrap{width:min(1330px,calc(100% - 92px));margin-inline:auto}.top-progress{height:3px;position:fixed;inset:0 0 auto;z-index:100;transform-origin:left;transform:scaleX(0);background:var(--project);pointer-events:none}.site-head{height:87px;position:relative;z-index:20;border-bottom:1px solid #ffffff14;background:#090b10e8;backdrop-filter:blur(18px)}.head-inner{display:flex;align-items:center;height:100%;gap:32px}.logo{font-size:30px;letter-spacing:-.105em;font-weight:900;line-height:1}.logo span{color:var(--accent)}.logo-caption{font-size:9px;letter-spacing:.1em;color:#8c9396;text-transform:uppercase;border-left:1px solid #41474a;padding-left:18px}.head-links{display:flex;align-items:center;gap:29px;margin-left:auto;font-size:12px;font-weight:800}.head-links a:not(.head-cta){color:#a8afb3}.head-links a:hover{color:white}.head-cta{display:inline-flex;align-items:center;gap:24px;padding:13px 18px;border:1px solid #5d6464;border-radius:100px}.head-cta:hover{background:var(--project);border-color:var(--project);color:#09110d}.skip{position:absolute;top:-200px}.skip:focus{top:10px;left:10px;z-index:101;background:white;color:black;padding:12px}.crumb{font-weight:800;letter-spacing:.08em;font-size:10px;color:#89939c;display:flex;gap:10px;align-items:center}.crumb a:hover{color:var(--accent)}.crumb span{color:#555f63}.hero{position:relative;isolation:isolate;padding:65px 0 115px;overflow:hidden}.hero:before{content:"";position:absolute;inset:-20% -28% -10%;z-index:-2;background:radial-gradient(ellipse 32% 30% at 77% 42%,color-mix(in srgb,var(--project) 22%,transparent),transparent 93%),radial-gradient(ellipse 23% 26% at 16% 75%,color-mix(in srgb,var(--project) 9%,transparent),transparent 96%)}.hero:after{content:"";position:absolute;z-index:-1;right:4%;top:9%;height:650px;width:650px;border-radius:50%;border:1px solid #ffffff0c;box-shadow:0 0 0 105px #ffffff05,0 0 0 210px #ffffff03;pointer-events:none}.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:58px;align-items:center;margin-top:76px}.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--project);font-size:11px;font-weight:900;letter-spacing:.14em}.eyebrow::before{content:"";width:27px;height:1px;background:var(--project)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(75px,8vw,132px);line-height:.98;letter-spacing:-.095em;font-weight:800;margin:29px 0 28px;overflow-wrap:anywhere}.hero h1 .period{color:var(--project)}.hero-subtitle{max-width:540px;font-size:21px;line-height:1.55;letter-spacing:-.035em;font-weight:700}.hero-desc{max-width:515px;color:#aeb6b7;font-size:13px;line-height:1.95}.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:27px 0 34px}.pill{font-size:10px;letter-spacing:.04em;font-weight:800;padding:10px 14px;border:1px solid #ffffff2b;border-radius:100px;color:#d7ddd9}.pill.status{border-color:color-mix(in srgb,var(--project) 58%,transparent);color:var(--project)}.action-row{display:flex;gap:12px;flex-wrap:wrap}.action{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:17px 22px;font-size:12px;font-weight:900;border-radius:5px;transition:transform .25s,background .25s;min-height:56px}.action:hover{transform:translateY(-3px)}.action.primary{background:var(--project);color:#121713}.action.secondary{border:1px solid #484e52;color:#eee}.action.secondary:hover{border-color:#b5bcb9}.action .arr{font-size:20px}.action-note{margin-top:12px;color:#81898e;font-size:10px;line-height:1.5}.hero-display{position:relative;transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg);filter:drop-shadow(0 25px 40px #0008);transition:transform .4s ease}.hero-display:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(.5deg) translateY(-6px)}.browser{background:#1e2226;border:1px solid #484a50;border-radius:14px;overflow:hidden;box-shadow:0 35px 110px #0007}.browser-head{height:39px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1b2024;color:#949fa2}.browser-dot{height:8px;width:8px;border-radius:50%;background:#555c63}.browser-dot:nth-child(1){background:#d17167}.browser-dot:nth-child(2){background:#d6bd6f}.browser-dot:nth-child(3){background:#83ae7e}.browser-address{border:1px solid #ffffff16;border-radius:6px;padding:5px 17px;min-width:45%;margin:auto;font-size:10px;text-align:center;color:#9ba7a7}.browser img{width:100%;aspect-ratio:1.35;object-fit:cover;object-position:top}.hero-display .floating-label{position:absolute;right:-15px;bottom:-25px;transform:rotate(-5deg);border-radius:8px;background:var(--project);color:#15201a;font-size:11px;font-weight:900;padding:17px 23px;box-shadow:0 15px 33px #0006}.meta-strip{border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;display:grid;grid-template-columns:repeat(3,1fr)}.meta{padding:25px 5%;border-right:1px solid #ffffff1c}.meta:last-child{border:0}.meta span{display:block;color:#87919a;font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:9px}.meta strong{font-size:15px;letter-spacing:-.02em}.section{padding:130px 0}.section-count{font-size:11px;letter-spacing:.12em;font-weight:900;color:var(--project)}.two-column{display:grid;grid-template-columns:.85fr 1.15fr;gap:11%;align-items:start}.big-title{font-size:clamp(43px,5.5vw,76px);font-weight:800;letter-spacing:-.075em;line-height:1.12;margin:19px 0 0}.big-title em{font-style:normal;color:var(--project)}.prose{font-size:16px;line-height:1.95;color:#aab3b5}.prose h3{font-size:19px;color:white;margin-bottom:15px}.prose p{margin-bottom:35px}.approach{border-top:1px solid #383e43;padding-top:25px}.showcase{background:#11151a;border-top:1px solid #252e33;border-bottom:1px solid #252e33}.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px}.section-top .big-title{max-width:720px}.section-top p{color:#a3acb0;max-width:345px;line-height:1.8;font-size:13px}.showcase-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:24px}.shot-card{border:1px solid #ffffff1d;border-radius:14px;overflow:hidden;background:#1c2428;position:relative}.shot-card__image{width:100%;height:100%;min-height:510px;object-fit:cover;object-position:top}.shot-overlay{position:absolute;inset:auto 0 0;padding:85px 27px 26px;background:linear-gradient(transparent,#07090bcc);display:flex;justify-content:space-between;align-items:end;gap:24px;pointer-events:none}.shot-overlay strong{font-size:18px}.shot-overlay span{font-size:11px;color:#cad0ce}.expand-image{position:absolute;top:20px;right:20px;border:1px solid #ffffff38;border-radius:100px;background:#111a1cb8;color:white;cursor:pointer;z-index:2;padding:11px 14px;font-size:12px}.expand-image:hover{background:var(--project);color:#111}.phone-card{border:1px solid #ffffff21;border-radius:14px;background:radial-gradient(ellipse at 35% 25%,color-mix(in srgb,var(--project) 22%,transparent),transparent 60%),#172027;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:35px 22px 26px;overflow:hidden;min-width:0}.phone{width:min(235px,100%);border-radius:37px;border:8px solid #111518;background:var(--mobile-bg);box-shadow:0 18px 32px #0009,inset 0 0 0 1px #9995;aspect-ratio:9/18;overflow:hidden;position:relative;color:#242b27}.phone-notch{position:absolute;z-index:3;top:7px;left:50%;transform:translateX(-50%);background:#101418;border-radius:14px;width:80px;height:19px}.phone-inside{padding:40px 17px 18px;height:100%;display:flex;flex-direction:column;gap:18px}.phone-small{font-size:9px;font-weight:900;letter-spacing:.1em}.phone-kicker{font-size:8px;letter-spacing:.12em;margin-top:20px;opacity:.7}.phone-h{font-size:clamp(21px,2vw,29px);font-weight:900;letter-spacing:-.07em;line-height:1.1}.phone-picture{flex:1;border-radius:11px;overflow:hidden;min-height:0;background:linear-gradient(150deg,var(--project),#20242b)}.phone-picture img{width:100%;height:100%;object-fit:cover;object-position:center}.phone-fake-btn{background:#192423;color:#fff;padding:12px 10px;border-radius:8px;font-size:10px;font-weight:900;text-align:center}.phone-caption{text-align:center;margin-top:30px}.phone-caption strong{display:block;font-size:17px;margin-bottom:8px}.phone-caption span{font-size:11px;color:#9ba6a8}.detail-row{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;margin-top:24px}.detail-shot{border-radius:14px;background:#1b2227;border:1px solid #ffffff21;overflow:hidden;position:relative;min-height:350px}.detail-shot img{width:100%;height:100%;max-height:450px;object-fit:cover;object-position:center}.detail-shot figcaption{position:absolute;left:24px;bottom:22px;background:#0a1010e0;padding:11px 15px;border-radius:6px;font-size:11px;font-weight:700}.palette-board{border:1px solid #ffffff22;border-radius:14px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;background:#151a20}.palette-board h3{font-size:26px;letter-spacing:-.05em;margin:0 0 12px}.palette-board p{font-size:13px;line-height:1.7;color:#aab4b4;max-width:400px}.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.color-box{aspect-ratio:1;border-radius:6px;border:1px solid #ffffff20;position:relative}.palette-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;font-size:9px;color:#a0aaac;margin-top:8px}.features-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:46px}.feature{border:1px solid #303a40;background:#11171c;border-radius:11px;padding:35px;min-height:245px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s}.feature:hover{border-color:var(--project);transform:translateY(-4px)}.feature-number{font-size:11px;color:var(--project);font-weight:900}.feature h3{font-size:22px;letter-spacing:-.04em;margin:auto 0 12px}.feature p{font-size:13px;color:#a0aaaf;line-height:1.7;margin:0}.callout{background:var(--project);color:#101a14;border-radius:15px;padding:62px 6%;display:flex;justify-content:space-between;align-items:center;gap:30px}.callout h2{font-size:clamp(35px,4vw,58px);letter-spacing:-.07em;line-height:1.12;margin:8px 0 0;max-width:710px}.callout-label{font-size:10px;font-weight:900;letter-spacing:.13em}.callout a{flex-shrink:0;display:inline-flex;justify-content:space-between;align-items:center;gap:36px;background:#121c19;color:white;font-size:12px;font-weight:900;padding:21px 24px;border-radius:5px}.callout a:hover{background:#2d3d36}.related{border-top:1px solid #ffffff20;padding-top:35px;margin-top:100px}.related-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.related-head h2{font-size:28px;letter-spacing:-.05em}.related-head a{font-size:12px;color:var(--accent);font-weight:800}.related-card{background:#171c21;border:1px solid #343c42;border-radius:12px;padding:25px;display:flex;align-items:center;gap:24px;transition:border-color .2s}.related-card:hover{border-color:var(--project)}.related-card img{height:125px;width:210px;object-fit:cover;border-radius:6px}.related-text strong{font-size:23px;letter-spacing:-.04em;display:block}.related-text small{display:block;color:#9da7ad;margin-top:9px;font-size:11px}.related-arrow{margin-left:auto;font-size:37px;color:var(--project)}.footer{border-top:1px solid #ffffff26;background:#07090d}.footer-grid{display:flex;align-items:center;gap:35px;padding:28px 0;color:#a5afb2;font-size:11px}.footer-grid .logo{color:white}.footer-grid a:last-child{margin-left:auto;color:var(--accent);font-weight:800}.overlay-dialog{border:0;max-width:min(95vw,1500px);max-height:92vh;background:#101317;border-radius:12px;box-shadow:0 30px 160px #000c;padding:20px;color:white}.overlay-dialog::backdrop{background:#000d;backdrop-filter:blur(12px)}.overlay-dialog img{max-width:90vw;max-height:77vh;object-fit:contain;border-radius:6px}.lightbox-controls{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:13px}.lightbox-controls p{margin:0;font-size:12px;color:#adb7ba}.lightbox-controls button{font-size:12px;background:#252d32;color:white;border:1px solid #52606a;cursor:pointer;border-radius:6px;padding:9px 13px}.reveal{opacity:0;transform:translateY(32px);transition:opacity .75s ease,transform .75s cubic-bezier(.17,.65,.22,1)}.reveal.in{opacity:1;transform:none}
@media(max-width:1100px){.hero-grid{gap:35px}.hero h1{font-size:clamp(70px,8vw,110px)}.wrap{width:calc(100% - 58px)}.showcase-grid{grid-template-columns:1.18fr .82fr}.shot-card__image{min-height:410px}}
@media(max-width:800px){.site-head{height:72px}.logo-caption{display:none}.head-links{gap:15px;font-size:11px}.head-links .head-cta{padding:12px 15px}.wrap{width:calc(100% - 34px)}.hero{padding:40px 0 75px}.hero-grid{grid-template-columns:1fr;gap:45px;margin-top:55px}.hero h1{font-size:clamp(69px,13vw,115px)}.hero-display{width:min(750px,100%);margin-inline:auto;transform:perspective(1400px) rotateY(-2deg)}.hero-display .floating-label{right:5px}.meta-strip{grid-template-columns:1fr 1fr}.meta:nth-child(2){border-right:0}.meta:last-child{grid-column:span 2;border-top:1px solid #ffffff1c}.section{padding:85px 0}.two-column{grid-template-columns:1fr;gap:35px}.section-top{display:block}.showcase-grid{grid-template-columns:1fr}.shot-card__image{min-height:0;aspect-ratio:1.5}.phone-card{min-height:600px}.phone{max-width:235px}.detail-row{grid-template-columns:1fr}.callout{display:block}.callout a{margin-top:28px;width:max-content}.related{margin-top:75px}}
@media(max-width:520px){.head-links a:nth-child(1){display:none}.site-head{height:65px}.logo{font-size:27px}.head-links{gap:12px}.head-cta{font-size:10px}.hero-grid{margin-top:38px}.eyebrow{font-size:9px}.hero h1{font-size:clamp(60px,16vw,89px);margin:25px 0 22px}.hero-subtitle{font-size:17px}.hero-desc{font-size:12px}.action{width:100%}.hero-display{transform:none}.hero-display:hover{transform:none}.browser-head{height:31px}.browser img{aspect-ratio:1.14}.hero-display .floating-label{font-size:9px;padding:12px 15px;bottom:-16px}.meta{padding:20px 16px}.meta strong{font-size:12px}.big-title{font-size:clamp(39px,10vw,57px)}.prose{font-size:13px}.section-top{margin-bottom:24px}.section-top p{font-size:12px}.shot-card__image{aspect-ratio:1.22}.shot-overlay{padding:70px 18px 17px}.shot-overlay strong{font-size:15px}.shot-overlay span{font-size:10px}.phone-card{min-height:520px}.phone{max-width:215px}.palette-board{padding:22px}.detail-shot{min-height:260px}.detail-shot img{max-height:310px}.features-list{grid-template-columns:1fr}.feature{min-height:198px;padding:25px}.callout{padding:36px 24px}.callout h2{font-size:clamp(32px,8vw,48px)}.callout a{width:100%}.related-head h2{font-size:22px}.related-card{gap:15px;padding:14px}.related-card img{height:100px;width:105px}.related-text strong{font-size:16px}.related-text small{font-size:10px}.related-arrow{font-size:24px}.footer-grid{flex-wrap:wrap;gap:15px}.footer-grid span{order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transform:none;opacity:1;transition:none}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Contrast corrections on dark concept phone mockups */
body[data-theme="pulse"] .phone{color:#f6f6ed}body[data-theme="pulse"] .phone-fake-btn{background:#e94b30;color:white}body[data-theme="pulse"] .phone-kicker{color:#f8d5c4}body[data-theme="aura"] .phone-fake-btn{background:#a8777e}body[data-theme="store"] .phone-fake-btn{background:#244e33}

/* ===== WEB CASE STUDIES 1.7 — ambient depth + animated cards ===== */
.case-ambient {position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;background:#090b10;}
.case-ambient::before {content:"";position:absolute;width:75vmax;height:75vmax;left:-24vmax;top:-24vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--project) 21%,transparent),transparent 65%);animation:case-aurora-a 17s ease-in-out infinite alternate;filter:blur(34px);}
.case-ambient::after {content:"";position:absolute;width:80vmax;height:80vmax;right:-28vmax;bottom:-34vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--project-light) 16%,transparent),transparent 68%);animation:case-aurora-b 21s ease-in-out infinite alternate;filter:blur(44px);}
@keyframes case-aurora-a{to{transform:translate3d(24vw,12vh,0) rotate(30deg) scale(1.14)}}
@keyframes case-aurora-b{to{transform:translate3d(-17vw,-16vh,0) rotate(-30deg) scale(.85)}}
.case-mesh{position:fixed;z-index:0;pointer-events:none;inset:0;opacity:.18;background:linear-gradient(90deg,transparent 97%,color-mix(in srgb,var(--project) 14%,transparent) 98%),linear-gradient(transparent 97%,color-mix(in srgb,var(--project) 14%,transparent) 98%);background-size:90px 90px;mask-image:radial-gradient(ellipse at center, #000, transparent 77%);}
.hero:before{animation:case-hero-glow 13s ease-in-out infinite alternate;}
@keyframes case-hero-glow{to{transform:translate3d(5%,3%,0) scale(1.08)}}
/* Hero and all visual / feature cards use the same highlight coordinates. */
.case-fx {position:relative;--cx:50%;--cy:50%;--rx:0deg;--ry:0deg;--lift:0px;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.16,.72,.2,1),box-shadow .42s ease,border-color .35s ease;will-change:auto;}
.case-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(430px circle at var(--cx) var(--cy),color-mix(in srgb,var(--project) 24%,transparent),transparent 65%);transition:opacity .35s ease;}
.case-fx:is(.is-lit,:focus-within)::after{opacity:1;}
.case-fx:is(.is-lit,:focus-within){box-shadow:0 23px 53px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--project) 42%,transparent);}
.case-fx.reveal.in:is(.is-lit,:focus-within),.case-fx:not(.reveal):is(.is-lit,:focus-within){transform:perspective(1150px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));}
.case-fx.reveal.in,.case-fx.reveal:not(.in) {transition:opacity .75s ease,transform .75s cubic-bezier(.17,.65,.22,1),box-shadow .4s ease,border-color .4s ease;}
.case-fx.reveal.in.is-lit {transition-duration:.45s;}
.case-fx .shot-card__image,.case-fx.detail-shot img,.case-fx .phone-picture img,.case-fx.related-card img {transition:transform .75s cubic-bezier(.2,.65,.2,1),filter .35s ease;}
.case-fx.is-lit .shot-card__image,.case-fx.detail-shot.is-lit img,.case-fx.is-lit .phone-picture img,.case-fx.related-card.is-lit img {transform:scale(1.043);filter:saturate(1.08);}
.case-fx .expand-image,.case-fx .shot-overlay {z-index:4;}
.case-fx .phone {position:relative;z-index:3;}
.case-fx .phone-caption,.case-fx .feature-number,.case-fx .related-text {position:relative;z-index:3;}
.case-fx .palette-board {z-index:2;}
.case-fx .color-box {transition:transform .3s ease;}
.case-fx .color-box:hover {transform:translateY(-5px) scale(1.07);z-index:4;}
.case-fx.feature .feature-number {transition:letter-spacing .3s ease;}
.case-fx.feature.is-lit .feature-number {letter-spacing:.16em;}
.case-fx.related-card.is-lit .related-arrow {transform:translateX(6px) rotate(20deg);}
.case-fx.related-card .related-arrow{transition:transform .35s ease;}
/* Feature card reveal cascade, avoiding excessive movement. */
.features-list .feature:nth-child(2n) {transition-delay:.055s;}
.features-list .feature:nth-child(3n) {transition-delay:.1s;}
.case-fx.hero-display {--lift:-4px;}
@media(hover:none),(pointer:coarse){.case-fx::after{display:none}.case-fx.reveal.in:hover,.case-fx:not(.reveal):hover{transform:none}.case-ambient::before,.case-ambient::after{animation-duration:28s}}
@media(prefers-reduced-motion:reduce){.case-ambient::before,.case-ambient::after,.hero:before{animation:none!important}.case-fx,.case-fx.reveal.in,.case-fx.reveal.in.is-lit,.case-fx:hover{transform:none!important;transition:none!important}.case-fx::after{display:none}.case-fx.is-lit img{transform:none!important}}

/* Keep ambient layer behind interactive page content, not behind the body paint. */
body>main,body>.footer{position:relative;z-index:1}