@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,500;1,600&display=swap');
:root{--ink:#0B1F3B;--ink-deep:#081529;--muted:#646b73;--ivory:#F8F7F2;--paper:#fffefa;--line:#deded7;--blue:#2853B1;--blue-dark:#183B8D;--lime:#A3E635;--focus:#ff9f43;--serif:'Playfair Display',Georgia,serif;--sans:'Manrope','DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--ivory);font-family:var(--sans);color:var(--ink);font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.container{width:min(calc(100% - 96px),1344px);margin-inline:auto}.skip-link{position:fixed;top:-100px;left:1rem;background:var(--ink);color:white;padding:12px 16px;z-index:100}.skip-link:focus{top:12px}.site-header{position:relative;z-index:50;border-bottom:1px solid var(--line);background:rgba(248,247,242,.97)}.nav{height:98px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:13px;flex:none}.brand-mark-img{width:67px;height:48px;display:block;flex:none;object-fit:contain}.brand-wordmark{font-size:11px;line-height:1.27;font-weight:800;letter-spacing:.12em;display:flex;flex-direction:column}.brand-wordmark small{display:block;margin-top:5px;font-size:6px;letter-spacing:.07em;font-weight:800;color:#5A687A;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:42px}.nav-links>a{font-size:13px;font-weight:800;transition:color .2s}.nav-links>a:hover{color:var(--blue)}.nav-links .nav-contact{border:1.5px solid var(--ink);padding:15px 21px;border-radius:100px;display:flex;align-items:center;gap:18px}.nav-links .nav-contact:hover{background:var(--ink);color:var(--paper)}.nav-toggle{display:none}.hero{min-height:700px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:28px;padding-top:54px;padding-bottom:70px}.hero-content{display:flex;flex-direction:column;align-items:flex-start;padding-top:59px}.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.15em;font-weight:800}.hero-eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 28px}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);display:inline-block;box-shadow:0 0 0 4px rgba(49,91,243,.12)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(64px,6.3vw,105px);line-height:1.07;font-weight:800;letter-spacing:-.092em;margin:0 0 29px;white-space:nowrap}.type-serif{font-family:var(--serif);font-style:italic;letter-spacing:-.071em;font-weight:500}.hero-world{white-space:nowrap}.period{color:var(--blue)}.hero-description{font-size:16px;line-height:1.85;max-width:558px;color:#5d656b;margin:0 0 30px}.hero-description strong{color:var(--ink);font-weight:800}.hero-description a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.hero-actions,.contact-actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;font-size:13px;font-weight:800;padding:18px 23px;border-radius:100px;transition:transform .2s,background .2s,color .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--blue);color:white}.button-primary:hover{background:var(--blue-dark)}.button-text{padding-inline:0}.button-text:hover{color:var(--blue)}.hero-bottom{margin-top:auto;padding-top:46px;font-size:10px;font-weight:800;letter-spacing:.15em;color:#81858b}.location-pin{color:var(--blue);font-size:16px;margin-right:6px}.divider-dot{margin:0 12px}.hero-art{position:relative;overflow:hidden;background:#0B1F3B;border-radius:7px;min-height:570px;color:white;isolation:isolate}.hero-art-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(to bottom,black 20%,transparent 100%)}.hero-art:before{content:'';position:absolute;inset:-100px;background:radial-gradient(circle at 52% 43%,rgba(45,97,179,.23),transparent 48%)}.art-corner{position:absolute;font-size:10px;letter-spacing:.17em;color:#b7bfce;font-weight:800}.corner-one{left:29px;top:28px}.corner-two{right:29px;top:28px}.hero-orbit{position:absolute;border:1px solid rgba(231,242,255,.14);width:440px;aspect-ratio:1;border-radius:50%;top:43%;left:50%;transform:translate(-50%,-50%)}.orbit-two{width:330px;border-style:dashed;border-color:rgba(231,242,255,.3)}.orbit-three{width:200px;border-color:rgba(225,255,122,.17)}.hero-monogram{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(82%,525px);height:auto;z-index:2;filter:drop-shadow(0 12px 24px rgba(0,0,0,.12))}.hero-mark-name{position:absolute;left:7%;right:7%;top:72%;text-align:center;color:#F8F7F2;letter-spacing:.26em;font-weight:700;font-size:clamp(11px,1.25vw,17px);z-index:2;white-space:nowrap}.art-spark{position:absolute;color:var(--lime);font-size:44px}.art-spark-one{top:23%;right:22%}.art-spark-two{bottom:24%;left:18%;font-size:17px}.art-bottom{position:absolute;bottom:28px;left:29px;right:29px;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid rgba(255,255,255,.22);padding-top:20px}.art-bottom-label{font-size:11px;line-height:1.6;font-weight:800;letter-spacing:.12em;color:#c9d0db}.art-bottom-arrow{font-size:34px;color:var(--lime);line-height:1}.ticker{background:#edf1e7;border-top:1px solid #d8dfd4;border-bottom:1px solid #d8dfd4;overflow:hidden}.ticker-inner{max-width:1344px;margin:auto;min-height:69px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 25px;white-space:nowrap}.ticker span{font-size:11px;font-weight:800;letter-spacing:.1em}.ticker b{color:var(--blue);font-size:19px}.section{padding-top:122px;padding-bottom:122px}.section-header{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:42px}.section-kicker{color:var(--blue);margin-bottom:18px}.section h2,.interests-box h2{font-size:clamp(44px,4.4vw,71px);letter-spacing:-.078em;line-height:1.17;font-weight:800;margin:0}.section-intro{max-width:330px;font-size:14px;color:var(--muted);line-height:1.9;margin:0 0 3px}.work-grid{display:grid;grid-template-columns:1.07fr .93fr;gap:20px}.work-card{min-height:650px;display:flex;flex-direction:column;border-radius:6px;overflow:hidden;position:relative}.feature-work{background:#0B1F3B;color:#fff}.studio-work{background:#dbe4fc;color:#1c2a3d}.work-card-copy{padding:41px 42px 0;z-index:1}.work-label{font-size:10px;letter-spacing:.13em;font-weight:800;display:flex;align-items:center;gap:8px}.tiny-dot{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%}.studio-work .tiny-dot{background:var(--blue)}.work-card h3{font-size:clamp(48px,4.5vw,69px);font-weight:800;letter-spacing:-.09em;line-height:1.04;margin:23px 0 20px}.highlight-dot{color:var(--lime)}.studio-work .highlight-dot{color:var(--blue)}.work-card-copy p{max-width:430px;font-size:13px;line-height:1.85;color:#d3dae4;margin-bottom:23px}.studio-work .work-card-copy p{color:#48576f}.work-link{display:inline-flex;gap:20px;align-items:center;font-size:12px;font-weight:800;border-bottom:1px solid currentColor;padding-bottom:7px;transition:gap .2s}.work-link:hover{gap:30px}.connect-visual{margin-top:auto;position:relative;min-height:300px;display:flex;align-items:flex-end;justify-content:center;padding:10px 18px 0}.network-board{width:min(420px,95%);min-height:280px;border-radius:15px 15px 0 0;background:#f2f6ff;color:#1c2c4a;transform:rotate(-6deg) translate(8px,14px);box-shadow:0 -16px 80px rgba(0,0,0,.2);padding:19px 23px}.board-top{display:flex;align-items:center;justify-content:space-between;font-size:8px;font-weight:800;letter-spacing:.1em}.board-logo{color:#264ac8;font-size:17px;display:flex;align-items:center;gap:6px}.board-logo span{font-size:8px}.board-live{color:#7891b0}.board-live i{display:inline-block;background:#14a970;width:5px;height:5px;border-radius:50%;vertical-align:middle}.board-main{display:flex;align-items:center;justify-content:center;gap:24px;padding:25px 0 25px}.signal-badge{background:#e1e9fe;border-radius:50%;height:110px;width:110px;display:grid;place-items:center;color:#315bf3}.signal-badge svg{width:54px}.board-line{flex:1;display:grid;gap:15px}.board-line span{background:#d7e1f5;height:13px;border-radius:20px;width:95%}.board-line span+span{width:57%;background:#bbcefc}.board-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.board-columns>div{height:63px;padding:11px;background:#fff;border-radius:8px;display:flex;justify-content:space-between;flex-direction:column}.board-columns span{font-size:8px;letter-spacing:.1em;font-weight:800;color:#697c95}.board-columns strong{font-size:22px;color:#315bf3;line-height:1}.network-float{position:absolute;right:13px;bottom:29px;background:var(--lime);color:#192637;font-size:8px;letter-spacing:.09em;font-weight:800;line-height:1.5;padding:13px 15px;transform:rotate(5deg);box-shadow:0 8px 30px #0002}.network-float span{float:right;margin-left:15px;font-size:26px;line-height:1}.studio-visual{flex:1;min-height:284px;position:relative;overflow:hidden}.studio-visual:before{content:'';position:absolute;width:290px;height:290px;left:50%;top:30%;transform:translate(-50%,-50%);background:#aec3f5;border-radius:50%;filter:blur(70px)}.studio-visual-ring{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);border:1px solid #7996d3;border-radius:50%;width:420px;aspect-ratio:1}.ring-two{width:330px}.ring-three{width:240px}.studio-mono{font-size:clamp(170px,20vw,295px);color:var(--blue);letter-spacing:-.16em;font-weight:800;position:absolute;left:47%;top:39%;transform:translate(-50%,-50%);line-height:1}.studio-mono span{font-size:60px;vertical-align:top;letter-spacing:0;color:#1e3f91}.studio-bottom-text{position:absolute;bottom:24px;left:42px;font-size:10px;font-weight:800;letter-spacing:.12em}.mini-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.mini-project{border:1px solid var(--line);background:#fdfcf8;min-height:218px;border-radius:6px;padding:28px;display:flex;flex-direction:column;align-items:start;justify-content:space-between}.mini-project-index{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--blue)}.mini-project h3{font-size:24px;letter-spacing:-.055em;margin-bottom:9px}.mini-project h3 span{color:var(--blue)}.mini-project p{font-size:13px;line-height:1.7;max-width:420px;color:var(--muted);margin-bottom:0}.mini-project a,.mini-project-note{font-size:10px;font-weight:800;letter-spacing:.08em}.mini-project a{text-decoration:underline;text-underline-offset:4px}.mini-project-note{color:#80868c}.philosophy-section{background:#eaece5}.principles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.principle{padding:32px;background:#fafaf6;border:1px solid #d8dcd3;min-height:340px;display:flex;flex-direction:column}.principle-num{font-size:11px;letter-spacing:.13em;font-weight:800;color:#6c7580}.principle-icon{height:95px;display:flex;align-items:center;font-size:56px;color:var(--blue);font-weight:400}.principle h3{font-size:23px;letter-spacing:-.06em;margin-bottom:13px}.principle p{font-size:13px;color:#67717a;line-height:1.8;max-width:320px;margin-bottom:0}.story-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.story-left h2{margin-bottom:70px}.story-pullquote{font-family:var(--serif);font-style:italic;font-size:25px;line-height:1.5;max-width:440px;color:var(--blue)}.story-right{padding-top:30px}.story-lead{font-size:20px;letter-spacing:-.025em;line-height:1.7;font-weight:600;margin-bottom:42px}.timeline{border-left:1px solid #cfd3cb;margin-left:5px;padding-left:28px}.timeline-item{position:relative;padding-bottom:37px}.timeline-item:last-child{padding-bottom:0}.timeline-dot{width:11px;height:11px;background:var(--blue);border:3px solid var(--ivory);box-shadow:0 0 0 1px var(--blue);border-radius:50%;position:absolute;left:-34px;top:5px}.timeline-caption{color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.15em;margin-bottom:10px}.timeline h3{font-size:21px;letter-spacing:-.055em;margin-bottom:8px}.timeline-item>p:last-child{color:var(--muted);font-size:13px;line-height:1.8;max-width:440px;margin-bottom:0}.interests-section{padding-bottom:120px}.interests-box{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;background:#e1e8f8;padding:56px 58px;border-radius:6px}.interests-box .eyebrow{color:var(--blue)}.interests-box h2{font-size:clamp(36px,3.6vw,57px)}.interest-tags{display:flex;flex-wrap:wrap;gap:12px}.interest-tags span{border:1px solid #a9bce6;border-radius:100px;padding:13px 16px;font-size:10px;letter-spacing:.07em;font-weight:800;color:#2e4a7f}.contact-section{overflow:hidden;background:var(--ink);color:white}.contact-inner{padding-top:112px;padding-bottom:120px;position:relative;isolation:isolate}.contact-eyebrow{color:#c6d4ff}.contact-eyebrow .status-dot{background:var(--lime);box-shadow:0 0 0 4px #ffffff30}.contact-inner h2{font-size:clamp(57px,7.5vw,112px);line-height:1.09;letter-spacing:-.09em;margin:20px 0 22px}.contact-inner>p:not(.eyebrow){color:#dbe3ff;font-size:16px;line-height:1.8;max-width:490px;margin-bottom:29px}.button-light{background:#f8faef;color:#1b2c50;position:relative;z-index:2}.contact-email,.contact-phone{font-size:12px;text-decoration:underline;text-underline-offset:5px;word-break:break-word}.contact-shape{font-size:520px;line-height:1;position:absolute;right:-40px;top:50%;transform:translateY(-50%) rotate(-18deg);color:rgba(255,255,255,.08);pointer-events:none;z-index:-1}.footer{background:var(--ink-deep);color:#f8f8f7}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:154px;padding-block:30px}.footer-logo{display:inline-flex;align-items:center;justify-content:center}.footer-logo-img{width:78px;height:59px;display:block;object-fit:contain}.footer-copy{display:flex;flex-direction:column;gap:8px;color:#b3bdc9;font-size:11px}.footer-links{display:flex;gap:23px;flex-wrap:wrap}.footer-links a{font-size:11px;font-weight:700;color:#d9e0e8}.footer-links a:hover{color:var(--lime)}.reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}.js .reveal:not(.is-visible){opacity:1;transform:none}.reveal.is-visible{opacity:1;transform:translateY(0)}@media(min-width:1500px){.hero h1{font-size:103px}}
@media(max-width:1150px){.container{width:min(calc(100% - 64px),1344px)}.hero{grid-template-columns:1fr .9fr;min-height:630px}.hero h1{font-size:clamp(55px,6vw,80px)}.hero-art{min-height:520px}.work-card{min-height:620px}.nav-links{gap:22px}.story-section{gap:48px}}
@media(max-width:800px){.container{width:calc(100% - 44px)}.nav{height:77px}.brand-mark-img{width:56px;height:42px}.brand-wordmark{font-size:9px}.brand-wordmark small{font-size:5.2px;letter-spacing:.04em}.nav-toggle{display:flex;width:45px;height:42px;border:1px solid var(--ink);background:transparent;border-radius:6px;align-items:center;justify-content:center;flex-direction:column;gap:7px;cursor:pointer;z-index:6}.nav-toggle span{width:19px;height:2px;background:var(--ink);transition:transform .2s}.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}.nav-links{position:absolute;top:76px;left:0;right:0;background:var(--ivory);border-bottom:1px solid var(--line);padding:15px 22px 27px;display:none;align-items:stretch;flex-direction:column;gap:0;box-shadow:0 24px 25px #12203812}.nav-links.is-open{display:flex}.nav-links>a{padding:17px 4px}.nav-links .nav-contact{justify-content:center;margin-top:10px}.hero{grid-template-columns:1fr;gap:40px;padding-top:25px;padding-bottom:54px}.hero-content{padding-top:26px}.hero h1{font-size:clamp(54px,10vw,90px)}.hero-bottom{padding-top:35px}.hero-art{min-height:420px}.hero-orbit{top:45%}.hero-monogram{width:min(79%,440px)}.hero-mark-name{top:73%;font-size:14px}.ticker-inner{overflow:auto;justify-content:flex-start;gap:25px;scrollbar-width:none}.ticker-inner::-webkit-scrollbar{display:none}.section{padding-block:80px}.section-header{align-items:start;flex-direction:column;gap:19px}.section-intro{max-width:540px}.work-grid{grid-template-columns:1fr}.work-card{min-height:590px}.work-card h3{font-size:60px}.studio-visual{min-height:270px}.principles-grid{grid-template-columns:1fr}.principle{min-height:240px}.principle-icon{height:70px}.story-section{grid-template-columns:1fr;gap:10px}.story-left h2{margin-bottom:35px}.story-pullquote{max-width:540px;margin-bottom:12px}.story-right{padding-top:10px}.interests-box{grid-template-columns:1fr;gap:32px;padding:38px}.contact-inner{padding-block:85px}.contact-shape{font-size:370px;right:-100px}.footer-inner{align-items:flex-start}.footer-links{flex-direction:column;gap:10px}}
@media(max-width:530px){.container{width:calc(100% - 36px)}.hero{gap:28px}.hero-eyebrow{font-size:9px;letter-spacing:.09em;margin-bottom:23px}.hero h1{font-size:clamp(49px,12.5vw,69px);letter-spacing:-.086em}.hero-description{font-size:14px;line-height:1.8}.hero-actions{gap:12px}.button{font-size:12px;padding:17px 19px;gap:14px}.button-text{padding-inline:0}.hero-bottom{font-size:8px;letter-spacing:.09em}.hero-art{min-height:350px}.hero-orbit{width:350px}.orbit-two{width:260px}.orbit-three{width:155px}.hero-monogram{width:84%;top:43%}.hero-mark-name{top:73%;font-size:10px;letter-spacing:.18em}.art-spark-one{top:22%;right:17%;font-size:30px}.art-corner{font-size:7px}.corner-one{left:18px;top:22px}.corner-two{right:18px;top:22px}.art-bottom{left:18px;right:18px;bottom:21px}.art-bottom-label{font-size:9px}.section h2{font-size:clamp(40px,10vw,53px)}.section{padding-block:70px}.work-card{min-height:570px}.work-card-copy{padding:28px 27px 0}.work-card h3{font-size:53px}.studio-work h3{font-size:clamp(30px,9vw,47px)}.work-card-copy p{font-size:12px}.connect-visual{min-height:285px}.network-board{padding:13px;min-height:245px}.signal-badge{height:75px;width:75px}.signal-badge svg{width:40px}.network-float{font-size:7px;right:4px;bottom:21px}.studio-visual{min-height:270px}.studio-bottom-text{left:27px;font-size:8px}.mini-projects{grid-template-columns:1fr}.mini-project{min-height:200px}.story-lead{font-size:17px}.story-pullquote{font-size:22px}.interests-section{padding-bottom:70px}.interests-box{padding:31px 25px}.interest-tags{gap:8px}.interest-tags span{font-size:9px;padding:11px 12px}.contact-inner h2{font-size:clamp(51px,12vw,75px)}.contact-inner>p:not(.eyebrow){font-size:14px}.contact-actions{align-items:flex-start;flex-direction:column;gap:20px}.footer-inner{flex-wrap:wrap;gap:20px}.footer-copy{flex:1}.footer-links{width:100%;flex-direction:row;gap:18px}.footer-links a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.js .reveal{opacity:1!important;transform:none!important}}

/* Project links and the breadth of JOJO Technologies' work. */
.work-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.secondary-work-link{color:#d3dae4}
.studio-capabilities{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;width:min(100% - 84px,500px);margin:52px auto 65px}
.studio-capabilities span{display:flex;align-items:center;min-height:48px;padding:10px 13px;border:1px solid #9eb4e4;background:rgba(255,255,255,.56);color:#183B8D;font-size:9px;font-weight:800;letter-spacing:.08em;line-height:1.4}
.studio-visual:before{top:50%;background:#aec3f5}
@media(max-width:530px){.work-links{align-items:flex-start;flex-direction:column;gap:13px}.studio-capabilities{width:calc(100% - 54px);gap:8px;margin:28px auto 56px}.studio-capabilities span{font-size:8px;min-height:46px;padding:8px}.studio-bottom-text{right:20px;line-height:1.5}}

/* Founder edition: use the monogram as a signature and show the actual work as a process. */
.hero{grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);gap:44px}
.hero h1{font-size:clamp(54px,5.25vw,83px);letter-spacing:-.075em;white-space:normal;line-height:1.09}
.hero-description{max-width:560px}
.hero-art{background:linear-gradient(145deg,#07172c 0%,#0b1f3b 68%,#133963 100%)}
.hero-art-grid{background-size:50px 50px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.hero-art:before{background:radial-gradient(circle at 52% 32%,rgba(163,230,53,.1),transparent 40%)}
.hero-monogram{width:min(48%,260px);top:31%;left:50%;filter:none}
.hero-art-statement{position:absolute;z-index:3;left:9%;right:8%;top:52%;font-family:var(--sans);font-weight:700;letter-spacing:-.055em;line-height:1.12;font-size:clamp(28px,3vw,43px);color:var(--ivory)}
.hero-art-statement em{font-family:var(--serif);font-weight:500;color:var(--lime)}
.work-card{min-height:610px}
.connect-visual{align-items:center;min-height:260px;padding:28px 35px 38px}
.connect-flow{width:100%;border:1px solid rgba(255,255,255,.27);background:rgba(255,255,255,.055);padding:22px 22px 18px;box-shadow:0 18px 50px #07172c66}
.flow-head,.flow-foot{font-size:9px;letter-spacing:.13em;color:#b6c9de;font-weight:800}
.flow-head{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:15px}
.flow-foot{border-top:1px solid rgba(255,255,255,.22);padding-top:15px}
.flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:21px 0}
.flow-steps>div{position:relative;min-height:108px;padding:12px 10px;background:#eaf5fb;color:#0B1F3B;display:flex;flex-direction:column;justify-content:space-between}
.flow-steps>div:not(:last-child):after{content:'→';position:absolute;right:-10px;top:40%;color:var(--lime);font-size:20px;font-weight:800;z-index:1}
.flow-steps b{color:#0D47A1;font-size:11px}
.flow-steps strong{font-size:11px;letter-spacing:.04em}
.flow-steps span{font-size:9px;color:#52677b}
.studio-capabilities span{background:#f8f7f2;border-left:3px solid #0D47A1}
@media(max-width:1150px){.hero{gap:28px}.hero h1{font-size:clamp(50px,5.5vw,70px)}}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero h1{font-size:clamp(51px,8.4vw,77px)}.hero-art{min-height:480px}.hero-monogram{width:min(40%,230px)}.hero-art-statement{top:53%;font-size:clamp(30px,5vw,42px)}}
@media(max-width:530px){.hero h1{font-size:clamp(43px,10.4vw,59px)}.hero-art{min-height:400px}.hero-monogram{top:30%;width:42%}.hero-art-statement{top:50%;font-size:clamp(27px,7vw,36px)}.corner-two{display:none}.connect-visual{min-height:240px;padding:15px 17px 25px}.connect-flow{padding:14px}.flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.flow-steps>div{min-height:80px}.flow-steps>div:after{display:none}.flow-head,.flow-foot{font-size:7px}}

/* Approved brand marks retain their native colours and clear space. */
.flow-brand{display:inline-flex;align-items:center;background:#fff;border-radius:3px;padding:10px 14px;margin-bottom:18px}
.flow-brand img{display:block;width:190px;max-width:100%;height:auto}
.studio-brand{position:relative;z-index:1;width:min(100% - 84px,500px);margin:27px auto 0;background:#fff;padding:13px 18px;border-radius:3px}
.studio-brand img{display:block;max-width:100%;width:300px;height:auto;margin:auto}
.studio-capabilities{margin-top:20px}
@media(max-width:530px){.flow-brand{padding:8px 10px;margin-bottom:14px}.flow-brand img{width:155px}.studio-brand{width:calc(100% - 54px);margin-top:22px;padding:10px 14px}.studio-brand img{width:235px}.studio-capabilities{margin-top:15px}}

/* The JOJO CONNECT story and JOJO Technologies service breadth. */
.product-story-section{background:var(--ink);color:#fff}
.product-story-section .section-intro{color:#bfc9d6}
.product-origin{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;padding:54px;background:#102847;border:1px solid #29415e;border-radius:6px}
.product-origin-copy .eyebrow{color:var(--lime);margin-bottom:18px}
.product-origin-copy h3{font-size:clamp(31px,3vw,47px);line-height:1.12;letter-spacing:-.06em;margin-bottom:25px;max-width:680px}
.product-story-section .section-header h2 .type-serif{margin-left:.08em}
.product-origin-copy p:not(.eyebrow){color:#cbd5df;font-size:14px;line-height:1.85;max-width:670px}
.product-origin-copy .work-link{margin-top:8px;color:#fff}
.product-evolution{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;border-top:1px solid #3d526a}
.product-evolution li{display:grid;grid-template-columns:48px 1fr;gap:17px;padding:23px 0;border-bottom:1px solid #3d526a}
.product-evolution li>span{color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.12em}
.product-evolution strong{display:block;font-size:16px;margin-bottom:7px}
.product-evolution p{margin:0;color:#aebdcc;font-size:12px;line-height:1.7}
.product-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.product-gallery figure{margin:0;background:#f7f8f6;color:var(--ink);border-radius:6px;overflow:hidden}
.product-gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#e9eef5}
.product-gallery figcaption{display:flex;flex-direction:column;gap:7px;padding:20px 22px 23px}
.product-gallery figcaption b{font-size:15px;letter-spacing:-.025em}
.product-gallery figcaption span{font-size:11px;line-height:1.65;color:var(--muted)}
.product-story-actions{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:26px}
.product-story-actions p{font-size:10px;line-height:1.6;color:#91a4b8;margin:0;max-width:440px}
.product-story-actions .button-primary{background:var(--lime);color:var(--ink)}
.services-section{padding-bottom:130px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-card{min-height:310px;padding:31px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.service-card>span{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--blue);margin-bottom:45px}
.service-card h3{font-size:24px;line-height:1.2;letter-spacing:-.055em;margin-bottom:15px}
.service-card p{color:var(--muted);font-size:12px;line-height:1.8;margin-bottom:24px}
.service-card a{margin-top:auto;font-size:10px;font-weight:800;letter-spacing:.07em;text-decoration:underline;text-underline-offset:4px;color:var(--blue-dark)}
.service-card:hover{background:#edf2ff}
@media(max-width:1000px){.product-origin{grid-template-columns:1fr;gap:40px}.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.product-origin{padding:38px}.product-gallery{grid-template-columns:1fr}.product-gallery img{aspect-ratio:16/8}.product-story-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:530px){.product-origin{padding:27px 23px}.product-origin-copy h3{font-size:30px}.product-gallery img{aspect-ratio:16/10}.services-grid{grid-template-columns:1fr}.service-card{min-height:260px}.service-card>span{margin-bottom:32px}}