/* JARVIX SOFTWARE — a warm, hand-drawn digital atelier. All artwork is CSS/SVG. */
:root{--ink:#243342;--ink-soft:#4d5c65;--muted:#69747a;--paper:#fffdf7;--cream:#f9f6ed;--blue:#317d9c;--cyan:#65cee3;--ice:#e5f5f8;--yellow:#fff1a6;--coral:#f8a087;--lav:#e9e2f8;--line:#243342;--hand:'Caveat','Comic Neue','Comic Sans MS',cursive;--body:'DM Sans',system-ui,sans-serif;--display:'Manrope','DM Sans',sans-serif;--ease:cubic-bezier(.24,.78,.24,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.75 var(--body);overflow-x:clip}
body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img,svg{max-width:100%;display:block}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:var(--display)}strong{font-weight:800}::selection{background:#cceef5;color:#152932}
.container{width:min(100% - 90px,1220px);margin-inline:auto}.section{padding:105px 0;position:relative}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #2d9cbd;outline-offset:4px}.skip-link{position:fixed;top:-80px;left:18px;z-index:200;background:#fff;padding:12px 18px;border:2px solid var(--ink)}.skip-link:focus{top:10px}
.paper-bg{background-color:var(--paper);background-image:radial-gradient(#b8c4c22e .72px,transparent .72px);background-size:20px 20px}
.scroll-progress{position:fixed;z-index:101;left:0;top:0;width:0;height:3px;background:#44a5ba;pointer-events:none}
.reveal{opacity:1;transform:none}.js-motion .reveal{opacity:0;transform:translateY(22px);transition:transform .65s var(--ease),opacity .65s ease}.js-motion .reveal.in-view{opacity:1;transform:none}
/* No perfect geometric frames: individual borders vary slightly, like pen marks. */
.site-header{position:sticky;top:0;z-index:100;background:#fffdf7f2;border-bottom:1.5px solid #24334222;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.site-header.scrolled{box-shadow:0 8px 24px #2734380c}.nav-inner{min-height:88px;display:flex;align-items:center;gap:26px;justify-content:space-between}.brand{display:flex;align-items:center;flex:none}.brand img{width:185px;height:auto;object-fit:contain}.desktop-nav{display:flex;gap:25px;align-items:center;margin-left:auto}.desktop-nav a{font-size:13px;font-weight:800;position:relative;white-space:nowrap}.desktop-nav a::after{content:"";position:absolute;left:-2px;right:110%;height:6px;bottom:0;background:#a3dce3aa;transform:rotate(-2deg);z-index:-1;transition:right .2s}.desktop-nav a:hover::after{right:0}.header-actions{display:flex;align-items:center;gap:12px}.button{border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 20px;color:var(--ink);font:800 13px/1.25 var(--body);background:#fff;box-shadow:4px 5px 0 var(--ink);border-radius:11px 17px 12px 17px/15px 11px 17px 12px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.button span:last-child{font-size:18px;line-height:1}.button:hover{transform:translate(2px,2px) rotate(-.35deg);box-shadow:2px 3px 0 var(--ink)}.button:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--ink)}.button-nav{background:#fdf1b0;padding:11px 17px;font-size:12px}.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:7px;width:46px;height:44px;background:#fff;border:2px solid var(--ink);border-radius:9px 13px 11px 16px}.menu-toggle span{width:23px;height:2px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#fffdf7;padding:15px 25px 24px;border-bottom:2px solid var(--ink);box-shadow:0 20px 25px #1b303015}.mobile-menu[hidden]{display:none!important}.mobile-menu a{display:block;padding:13px;font-weight:800;border-bottom:1px dashed #50616c55}
/* Intro with deliberate irregular editorial composition. */
.hero{position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:5%;min-height:740px;padding-top:68px;padding-bottom:62px}.hero-copy{position:relative;z-index:3}.eyebrow{display:flex;align-items:center;gap:10px;font-weight:800;font-size:11px;letter-spacing:1.5px;color:#377a94}.hand-star{font-size:30px;line-height:.8;color:#ef906f}.hand-wave{font-family:var(--hand);font-size:26px;transform:rotate(-15deg)}.hero h1{font-size:clamp(43px,4.45vw,68px);letter-spacing:-3.2px;line-height:1.2;font-weight:800;margin:26px 0 27px;max-width:750px}.headline-mark{position:relative;white-space:nowrap;z-index:1}.headline-mark::before{content:"";position:absolute;z-index:-1;left:-2%;right:-3%;height:39%;bottom:9%;background:#ffe69b;transform:rotate(-1.5deg);border-radius:13px 5px 12px 5px}.cliche{display:flex;align-items:center;gap:7px 13px;flex-wrap:wrap;margin:0 0 16px}.crossed{font-weight:800;font-size:12px;letter-spacing:.3px;text-decoration:line-through;text-decoration-color:#e27972;text-decoration-thickness:2px;opacity:.65}.cliche-note{display:inline-flex;align-items:center;color:#c65d48;font:700 31px/1 var(--hand);transform:rotate(-7deg);white-space:nowrap}.cliche-note svg{width:55px;height:32px;margin-left:-3px;stroke:#d67c5b;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hero-text{max-width:565px;font-size:16px;line-height:1.86;color:#495765}.hero-text strong{color:var(--ink)}.hero-actions{display:flex;align-items:center;gap:27px;flex-wrap:wrap;margin-top:27px}.button-primary{background:#7ed5e4}.sketch-link{font-size:13px;font-weight:800;border-bottom:2px dashed #456d79;padding-bottom:5px}.sketch-link span{margin-left:8px;font-size:17px}.hero-bottom-note{font:600 24px var(--hand);color:#68747b;display:block;margin-top:25px;transform:rotate(-1.5deg)}
.hero-art{position:relative;height:565px;min-width:0}.art-sheet{position:absolute;inset:41px 28px 24px 15px;background:#f8f8f3;border:2px solid #364453;box-shadow:12px 14px 0 #d6e7e9;border-radius:8px 15px 10px 20px /12px 10px 19px 14px;transform:rotate(3deg)}.art-sheet::before{content:"";position:absolute;inset:8px;border:1px dashed #93a4a960;pointer-events:none;border-radius:10px 6px 13px 7px}.paper-tape{position:absolute;width:88px;height:29px;background:#f8d98caa;box-shadow:0 1px 2px #6c5a2620;z-index:4}.tape-one{top:-17px;left:22%;transform:rotate(-12deg)}.tape-two{top:-16px;right:14%;transform:rotate(13deg)}.art-handwriting{position:absolute;z-index:3;top:35px;left:30px;font:700 38px/.93 var(--hand);transform:rotate(-10deg)}.drawn-arrow{position:absolute;z-index:3;left:135px;top:93px;width:96px;transform:rotate(10deg);stroke:#415562;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.art-reactor{position:absolute;top:117px;left:50%;width:265px;aspect-ratio:1;transform:translateX(-50%)}.art-reactor::after{content:"";position:absolute;inset:12%;background:radial-gradient(circle,#50dffe24,transparent 70%);z-index:-1;border-radius:50%}.reactor-sketch-ring{position:absolute;inset:-22px;border:2px dashed #5698af8a;border-radius:50%;transform:rotate(-9deg)}.art-reactor img{width:100%;height:100%;object-fit:contain;animation:reactor-spin 27s linear infinite;filter:drop-shadow(0 7px 12px #336f8819)}@keyframes reactor-spin{to{transform:rotate(360deg)}}.reactor-caption{position:absolute;top:403px;left:28%;font:800 9px var(--body);letter-spacing:1px;color:#5f8a98;white-space:nowrap}.reactor-caption span{margin-left:8px}.art-list{position:absolute;z-index:3;right:-28px;bottom:28px;min-width:178px;background:#fff5b4;border:1.5px solid #8e805e;box-shadow:3px 5px 0 #9e93613a;padding:15px 20px;transform:rotate(-9deg);border-radius:4px 9px 5px 7px}.art-list>span{font:700 27px var(--hand)}.art-list p{font:600 12px/1.9 var(--body);white-space:nowrap}.art-list b{margin-right:6px;color:#377f79}.art-scribble{position:absolute;bottom:35px;left:28px;transform:rotate(-9deg);width:70px}.art-scribble svg{stroke:#d67967;stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round}.floating-sticker{position:absolute;font-family:var(--hand);font-weight:700;z-index:5}.sticker-yellow{top:13px;right:3px;font-size:32px;transform:rotate(12deg)}.sticker-star{font-family:var(--body);font-size:40px;color:#df9b63}.sticker-blue{left:-40px;bottom:67px;background:#d7eefa;border:1.5px solid var(--ink);border-radius:10px 8px 15px 9px;padding:11px 19px;font-size:22px;line-height:.94;transform:rotate(-9deg);box-shadow:4px 5px 0 #2b455133}.sticker-blue strong{font-family:var(--hand)}.art-index{position:absolute;right:3px;bottom:0;font:700 10px var(--body);letter-spacing:1px;color:#6d7e89}.art-index b{margin-left:5px}.hero-end{display:flex;align-items:center;justify-content:space-between;padding:15px 0 26px;border-top:1px dashed #9eb3b1;color:#6a7a78;font:700 12px var(--body)}.hero-end a{color:#286f8c}.hero-end a span{margin-left:9px}
.ticker{overflow:hidden;background:#f4e7cb;border-top:2px solid #2d3c42;border-bottom:2px solid #2d3c42;transform:rotate(-.3deg);padding:13px 0}.ticker-track{display:flex;width:max-content;animation:marquee 53s linear infinite;will-change:transform}.ticker-track>span{flex:none;white-space:nowrap;font:800 13px/1.4 var(--body);letter-spacing:.8px;padding-right:20px}.ticker-track b{font:700 27px var(--hand);color:#bd6759;margin:0 15px}@keyframes marquee{to{transform:translateX(-50%)}}.ticker:hover .ticker-track{animation-play-state:paused}
/* Handwriting is used intentionally, never for long body text. */
.section-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:1.6px;color:#3c8398;margin-bottom:23px}.section h2{font-size:clamp(33px,4.1vw,55px);line-height:1.27;letter-spacing:-2.5px;font-weight:800}.section h2 em{font-family:var(--hand);font-weight:700;font-size:1.22em;letter-spacing:-1.5px;color:#287f9a;font-style:normal}.highlight-swipe{position:relative;z-index:1;white-space:normal}.highlight-swipe::after{content:"";position:absolute;z-index:-1;bottom:8%;left:-1%;right:-2%;height:33%;background:#ffe79a;transform:rotate(-1deg);border-radius:50% 10% 20% 20%}.hand-side{font:700 27px/1 var(--hand);color:#628395}
.about{background:#fff}.about-layout{display:grid;grid-template-columns:235px 1fr;gap:8%;align-items:start}.section-aside{display:flex;flex-direction:column;align-items:flex-start}.aside-sun{margin-top:90px;margin-left:36px;transform:rotate(-13deg)}.aside-sun svg{width:120px;fill:none;stroke:#df9c67;stroke-width:3;stroke-linecap:round}.section-aside .hand-side{margin-top:12px;transform:rotate(-9deg)}.about h2{margin-bottom:28px}.about-copy>p{max-width:780px;font-size:16px;color:#556169;line-height:1.95;margin-bottom:17px}.about-copy>p strong{color:#263c4a}.about-postit{display:inline-block;background:#f0f7e2;margin-top:14px;padding:14px 21px;font:600 22px/1.25 var(--hand);border:1px dashed #8eaf88;transform:rotate(-1.5deg)}.about-postit>span:first-child{color:#368f6f;font-size:29px}.hand-smile{color:#ba775d;margin-left:3px}
.examples{background:#f6f7ed}.section-intro{margin-bottom:40px}.section-intro h2{margin-bottom:15px}.section-intro>p{max-width:650px;color:#56666b}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.example-card{position:relative;border:2px solid var(--ink);padding:29px 37px 25px;background:#fff;box-shadow:6px 7px 0 #2837451d;border-radius:17px 27px 16px 27px/24px 12px 27px 18px}.example-card.restaurant{transform:rotate(-.7deg)}.example-card.ecommerce{transform:rotate(.75deg);background:#fffefa}.example-stamp{font-weight:800;font-size:10px;letter-spacing:1.4px;color:#59879c}.example-drawing{height:145px;position:relative;display:flex;justify-content:center;margin:10px 0 18px}.example-drawing svg{width:170px;max-height:142px;fill:none;stroke:#345766;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.example-pin{position:absolute;left:calc(50% + 80px);top:13px;border-radius:50%;display:grid;place-items:center;width:55px;height:55px;background:#fff0b2;border:2px solid #6b6855;font-family:var(--hand);font-size:28px;transform:rotate(11deg)}.ecommerce .example-pin{background:#e4dafa}.example-card h3{font-size:24px;line-height:1.32;letter-spacing:-.8px;margin:0 0 13px}.example-card p{font-size:14px;line-height:1.9;color:#56636b}.example-card p strong{color:#243342}.hand-foot{margin-top:25px;font:700 22px var(--hand);color:#307e94;transform:rotate(-1deg)}.hand-foot span{color:#da8064}.examples-end{margin-top:40px;text-align:center;font:600 26px var(--hand)}.examples-end span{display:inline-block;color:#ca6d59;text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1px;text-underline-offset:6px}
.skills{background-color:#fefcf7}.skills-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:42px}.skills-heading>p{max-width:265px;font-size:13px;line-height:1.9;color:#5c6970}.skills-heading .hand-side{display:inline-block;margin-top:3px;font-size:28px;transform:rotate(-3deg)}.circled{display:inline-block;border:2.2px solid #df986b;border-radius:53% 48% 49% 47%/50% 55% 45% 52%;padding:0 11px;transform:rotate(-4deg)}.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.skill-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:318px;padding:25px 27px 23px;border:2px solid #384a50;box-shadow:4px 5px 0 #273e3b16;background:#fff;border-radius:16px 24px 15px 22px/24px 14px 22px 18px;transition:transform .22s,box-shadow .22s,background .2s}.skill-card:nth-child(2){transform:rotate(.7deg)}.skill-card:nth-child(3){transform:rotate(-.6deg)}.skill-card:nth-child(4){transform:rotate(.3deg)}.skill-card:nth-child(5){transform:rotate(-.8deg)}.skill-card:nth-child(6){transform:rotate(.6deg)}.skill-card:hover{transform:translateY(-5px) rotate(0deg);box-shadow:7px 10px 0 #273e3b1f;background:#f9feff}.skill-icon{height:73px;width:73px;border-radius:48% 52% 60% 40%/43% 55% 45% 57%;background:#e5f2f4;display:grid;place-items:center;margin-bottom:18px}.skill-card:nth-child(3n+2) .skill-icon{background:#fff0ba}.skill-card:nth-child(3n) .skill-icon{background:#efe5f5}.skill-icon svg{width:58px;height:58px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.skill-index{position:absolute;top:25px;right:25px;font:700 28px var(--hand);color:#95a1a4}.skill-card h3{font-size:21px;letter-spacing:-.8px;line-height:1.35;margin-bottom:9px}.skill-card p{font-size:13px;line-height:1.8;color:#596870;flex:1}.skill-link{margin-top:20px;display:inline-block;font:700 21px var(--hand);color:#297a94}.skills-small-note{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:35px;font-size:13px;font-weight:700;color:#657175}.skills-small-note span{font:700 25px var(--hand);color:#c76b55}.skills-small-note svg{width:63px;fill:none;stroke:#c76b55;stroke-width:2;stroke-linecap:round}
.idea-gallery{background:#fff;border-top:1px solid #eceae1}.idea-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:30px}.idea-heading p{max-width:330px;font-size:13px;color:#59696e}.idea-heading strong{color:#253b47}.idea-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}.filter-tab{border:1.6px solid #3e5158;background:#fff;border-radius:10px 15px 11px 14px;padding:8px 18px;font-weight:800;font-size:12px;box-shadow:2px 3px 0 #34464e16;transition:background .2s,transform .2s}.filter-tab:hover,.filter-tab.active{background:#dff1f6;transform:rotate(-2deg)}.idea-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.idea-card{min-width:0}.idea-card[hidden]{display:none!important}.idea-visual{height:310px;border:2px solid #34464e;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:18px 29px 12px 26px/22px 13px 26px 18px}.tiny-label{position:absolute;left:21px;top:17px;font-size:9px;letter-spacing:1.2px;font-weight:800;color:#52616b}.visual-qr{background:#eaf2e5}.visual-ai{background:#e8edfb}.visual-app{background:#fff1d7}.menu-paper{background:#fffefa;transform:rotate(-4deg);height:218px;width:185px;border:1.5px solid #283d4b;border-radius:7px 15px 9px 12px;box-shadow:6px 7px 0 #365d4a26;padding:15px 13px}.menu-paper-head{font-family:var(--hand);font-size:26px;font-weight:700;line-height:1}.menu-paper-head>span{color:#bd7c4b}.menu-paper-head small{display:block;font:700 8px var(--body);margin-top:7px;letter-spacing:1px;color:#74817b}.menu-paper-main{display:flex;align-items:center;gap:8px;margin-top:24px;font:700 25px/.9 var(--hand)}.menu-paper-main svg{width:75px;stroke:#557866;stroke-width:2.5;fill:none}.menu-paper-line{font-size:8px;border-top:1px dashed #84948e;padding-top:10px;margin-top:18px}.visual-scribble{position:absolute;font:700 28px var(--hand);transform:rotate(8deg);color:#357e78;right:15px;bottom:33px}.sketch-flow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding-top:19px}.flow-drawn-box{border:2px solid #375266;padding:7px 16px;background:#fffefb;border-radius:12px 16px 11px 15px;font-size:13px;font-weight:800;transform:rotate(-3deg);min-width:183px;text-align:center}.flow-drawn-box span{color:#5d8091}.flow-drawn-box.emphasis{background:#fff1b2;transform:rotate(2deg)}.flow-hand{font:700 20px var(--hand);color:#ba644f;transform:rotate(-4deg)}.phone-sketch{background:#fffdf9;border:3px solid #2c404e;border-radius:28px 32px 26px 29px;width:172px;height:255px;padding:18px 16px;transform:rotate(7deg);box-shadow:7px 8px 0 #3e515a25}.phone-top{font-size:9px;font-weight:800}.phone-sketch h4{font-size:16px;line-height:1.4;margin:17px 0 16px}.phone-stroke{height:9px;background:#e6f0f2;border-radius:15px;margin:11px 0;width:95%}.phone-stroke.short{width:70%}.phone-button{position:absolute;bottom:21px;left:15px;right:15px;text-align:center;background:#b9dfe8;border:1.5px solid #34464e;border-radius:13px 9px 14px 11px;padding:8px 3px;font-size:10px;font-weight:800}.phone-note{position:absolute;right:19px;bottom:25px;transform:rotate(-11deg);font:700 24px var(--hand);color:#ae745d}.phone-note span{color:#e78e76}.idea-text{padding:19px 5px}.idea-text>span{font-size:9px;font-weight:800;letter-spacing:1px;color:#52849c}.idea-text h3{font-size:20px;letter-spacing:-.6px;line-height:1.32;margin:8px 0}.idea-text p{font-size:13px;color:#67737a;line-height:1.75}
.philosophy{background:#edf6f5}.philosophy-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:8%}.philosophy-illustration{position:relative;height:350px;display:flex;align-items:center;justify-content:center}.philosophy-outline{position:absolute;width:290px;height:290px;border:2px dashed #74abb5;border-radius:52% 48% 53% 47%;transform:rotate(11deg)}.philosophy-illustration img{width:235px;height:235px;object-fit:contain;animation:reactor-spin 27s linear infinite;filter:drop-shadow(0 12px 15px #298aa226)}.philosophy-illustration .hand-side{position:absolute;color:#3f8c94}.note-upper{left:0;top:0;transform:rotate(-10deg)}.note-lower{bottom:0;right:0;transform:rotate(7deg)}.philosophy-copy h2{margin-bottom:24px}.philosophy-copy>p{font-size:15px;line-height:1.95;color:#526369;margin-bottom:15px}.philosophy-underlined{font:700 26px var(--hand);color:#287892;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:6px}
.process{background-color:#fffdf6}.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.process-card{position:relative;background:#fff;border:2px solid #35474e;border-radius:12px 20px 16px 26px/19px 12px 25px 14px;padding:22px 23px;min-height:256px;box-shadow:4px 5px 0 #385e621a}.process-card:nth-child(2){transform:rotate(1deg)}.process-card:nth-child(3){transform:rotate(-.8deg)}.process-card:nth-child(4){transform:rotate(.7deg)}.process-card>span:first-child{font:700 50px/.9 var(--hand);color:#da8469}.process-card:nth-child(2)>span:first-child{color:#4c9aaf}.process-card:nth-child(3)>span:first-child{color:#9e85bb}.process-card:nth-child(4)>span:first-child{color:#63a687}.process-card h3{font-size:18px;margin:14px 0 7px;letter-spacing:-.5px}.process-card p{font-size:12.5px;color:#627177;line-height:1.75}.process-doodle{display:block;margin-top:13px;color:#6b8f98;font:700 23px var(--hand);transform:rotate(-2deg)}.tea{font-size:.6em;vertical-align:middle}
.contact{background:#f3f1e9;overflow:hidden}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;align-items:center}.contact-copy h2{font-size:clamp(45px,5vw,69px);margin:8px 0 24px}.contact-copy>p{max-width:420px;line-height:1.9;color:#54656d;font-size:15px}.contact-small{margin-top:29px;font:700 25px var(--hand);transform:rotate(-1.5deg);color:#327d93}.contact-small span{color:#dd8c69}.contact-domain{margin-top:41px;font-weight:800;font-size:17px;color:#386c81}.contact-domain span{font-size:22px}.contact-arrow{margin-left:60px;width:150px;stroke:#d48c72;fill:none;stroke-width:3;stroke-linecap:round}.contact-paper{position:relative;background:#fffef8;padding:42px 36px 38px;border:2px solid var(--ink);box-shadow:8px 10px 0 #aeb5ac66;border-radius:14px 23px 15px 22px/22px 13px 23px 14px;transform:rotate(.5deg)}.contact-tape{top:-16px;left:40%;transform:rotate(-8deg)}.form-handwriting{font:700 37px var(--hand);color:#2f8195;display:block;margin-bottom:19px;transform:rotate(-2deg)}.contact-paper form{display:grid;gap:16px}.contact-paper label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800}.contact-paper label b{color:#bc735e}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-paper input,.contact-paper select,.contact-paper textarea{width:100%;min-width:0;border:1.5px solid #64767a;border-radius:7px 12px 8px 11px;background:#fff;padding:12px 13px;outline:none;color:var(--ink);font:500 13px var(--body)}.contact-paper textarea{resize:vertical;min-height:110px}.contact-paper input:focus,.contact-paper select:focus,.contact-paper textarea:focus{outline:2px solid #69bad2;outline-offset:1px}.contact-paper input::placeholder,.contact-paper textarea::placeholder{color:#9aa2a5}.form-submit{width:fit-content;margin-top:5px}.form-status{font-size:11px;color:#687477;line-height:1.6}.form-status.success{color:#236e53;font-weight:700}.form-status.error{color:#ae4b3e;font-weight:700}
.footer{background:#fffdf8;border-top:2px solid #d6d5cd;padding:60px 0 0}.footer-top{display:flex;justify-content:space-between;gap:20px}.footer-top p{margin-top:12px;font-size:13px;color:#68757d}.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;align-content:start}.footer-nav a{font-size:12px;font-weight:800}.footer-nav a:hover{text-decoration:underline;text-decoration-style:wavy}.footer-word{margin-top:60px;font:800 clamp(76px,17vw,235px)/.95 var(--display);letter-spacing:-.09em;white-space:nowrap;color:#e5e9e7;position:relative;overflow:hidden}.footer-word span{position:absolute;right:4%;bottom:3%;font:700 clamp(20px,3vw,45px) var(--hand);letter-spacing:0;color:#448da2;transform:rotate(-9deg)}.footer-bottom{display:flex;gap:15px;justify-content:space-between;border-top:1px dashed #abb3ad;padding:18px 0 24px;color:#67777b;font-size:11px;font-weight:700}.footer-bottom a{color:#247a95}
/* Tablet and mobile: each hand-drawn note has a deliberate place, no sideways overflow. */
@media(max-width:1120px){.container{width:min(100% - 64px,1220px)}.nav-inner{gap:15px}.desktop-nav{gap:15px}.desktop-nav a{font-size:12px}.hero-grid{gap:2%}.hero h1{font-size:clamp(41px,4.5vw,58px)}.art-reactor{width:235px}.art-sheet{inset:40px 20px 25px 10px}.sticker-blue{left:-5px}.process-card{padding:20px 17px}}
@media(max-width:900px){.desktop-nav{display:none}.menu-toggle{display:flex}.hero-grid{grid-template-columns:1fr;gap:25px;padding-top:55px;min-height:0}.hero-copy{max-width:730px}.hero h1{font-size:clamp(45px,7.1vw,65px)}.hero-art{height:510px;width:min(100%,590px);margin:auto}.art-sheet{inset:35px 28px 24px}.art-reactor{width:248px}.about-layout{grid-template-columns:140px 1fr;gap:4%}.aside-sun{margin-top:70px;margin-left:0}.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.idea-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.idea-card:last-child{grid-column:1/-1;max-width:410px}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid{grid-template-columns:1fr;gap:45px}.contact-copy>p{max-width:660px}.contact-arrow{display:none}.contact-paper{max-width:750px}.philosophy-grid{gap:4%}}
@media(max-width:650px){html{scroll-padding-top:75px}.container{width:calc(100% - 36px)}.section{padding:70px 0}.nav-inner{min-height:72px}.brand img{width:160px}.button-nav{display:none}.menu-toggle{width:43px;height:42px}.hero-grid{padding-top:47px;padding-bottom:25px;gap:12px}.eyebrow{font-size:9px;letter-spacing:.8px;gap:6px}.hand-star{font-size:25px}.hand-wave{font-size:19px}.hero h1{font-size:clamp(37px,9.2vw,54px);letter-spacing:-1.8px;line-height:1.22;margin:22px 0}.crossed{font-size:10px}.cliche-note{font-size:28px}.cliche-note svg{width:38px}.hero-text{font-size:14px;line-height:1.85}.hero-actions{gap:15px;margin-top:24px}.button{font-size:12px;padding:12px 15px;gap:12px}.sketch-link{font-size:12px}.hero-bottom-note{font-size:19px;margin-top:21px}.hero-art{height:435px;max-width:440px}.art-sheet{inset:24px 13px 27px 9px;box-shadow:7px 9px 0 #d6e7e9}.art-handwriting{font-size:29px;top:24px;left:20px}.drawn-arrow{width:72px;left:95px;top:72px}.art-reactor{width:200px;top:100px}.reactor-sketch-ring{inset:-12px}.reactor-caption{font-size:7px;top:318px;left:22%}.art-list{min-width:140px;right:-13px;bottom:24px;padding:8px 11px;transform:rotate(-8deg)}.art-list>span{font-size:20px}.art-list p{font-size:10px}.sticker-yellow{font-size:23px;right:2px;top:0}.sticker-star{font-size:24px}.sticker-blue{font-size:17px;left:-6px;bottom:55px;padding:8px 11px}.art-scribble{left:15px;bottom:28px;width:46px}.art-index{font-size:8px}.hero-end{font-size:10px;padding-bottom:19px}.hero-end>span{max-width:170px}.ticker-track>span{font-size:11px}.ticker-track b{margin:0 9px}.section-kicker{font-size:9px;margin-bottom:17px}.section h2{font-size:clamp(32px,8.3vw,44px);letter-spacing:-1.55px}.about-layout{grid-template-columns:1fr;gap:10px}.section-aside{display:block}.section-aside .aside-sun,.section-aside .hand-side{display:none}.about-copy p{font-size:14px}.about-postit{font-size:20px}.section-intro{margin-bottom:30px}.example-grid{grid-template-columns:1fr;gap:24px}.example-card{padding:24px 24px}.example-card h3{font-size:21px}.example-card p{font-size:13px}.examples-end{font-size:23px}.skills-heading{display:block}.skills-heading>p{margin-top:16px}.skill-grid{grid-template-columns:1fr;gap:13px}.skill-card{min-height:0;padding:22px 24px}.skill-icon{width:64px;height:64px;margin-bottom:13px}.skill-icon svg{width:53px;height:53px}.skill-card h3{font-size:20px}.skill-link{margin-top:15px}.skills-small-note{justify-content:flex-start;flex-wrap:wrap;font-size:11px}.skills-small-note span{font-size:20px}.idea-heading{display:block}.idea-heading p{margin-top:16px}.idea-grid{grid-template-columns:1fr}.idea-card:last-child{grid-column:auto;max-width:none}.idea-visual{height:280px}.idea-text{padding-bottom:12px}.philosophy-grid{grid-template-columns:1fr;gap:12px}.philosophy-illustration{height:250px;order:2}.philosophy-outline{width:220px;height:220px}.philosophy-illustration img{width:175px;height:175px}.philosophy-illustration .hand-side{font-size:19px}.philosophy-copy{order:1}.philosophy-copy p{font-size:14px}.philosophy-underlined{font-size:23px}.process-grid{grid-template-columns:1fr;gap:13px}.process-card{min-height:0;padding:20px 23px}.process-card h3{margin-top:6px}.process-doodle{margin-top:8px}.contact-copy h2{font-size:clamp(43px,10vw,60px)}.contact-copy>p{font-size:14px}.contact-small{font-size:23px}.contact-domain{margin-top:22px}.contact-paper{padding:33px 19px;transform:none}.form-handwriting{font-size:31px}.field-row{grid-template-columns:1fr;gap:13px}.footer{padding-top:47px}.footer-top{display:block}.footer-nav{margin-top:30px;max-width:360px;gap:12px 22px}.footer-word{font-size:clamp(61px,18vw,116px);letter-spacing:-.1em;margin-top:40px}.footer-bottom{flex-wrap:wrap;line-height:1.6}.footer-bottom span:nth-child(2){display:none}}
@media(max-width:375px){.brand img{width:146px}.hero h1{font-size:35px}.eyebrow{font-size:8px}.hero-art{height:382px}.art-sheet{inset:21px 6px 23px 6px}.art-reactor{width:175px;top:95px}.art-handwriting{font-size:25px}.art-list{bottom:19px}.reactor-caption{top:291px;left:19%}.sticker-blue{left:-4px;bottom:45px}.footer-word{font-size:17.4vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-track,.art-reactor img,.philosophy-illustration img{animation:none!important}.reveal,.js-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}.button,.skill-card,.filter-tab{transition:none!important}}

/* Keep every section readable before it enters the viewport. Gentle motion is additive. */
.js-motion .reveal{opacity:1;transform:none;transition:none}
.js-motion .reveal.in-view{animation:sketch-appear .65s var(--ease) both}
@keyframes sketch-appear{from{opacity:.68;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js-motion .reveal.in-view{animation:none!important}}


/* =========================================
   JARVIX • Softer, clearer type • 2026-11-06
   Body: Nunito / headings: Outfit / notes: Kalam
   ========================================= */
:root{
  --body:'Nunito','Cabin','Segoe UI',system-ui,sans-serif;
  --display:'Outfit','Comfortaa','Nunito',sans-serif;
  --hand:'Kalam','Comic Neue',cursive;
}
body{font-size:17px;line-height:1.74;letter-spacing:.002em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:700}
strong{font-weight:800}
.desktop-nav a{font-size:15px;font-weight:800}
.mobile-menu a{font-size:17px}
.button{font-size:15px;line-height:1.3;letter-spacing:.005em}
.button-nav{font-size:14px}
.eyebrow{font-size:13px;letter-spacing:1px}
.hero h1{font-size:clamp(46px,4.65vw,72px);font-weight:700;line-height:1.17;letter-spacing:-2.15px}
.crossed{font-size:14px;opacity:.76}
.cliche-note{font-size:34px;line-height:1.18}
.hero-text{font-size:18px;line-height:1.78;max-width:610px}
.sketch-link{font-size:15px}
.hero-bottom-note{font-size:27px;line-height:1.4}
.art-handwriting{font-size:39px;line-height:1.15}
.art-list>span{font-size:29px}
.art-list p{font-size:13px;line-height:1.7}
.art-index,.reactor-caption{font-size:10.5px}
.sticker-blue{font-size:23px;line-height:1.12}
.hero-end{font-size:13px}
.ticker-track>span{font-size:15px;line-height:1.5}
.section-kicker,.sect{font-size:13px;letter-spacing:1.15px}
.section h2{font-size:clamp(38px,4.3vw,60px);font-weight:700;line-height:1.2;letter-spacing:-1.75px}
.section h2 em{letter-spacing:-1px}
.about-copy>p{font-size:18px;line-height:1.82}
.about-postit{font-size:26px;line-height:1.4}
.example-stamp{font-size:12px;letter-spacing:.8px}
.example-card h3{font-size:26px;line-height:1.3;letter-spacing:-.55px}
.example-card p{font-size:16.5px;line-height:1.76}
.hand-foot{font-size:26px}
.examples-end{font-size:29px}
.skills-heading>p{font-size:16px;line-height:1.7;max-width:310px}
.skill-card h3{font-size:23px;line-height:1.3;letter-spacing:-.45px}
.skill-card p{font-size:16px;line-height:1.7}
.skill-link{font-size:25px;line-height:1.2}
.skills-small-note{font-size:15px}
.idea-heading p{font-size:16px;line-height:1.75}
.filter-tab{font-size:14px}
.tiny-label,.idea-text>span{font-size:11.5px;letter-spacing:.65px}
.idea-text h3{font-size:23px;letter-spacing:-.35px;line-height:1.3}
.idea-text p{font-size:16px;line-height:1.7}
.philosophy-copy>p{font-size:18px;line-height:1.82}
.philosophy-underlined{font-size:30px;line-height:1.4}
.process-card h3{font-size:21px;letter-spacing:-.2px}
.process-card p{font-size:16px;line-height:1.68}
.process-doodle{font-size:26px}
.contact-copy h2{font-size:clamp(47px,5vw,70px);line-height:1.15;letter-spacing:-1.8px}
.contact-copy>p{font-size:18px;line-height:1.78}
.contact-small{font-size:29px}
.contact-domain{font-size:19px}
.form-handwriting{font-size:39px;line-height:1.25}
.contact-paper label{font-size:15px;line-height:1.4}
.contact-paper input,.contact-paper select,.contact-paper textarea{font-size:16px;line-height:1.5;min-height:47px}
.form-status{font-size:13px;line-height:1.55}
.footer-top p{font-size:15px;line-height:1.7}
.footer-nav a{font-size:14px}
.footer-bottom{font-size:13px;line-height:1.65}
/* Keep friendly type spacious as columns get narrower. */
@media(max-width:1120px){
  .desktop-nav a{font-size:14px}
  .hero h1{font-size:clamp(44px,4.6vw,61px)}
}
@media(max-width:900px){
  .hero h1{font-size:clamp(45px,7.1vw,65px)}
}
@media(max-width:650px){
  body{font-size:16px;line-height:1.74}
  .section{padding:74px 0}
  .hero h1{font-size:clamp(39px,10vw,55px);line-height:1.18;letter-spacing:-1.35px}
  .eyebrow{font-size:11px;letter-spacing:.25px}
  .crossed{font-size:12px}
  .cliche-note{font-size:30px}
  .hero-text{font-size:16px;line-height:1.77}
  .button,.sketch-link{font-size:14px}
  .hero-bottom-note{font-size:23px;line-height:1.35}
  .art-handwriting{font-size:31px;line-height:1.1}
  .art-list>span{font-size:23px}
  .art-list p{font-size:11px;line-height:1.6}
  .hero-end{font-size:11.5px}
  .ticker-track>span{font-size:13px}
  .section-kicker,.sect{font-size:11px;letter-spacing:.75px}
  .section h2{font-size:clamp(34px,8.5vw,46px);letter-spacing:-1.15px;line-height:1.2}
  .about-copy>p,.about-copy p{font-size:16px;line-height:1.8}
  .about-postit{font-size:23px}
  .example-card h3{font-size:24px}
  .example-card p{font-size:16px;line-height:1.7}
  .examples-end{font-size:26px}
  .skills-heading>p{font-size:16px;line-height:1.72}
  .skill-card h3{font-size:23px}
  .skill-card p{font-size:16px;line-height:1.73}
  .skill-link{font-size:24px}
  .skills-small-note{font-size:13px}
  .idea-heading p{font-size:16px}
  .filter-tab{font-size:13px}
  .idea-text h3{font-size:22px}
  .idea-text p{font-size:16px}
  .philosophy-copy p{font-size:16px;line-height:1.8}
  .philosophy-underlined{font-size:26px}
  .process-card h3{font-size:21px}
  .process-card p{font-size:16px;line-height:1.7}
  .contact-copy h2{font-size:clamp(43px,10vw,60px);letter-spacing:-1px}
  .contact-copy>p{font-size:16px}
  .contact-small{font-size:27px}
  .form-handwriting{font-size:34px}
  .contact-paper label{font-size:15px}
  .contact-paper input,.contact-paper select,.contact-paper textarea{font-size:16px}
  .footer-top p{font-size:15px}
  .footer-nav a{font-size:15px}
  .footer-bottom{font-size:12px}
}
@media(max-width:375px){
  .hero h1{font-size:clamp(36px,10vw,41px)}
  .eyebrow{font-size:10px}
  .art-handwriting{font-size:26px}
  .footer-word{font-size:17.4vw}
}



/* ==============================================================
   JARVIX studio refresh, November 2026
   CELENES-inspired sunny lime, leafy green and bright aqua.
   Paper-white canvas, high legibility, lightweight motion only.
   ============================================================== */
:root{
 --ink:#1b372e;
 --ink-soft:#334b42;
 --muted:#516b61;
 --line:#1b372e;
 --paper:#f9fff4;
 --cream:#f0ffdf;
 --yellow:#d7f57a;
 --lime:#c4ea63;
 --cyan:#6bdac6;
 --ice:#e9fff5;
 --blue:#1e936e;
 --royal:#168b71;
 --coral:#f6d969;
 --lav:#e8fbd7;
}
body{color:var(--ink);background:#fff}
::selection{background:#c4ea63;color:#183c2b}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#118c70}
.scroll-progress{background:#2caa7f}
.site-header{background:#fffef9f5;border-bottom-color:#b4d3bd}
.site-header.scrolled{box-shadow:0 7px 20px #2c64431b}
.desktop-nav{gap:20px}
.desktop-nav a{color:#214234;font-size:14px}
.desktop-nav a::after{background:#c4ea63}
.desktop-nav a:hover{color:#076c51}
.mobile-menu{background:#fbfff7}
.mobile-menu a{color:#1b372e;border-bottom-color:#a4c6b0}
.mobile-menu a:hover{background:#e4fabd}
.button,.button-nav,.button-primary{border-color:#1b372e;color:#1b372e;box-shadow:4px 5px 0 #1b372e}
.button-nav,.button-primary{background:#c4ea63}
.button-nav:hover,.button-primary:hover{background:#b8e64e}
.sketch-link{color:#166e58;border-bottom-color:#269b78}
.paper-bg{background-color:#f7fff3;background-image:radial-gradient(#90bc9b46 .7px,transparent .7px)}
.hero{background:radial-gradient(circle at 85% 27%,#c4ea6330,transparent 38%),radial-gradient(circle at 82% 85%,#87e6ca35,transparent 36%),#f8fff6}
/* Welcome kicker is removed entirely; remove the space it occupied as well. */
.hero-grid{padding-top:34px;min-height:695px}
.hero h1{margin-top:0;color:#1b372e}
.headline-mark::before{background:#c4ea63}
.crossed{background:#c4ea63;border-color:#1b372e;box-shadow:4px 5px 0 #1b372e;color:#1b372e}
.cliche-note{color:#218a6b}
.cliche-note svg{stroke:#168465}
.hero-text{color:#334a43}
.hero-text strong{color:#143328}
.hero-bottom-note{color:#41745e}
.art-sheet{background:#fff;border-color:#284338;box-shadow:12px 14px 0 #c4ea63b2}
.art-sheet::before{border-color:#7dbd91a9}
.paper-tape{background:#c4ea63b7}
.tape-two{background:#6bdac69c}
.art-handwriting{color:#24533b}
.drawn-arrow{stroke:#35976e}
.reactor-sketch-ring{border-color:#55bb94}
.art-list{background:#e4ffc3;border-color:#264633;box-shadow:4px 6px 0 #43894d35}
.art-list b{color:#15795d}
.art-scribble svg{stroke:#39ac8b}
.sticker-yellow{color:#1b7557}
.sticker-star{color:#23966c}
.sticker-blue{background:#a7efca;color:#193e30;box-shadow:4px 5px 0 #1d5a394a}
.reactor-caption,.art-index{color:#46715c}
.hero-end{border-top-color:#88b49c;color:#416b57}
.hero-end a{color:#19785a}
.ticker{background:#c4ea63;border-color:#1b372e}
.ticker-track>span{color:#1b372e}
.ticker-track b{color:#288a6b}
.section-kicker,.sect{color:#177e5f}
.section h2{color:#19372a}
.section h2 em{color:#218d68}
.highlight-swipe::before{background:#c4ea63}
.about{background:#fff}
.about-copy>p,.section-intro>p,.example-card p,.skill-card p,.idea-text p,.philosophy-copy>p,.process-card p,.contact-copy>p{color:#36574a}
.about-copy>p strong,.example-card p strong{color:#163d2c}
.about-postit{background:#dcf79b;border-color:#458d5b;box-shadow:4px 5px 0 #2b814626}
.about-postit>span:first-child{color:#27896a}
.examples{background:#f1ffed}
.example-card{border-color:#214639;box-shadow:6px 7px 0 #437b4d2b}
.example-card.restaurant{background:#fff}
.example-card.ecommerce{background:#f9ffef}
.example-stamp{color:#197358}
.example-drawing svg{stroke:#296b51}
.example-pin,.ecommerce .example-pin{background:#c4ea63;border-color:#265536}
.example-card p strong{color:#1c4d33}
.hand-foot,.examples-end span{color:#208866}
.skills{background:#fff}
.skills-heading>p{color:#42634d}
.skills-heading .hand-side,.skill-link{color:#19835f}
.circled{border-color:#6fba66}
.skill-card{border-color:#28503d;box-shadow:4px 5px 0 #3d9a5b20;background:#fff}
.skill-card:nth-child(2),.skill-card:nth-child(6){background:#edfff4}
.skill-card:nth-child(3){background:#f5ffdf}
.skill-card:nth-child(4){background:#efffec}
.skill-card:nth-child(5){background:#fff}
.skill-card:hover{background:#e9ffbf;box-shadow:5px 8px 0 #2d8a5433}
.skill-icon,.skill-card:nth-child(3n+2) .skill-icon,.skill-card:nth-child(3n) .skill-icon{background:#bdf0c6}
.skill-card:nth-child(3n+2) .skill-icon{background:#c4ea63}
.skill-card:nth-child(3n) .skill-icon{background:#b9f3e4}
.skill-index{color:#5e966f}
.idea-gallery{background:#fff;border-top-color:#daedd9}
.idea-heading p,.idea-text p{color:#406455}
.idea-text>span{color:#278463}
.filter-tab{border-color:#24563e}
.filter-tab.active,.filter-tab:hover{background:#c4ea63}
.idea-visual{border-color:#28503e}
.visual-qr{background:#daf6a8}
.visual-ai{background:#d4ffec}
.visual-app{background:#edfbc4}
.flow-drawn-box.emphasis,.phone-button{background:#c4ea63}
.flow-hand,.phone-note{color:#1d896a}
.philosophy{background:#eaffef}
.philosophy-outline{border-color:#58c19b}
.philosophy-illustration .hand-side,.philosophy-underlined{color:#207f60}
.process{background:#f7fff3}
.process-card{border-color:#22513c;box-shadow:4px 5px 0 #57966c29}
.process-card:nth-child(2){background:#edffd8}
.process-card:nth-child(3){background:#eafff2}
.process-card:nth-child(4){background:#f3ffe3}
.process-card>span:first-child,.process-card:nth-child(2)>span:first-child,.process-card:nth-child(3)>span:first-child,.process-card:nth-child(4)>span:first-child{color:#218568}
.process-doodle{color:#157b5d}
.contact{background:linear-gradient(118deg,#dfffe9,#f5ffed 58%,#e4ffd0)}
.contact-small,.contact-domain{color:#197d59}
.contact-small span,.contact-arrow{color:#20926a;stroke:#20926a}
.contact-paper{border-color:#24503b;box-shadow:8px 10px 0 #b6df91}
.contact-tape{background:#c4ea63b8}
.form-handwriting{color:#247d5f}
.contact-paper label b{color:#217951}
.contact-paper input,.contact-paper select,.contact-paper textarea{border-color:#4d8165;background:#fff}
.contact-paper input:focus,.contact-paper select:focus,.contact-paper textarea:focus{outline-color:#3ca579}
.footer{border-top:5px solid #c4ea63;background:#fbfff9}
.footer-top p,.footer-bottom{color:#3f6752}
.footer-word{color:#dcefd9}
.footer-word span,.footer-bottom a{color:#25865e}
.footer-bottom{border-top-color:#a0c8a4}

/* Real project cards. Custom artwork built in CSS rather than fake screenshots. */
.real-work{background:#f6fff0;overflow:hidden}
.reference-heading,.team-intro{display:flex;gap:5%;align-items:end;justify-content:space-between;margin-bottom:37px}
.reference-heading>div,.team-intro>div{flex:1.2;min-width:0}
.reference-heading>p,.team-intro>p{flex:0 1 375px;max-width:375px;font-size:17px;line-height:1.75;color:#436652}
.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:27px}
.reference-card{min-width:0;background:#fff;border:2px solid #264434;border-radius:19px 25px 16px 23px / 24px 15px 24px 17px;box-shadow:7px 8px 0 #4e8e5830;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.reference-card:nth-child(2){transform:rotate(.35deg)}
.reference-card:hover{transform:translateY(-4px);box-shadow:8px 13px 0 #4e8e5840}
.reference-art{height:325px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;padding:35px 25px 25px}
.reference-graphic-label{position:absolute;z-index:5;top:15px;left:17px;border:1.5px solid #224b33;background:#ffffffeb;border-radius:30px;padding:5px 10px;font-size:10px;letter-spacing:1px;font-weight:900;color:#1b6349}
.reference-graphic-label span{margin-left:4px}
.stellar-art{background:radial-gradient(circle at 12% 78%,#b6edc7 0%,transparent 35%),#e7f8e0}
.celenes-art{background:radial-gradient(circle at 96% 5%,#ceff84 0%,transparent 40%),#e2f9d2}
.stellar-window{width:min(92%,420px);border:2px solid #244b36;overflow:hidden;background:#fff;transform:rotate(-3deg);box-shadow:8px 10px 0 #497c4b2c;border-radius:10px}
.stellar-top{height:49px;background:#193e31;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:0 12px;font-size:8px;letter-spacing:.7px}
.stellar-mini{font:700 23px/1 var(--hand);white-space:nowrap;color:#c4ea63}
.stellar-content{padding:18px 12px 22px;text-align:center;background:linear-gradient(180deg,#fff 0%,#f5fff1 100%)}
.stellar-script{font:700 26px/1.12 var(--display);letter-spacing:-.6px;color:#204032}
.jewel-set{display:flex;justify-content:center;gap:8px;margin-top:16px}
.jewel-card{flex:1;min-width:0;max-width:115px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:78px;background:#e8f7e5;border:1px solid #b7d1bf;border-radius:7px}
.jewel-chain{font:400 39px/1 var(--hand);color:#b68d50;font-style:normal}
.jewel-card small{font-size:8px;font-weight:900;letter-spacing:1px;color:#315845}
.ref-hand-note{position:absolute;right:12px;bottom:11px;font:700 22px/1.15 var(--hand);transform:rotate(-7deg);color:#256c4a}
.ref-note-celenes{right:12px;bottom:10px;transform:rotate(5deg)}
.celenes-window{width:min(94%,425px);height:220px;border:2px solid #305e40;border-radius:12px;overflow:hidden;background:#fff;box-shadow:7px 9px 0 #3c875b2d;transform:rotate(-3deg) translateX(-5px)}
.celenes-window-nav{height:43px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #dcead4;gap:7px}
.celenes-window-nav strong{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-1px;color:#31553a}
.celenes-window-nav strong span{color:#a2cf43}
.celenes-window-nav>span{font-size:8px;font-weight:800;white-space:nowrap;color:#55725f}
.celenes-window-nav i{font-size:17px;color:#8cbf4c}
.celenes-interface{padding:16px 18px}
.celenes-greeting{font:800 24px/1.1 var(--display);color:#213f2e}
.celenes-greeting span{color:#91c543}
.celenes-greeting small{display:block;margin-top:6px;font:700 11px var(--body);color:#5f826b}
.celenes-options{display:flex;gap:7px;margin-top:17px;padding-right:16px}
.celenes-options>div{flex:1;border:1px solid #c5debb;border-radius:9px;background:#f3ffed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px 3px;font-weight:800;font-size:9px;color:#2c5038;min-width:0}
.celenes-options span{font:700 25px/1.2 var(--hand);color:#67ae55}
.celenes-phone{position:absolute;z-index:2;width:108px;height:181px;border:5px solid #264634;border-radius:24px;background:#f4fff0;right:25px;bottom:33px;transform:rotate(8deg);box-shadow:5px 9px 0 #35694530;display:flex;flex-direction:column;align-items:center;padding:13px 7px 7px;text-align:center}
.phone-speaker{height:5px;width:30px;background:#214433;border-radius:5px;margin-bottom:7px}
.celenes-phone>span:nth-child(2){font-size:30px;color:#7fb748;line-height:1.4}
.celenes-phone strong{font:800 14px/1.1 var(--display)}
.celenes-phone small{font-size:9px;line-height:1.3}
.celenes-phone .phone-line{display:block;height:6px;border-radius:6px;background:#daedce;width:72%;margin:9px auto 0}
.celenes-phone .phone-line.short{width:52%}
.reference-content{padding:28px 28px 30px}
.reference-meta{display:flex;justify-content:space-between;gap:10px;color:#337451;font-size:11px;font-weight:900;letter-spacing:1px}
.reference-content h3{font-size:clamp(27px,3vw,36px);margin:13px 0 14px;line-height:1.1;letter-spacing:-1px}
.project-domain{font-family:var(--hand);font-size:23px;letter-spacing:0;font-weight:700;color:#47885d;white-space:nowrap}
.reference-content p{font-size:16px;line-height:1.75;color:#3e614b;min-height:205px}
.reference-content p strong{color:#22472e}
.reference-link{display:inline-flex;gap:16px;align-items:center;margin-top:18px;font-size:15px;font-weight:900;background:#c4ea63;padding:11px 17px;border:2px solid #234933;border-radius:12px 16px 12px 17px;box-shadow:3px 4px 0 #234933}
.reference-link:hover{background:#b9df50;transform:translate(2px,2px);box-shadow:1px 2px 0 #234933}
.reference-link span{font-size:20px;line-height:1}
.reference-disclaimer{font-size:12px;color:#5a7863;margin-top:20px;line-height:1.6}

/* Four matching illustrated team portraits */
.team-section{background:#fff;overflow:hidden}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.team-card{border:2px solid #284635;border-radius:18px 25px 16px 21px / 20px 14px 22px 16px;background:#fff;box-shadow:5px 6px 0 #74b47b29;overflow:hidden;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
.team-card:nth-child(2){transform:rotate(.6deg)}
.team-card:nth-child(3){transform:rotate(-.55deg)}
.team-card:hover{transform:translateY(-4px) rotate(0deg);box-shadow:6px 10px 0 #74b47b38}
.team-photo-wrap{position:relative;overflow:hidden;aspect-ratio:4/4.55;background:#e9fff1;border-bottom:2px solid #284635}
.team-photo-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 21%;filter:saturate(1.04)}
.team-sketch-mark{position:absolute;right:8px;top:9px;background:#c4ea63;border:1.5px solid #29523a;border-radius:8px 13px 8px 13px;padding:3px 9px;font:700 20px var(--hand);transform:rotate(8deg)}
.team-person{padding:18px 15px 22px}
.team-person h3{font-size:26px;letter-spacing:-.6px;line-height:1.15}
.team-role{font-size:13px!important;font-weight:900;color:#218463!important;line-height:1.4;margin:10px 0 14px;min-height:39px}
.team-role span{color:#82ac59;padding:0 2px}
.team-note{font-size:14px;color:#48624e;line-height:1.65}
.team-footnote{font-size:13px;color:#57765e;margin-top:24px;line-height:1.6}
.team-footnote span{font:700 24px var(--hand);color:#237f59}

@media(max-width:1100px){
 .desktop-nav{gap:12px}.desktop-nav a{font-size:12px}.nav-inner{gap:13px}
 .reference-content p{min-height:0}
 .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .team-photo-wrap{aspect-ratio:4/3.65}
 .team-photo-wrap img{object-position:center 18%}
 .team-role{min-height:0}
}
@media(max-width:880px){
 .reference-heading,.team-intro{display:block}
 .reference-heading>p,.team-intro>p{max-width:700px;margin-top:17px}
 .hero-grid{padding-top:26px}
 .desktop-nav{display:none}
}
@media(max-width:700px){
 .reference-grid{grid-template-columns:1fr;gap:22px}
 .reference-art{height:300px}
 .team-grid{gap:12px}
 .team-photo-wrap{aspect-ratio:4/4.8}
 .team-photo-wrap img{object-position:center 20%}
 .team-person h3{font-size:23px}
 .team-role{font-size:12px!important}
 .team-note{font-size:13px}
}
@media(max-width:650px){
 .hero-grid{padding-top:15px}
 .hero h1{margin:0 0 21px}
 .section-kicker{color:#177e5f}
 .reference-heading>p,.team-intro>p{font-size:16px}
 .reference-art{height:275px;padding:25px 15px}
 .reference-content{padding:24px 19px 27px}
 .reference-content h3{font-size:30px}
 .reference-content p{font-size:16px;min-height:0}
 .stellar-window{width:96%}
 .stellar-script{font-size:22px}
 .celenes-window{height:210px}
 .celenes-interface{padding:13px 12px}
 .celenes-phone{right:8px;bottom:37px;width:84px;height:151px;padding:10px 4px}
 .celenes-phone strong{font-size:11px}
 .celenes-phone small{font-size:8px}
 .celenes-options{padding-right:45px}
 .celenes-options>div{font-size:8px}
 .reference-meta{font-size:10px}
 .project-domain{font-size:20px}
 .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .team-photo-wrap{aspect-ratio:4/5}
 .team-person{padding:12px 11px 17px}
 .team-person h3{font-size:22px}
 .team-role{font-size:11.5px!important;line-height:1.4}
 .team-note{font-size:12px;line-height:1.6}
 .team-sketch-mark{font-size:15px;padding:2px 7px}
 .team-footnote{font-size:12px}
 .reference-disclaimer{font-size:12px}
}
@media(max-width:370px){
 .team-grid{grid-template-columns:1fr;gap:20px}
 .team-photo-wrap{aspect-ratio:4/3.7}
 .team-person{padding:18px}
 .team-person h3{font-size:25px}
 .team-role{font-size:13px!important}
 .team-note{font-size:14px}
 .stellar-top{padding-inline:6px;font-size:7px}
 .stellar-script{font-size:21px}
 .reference-graphic-label{font-size:9px}
 .reference-art{height:260px}
}
@media(prefers-reduced-motion:reduce){.reference-card,.team-card,.reference-link{transition:none!important}}


/* Masaport: the third real-world product, presented as a hand-drawn feature card. */
.ref-masaport{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
.ref-masaport .reference-art{height:auto;min-height:430px;border-right:2px solid #264434}
.ref-masaport .reference-content{padding:36px clamp(24px,3vw,46px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.ref-masaport .reference-content p{min-height:0;margin:0 0 12px}
.ref-masaport .reference-content .reference-link{margin-top:20px}
.masaport-art{background:radial-gradient(circle at 75% 15%,#c4ea63bf,transparent 47%),linear-gradient(120deg,#d8ffed,#b4f0d2);overflow:hidden}
.masaport-visual{position:relative;width:min(100%,540px);height:330px;margin-top:20px}
.masaport-phone{position:absolute;left:11%;top:0;z-index:2;width:185px;height:320px;border:5px solid #173e30;border-radius:28px;background:#fff;box-shadow:8px 11px 0 #173e3029;transform:rotate(-8deg);padding:12px 9px;overflow:hidden}
.masaport-speaker{height:4px;width:42px;background:#163e2c;border-radius:8px;margin:-4px auto 11px}
.masaport-screen-head{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid #dcecdf;padding-bottom:10px}
.masaport-screen-head strong{font:900 23px/1 var(--display);letter-spacing:-1.5px;color:#153e2b}
.masaport-screen-head strong span{color:#3baf76}
.masaport-screen-head small{font-size:9px;color:#667f6c;font-weight:700}
.masaport-menu-head{display:flex;justify-content:space-between;align-items:center;font:900 15px/1.2 var(--display);margin:12px 0 11px}
.masaport-menu-head span{font-size:21px}
.masaport-item{display:flex;align-items:center;gap:8px;padding:7px 5px;border:1px solid #e0ede3;border-radius:9px;margin-bottom:7px}
.masaport-food-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#e5f8d6;font-size:18px}
.masaport-item>div{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.masaport-item strong{font-size:11px;color:#173a2c}.masaport-item small{font-size:9px;color:#79917b}
.masaport-item>span:last-child{font-size:17px;color:#278c5e}
.masaport-order-btn{display:flex;justify-content:space-between;background:#c4ea63;color:#19412b;border:1px solid #23553b;border-radius:7px;padding:10px 8px;font-size:11px;font-weight:900;margin-top:12px}
.masaport-status-card{position:absolute;z-index:3;right:2%;top:75px;width:247px;background:#fff;border:2px solid #234835;box-shadow:5px 7px 0 #1b553327;border-radius:12px 17px 13px 18px;padding:15px 16px;transform:rotate(5deg)}
.masaport-status-top{display:flex;justify-content:space-between;gap:7px;font:900 9px/1.4 var(--body);letter-spacing:.5px;color:#456b55}
.masaport-status-dot{color:#29875b;white-space:nowrap;letter-spacing:0}
.masaport-status-card>strong{display:block;margin:12px 0;font:900 16px/1.4 var(--display);color:#19462d}
.masaport-status-track{display:flex;justify-content:space-between;position:relative;margin:20px 10px 11px}
.masaport-status-track::before{content:"";height:3px;background:linear-gradient(to right,#61b77b 50%,#d8e5d9 50%);position:absolute;left:0;right:0;top:8px}
.masaport-status-track i{width:19px;height:19px;border-radius:50%;z-index:1;background:#fff;border:3px solid #c2d6c7}
.masaport-status-track i.done{background:#65c08d;border-color:#4ca673}.masaport-status-track i.current{background:#c4ea63;border-color:#2f9c68}
.masaport-status-words{display:flex;justify-content:space-between;gap:4px;font-size:9px;font-weight:800;color:#315441}
.masaport-status-card>small{display:block;margin-top:11px;color:#658171;font-size:10px;line-height:1.5}
.masaport-qr-drawing{position:absolute;bottom:-3px;right:14%;z-index:4;background:#fff;border:2px solid #264a32;border-radius:13px;box-shadow:4px 5px 0 #285e3933;transform:rotate(13deg);width:95px;padding:6px;display:flex;flex-direction:column;align-items:center}
.masaport-qr-drawing svg{width:77px;max-width:100%;height:auto}
.masaport-qr-drawing span{font-size:9px;letter-spacing:1px;font-weight:900;color:#28583c}
.ref-note-masaport{color:#205f43;right:21px;bottom:8px;font-size:20px;z-index:5}
@media(max-width:980px){
 .ref-masaport{display:flex;flex-direction:column}
 .ref-masaport .reference-art{height:350px;min-height:0;border-right:0;border-bottom:2px solid #264434}
 .ref-masaport .reference-content{padding:28px}
 .masaport-visual{width:min(100%,550px);height:300px}
 .masaport-phone{left:17%;top:-14px}
 .masaport-status-card{right:10%;top:50px}
 .masaport-qr-drawing{bottom:3px;right:18%}
}
@media(max-width:650px){
 .ref-masaport .reference-art{height:320px;min-height:0;padding:24px 12px}
 .ref-masaport .reference-content{padding:24px 19px 28px}
 .masaport-visual{width:100%;height:285px;margin-top:18px}
 .masaport-phone{left:5%;top:0;width:152px;height:269px;padding:9px 6px;border-width:4px;border-radius:22px}
 .masaport-screen-head strong{font-size:19px}.masaport-screen-head small{font-size:8px}
 .masaport-menu-head{font-size:12px;margin:9px 0}.masaport-item{padding:5px 3px;gap:5px;margin-bottom:5px}.masaport-food-icon{width:25px;height:25px;font-size:14px}
 .masaport-item strong{font-size:10px}.masaport-item small{font-size:8px}.masaport-order-btn{font-size:9px;padding:8px 6px;margin-top:8px}
 .masaport-status-card{width:min(51%,210px);top:70px;right:0;padding:11px 9px;transform:rotate(4deg)}
 .masaport-status-card>strong{font-size:12px;margin:9px 0}.masaport-status-top{font-size:8px}.masaport-status-words{font-size:7px}.masaport-status-card>small{font-size:8px}
 .masaport-status-track{margin:12px 4px 8px}
 .masaport-qr-drawing{width:66px;right:4%;bottom:4px}.masaport-qr-drawing svg{width:49px}.masaport-qr-drawing span{font-size:7px}
 .ref-note-masaport{font-size:17px;right:15px;bottom:3px}
}
@media(max-width:370px){.masaport-phone{left:2%}.masaport-status-card{right:0;width:52%}.masaport-qr-drawing{right:7%;bottom:0}.ref-note-masaport{font-size:16px}}



/* JARVIX Software | Digital atelier v12: restrained, confident and human */
:root{
 --ink:#172433;--ink-soft:#3e4c5d;--muted:#5e6b7b;--paper:#fff;
 --cream:#f3f6fa;--blue:#2f57de;--cyan:#08a9ce;--ice:#eaf6fb;
 --yellow:#c4ea63;--coral:#ef7569;--lav:#e9efff;--line:#172433;
 --body:'Nunito','Segoe UI',sans-serif;--display:'Outfit','Segoe UI',sans-serif;
 --hand:'Kalam',cursive;
}
html{scroll-padding-top:90px}
body{background:#fff;color:var(--ink);font-size:17px;line-height:1.75}
::selection{background:#a0def4;color:#122136}
.paper-bg{background:#fff;background-image:none}
.container{width:min(100% - 96px,1240px)}
.section{padding:110px 0}
.section h2{font-size:clamp(39px,4.5vw,64px);line-height:1.12;font-weight:800;letter-spacing:-2.1px}
.section h2 em{color:var(--blue);font-style:normal}
.section-kicker{font-size:12px;color:var(--blue);font-weight:900;letter-spacing:1.55px;margin-bottom:22px}
.section-intro>p,.skills-heading>p,.idea-heading p,.team-intro>p,.references-intro>p{color:var(--muted)}
.section-intro h2,.skills-heading h2,.idea-heading h2{margin-bottom:20px}
/* Brand: established reactor icon, new clean typographic treatment, no invented J emblem */
.site-header,.site-header.scrolled{background:#fff;border-bottom:1px solid #dfe5ec;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-inner{min-height:86px}.desktop-nav{gap:27px}.desktop-nav a{font-size:14px;color:var(--ink-soft)}
.desktop-nav a:hover{color:#1e4dca}.desktop-nav a::after{background:#c7ebff;height:5px}
.brand{gap:10px}.brand-core{width:46px!important;height:46px!important;object-fit:contain;flex:0 0 auto}
.brand-wordmark{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.brand-word{font:900 30px/.93 var(--display);letter-spacing:-1.75px;color:#142436}
.brand-word .brand-x{color:#08aed3}.brand-sub{font:800 9px/1.2 var(--body);letter-spacing:3.3px;color:#465970;margin-top:5px;margin-left:2px}
.header-actions .button-nav{border-radius:11px;color:#fff;background:#152b40;border:1.5px solid #152b40;box-shadow:none;font-size:13px;padding:12px 18px}
.header-actions .button-nav:hover{background:#2f57de;border-color:#2f57de;box-shadow:none}
.menu-toggle{background:white}.mobile-menu{background:#fff}
/* Palette discipline: white / cool grey / one midnight statement. Never charity green backgrounds. */
.hero{background:#fff!important}
.ticker{background:#152739!important;border:0;transform:none;padding:15px 0}
.ticker-track>span{color:#f6fbff;font-size:13px;letter-spacing:1.2px}
.ticker-track b{color:#60d8f2;font-size:22px}
.about{background:#f3f6fa!important}
.examples{background:#fff!important}
.skills{background:#f1f5f9!important}
.idea-gallery{background:#fff!important}
.real-work{background:#eef3f9!important}
.philosophy{background:#152739!important;color:#fff}
.team-section{background:#fff!important}
.process{background:#f1f5f9!important}
.contact{background:#fff!important;color:#172433}
.footer{background:#122438!important;color:#f5f8fb}
/* Hero: restrained artwork, type-led, fewer fake scraps of paper. */
.hero-grid{min-height:670px;padding-top:64px;padding-bottom:60px;grid-template-columns:1.07fr .93fr;gap:4%}
.hero h1{font-size:clamp(45px,4.9vw,77px);line-height:1.08;letter-spacing:-3.2px;font-weight:800;max-width:700px;margin:0 0 29px}
.headline-mark::before{background:#bceffd;height:30%;bottom:7%;border-radius:0;transform:rotate(-1deg)}
.cliche{margin:0 0 18px;display:flex;align-items:center;gap:14px}
.crossed{display:inline-block;color:#172433;background:#eaf3ff;border:1px solid #cbdcf0;font-size:12px;font-weight:900;text-decoration:none;opacity:1;letter-spacing:.4px;padding:9px 13px;border-radius:6px}
.cliche-note{font-size:29px;color:#2f57de;transform:rotate(-6deg)}.cliche-note svg{stroke:#2f57de}
.hero-text{font-size:18px;line-height:1.75;max-width:570px;color:#46566a}
.hero-actions{gap:27px;margin-top:28px}.hero-bottom-note{font-size:22px;color:#506078}
.button{border:1.6px solid #1d2c3c;border-radius:9px 12px 8px 11px;background:#fff;box-shadow:3px 4px 0 #1c2b3c;transition:transform .2s,box-shadow .2s}
.button-primary{background:#2f57de;color:#fff;border-color:#2f57de;box-shadow:3px 4px 0 #182c48}
.button-primary:hover{background:#2447c3;transform:translate(2px,2px);box-shadow:1px 2px 0 #182c48}
.sketch-link{color:#25384a;border-bottom-color:#79d8ee}
.hero-art{height:540px}
.art-sheet{inset:25px 14px 25px 9px;background:#edf2f7;border:1.5px solid #cbd5e1;border-radius:22px;box-shadow:15px 15px 0 #d9e4ef;transform:rotate(2.3deg)}
.art-sheet::before{border-color:#7e9ca950;border-radius:16px}
.paper-tape,.sticker-yellow,.art-scribble{display:none}
.art-handwriting{font-size:34px;color:#314a60;top:29px;left:28px}
.drawn-arrow{stroke:#2598c8;top:91px;left:120px}
.art-reactor{top:113px;width:245px}.reactor-sketch-ring{border:1.5px dashed #87acbf}
.art-reactor::after{background:#d8f6ff;opacity:.52;filter:blur(13px)}
.art-reactor img{filter:none;animation:reactor-spin 27s linear infinite}
.reactor-caption{top:373px;color:#315976}
.art-list{background:#fff;right:-14px;bottom:34px;border:1px solid #bfced9;box-shadow:4px 5px 0 #98aebc30;padding:13px 17px;transform:rotate(-5deg)}
.art-list>span{font-size:26px}.art-list p{font-size:12px}.art-list b{color:#2e77be}
.sticker-blue{background:#d9f3fc;border:1px solid #afdae9;color:#1d3c59;box-shadow:none;left:-20px;bottom:52px;font-size:21px;transform:rotate(-5deg)}
.art-index{color:#708092;font-size:10px}.hero-end{border-top-color:#d8e0e9;color:#6d7b8d}.hero-end a{color:#284bc4}
/* Editorial about: stronger line hierarchy */
.about-layout{gap:6%}.about-copy>p,.about-copy p{font-size:18px;line-height:1.85;color:#425366}
.about-postit{background:#e4eeff!important;border:1px solid #cad7e7;box-shadow:none;transform:rotate(-1deg);color:#163653}
.aside-sun svg{stroke:#2f57de}.hand-side{color:#516e86}
/* Honest example cards, rather than saturated childlike panels */
.example-grid{gap:22px}.example-card,.example-card.restaurant,.example-card.ecommerce{background:#fff;border:1.5px solid #d4dfeb;border-radius:18px;box-shadow:0 14px 32px #1e365009;padding:34px;transform:none}
.example-stamp{color:#2f57de;font-size:12px}.example-drawing svg{stroke:#1b3b58}
.example-pin,.ecommerce .example-pin{background:#d5edff;color:#144b89}
.example-card h3{font-size:26px;color:#172433}.example-card p{font-size:16.5px;color:#4d5a68}
.hand-foot{color:#2563a4}
.examples-end span{color:#325bc6}
/* Services grid: crisp software studio cards */
.skills-heading .hand-side{color:#2d76a6}.skill-grid{gap:16px}
.skill-card,.skill-card:nth-child(n){background:#fff;border:1.5px solid #d9e2eb;border-radius:15px;box-shadow:none;transform:none;padding:29px;min-height:280px}
.skill-card:hover{border-color:#8bb9dc;box-shadow:0 15px 32px #284f8513;transform:translateY(-3px)}
.skill-icon,.skill-card:nth-child(3n+2) .skill-icon,.skill-card:nth-child(3n) .skill-icon{background:#e8f2fd;border-radius:13px}
.skill-icon svg{stroke:#254b74}.skill-index{color:#7890a7}
.skill-card h3{color:#172433}.skill-card p{color:#536174}.skill-link{color:#2f57de}
.skills-small-note{color:#647486}
/* Idea gallery visual language: software case studies without colored blobs */
.idea-card{background:#fff;border:1px solid #d8e1ed;border-radius:17px;box-shadow:none}
.idea-card:hover{box-shadow:0 12px 30px #20345015}
.idea-visual{background:#eef4fa!important}
.idea-text{color:#172433}.idea-text p{color:#536175}
.filter-tab{background:#fff;border-color:#bdcadd;color:#26435d}
.filter-tab.active,.filter-tab[aria-pressed='true']{background:#172b44;color:#fff;border-color:#172b44}
/* Actual references are the hero of the site */
.real-work .section-kicker{color:#2b56d1}
.reference-card,.reference-card:nth-child(n){background:#fff;border:1.5px solid #d4dfec;box-shadow:0 12px 35px #253f5b10;border-radius:18px;transform:none}
.reference-card:hover{transform:translateY(-3px);box-shadow:0 20px 45px #223e621a}
.reference-art{height:330px;background:#e8eff6!important}
.stellar-art,.celenes-art,.masaport-art{background:#e8eff6!important;background-image:none!important}
.reference-content{color:#172433}.reference-content p{color:#536074}
.reference-link{color:#234cca}.reference-meta{color:#51657f}
/* Props & mockups stay, but overall card hue is blue-grey */
.stellar-content,.celenes-content{background:#fff}
.reference-disclaimer{color:#607187}
/* Strong visual punctuation: dark one-off statement with intact reactor */
.philosophy h2,.philosophy h2 em{color:#fff}.philosophy h2 em{color:#75ddf6}
.philosophy .section-kicker{color:#7fdcf5}
.philosophy-copy>p,.philosophy-copy p{color:#d4e3ef}
.philosophy-copy p strong{color:#fff}.philosophy-underlined{color:#c6effc}
.philosophy-illustration .hand-side{color:#b9d9ee}
.philosophy-outline{border-color:#5189a8}.philosophy-illustration img{filter:none}
/* Human faces are stronger evidence than decorative illustrations */
.team-grid{gap:20px}.team-card{background:#fff;border:1px solid #d5dfeb;border-radius:18px;box-shadow:none;transform:none}
.team-card:hover{box-shadow:0 12px 33px #16364f15;transform:translateY(-3px)}
.team-photo-wrap{background:#eaf2f8;border-bottom:1px solid #d4e0e9}
.team-person{color:#172433}.team-role{color:#2552b0}.team-note{color:#5b6d7c}
.team-sketch-mark{color:#2f57de}.team-footnote{color:#657389}
/* Process: numbered steps and plain typography */
.process-card,.process-card:nth-child(n){background:#fff;border:1px solid #d5e0ec;box-shadow:none;border-radius:14px;transform:none}
.process-card>span:first-child,.process-card:nth-child(n)>span:first-child{color:#2f57de}
.process-card p{color:#526174}.process-doodle{color:#315fad}
/* Contact: light page, confident navy card & white writing paper */
.contact .section-kicker{color:#2f57de}.contact-copy>p{color:#526275}
.contact-small span{color:#2f57de}.contact-domain{color:#2f57de}
.contact-paper{background:#f3f7fc;border:1px solid #d1dce9;box-shadow:8px 8px 0 #c3d8ee62;transform:rotate(-.6deg);border-radius:17px}
.contact-tape{display:none}.form-handwriting{color:#2f57de}
.contact-paper label{color:#293a4f}
.contact-paper input,.contact-paper select,.contact-paper textarea{background:#fff;border:1px solid #bac9db;border-radius:9px;color:#1b2c42}
.contact-paper input:focus,.contact-paper select:focus,.contact-paper textarea:focus{outline:2px solid #4d87ed;outline-offset:2px;box-shadow:none}
.form-submit{color:#fff;background:#2f57de;border-color:#2f57de}
/* Footer anchors the whole experience */
.footer{border-top:0}.footer-top p,.footer-nav a{color:#dae3ef}
.footer-nav a:hover{color:#85def7}
.footer .brand-word{color:#fff}.footer .brand-sub{color:#bdcfdf}
.footer-word{color:#eaf2fb}.footer-word span{color:#67d5f4}.footer-bottom{border-top-color:#ffffff27;color:#c5d3e2}
.footer-bottom a{color:#fff}
/* Responsive details */
@media(max-width:1120px){
 .container{width:min(100% - 60px,1240px)}
 .hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(44px,5vw,64px)}
 .desktop-nav{gap:16px}.desktop-nav a{font-size:13px}
}
@media(max-width:900px){
 .hero-grid{grid-template-columns:1fr;min-height:0;gap:12px;padding:65px 0 30px}
 .hero-copy{max-width:700px}.hero h1{font-size:clamp(48px,7vw,68px)}
 .hero-art{height:500px;max-width:630px;width:100%;margin:0 auto}
 .art-sheet{inset:30px 40px 20px 40px}
}
@media(max-width:650px){
 .container{width:calc(100% - 38px)}.section{padding:76px 0}
 .nav-inner{min-height:72px}.brand-core{width:37px!important;height:37px!important}
 .brand-word{font-size:23px;letter-spacing:-1.2px}.brand-sub{font-size:7px;letter-spacing:2.6px}
 .hero-grid{padding:49px 0 17px}.hero h1{font-size:clamp(39px,9.4vw,53px);letter-spacing:-1.7px;line-height:1.12}
 .crossed{font-size:11px;padding:8px 10px}.cliche-note{font-size:28px}
 .hero-text{font-size:16.5px}.hero-bottom-note{font-size:20px}
 .hero-art{height:410px}.art-sheet{inset:22px 12px 18px 10px}
 .art-handwriting{font-size:28px;top:25px;left:20px}.drawn-arrow{left:100px;top:78px}
 .art-reactor{width:195px;top:100px}.reactor-caption{top:308px;left:20%;font-size:8px}
 .art-list{right:-5px;bottom:18px;padding:9px 12px;min-width:138px}.art-list>span{font-size:21px}
 .sticker-blue{left:-3px;bottom:46px;padding:9px 12px;font-size:17px}
 .section h2{font-size:clamp(34px,8.6vw,47px);letter-spacing:-1.2px}
 .about-copy p,.about-copy>p{font-size:16.5px}
 .example-card{padding:25px}.example-card h3{font-size:24px}.example-card p{font-size:16px}
 .skill-card{min-height:0;padding:26px}
 .reference-art{height:265px}.team-grid{gap:13px}
 .contact-paper{transform:none;box-shadow:none}
 .footer .brand-word{font-size:28px}
}
@media(max-width:375px){
 .brand-core{width:32px!important;height:32px!important}.brand-word{font-size:21px}
 .hero h1{font-size:36px}.hero-art{height:380px}.art-reactor{width:176px;top:92px}
 .reactor-caption{top:285px;left:17%}.art-handwriting{font-size:25px}
 .art-list{bottom:16px}.sticker-blue{bottom:32px}
}
@media(prefers-reduced-motion:reduce){.art-reactor img{animation:none!important}}

/* Final UI consistency refinements */
.reference-link{background:#2f57de!important;color:#fff!important;border-color:#2f57de!important;box-shadow:3px 4px 0 #1c2a44!important;text-decoration:none}
.reference-link:hover{background:#2345bc!important;box-shadow:1px 2px 0 #1c2a44!important}
.reference-content .project-domain{color:#2c68a9!important}
.reference-card .reference-meta{color:#496487}
.reference-art .ref-hand-note,.ref-hand-note{color:#2b649a!important}
.filter-tab:hover:not(.active){background:#e5effc;color:#172433}
.ticker-track b{color:#8adeef!important}
.section-aside .hand-side,.hand-foot,.process-doodle{color:#2d6da5}
.contact-paper .form-submit{background:#2f57de!important;color:#fff!important;border-color:#2f57de!important}
footer .brand .brand-core{width:50px!important;height:50px!important}
@media(max-width:650px){footer .brand .brand-core{width:38px!important;height:38px!important}}

/* JARVIX supplied transparent wordmark */
.brand.brand-image{display:inline-flex;align-items:center;gap:0;line-height:1;flex-shrink:0}
.brand.brand-image img{display:block;width:clamp(142px,16vw,202px);height:auto;max-height:66px;object-fit:contain}
.footer .brand.brand-image img{width:202px}
@media(max-width:420px){.brand.brand-image img{width:145px}.footer .brand.brand-image img{width:185px}}


/* JIX / the friendly JARVIX mascot. No heavy filters, canvas, or dependencies. */
.jix-dock{position:fixed;z-index:95;left:4px;bottom:8px;width:132px;height:152px;pointer-events:none;isolation:isolate}
.jix-dock button{font:inherit}
.jix-character{position:absolute;left:0;bottom:0;width:128px;height:148px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;outline-offset:3px;transform:rotate(0);transition:transform .32s ease;touch-action:manipulation}
.jix-character svg{display:block;width:100%;height:100%;overflow:visible}
.jix-character:hover{transform:rotate(-5deg) translateY(-3px)}
.jix-character:focus-visible,.jix-minimize:focus-visible,.jix-restore:focus-visible,.jix-bubble-close:focus-visible{outline:3px solid #008bb6;outline-offset:3px;border-radius:10px}
.jix-robot{transform-origin:90px 165px;animation:jix-bob 4.4s ease-in-out infinite}
.jix-eyes{transform-origin:90px 80px;animation:jix-blink 5.7s ease-in-out infinite}
.jix-arm-right{transform-origin:132px 130px;transition:transform .3s ease}
.jix-character:hover .jix-arm-right,.jix-dock.is-waving .jix-arm-right{animation:jix-wave .7s ease-in-out 2}
.jix-dock.is-looking-up .jix-character{transform:rotate(-7deg)}
.jix-dock.is-looking-down .jix-character{transform:rotate(5deg)}
.jix-dock.is-waving .jix-character{transform:translateY(-7px) rotate(-3deg)}
.jix-bubble{position:absolute;left:108px;bottom:103px;display:flex;align-items:flex-start;gap:7px;width:218px;max-width:calc(100vw - 160px);padding:12px 12px 12px 15px;border:2px solid #193548;border-radius:18px 18px 18px 5px;background:#fff;box-shadow:4px 5px 0 #b4eaf5;color:#193548;font-family:Nunito,system-ui,sans-serif;font-size:14px;font-weight:800;line-height:1.35;pointer-events:auto;animation:jix-pop .2s ease-out}
.jix-bubble::after{content:"";position:absolute;bottom:-11px;left:13px;width:15px;height:15px;background:#fff;border-right:2px solid #193548;border-bottom:2px solid #193548;transform:rotate(45deg)}
.jix-bubble-text{flex:1;min-width:0}
.jix-bubble-close{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;border:0;background:transparent;color:#5e7786;font-size:21px;line-height:1;cursor:pointer;pointer-events:auto}
.jix-minimize{position:absolute;left:106px;bottom:10px;width:25px;height:25px;border:1.5px solid #b5d7e2;border-radius:50%;background:#fff;color:#27445a;font-size:17px;line-height:1;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px #173a4b1a}
.jix-restore{position:absolute;left:0;bottom:0;border:2px solid #193548;border-radius:20px;background:#e2faff;color:#193548;font-size:13px;font-weight:900;padding:8px 13px;cursor:pointer;pointer-events:auto;box-shadow:3px 4px 0 #b4eaf5}
.jix-bubble[hidden],.jix-restore[hidden]{display:none!important}
.jix-dock.is-minimized{width:90px;height:38px}
.jix-dock.is-minimized .jix-character,.jix-dock.is-minimized .jix-minimize,.jix-dock.is-minimized .jix-bubble{display:none!important}
body.menu-open .jix-dock{opacity:0;pointer-events:none}
@keyframes jix-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes jix-blink{0%,44%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes jix-wave{0%,100%{transform:rotate(0)}40%{transform:rotate(-18deg)}75%{transform:rotate(9deg)}}
@keyframes jix-pop{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:650px){
 .jix-dock{left:-4px;bottom:5px;width:98px;height:119px}
 .jix-character{width:98px;height:114px}
 .jix-minimize{left:78px;bottom:4px;width:22px;height:22px;font-size:15px}
 .jix-bubble{left:84px;bottom:77px;width:196px;max-width:calc(100vw - 110px);padding:10px 10px 10px 12px;font-size:12.5px}
 .jix-bubble::after{left:9px}
}
@media(max-width:360px){.jix-dock{left:-5px}.jix-bubble{left:84px;max-width:calc(100vw - 96px)}}
@media(prefers-reduced-motion:reduce){
 .jix-robot,.jix-eyes,.jix-dock.is-waving .jix-arm-right,.jix-character:hover .jix-arm-right,.jix-bubble{animation:none!important}
 .jix-character,.jix-arm-right{transition:none!important}
}

/* 8 dedicated service pages */
.skill-card{display:flex;flex-direction:column;text-decoration:none}
.skill-card .skill-link{margin-top:auto;display:inline-block;padding-top:18px;font-weight:850}
.skill-card:focus-visible{outline:3px solid #14accf;outline-offset:5px}
.skills-price-help{font:800 clamp(15px,2vw,18px)/1.55 Nunito,system-ui,sans-serif;color:#1c3346;margin:25px 0 0}
.skills-price-help a{color:#1457ae;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Studio-grade, hand-drawn project scope section */
.deliverables{background:#f2f7fa!important;border-block:1px solid #d8e3e9}
.deliverables .section-intro{max-width:970px}.deliverables .section-intro p{max-width:790px;font-size:17px;color:#526877;line-height:1.8}
.delivery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:35px}
.delivery-item{border:1.5px solid #bfd0db;background:#fff;border-radius:15px 17px 13px 18px;padding:28px;box-shadow:5px 6px 0 #dce7ed}
.delivery-item>span{font:800 11px Nunito,sans-serif;letter-spacing:1.5px;color:#188aa8}
.delivery-item h3{font:850 23px/1.25 Outfit,sans-serif;margin:15px 0 12px;color:#172f40}
.delivery-item p{font:600 15px/1.75 Nunito,sans-serif;color:#526475;margin:0}
.delivery-footnote{margin-top:28px;font:700 21px Kalam,cursive;color:#246577}
@media(max-width:900px){.delivery-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.deliverables .section-intro p{font-size:16px}.delivery-grid{grid-template-columns:1fr;gap:15px}.delivery-item{padding:22px}.delivery-footnote{font-size:18px}}


/* Contact form: mobile-friendly budget, telephone and privacy fields */
.contact-paper .contact-consent{display:flex;flex-direction:row;align-items:flex-start;gap:11px;font-size:13px;line-height:1.55;font-weight:600;cursor:pointer}
.contact-paper .contact-consent input{width:18px;height:18px;min-height:18px;max-width:18px;flex:0 0 18px;margin:3px 0 0;accent-color:#2675cf}
.contact-paper .contact-consent span{flex:1}
.contact-paper .form-submit:disabled{opacity:.65;cursor:wait;transform:none}
.jarvix-turnstile{max-width:100%;min-height:65px;overflow:hidden}
.contact-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;height:1px!important;width:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
@media(max-width:650px){.contact-paper .contact-consent{font-size:12px}.contact-paper select,.contact-paper input{font-size:16px!important}}

/* Project story links on the homepage */
.reference-content .reference-detail-link{display:inline-flex;align-items:center;gap:10px;background:#17394b;color:#fff;font-weight:900;border-radius:999px;padding:12px 17px;text-decoration:none;font-size:13px;margin:16px 12px 8px 0;transition:transform .2s ease,background-color .2s ease}
.reference-content .reference-detail-link:hover{background:#126b85;transform:translateY(-2px)}
.reference-content .reference-link{display:inline-flex;align-items:center;gap:5px;padding:10px 3px;font-weight:800}
@media(max-width:650px){.reference-content .reference-detail-link{margin-top:13px;font-size:12px}.reference-content .reference-link{font-size:12px}}