:root{--paper:#f5f4ee;--ink:#17191b;--muted:#686d70;--line:#d8dad5;--blue:#314ff2;--lime:#c9f461;--display:'Manrope',Arial,sans-serif;--body:'DM Sans',Arial,sans-serif;--accent:#314ff2;--surface:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}::selection{background:var(--lime);color:var(--ink)}
.case-header{height:78px;padding:0 clamp(24px,5.5vw,100px);display:flex;align-items:center;justify-content:space-between;position:fixed;inset:0 0 auto;z-index:20;transition:.3s}.case-header.is-scrolled{height:66px;background:rgba(245,244,238,.9);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(15,18,20,.09)}.case-brand{display:flex;align-items:center;gap:10px;font:800 13px var(--display);letter-spacing:-.03em}.case-brand i{font-style:normal;width:31px;height:31px;display:grid;place-items:center;border-radius:7px;background:var(--ink);color:#fff;font-size:21px}.case-brand-avatar{width:32px;height:32px;flex:none;border:2px solid rgba(255,255,255,.92);border-radius:50%;object-fit:cover;object-position:center 28%;box-shadow:0 3px 12px rgba(17,20,25,.2)}.case-back{font-size:12px;font-weight:700;border-bottom:1px solid #9fa29e;padding-bottom:5px}
.case-hero{min-height:100svh;padding:140px clamp(24px,5.5vw,100px) 58px;display:flex;flex-direction:column}.case-kicker,.case-label,.case-fact span,.story-index,.case-next span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em}.case-kicker{display:flex;justify-content:space-between;gap:20px;color:#6f7474}.case-hero-copy{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.52fr);gap:7vw;align-items:end;margin:clamp(70px,10vh,130px) 0 70px}.case-hero h1{font:700 clamp(62px,8.5vw,132px)/.95 var(--display);letter-spacing:-.08em;margin:0;max-width:1120px}.case-hero h1 em{font-style:normal;color:var(--accent)}.case-intro{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#51585a;margin:0;max-width:480px}.case-hero-media{position:relative;min-height:clamp(470px,52vw,760px);border-radius:22px;overflow:hidden;background:#ddd;box-shadow:0 24px 70px rgba(18,22,30,.12)}.case-hero-media>img.cover{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.case-hero-media:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.case-fact{background:var(--paper);padding:28px 24px 30px}.case-fact span{display:block;color:#8b8f8d;margin-bottom:9px}.case-fact strong{font-size:14px;line-height:1.5;font-weight:600}
.story{padding:150px clamp(24px,5.5vw,100px)}.story.dark{background:#17191b;color:#fff}.story.light{background:#fff}.story-head{display:grid;grid-template-columns:.35fr 1fr;gap:7vw;margin-bottom:72px}.story-index{color:var(--accent)}.story-copy h2{font:700 clamp(42px,5.3vw,78px)/1.03 var(--display);letter-spacing:-.07em;margin:0 0 25px;max-width:930px}.story-copy>p{font-size:clamp(17px,1.55vw,21px);line-height:1.68;color:var(--muted);max-width:700px;margin:0}.dark .story-copy>p{color:#aeb2b0}.dark .story-index{color:var(--lime)}
.showcase{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.shot{position:relative;overflow:hidden;border-radius:18px;background:#e8e8e4;box-shadow:0 20px 60px rgba(12,16,20,.1)}.shot img{width:100%;height:100%;object-fit:cover}.shot.wide{grid-column:span 12;aspect-ratio:1.7}.shot.half{grid-column:span 6;aspect-ratio:1.18}.shot.tall{grid-column:span 4;aspect-ratio:.55;background:#ecebf0;padding:18px}.shot.tall img{border-radius:27px;object-fit:contain}.shot-caption{position:absolute;left:18px;bottom:16px;padding:8px 11px;border-radius:999px;background:rgba(18,20,24,.78);color:white;backdrop-filter:blur(12px);font-size:10px;font-weight:700;letter-spacing:.08em}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.principle{min-height:260px;padding:30px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;justify-content:space-between}.dark .principle{border-color:#3a3c40;background:#1e2025}.principle span{font-size:11px;font-weight:700;color:var(--accent)}.dark .principle span{color:var(--lime)}.principle h3{font:700 clamp(24px,2.4vw,35px)/1.1 var(--display);letter-spacing:-.055em;margin:30px 0 12px}.principle p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.dark .principle p{color:#9ca19f}
.canvas-crop{position:absolute;inset:0;overflow:hidden;background:#110b28}.canvas-crop img{position:absolute;width:1800px;max-width:none;height:1426px;left:50%;top:50%}.hoku-canvas img{transform:translate(-49%,-15%)}.church-canvas{background:#e9e6e0}.church-canvas img{transform:translate(-77%,-20%)}.canvas-title{position:absolute;z-index:2;left:5%;bottom:7%;font:800 clamp(60px,10vw,150px)/.8 var(--display);letter-spacing:-.08em;color:#fff;text-shadow:0 14px 70px rgba(0,0,0,.65)}.church-canvas .canvas-title{font-size:clamp(48px,8vw,120px);color:#201f1e;text-shadow:none}
.pacee-stage{background:#251651}.pacee-stage>img{object-position:50% 20%}.phone-row{position:absolute;z-index:2;right:4%;bottom:-4%;display:flex;gap:14px;align-items:end}.phone-row img{width:clamp(108px,13vw,190px);border:6px solid #121318;border-radius:28px;box-shadow:0 28px 60px rgba(10,5,25,.42)}.phone-row img:nth-child(2){transform:translateY(-35px)}
.neus-stage>img{object-position:50% 0}.neus-stage:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 65%,rgba(7,12,10,.28))}
.case-next{padding:100px clamp(24px,5.5vw,100px);background:var(--lime);display:flex;justify-content:space-between;align-items:end;gap:30px}.case-next h2{font:700 clamp(44px,6vw,92px)/1 var(--display);letter-spacing:-.075em;margin:16px 0 0}.case-next a{width:100px;height:100px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:38px;transition:.3s}.case-next a:hover{background:var(--ink);color:var(--lime);transform:rotate(45deg)}
.case-footer{padding:28px clamp(24px,5.5vw,100px);display:flex;justify-content:space-between;gap:20px;background:#17191b;color:#c6cac6;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.18,.8,.2,1)}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:820px){.case-hero-copy{grid-template-columns:1fr;gap:28px}.case-hero h1{font-size:clamp(56px,13vw,94px)}.facts{grid-template-columns:1fr 1fr}.story{padding-top:100px;padding-bottom:100px}.story-head{grid-template-columns:1fr;gap:20px}.principles{grid-template-columns:1fr}.shot.half{grid-column:span 12}.shot.tall{grid-column:span 12;aspect-ratio:.8}.phone-row img{width:110px}.hoku-canvas img{transform:translate(-50%,-11%) scale(.72)}.church-canvas img{transform:translate(-76%,-18%) scale(.82)}}
@media(max-width:520px){.case-header{height:66px}.case-hero{padding-top:110px}.case-kicker span:last-child{display:none}.case-hero-copy{margin:58px 0 42px}.case-hero h1{font-size:clamp(49px,14vw,70px)}.case-hero-media{min-height:410px;border-radius:14px}.facts{grid-template-columns:1fr}.case-fact{padding:22px 0}.shot{border-radius:13px}.shot.wide{aspect-ratio:.78}.shot.half{aspect-ratio:.9}.phone-row{right:3%;gap:7px}.phone-row img{width:76px;border-width:4px;border-radius:18px}.phone-row img:nth-child(2){transform:translateY(-18px)}.hoku-canvas img{transform:translate(-50%,-8%) scale(.55)}.church-canvas img{transform:translate(-75%,-14%) scale(.68)}.case-next{align-items:flex-start;flex-direction:column}.case-next a{width:76px;height:76px}.case-footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* Precise crops for the real Figma canvas previews. */
.hoku-canvas img{width:2520px;height:1996px;left:-300px;top:145px;transform:none}
.church-canvas img{width:5400px;height:4278px;left:-3750px;top:18px;transform:none}
.church-canvas .canvas-title{left:auto;right:5%;text-align:right}
@media(max-width:820px){.hoku-canvas img{left:-360px;top:100px;transform:scale(.8);transform-origin:0 0}.church-canvas img{left:-3870px;transform:scale(.78);transform-origin:74% 0}}
@media(max-width:520px){.hoku-canvas img{left:-285px;top:80px;transform:scale(.56);transform-origin:0 0}.church-canvas img{left:-3930px;transform:scale(.7);transform-origin:74% 0}}

/* Professionally framed product screens — never the working canvas. */
.hoku-case-stage{background:radial-gradient(circle at 80% 18%,#29143f 0,#08090a 48%,#050606 100%)}
.case-product-window{position:absolute;inset:6%;overflow:hidden;border:1px solid rgba(139,255,216,.17);border-radius:20px;background:#050606;box-shadow:0 45px 100px rgba(0,0,0,.55),0 0 80px rgba(0,255,183,.07)}
.case-product-window img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.case-media-note{position:absolute;left:8%;bottom:9%;z-index:2;color:#c4ffe9;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hoku-detail-shot{background:#050606}.hoku-detail-shot img{object-position:50% 14%}
.church-case-stage{background:radial-gradient(circle at 76% 25%,rgba(94,180,255,.32),transparent 35%),linear-gradient(135deg,#eff9ff 0,#dceeff 56%,#f9fbfc 100%)}
.church-case-message{position:absolute;left:8%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;color:#111820}.church-case-message small{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5c778b}.church-case-message strong{max-width:620px;font:700 clamp(42px,4.3vw,64px)/1 var(--display);letter-spacing:-.07em}
.church-case-phone{position:absolute;right:10%;bottom:-4%;width:356px;height:730px;padding:20px 17px 14px;border:9px solid #111820;border-radius:46px;background:#f2faff;color:#101820;overflow:hidden;box-shadow:0 55px 110px rgba(31,72,110,.3),0 12px 30px rgba(15,23,32,.2)}
.church-case-phone:before{content:"";position:absolute;z-index:4;width:106px;height:26px;left:50%;top:0;transform:translateX(-50%);border-radius:0 0 18px 18px;background:#111820}
.cpg-status{display:flex;justify-content:space-between;padding:2px 5px 14px;font-size:8px;font-weight:700}.cpg-head{display:flex;justify-content:space-between;align-items:center;margin:7px 2px 13px}.cpg-head div{display:flex;flex-direction:column}.cpg-head small{font-size:8px;color:#74818a}.cpg-head strong{font:700 18px var(--display);letter-spacing:-.04em}.cpg-head>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#111820;color:#fff;font-size:10px}
.cpg-announcement{position:relative;height:128px;overflow:hidden;border-radius:16px;background:#071019;color:white}.cpg-announcement img{width:100%;height:100%;object-fit:cover;opacity:.76}.cpg-announcement:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,8,18,.85),rgba(0,8,18,.03))}.cpg-announcement p{position:absolute;z-index:2;left:14px;bottom:14px;margin:0;font-size:9px;line-height:1.4}.cpg-announcement b{display:block;font-size:13px}.cpg-dots{height:18px;display:flex;align-items:center;justify-content:center;gap:4px}.cpg-dots i{width:4px;height:4px;border-radius:50%;background:#bdd0df}.cpg-dots i:first-child{width:13px;border-radius:3px;background:#168de0}
.cpg-label{display:flex;justify-content:space-between;padding:4px 2px 7px;font-size:8px;color:#72808a}.cpg-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.cpg-actions>div{min-height:92px;padding:10px;border:1px solid rgba(255,255,255,.74);border-radius:14px;background:linear-gradient(145deg,rgba(84,180,255,.15),rgba(255,255,255,.64));box-shadow:0 4px 14px rgba(57,94,118,.08);display:flex;flex-direction:column}.cpg-actions small{font-size:7px;color:#73808a;border-bottom:1px solid rgba(100,120,130,.12);padding-bottom:5px}.cpg-actions b{font-size:11px;line-height:1.15;margin:8px 0 auto}.cpg-actions span{font-size:7px}.cpg-media{position:relative;height:112px;border-radius:14px;overflow:hidden;background:#251148}.cpg-media img{width:100%;height:100%;object-fit:cover}.cpg-media:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,0,58,.82),transparent 68%)}.cpg-media b{position:absolute;z-index:2;left:11px;bottom:10px;color:#fff;font-size:11px}.cpg-nav{position:absolute;left:0;right:0;bottom:0;height:52px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);box-shadow:0 -8px 24px rgba(42,66,82,.08);font-size:7px;color:#7b858b}.cpg-nav b{color:#168de0}.church-content-shot img{object-position:center}.church-content-shot:first-child img{filter:saturate(.9)}
@media(max-width:900px){.church-case-message{left:6%}.church-case-phone{right:2%;transform:scale(.78);transform-origin:100% 100%}}
@media(max-width:620px){.case-product-window{inset:8% 4%}.case-media-note{display:none}.church-case-stage{min-height:520px}.church-case-message{display:none}.church-case-phone{width:310px;height:635px;right:50%;top:28px;bottom:auto;transform:translateX(50%) scale(.74);transform-origin:50% 0}.church-content-shot{aspect-ratio:.82!important}}

/* Complete project presentation */
.case-header-actions{display:flex;align-items:center;gap:28px}.case-live-link{padding:10px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:transform .25s,background .25s}.case-live-link:hover{background:var(--accent);transform:translateY(-2px)}
.case-live-link.is-pending{background:#e4e3de;color:#747876;cursor:default}.case-live-link.is-pending:hover{background:#e4e3de;transform:none}.browser-bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 11px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.08)}.browser-bar i{width:5px;height:5px;border-radius:50%;background:#6e7074}.browser-bar i:first-child{background:#8a4cff}.browser-bar i:nth-child(2){background:#39dca2}
.hoku-hero-stage{overflow:hidden;background:radial-gradient(circle at 82% 17%,#351064 0,transparent 32%),linear-gradient(145deg,#060609,#140921)}.hoku-hero-word{position:absolute;left:-.03em;bottom:-.2em;color:rgba(255,255,255,.055);font:800 clamp(160px,28vw,420px)/.72 var(--display);letter-spacing:-.1em}.hero-screen{appearance:none;border:0;padding:0;cursor:zoom-in;position:absolute;overflow:hidden;border-radius:16px;background:#050607;box-shadow:0 42px 100px rgba(0,0,0,.55);transition:transform .8s cubic-bezier(.18,.8,.2,1)}.hero-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.hero-screen-main{inset:9% 6% 9% 8%;transform:rotate(-1deg)}.hero-screen-float{z-index:2;width:43%;height:48%;right:-3%;bottom:-4%;border:1px solid rgba(124,255,214,.2);transform:rotate(4deg)}.hero-screen:hover{transform:translateY(-8px) rotate(0)}
.project-gallery-section{padding:clamp(100px,11vw,170px) clamp(24px,5.5vw,100px)}.gallery-dark{background:#0a0b0d;color:#fff}.gallery-paper{background:#f5f4ee}.deep3-section{background:linear-gradient(180deg,#e5dcff 0,#bda1ff 24%,#130823 70%,#080609 100%);color:#fff}.gallery-heading{display:grid;grid-template-columns:.35fr 1fr;gap:7vw;margin-bottom:clamp(58px,7vw,100px)}.gallery-heading>span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}.gallery-dark .gallery-heading>span{color:#b792ff}.deep3-section .gallery-heading>span{color:#57289b}.gallery-heading h2{max-width:940px;margin:0 0 22px;font:700 clamp(42px,5.3vw,78px)/1.03 var(--display);letter-spacing:-.07em}.gallery-heading p{max-width:720px;margin:0;color:#676d70;font-size:clamp(16px,1.45vw,20px);line-height:1.7}.gallery-dark .gallery-heading p{color:#aeb1b4}.deep3-section .gallery-heading h2{color:#160d21}.deep3-section .gallery-heading p{color:#40364b}
.screen-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);align-items:start}.screen-card{appearance:none;border:0;padding:0;grid-column:span 6;position:relative;overflow:hidden;border-radius:17px;background:#fff;color:inherit;box-shadow:0 22px 58px rgba(14,18,22,.12);cursor:zoom-in;text-align:left;transition:transform .55s cubic-bezier(.18,.8,.2,1),box-shadow .55s}.screen-card:hover{transform:translateY(-7px);box-shadow:0 35px 78px rgba(12,16,22,.2)}.gallery-dark .screen-card{background:#101114;border:1px solid rgba(255,255,255,.1);box-shadow:0 32px 75px rgba(0,0,0,.45)}.screen-card img{display:block;width:100%;height:auto;background:#08090a}.screen-card>span{position:absolute;left:14px;bottom:14px;padding:8px 11px;border-radius:999px;background:rgba(12,14,18,.76);color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(12px)}.screen-wide{grid-column:span 12}.screen-half{grid-column:span 6}.screen-third{grid-column:span 4}.screen-mobile{grid-column:span 3;background:linear-gradient(145deg,#eeeaf6,#dcd6e8);padding:18px}.screen-mobile img{border-radius:25px;background:transparent}.compact-state{min-height:260px;display:flex;align-items:center;justify-content:center;padding:40px;background:#e8e5ee}.compact-state img{max-height:520px;object-fit:contain;background:transparent}.gallery-dark .compact-state{background:#111014}
.inline-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.inline-links a{padding:12px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font-size:11px;font-weight:700;transition:.25s}.inline-links a:hover{background:#fff;color:#131018;transform:translateY(-2px)}.deep3-section .inline-links a{border-color:rgba(22,13,33,.32);color:#160d21}.deep3-section .inline-links a:hover{background:#160d21;color:#fff}.deep3-page{appearance:none;border:0;padding:0;display:block;width:min(100%,1180px);margin:0 auto;position:relative;border-radius:20px;overflow:hidden;background:#080609;box-shadow:0 55px 130px rgba(0,0,0,.45);cursor:zoom-in}.deep3-page img{display:block;width:100%;height:auto}.deep3-page>span{position:absolute;left:20px;top:20px;padding:10px 13px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(12px)}
.pg-hero-stage{overflow:hidden;background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.94),transparent 30%),linear-gradient(140deg,#e8f8ff,#bddfff 58%,#dbe9ff)}.pg-hero-word{position:absolute;left:-.05em;bottom:-.22em;color:rgba(28,101,169,.08);font:800 clamp(220px,34vw,520px)/.7 var(--display);letter-spacing:-.1em}.pg-hero-copy{position:absolute;z-index:1;left:7%;top:49%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px}.pg-hero-copy small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#547690}.pg-hero-copy strong{font:700 clamp(42px,4.8vw,72px)/.98 var(--display);letter-spacing:-.07em}.pg-hero-phone{appearance:none;border:6px solid #101820;padding:0;position:absolute;z-index:2;width:clamp(160px,15vw,220px);bottom:-17%;border-radius:31px;overflow:hidden;background:#dceeff;box-shadow:0 38px 80px rgba(24,70,106,.28);cursor:zoom-in;transition:transform .7s cubic-bezier(.18,.8,.2,1)}.pg-hero-phone img{display:block;width:100%}.pg-phone-center{right:16%;bottom:-8%}.pg-phone-left{right:31%;transform:rotate(-6deg)}.pg-phone-right{right:1%;transform:rotate(6deg)}.pg-hero-phone:hover{transform:translateY(-10px) rotate(0);z-index:4}
.pg-blue-section{background:linear-gradient(145deg,#dff3ff,#bedfff 60%,#eef8ff)}.pg-night-section{background:#101820;color:#fff}.pg-night-section .gallery-heading p{color:#a7b5bf}.pg-night-section .gallery-heading>span{color:#72caff}.phone-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);align-items:start}.phone-card{grid-column:span 1;padding:12px;border-radius:32px;background:rgba(255,255,255,.68);box-shadow:0 25px 65px rgba(34,79,115,.15)}.pg-night-section .phone-card{background:#18232c;border:1px solid rgba(255,255,255,.08);box-shadow:0 32px 70px rgba(0,0,0,.35)}.phone-card img{border-radius:22px;background:transparent}.phone-feature{transform:translateY(-28px)}.phone-feature:hover{transform:translateY(-36px)}.phone-gallery-centered{max-width:1000px;margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.lightbox{position:fixed;z-index:1000;inset:0;display:none;align-items:center;justify-content:center;padding:26px;background:rgba(7,8,10,.94);backdrop-filter:blur(14px)}.lightbox.is-open{display:flex}.lightbox-figure{position:relative;max-width:min(94vw,1700px);max-height:92vh;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}.lightbox img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;border-radius:10px;box-shadow:0 38px 110px rgba(0,0,0,.65)}.lightbox figcaption{color:#c7cacd;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.lightbox-close{appearance:none;border:1px solid rgba(255,255,255,.28);position:fixed;right:24px;top:22px;width:44px;height:44px;border-radius:50%;background:rgba(20,22,25,.75);color:#fff;font-size:23px;cursor:pointer;z-index:2}.lightbox-close:hover{background:#fff;color:#111}.lightbox-loading{color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.lightbox-open{overflow:hidden}
.lightbox.is-tall{align-items:flex-start;overflow-y:auto}.lightbox.is-tall .lightbox-figure{max-height:none;margin:64px auto 36px}.lightbox.is-tall img{width:min(1100px,92vw);max-height:none}
@media(max-width:980px){.pg-hero-copy{display:none}.pg-phone-center{right:33%}.pg-phone-left{right:51%}.pg-phone-right{right:15%}.phone-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.screen-third{grid-column:span 6}.screen-mobile{grid-column:span 6}}
@media(max-width:720px){.case-header-actions{gap:14px}.case-live-link{display:none}.gallery-heading{grid-template-columns:1fr;gap:18px}.project-gallery-section{padding-left:20px;padding-right:20px}.screen-card,.screen-half,.screen-third,.screen-wide{grid-column:span 12}.screen-mobile{grid-column:span 6;padding:10px}.phone-gallery,.phone-gallery-centered{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.phone-card{padding:8px;border-radius:20px}.phone-card img{border-radius:14px}.phone-feature{transform:none}.phone-feature:hover{transform:translateY(-7px)}.pg-hero-phone{width:155px}.pg-phone-center{right:50%;transform:translateX(50%);bottom:-8%;z-index:3}.pg-phone-left{right:auto;left:-4%;bottom:-20%}.pg-phone-right{right:-4%;bottom:-20%}.hero-screen-main{inset:15% 3% 8%}.hero-screen-float{width:56%;height:38%}.case-media-note{display:none}.deep3-page{border-radius:12px}.lightbox{padding:12px}.lightbox-close{right:12px;top:12px}}
@media(max-width:440px){.phone-gallery,.phone-gallery-centered{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-hero-phone{width:132px}.screen-mobile{grid-column:span 12;max-width:300px;margin-inline:auto}.case-header{padding-inline:18px}.case-brand{font-size:11px}.case-back{font-size:10px}}

/* Deep3 Labs — a standalone narrative website case study. */
.deep3-hero-stage{overflow:hidden;background:radial-gradient(circle at 78% 18%,rgba(139,76,255,.4),transparent 31%),linear-gradient(150deg,#12081f,#07070a 75%)}.deep3-hero-word{position:absolute;left:-.04em;bottom:-.2em;color:rgba(255,255,255,.045);font:800 clamp(170px,29vw,430px)/.72 var(--display);letter-spacing:-.1em}.deep3-hero-browser{appearance:none;border:1px solid rgba(255,255,255,.13);padding:0;position:absolute;left:6%;top:9%;bottom:8%;width:61%;overflow:hidden;border-radius:17px;background:#08070b;box-shadow:0 45px 100px rgba(0,0,0,.52);cursor:zoom-in;transform:rotate(-1.2deg);transition:transform .8s cubic-bezier(.18,.8,.2,1)}.deep3-hero-browser:hover{transform:translateY(-8px) rotate(-.3deg)}.deep3-hero-browser img{display:block;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:center top}.deep3-hero-copy{position:absolute;z-index:2;right:6%;top:50%;transform:translateY(-50%);width:24%;display:flex;flex-direction:column;gap:16px;color:#fff}.deep3-hero-copy small{font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#bfa8ff}.deep3-hero-copy strong{font:700 clamp(34px,4.1vw,62px)/.98 var(--display);letter-spacing:-.07em}.deep3-crop-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}.deep3-crop{appearance:none;border:1px solid rgba(255,255,255,.1);padding:0;grid-column:span 4;height:clamp(480px,52vw,720px);position:relative;overflow:hidden;border-radius:18px;background:#0a080e;box-shadow:0 32px 80px rgba(0,0,0,.4);cursor:zoom-in;transition:transform .55s cubic-bezier(.18,.8,.2,1)}.deep3-crop:hover{transform:translateY(-8px)}.deep3-crop img{width:100%;height:100%;object-fit:cover;display:block}.deep3-crop.crop-thesis img{object-position:center 0}.deep3-crop.crop-products img{object-position:center 35%}.deep3-crop.crop-proof img{object-position:center 72%}.deep3-crop span{position:absolute;left:16px;bottom:16px;padding:9px 12px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(12px)}

/* Pacee — the landing page stays clear; product screens carry the three modes. */
.pacee-landing-stage{overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(255,152,83,.34),transparent 25%),radial-gradient(circle at 14% 87%,rgba(125,86,255,.35),transparent 29%),#211440}.pacee-stage-glow{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 42%)}.pacee-landing-browser{appearance:none;border:1px solid rgba(255,255,255,.18);padding:0;position:absolute;inset:7% 5%;overflow:hidden;border-radius:17px;background:#f4f1ed;box-shadow:0 40px 95px rgba(13,5,31,.42);cursor:zoom-in;transition:transform .75s cubic-bezier(.18,.8,.2,1)}.pacee-landing-browser:hover{transform:translateY(-7px)}.pacee-landing-browser .browser-bar{background:#17121f}.pacee-landing-browser img{display:block;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:center top}.pacee-product-section{background:linear-gradient(180deg,#f7f3ff,#eee6ff)}.pacee-mode-grid{display:grid;gap:28px}.pacee-mode-card{min-height:760px;position:relative;overflow:hidden;border-radius:26px;padding:clamp(34px,5vw,76px);display:grid;grid-template-columns:minmax(260px,.7fr) minmax(320px,1fr);align-items:center;background:#17111f;color:#fff;box-shadow:0 28px 75px rgba(38,19,77,.14)}.pacee-mode-card:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:inherit}.mode-instant{background:radial-gradient(circle at 82% 26%,rgba(125,80,255,.44),transparent 31%),#17111f}.mode-reserve{background:radial-gradient(circle at 80% 22%,rgba(255,119,29,.38),transparent 31%),#1c1413}.mode-commute{background:radial-gradient(circle at 80% 22%,rgba(157,112,255,.4),transparent 31%),#17111f}.pacee-mode-copy{position:relative;z-index:2;max-width:500px}.pacee-mode-copy>span{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#bea7ff}.mode-reserve .pacee-mode-copy>span{color:#ffb27d}.pacee-mode-copy h3{font:700 clamp(38px,4.2vw,64px)/1.02 var(--display);letter-spacing:-.068em;margin:25px 0 20px}.pacee-mode-copy p{max-width:480px;margin:0;color:#b7b1bd;font-size:16px;line-height:1.7}.pacee-mode-phone{appearance:none;border:7px solid #111016;padding:0;position:absolute;right:9%;bottom:-17%;width:clamp(260px,27vw,400px);border-radius:44px;overflow:hidden;background:#f4effc;box-shadow:0 50px 100px rgba(0,0,0,.38);cursor:zoom-in;transform:rotate(2deg);transition:transform .8s cubic-bezier(.18,.8,.2,1)}.pacee-mode-card:nth-child(even) .pacee-mode-phone{transform:rotate(-2deg)}.pacee-mode-phone:hover,.pacee-mode-card:nth-child(even) .pacee-mode-phone:hover{transform:translateY(-12px) rotate(0)}.pacee-mode-phone img{display:block;width:100%}.pacee-web-section{background:#17111f;color:#fff}.pacee-web-section .gallery-heading>span{color:#bda6ff}.pacee-web-section .gallery-heading p{color:#b8b1c0}.pacee-full-web{appearance:none;border:1px solid rgba(255,255,255,.12);padding:0;display:block;width:100%;position:relative;overflow:hidden;border-radius:20px;background:#f4f1ed;box-shadow:0 45px 110px rgba(0,0,0,.38);cursor:zoom-in}.pacee-full-web img{display:block;width:100%;height:auto}.pacee-full-web span{position:absolute;left:18px;top:18px;padding:9px 12px;border-radius:999px;background:rgba(18,14,25,.75);color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(12px)}
@media(max-width:900px){.deep3-hero-browser{width:76%;left:4%}.deep3-hero-copy{display:none}.deep3-crop{grid-column:span 12;height:600px}.pacee-mode-card{min-height:680px;grid-template-columns:1fr 1fr}.pacee-mode-phone{right:4%;width:330px}}
@media(max-width:680px){.deep3-hero-browser{inset:10% 4%;width:auto}.deep3-crop{height:500px}.pacee-landing-browser{inset:10% 3%}.pacee-mode-card{min-height:760px;padding:34px 24px;display:block}.pacee-mode-copy{max-width:none}.pacee-mode-copy h3{font-size:40px}.pacee-mode-phone{width:270px;right:50%;transform:translateX(50%) rotate(1deg);bottom:-24%}.pacee-mode-card:nth-child(even) .pacee-mode-phone{transform:translateX(50%) rotate(-1deg)}.pacee-mode-phone:hover,.pacee-mode-card:nth-child(even) .pacee-mode-phone:hover{transform:translateX(50%) translateY(-8px) rotate(0)}}

/* Focused portfolio revision */
.case-status{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;background:#e7e6e1;color:#626866;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.shot[data-lightbox]{appearance:none;border:0;padding:0;color:inherit;text-align:left;cursor:zoom-in}
.shot[data-lightbox] img{transition:transform .45s cubic-bezier(.18,.8,.2,1)}
.shot[data-lightbox]:hover img{transform:scale(1.012)}
.lightbox-close:focus-visible,.screen-card:focus-visible,.hero-screen:focus-visible,.deep3-page:focus-visible,.pacee-full-web:focus-visible,.pacee-mode-phone:focus-visible,.pacee-landing-browser:focus-visible,.pg-hero-phone:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:720px){.case-status{display:none}}
@media(prefers-reduced-motion:reduce){.shot[data-lightbox] img{transition:none}.shot[data-lightbox]:hover img{transform:none}}

/* Pacee screenshot correction: preserve the source aspect ratio and contrast. */
.pacee-landing-browser{inset:auto;left:5%;top:50%;width:90%;aspect-ratio:16/9;transform:translateY(-50%)}
.pacee-landing-browser:hover{transform:translateY(calc(-50% - 7px))}
.pacee-landing-browser img{object-fit:contain;object-position:center;background:#f5f4f0;filter:contrast(1.07) saturate(1.06)}
.pacee-full-web img{aspect-ratio:16/9;object-fit:contain;filter:contrast(1.07) saturate(1.06)}
@media(max-width:680px){.pacee-landing-browser{inset:auto;left:3%;top:50%;width:94%}}