:root{--ink:#111827;--muted:#64748b;--line:#dfe5ec;--paper:#f7f9fc;--white:#fff;--navy:#07142f;--blue:#00c3ff;--cyan:#a5f3fc;--radius:24px;--shadow:0 24px 70px rgba(15,23,42,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Arimo",Arial,sans-serif;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}a{color:inherit}img{display:block;max-width:100%}.skip-link{position:fixed;left:20px;top:-60px;z-index:1000;padding:12px 18px;border-radius:8px;background:var(--ink);color:#fff;transition:top .2s}.skip-link:focus{top:20px}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.site-header{width:min(1320px,calc(100% - 48px));height:76px;margin:18px auto 0;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid rgba(216,224,234,.9);border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);position:sticky;top:18px;z-index:50;box-shadow:0 10px 35px rgba(15,23,42,.06)}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;text-decoration:none;white-space:nowrap}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--ink);color:#fff;font-size:12px}.site-nav{display:flex;align-items:center;gap:30px}.site-nav a{color:#536174;font-size:14px;font-weight:600;text-decoration:none;transition:color .2s}.site-nav a:hover,.site-nav a:focus-visible{color:var(--blue)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:52px;padding:0 22px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-2px)}.button-small{min-height:42px;padding-inline:17px}.button-ghost{border:1px solid var(--line);background:#fff}.button-primary{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(17,24,39,.2)}.button-primary:hover{box-shadow:0 17px 35px rgba(17,24,39,.28)}.button-light{background:#fff;color:var(--navy)}.text-link,.project-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;text-decoration:none}.text-link{padding-bottom:5px;border-bottom:1px solid #aeb8c5}.text-link span,.project-link span{transition:transform .2s}.text-link:hover span,.project-link:hover span{transform:translate(3px,-3px)}
.hero{width:min(1240px,calc(100% - 48px));min-height:600px;margin:0 auto;padding:70px 0 90px;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:end;gap:80px;position:relative;overflow:hidden}.hero-glow{position:absolute;width:600px;height:600px;top:-220px;right:0;border-radius:50%;background:radial-gradient(circle,rgba(101,130,246,.23),rgba(164,242,252,.11) 42%,transparent 70%)}.hero-copy{max-width:850px;position:relative}.eyebrow{margin:0 0 24px;display:flex;align-items:center;gap:10px;color:#536174;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.eyebrow span{width:28px;height:1px;background:var(--blue)}.hero h1{margin:0;max-width:900px;font-size:clamp(2.7rem,5.4vw,5.4rem);line-height:.94;letter-spacing:-.07em;font-weight:600}.hero h1 em{color:var(--blue);font-style:normal}.hero-intro{max-width:680px;margin:34px 0 0;color:var(--muted);font-size:19px;line-height:1.65}.hero-actions{margin-top:38px;display:flex;align-items:center;gap:28px}.hero-proof{display:grid;border-top:1px solid var(--line)}.hero-proof div{padding:21px 0;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;border-bottom:1px solid var(--line)}.hero-proof strong{font-size:31px;letter-spacing:-.04em}.hero-proof span{color:var(--muted);font-size:13px;line-height:1.4}
.section{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:110px 0}.section-heading{margin-bottom:50px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);align-items:end;gap:80px}.section-heading .eyebrow{margin-bottom:18px}.section-heading h2,.capabilities h2,.cta-section h2{margin:0;font-size:clamp(2.35rem,4.5vw,4.7rem);line-height:1.02;letter-spacing:-.055em;font-weight:600}.section-heading>p{margin:0 0 7px;color:var(--muted);font-size:16px;line-height:1.65}.featured{padding-top:70px}
.feature-card{min-height:600px;margin-bottom:32px;padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:clamp(40px,6vw,90px);border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}.feature-dark{color:#fff;background:radial-gradient(circle at 80% 20%,#263a70 0,transparent 35%),var(--navy)}.feature-light{background:linear-gradient(135deg,#eef2ff,#f7fbff 62%,#e9fbff)}.feature-reverse{grid-template-columns:1.25fr .75fr}.feature-reverse .feature-copy{order:2}.project-index{margin:0 0 24px;color:#97a5bd;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.feature-light .project-index{color:#64748b}.feature-copy h3{margin:0 0 22px;font-size:clamp(2.6rem,5vw,5rem);line-height:1;letter-spacing:-.055em}.feature-copy>p:not(.project-index){margin:0;color:#b8c3d8;font-size:16px;line-height:1.7}.feature-light .feature-copy>p{color:var(--muted)}.tag-list{margin:30px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;list-style:none}.tag-list li{padding:8px 11px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06);font-size:11px;font-weight:600}.feature-light .tag-list li,.app-card .tag-list li{border-color:#d8e0eb;background:rgba(255,255,255,.65)}
.browser{display:block;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:#fff;text-decoration:none;box-shadow:0 28px 65px rgba(0,0,0,.32);transform:perspective(1400px) rotateY(-3deg) rotateX(1deg);transition:transform .5s,box-shadow .5s}.feature-reverse .browser{transform:perspective(1400px) rotateY(3deg) rotateX(1deg)}.browser:hover{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-6px);box-shadow:0 34px 80px rgba(0,0,0,.36)}.browser-bar{height:34px;padding:0 12px;display:flex;align-items:center;gap:6px;background:#f3f5f8;border-bottom:1px solid #e2e7ed}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#c3cad4}.browser-bar b{max-width:70%;margin:0 auto;overflow:hidden;color:#7b8797;font-size:9px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.browser-hero img{width:100%;aspect-ratio:1.58;object-fit:cover}.browser-scroll .scroll-preview{height:440px}
.scroll-preview{height:360px;display:block;overflow:hidden;position:relative;background:#e9edf2}.scroll-preview img{width:100%;height:auto;transition:transform 5s cubic-bezier(.22,.61,.36,1)}.project-media:hover .scroll-preview img{transform:translateY(calc(-100% + 360px))}.browser-scroll:hover .scroll-preview img{transform:translateY(calc(-100% + 440px))}.scroll-preview:after{content:"Scroll preview";position:absolute;right:12px;bottom:12px;padding:7px 9px;border-radius:6px;background:rgba(12,20,39,.74);color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .2s}.project-media:hover .scroll-preview:after,.browser:hover .scroll-preview:after{opacity:1}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.project-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:transform .3s,box-shadow .3s}.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.project-card.project-wide .scroll-preview{height:430px}.project-card.project-wide .project-media:hover .scroll-preview img{transform:translateY(calc(-100% + 430px))}.project-media{display:block;overflow:hidden;background:#eef1f5;text-decoration:none}.project-body{min-height:125px;padding:25px 27px;display:flex;justify-content:space-between;align-items:center;gap:20px}.project-body span,.app-copy>span,.mobile-card>div>span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.project-body h3{margin:8px 0 0;font-size:22px;letter-spacing:-.025em}.round-link{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);text-decoration:none;transition:background .2s,color .2s,transform .2s}.round-link:hover{background:var(--ink);color:#fff;transform:rotate(8deg)}
.product-section{width:100%;max-width:none;padding-inline:max(24px,calc((100% - 1240px)/2));background:#eef2f7}.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.app-card{padding:18px;overflow:hidden;border:1px solid #dce3eb;border-radius:var(--radius);background:rgba(255,255,255,.82)}.app-feature{grid-column:1/-1;min-height:520px;padding:50px;display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:center;background:#fff}.app-screen{display:block;overflow:hidden;border:1px solid #d6dee8;border-radius:14px;background:#eef2f7;box-shadow:0 18px 45px rgba(15,23,42,.12)}.app-screen img{width:100%;height:auto;transition:transform .4s}.app-screen:hover img{transform:scale(1.025)}.app-copy{padding:28px 22px 18px}.app-feature .app-copy{padding:0}.app-copy h3{margin:10px 0 15px;font-size:32px;letter-spacing:-.04em}.app-feature h3{font-size:clamp(2.2rem,4vw,3.75rem)}.app-copy p{margin:0 0 25px;color:var(--muted);line-height:1.65}.archive-link{margin:38px 0 0;color:var(--muted);text-align:center}.archive-link a{color:var(--ink);font-weight:700}
.mobile-section{overflow:hidden}.mobile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.mobile-card{min-height:550px;padding:38px 28px 30px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:var(--radius);background:#e9eefb}.mobile-accent{background:#dff7f7}.mobile-soft{background:#f1eafa}.phone{width:185px;height:345px;margin:0 auto 35px;padding:9px;overflow:hidden;border:5px solid #172033;border-radius:30px;background:#172033;box-shadow:0 24px 45px rgba(15,23,42,.22);transition:transform .35s}.mobile-card:hover .phone{transform:translateY(-7px) rotate(-1deg)}.phone a{display:block;height:100%;overflow:hidden;border-radius:18px;background:#fff}.phone img{width:100%;height:100%;object-fit:cover;object-position:top}.mobile-card h3{margin:9px 0 12px;font-size:29px;letter-spacing:-.035em}.mobile-card p{margin:0 0 22px;color:#576579;font-size:14px;line-height:1.6}
.capabilities{border-top:1px solid var(--line)}.capabilities h2{max-width:780px}.capability-list{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.capability-list>div{min-height:220px;padding:28px;border-right:1px solid var(--line)}.capability-list>div:last-child{border-right:0}.capability-list b{color:var(--blue);font-size:32px}.capability-list h3{margin:42px 0 12px;font-size:20px}.capability-list p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.cta-section{width:min(1240px,calc(100% - 48px));margin:0 auto 30px;padding:clamp(55px,8vw,105px);border-radius:30px;background:radial-gradient(circle at 85% 15%,#293f76,transparent 35%),var(--navy);color:#fff;text-align:center}.cta-section .eyebrow{justify-content:center;color:#cbd5e1}.cta-section .eyebrow span{background:var(--cyan)}.cta-section p:not(.eyebrow){margin:24px auto 34px;color:#b8c3d8;font-size:17px}.site-footer{width:min(1240px,calc(100% - 48px));min-height:120px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;color:var(--muted);font-size:13px}.site-footer>p:last-child{text-align:right}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.reveal.is-visible{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-preview img,*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(max-width:980px){.site-nav{display:none}.hero{min-height:auto;padding-top:105px;grid-template-columns:1fr;gap:65px}.hero-proof{grid-template-columns:repeat(3,1fr)}.hero-proof div{grid-template-columns:1fr;align-content:start;border-right:1px solid var(--line);padding-right:20px}.section-heading{grid-template-columns:1fr;gap:24px}.section-heading>p{max-width:650px}.feature-card,.feature-reverse{grid-template-columns:1fr}.feature-reverse .feature-copy{order:0}.app-feature{grid-template-columns:1fr;gap:30px}.mobile-grid{grid-template-columns:1fr 1fr}.mobile-card:last-child{grid-column:1/-1}.capability-list{grid-template-columns:1fr 1fr}.capability-list>div:nth-child(2){border-right:0}.capability-list>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.site-footer{grid-template-columns:1fr 1fr}.site-footer>p:first-of-type{display:none}}
@media(max-width:680px){.site-header{width:calc(100% - 24px);height:66px;margin-top:12px;top:10px;padding:0 14px}.brand>span:last-child{display:none}.site-header .button{min-height:38px;font-size:12px}.hero,.section,.cta-section,.site-footer{width:calc(100% - 32px)}.hero{padding:85px 0 70px;gap:50px}.hero h1{font-size:clamp(3.1rem,15vw,5rem)}.hero-intro{font-size:17px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-proof{grid-template-columns:1fr}.hero-proof div{grid-template-columns:65px 1fr;border-right:0}.section{padding:78px 0}.section-heading{margin-bottom:34px}.feature-card{min-height:0;margin-bottom:20px;padding:30px 20px;gap:35px;border-radius:22px}.feature-copy h3{font-size:2.7rem}.browser,.feature-reverse .browser{transform:none}.browser-scroll .scroll-preview{height:290px}.browser-scroll:hover .scroll-preview img{transform:translateY(calc(-100% + 290px))}.project-grid,.app-grid,.mobile-grid{grid-template-columns:1fr;gap:18px}.project-card.project-wide .scroll-preview,.scroll-preview{height:300px}.project-card.project-wide .project-media:hover .scroll-preview img,.project-media:hover .scroll-preview img{transform:translateY(calc(-100% + 300px))}.project-body{min-height:110px;padding:20px}.project-body h3{font-size:19px}.product-section{width:100%;padding-inline:16px}.app-feature{grid-column:auto;min-height:0;padding:18px}.app-feature h3{font-size:2.35rem}.mobile-card,.mobile-card:last-child{grid-column:auto}.capability-list{grid-template-columns:1fr}.capability-list>div{min-height:180px;border-right:0;border-bottom:1px solid var(--line)}.capability-list>div:last-child{border-bottom:0}.capability-list h3{margin-top:25px}.cta-section{margin-bottom:20px;padding:55px 24px;border-radius:22px}.cta-section h2{font-size:2.55rem}.cta-section .button{width:100%;padding-inline:14px}.site-footer{min-height:100px}}

/* Mobile product case studies */
.mobile-section{width:100%;max-width:none;padding-inline:max(24px,calc((100% - 1240px)/2));background:#fff;overflow:hidden}.mobile-case-list{display:grid;gap:38px}.mobile-case{min-width:0;padding:clamp(38px,5.5vw,76px);display:grid;align-items:center;border:1px solid var(--line);border-radius:30px;overflow:hidden}.mobile-case-drynx{min-height:760px;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(35px,6vw,90px);background:linear-gradient(135deg,#f8fbff,#eef5ff)}.mobile-case-estar{min-height:760px;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(35px,6vw,90px);background:#f7f8fa}.mobile-case-affordpill{background:linear-gradient(145deg,#0c1833,#16284d);color:#fff}.case-content{max-width:440px}.case-number{margin:0 0 38px;color:var(--blue);font-size:clamp(3.8rem,6vw,6.5rem);font-weight:600;line-height:.8;letter-spacing:-.07em}.case-number span{display:inline-block;margin-left:10px;color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}.case-content h3{margin:0 0 20px;font-size:clamp(3rem,5vw,5rem);line-height:.95;letter-spacing:-.06em}.case-lead{margin:0;color:#58677a;font-size:17px;line-height:1.7}.case-details{margin:32px 0 28px;padding:0;border-top:1px solid rgba(126,142,163,.25)}.case-details>div{padding:15px 0;display:grid;grid-template-columns:100px 1fr;gap:16px;border-bottom:1px solid rgba(126,142,163,.25)}.case-details dt{color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.case-details dd{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.mobile-case .tag-list{margin:0 0 28px}.mobile-case .tag-list li{border-color:#dce3ec;background:rgba(255,255,255,.7);color:#536174}
.device-stage{min-width:0;position:relative}.device-stage-layered{height:620px}.device{width:clamp(180px,18vw,245px);padding:5px;position:relative;border:1px solid #28344b;border-radius:clamp(25px,3vw,38px);background:#111827;box-shadow:0 24px 55px rgba(15,23,42,.2);transition:transform .35s ease,box-shadow .35s ease}.device:before{content:"";position:absolute;z-index:2;top:11px;left:50%;width:28%;height:5px;border-radius:9px;background:#111827;transform:translateX(-50%)}.device a{display:block;overflow:hidden;border-radius:calc(clamp(25px,3vw,38px) - 6px);background:#fff}.device img{width:100%;height:auto;object-fit:contain}.device:hover{z-index:8!important;box-shadow:0 32px 68px rgba(15,23,42,.28)}.device-stage-layered .device{position:absolute;top:50%;left:50%}.device-back{z-index:1;transform:translate(-115%,-50%) rotate(-5deg)}.device-main{z-index:3;transform:translate(-45%,-53%)}.device-front{z-index:2;transform:translate(28%,-46%) rotate(5deg)}.device-back:hover{transform:translate(-115%,-53%) rotate(-3deg)}.device-main:hover{transform:translate(-45%,-57%)}.device-front:hover{transform:translate(28%,-50%) rotate(3deg)}
.estar-visual{min-width:0;min-height:620px;position:relative}.device-estar{position:absolute;z-index:3;left:2%;bottom:0;width:clamp(185px,19vw,250px);transform:rotate(-3deg)}.device-estar:hover{transform:translateY(-7px) rotate(-2deg)}.screen-board{width:82%;position:absolute;right:0;top:5%;display:block;overflow:hidden;border:1px solid #dce3eb;border-radius:18px;background:#fff;box-shadow:0 25px 60px rgba(15,23,42,.16);text-decoration:none;transition:transform .35s}.screen-board:hover{transform:translateY(-6px)}.screen-board img{width:100%;height:auto}.screen-board span{padding:15px 18px;display:flex;justify-content:space-between;color:#4c5b6d;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.affordpill-heading{max-width:none;margin-bottom:55px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end}.mobile-case-affordpill .case-number,.mobile-case-affordpill .case-number span{color:#9eb6ff}.mobile-case-affordpill .case-lead{color:#c4cee0}.mobile-case-affordpill .tag-list li{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#dce5f7}.affordpill-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2.5vw,32px);align-items:start}.affordpill-gallery .device{width:100%;max-width:240px;margin:auto}.affordpill-gallery .device:nth-child(even){margin-top:55px}.affordpill-gallery .device:hover{transform:translateY(-9px)}.affordpill-gallery .device:nth-child(even):hover{transform:translateY(46px)}.affordpill-footer{margin-top:60px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}.affordpill-footer .case-details{margin:0;display:grid;grid-template-columns:repeat(3,1fr);border:0}.affordpill-footer .case-details>div{padding:0 25px;border:0;border-right:1px solid rgba(255,255,255,.14);display:block}.affordpill-footer .case-details>div:first-child{padding-left:0}.affordpill-footer dt{margin-bottom:9px;color:#fff}.affordpill-footer dd{color:#aebbd0}.mobile-case-affordpill .project-link{white-space:nowrap}
a:focus-visible{outline:3px solid #6b8cff;outline-offset:4px;border-radius:6px}
@media(max-width:1199px){.mobile-case{padding:48px}.mobile-case-drynx,.mobile-case-estar{gap:45px}.device-stage-layered,.estar-visual{height:550px;min-height:550px}.device{width:clamp(165px,18vw,215px)}}
@media(max-width:991px){.mobile-case-drynx,.mobile-case-estar{grid-template-columns:1fr;gap:40px}.mobile-case-estar .estar-visual{order:2}.case-content{max-width:650px}.device-stage-layered{height:600px}.device{width:clamp(180px,27vw,230px)}.estar-visual{width:min(720px,100%);margin:auto}.device-estar{width:230px}.affordpill-heading{grid-template-columns:1fr;gap:25px}.affordpill-heading>div:last-child{max-width:650px}.affordpill-gallery{gap:15px}.affordpill-footer{grid-template-columns:1fr}.affordpill-footer .case-details{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.mobile-section{padding-inline:16px}.mobile-case-list{gap:22px}.mobile-case{padding:42px 20px;border-radius:22px}.case-number{margin-bottom:28px}.case-content h3{font-size:3rem}.device-stage-layered{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.device-stage-layered .device{position:relative;inset:auto;width:min(100%,250px);margin:auto;transform:none}.device-stage-layered .device-main{grid-column:1/-1;grid-row:1}.device-stage-layered .device-back,.device-stage-layered .device-front{grid-row:2}.device-stage-layered .device:hover{transform:translateY(-5px)}.estar-visual{min-height:0;height:auto;display:grid;gap:22px}.device-estar,.screen-board{position:relative;inset:auto}.device-estar{width:min(72vw,250px);margin:auto;transform:none}.screen-board{width:100%}.affordpill-gallery{grid-template-columns:1fr 1fr;gap:24px 12px}.affordpill-gallery .device{width:min(100%,210px);margin:auto!important}.affordpill-gallery .device:nth-child(even){margin-top:35px!important}.affordpill-gallery .device:nth-child(even):hover{transform:translateY(-5px)}.affordpill-footer{margin-top:45px}.affordpill-footer .case-details{grid-template-columns:1fr}.affordpill-footer .case-details>div{padding:14px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.case-details>div{grid-template-columns:86px 1fr}}
@media(max-width:420px){.mobile-case{padding-inline:16px}.case-number{font-size:3.6rem}.case-number span{display:block;margin:16px 0 0}.device-stage-layered{grid-template-columns:1fr}.device-stage-layered .device-main,.device-stage-layered .device-back,.device-stage-layered .device-front{grid-column:1;grid-row:auto;width:min(86vw,245px)}.affordpill-gallery{grid-template-columns:1fr}.affordpill-gallery .device{width:min(82vw,235px);margin:auto!important}.affordpill-gallery .device:nth-child(even){margin-top:0!important}.case-details>div{grid-template-columns:1fr;gap:7px}.mobile-case-affordpill .project-link{white-space:normal}}

/* Consistent portfolio media and complete web-app galleries */
.project-card .scroll-preview,.project-card.project-wide .scroll-preview{height:390px}.project-card .project-media:hover .scroll-preview img,.project-card.project-wide .project-media:hover .scroll-preview img{transform:translateY(calc(-100% + 390px))}.project-card .project-body{height:125px;min-height:125px}.app-screen-grid{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.app-screen-grid-single{grid-template-columns:1fr}.app-screen{aspect-ratio:16/9;display:grid;place-items:center}.app-screen img{width:100%;height:100%;object-fit:contain;background:#f4f6f9}.app-card:not(.app-feature){display:flex;flex-direction:column}.app-card:not(.app-feature)>.app-screen{width:100%}.app-card:not(.app-feature)>.app-copy{margin-top:auto}.app-card:not(.app-feature)>.app-screen-grid{padding:0}.app-feature{align-items:center}.app-feature .app-screen-grid{align-self:center}

.app-copy .project-byline{margin:-8px 0 22px;color:#7a8798;font-size:13px;font-weight:600;letter-spacing:.02em}
@media(max-width:680px){.project-card .scroll-preview,.project-card.project-wide .scroll-preview{height:300px}.project-card .project-media:hover .scroll-preview img,.project-card.project-wide .project-media:hover .scroll-preview img{transform:translateY(calc(-100% + 300px))}.project-card .project-body{height:auto;min-height:110px}.app-screen-grid{grid-template-columns:1fr;gap:12px}}

/* Keep showcase cards in document order across screen sizes. */
.project-grid{grid-auto-flow:row}.project-grid>.project-card{order:0}
.portfolio-image-preview .fancybox-image{width:100%;height:auto;max-height:none}
.portfolio-image-preview .fancybox-inner{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}