@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--blue:#254de9;--ink:#181b24;--muted:#656b79;--paper:#fafaf7;--line:#dedfe3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:6px}header{padding:28px 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-weight:700;letter-spacing:-.8px;font-size:21px}.wordmark span{font-size:11px;vertical-align:top;margin-left:4px}nav{display:flex;gap:36px;align-items:center;font-size:13px}.contact-link{border:1px solid var(--ink);border-radius:30px;padding:11px 18px}.contact-link span{margin-left:20px}.hero{padding:66px 8% 54px;position:relative;min-height:680px;overflow:hidden}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.7px;display:block}.dot{width:7px;height:7px;display:inline-block;background:var(--blue);border-radius:100%;margin-right:8px}h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(90px,14.5vw,205px);font-weight:500;line-height:.94;letter-spacing:-.085em;margin:45px 0 35px;position:relative;z-index:2}#q-button{font:inherit;letter-spacing:inherit;padding:0;border:0;background:none;color:var(--blue);display:inline-block;position:relative;transition:transform .35s}#q-button:hover{transform:rotate(-12deg)}#q-button.pop{animation:qpop .6s}.period{color:var(--blue)}.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px}.hero-bottom p{font-size:18px;line-height:1.5;margin:0}em{font-family:Georgia,serif;font-weight:400}.q-hint{position:absolute;left:42%;bottom:140px;transform:rotate(-8deg);font-family:Georgia,serif;font-style:italic;color:var(--blue);font-size:15px}.scroll-link{font-size:10px;letter-spacing:1.4px}.scroll-link span{font-size:25px;margin-left:25px}.hero-stamp{position:absolute;right:11%;top:210px;transform:rotate(9deg);font-size:10px;letter-spacing:1px;line-height:1.6;color:var(--blue)}.hero-stamp span{display:block;font-size:110px;line-height:1.3}.work{padding:88px 5.5% 80px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:65px;gap:30px}h2{font-family:Manrope,Arial,sans-serif;font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-2px;line-height:1.12;margin:22px 0 0}.work-controls p{font-size:13px;line-height:1.7;color:var(--muted)}#motion-toggle{background:none;border:0;border-bottom:1px solid var(--muted);padding:7px 0;font-size:11px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 32px}.project{min-width:0}.stage{height:290px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.stage:before,.stage:after{content:'';position:absolute;width:86%;height:78%;border-radius:18px;background:var(--wash);transform:rotate(-9deg);z-index:-2}.stage:after{transform:rotate(7deg);background:var(--shade);height:75%;width:83%;z-index:-1}.browser-frame{width:88%;border-radius:13px;overflow:hidden;box-shadow:0 14px 24px #161f3a22;background:white;transform:rotate(var(--tilt));transition:transform .4s}.project:hover .browser-frame{transform:rotate(0) translateY(-6px)}.browser-bar{height:23px;display:flex;align-items:center;gap:4px;padding:0 9px;background:#f0f0ee;border-bottom:1px solid #ddd}.browser-bar i{width:4px;height:4px;background:#bfc2c8;border-radius:50%}.browser-bar span{font-size:7px;letter-spacing:.1px;color:#797c84;margin:auto}.viewport{height:210px;overflow:hidden;position:relative;background:#eee}.viewport img{display:block;width:100%;height:auto;animation:preview 22s ease-in-out infinite alternate;animation-delay:var(--delay);--travel:0px}.preview-paused img,.project:hover img,.project:focus-within img{animation-play-state:paused}.height-marker{position:absolute;right:0;top:50px;bottom:45px;border-right:1px solid #a6a9b5;color:#8a8e9b;font-size:8px;writing-mode:vertical-rl;padding-right:6px;display:flex;align-items:center;justify-content:center;letter-spacing:1px}.height-marker:before,.height-marker:after{content:'';position:absolute;right:-3px;width:6px;height:1px;background:#a6a9b5}.height-marker:before{top:0}.height-marker:after{bottom:0}.project-meta{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-top:16px}.project h3{font-size:17px;letter-spacing:-.5px;margin:0 0 6px;font-weight:500}.project-meta p{font-size:11px;color:var(--muted);margin:0}.project-meta .arrow{font-size:24px;transition:transform .2s}.project:hover .arrow{transform:translate(3px,-3px)}.project-note{font-size:10px;color:#777e8b;margin-top:12px}.new{font-size:8px;letter-spacing:.6px;color:var(--blue);border:1px solid #b8c6ff;padding:3px 5px;border-radius:4px;display:inline-block;margin-bottom:7px}.placeholder{height:210px;background:#183bdd;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:radial-gradient(ellipse at 90% 10%,#7292ff,transparent 55%)}.placeholder strong{font-family:Manrope,sans-serif;font-size:38px;letter-spacing:-2px}.placeholder span{font-size:10px;letter-spacing:2px;margin-top:10px}.about{padding:65px 8%;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:30px}.about h2{margin-top:0;font-size:40px}.about p{max-width:480px;color:var(--muted);font-size:15px;line-height:1.7}.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.service-tags span{border:1px solid var(--line);padding:8px 12px;border-radius:25px;font-size:10px}.contact{background:var(--blue);color:white;padding:70px 8% 75px}.contact h2{font-size:clamp(50px,7vw,92px);letter-spacing:-4px;margin-bottom:35px}.contact h2>span{margin-left:30px}.contact-cta{display:inline-flex;align-items:center;gap:50px;background:white;color:var(--blue);padding:17px 22px;border-radius:30px;font-size:13px}.phone{font-size:12px;display:inline-block;margin-left:25px;opacity:.8}footer{padding:28px 5.5%;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.whatsapp{position:fixed;bottom:22px;right:24px;z-index:20;border-radius:40px;background:var(--ink);color:white;padding:12px 18px;display:flex;align-items:center;gap:10px;font-size:12px;box-shadow:0 5px 22px #0002}.whatsapp svg{width:23px;height:23px}#confetti{position:fixed;inset:0;pointer-events:none;z-index:12;overflow:hidden}.piece{position:absolute;width:48px;height:48px;will-change:transform}.piece svg{width:100%;height:100%;filter:drop-shadow(0 3px 2px #15255122)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes preview{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(var(--travel))}}@keyframes qpop{50%{transform:rotate(-18deg) scale(1.12)}}@media(min-width:1500px){main,header,footer{max-width:1700px;margin:auto}}@media(max-width:950px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stamp{right:7%;top:230px}.hero-stamp span{font-size:75px}.q-hint{left:48%;bottom:130px}.hero{min-height:600px}.section-heading{align-items:start}.about{grid-template-columns:1fr}.stage{height:310px}}@media(max-width:600px){header{padding:22px 6%}.wordmark{font-size:17px}nav{gap:15px;font-size:11px}.contact-link{padding:9px 12px}.contact-link span{margin-left:8px}.hero{padding:50px 6% 40px;min-height:570px}.eyebrow{font-size:8px;letter-spacing:1.1px}h1{font-size:24vw;margin-top:65px;letter-spacing:-.08em}.hero-stamp{top:160px;right:8%;font-size:7px}.hero-stamp span{font-size:55px}.hero-bottom{display:block;margin-top:65px}.hero-bottom p{font-size:16px}.scroll-link{display:block;margin-top:30px}.q-hint{left:34%;bottom:180px;font-size:12px}.work{padding:55px 6%}.section-heading{display:block;margin-bottom:35px}h2{letter-spacing:-1.5px}.work-controls{margin-top:22px}.project-grid{grid-template-columns:1fr;gap:40px}.stage{height:310px}.browser-frame{width:85%}.viewport{height:230px}.project-meta{padding:0 10px}.project-note{padding:0 10px}.about{padding:45px 6%}.about h2{font-size:31px}.contact{padding:55px 6%}.contact h2{letter-spacing:-2.5px}.contact h2>span{margin-left:0}.phone{display:block;margin:22px 0 0}footer{padding:25px 6% 90px;flex-wrap:wrap}.whatsapp{bottom:15px;right:15px}.piece{width:38px;height:38px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Custom Q: double diamond dots with a fine looped flourish. */
#q-button{width:.77em;height:1.05em;vertical-align:-.13em;margin-right:.025em;line-height:1;border-radius:12px}#q-button .q-monogram{display:block;width:100%;height:100%;object-fit:contain}#q-button:focus-visible{outline:2px dashed var(--blue);outline-offset:5px}#q-button:hover{transform:rotate(-5deg)}