/* Reference-inspired typography: condensed headlines, mono copy, inked label strips. */
:root{--studio-pink:#f7449e;--studio-lime:#bcf000;--studio-blue:#1d41e9}
h1,h2,h3,.hero-copy h1,.work-intro h2,.card-copy .project-title,.contact-copy h2,.partner-section h2,.sequence-heading h2,.sequence-graph-title{font-family:var(--display);font-weight:400}
.hero-copy h1{letter-spacing:-.025em;font-size:clamp(68px,6.6vw,112px);line-height:1.02}
.hero-line{margin-bottom:.04em}.hero-kicker{font-size:9px}
.work-intro h2{font-size:clamp(43px,4.8vw,74px);line-height:1.05;letter-spacing:-.025em}
.card-copy .project-title{font-size:43px;letter-spacing:-.015em;line-height:1.06}
.card-summary{font-size:12px;line-height:1.85}.card-statement{font-size:10px;line-height:1.7}
.contact-copy h2{line-height:1.05;font-weight:400;font-size:clamp(52px,5.3vw,88px)}
.partner-section h2{font-weight:400;line-height:1.1;font-size:clamp(34px,3.4vw,55px)}
.identity-name{font-family:var(--mono)}
/* The corridor, camera route, stage count, and scroll transforms stay unchanged. */
.animated .sequence-heading{left:9vw;top:18vh;max-width:440px;bottom:auto}
.sequence-heading h2{font:400 clamp(42px,4.5vw,70px)/1.06 var(--display);letter-spacing:-.025em;margin:18px 0 0}
.sequence-heading .eyebrow{font:500 8px/1.8 var(--mono);letter-spacing:1.1px;color:#6e7d62;max-width:none;margin:0}
.animated .sequence-graph-title{left:11vw;bottom:14vh;max-width:330px;font:400 clamp(36px,4.6vw,65px)/1 var(--display);letter-spacing:-.025em}
.animated .sequence-caption{left:43vw;right:9vw;bottom:13vh;max-width:770px}
.sequence-label{font:500 8px/1.6 var(--mono);letter-spacing:1px;margin:0 0 10px;color:#697a5d}
.sequence-caption h3{font:500 12px/1.6 var(--mono);margin:0 0 8px;color:#243c2e}
.sequence-description{font:500 11px/1.9 var(--mono);color:#233427;background:linear-gradient(transparent 8%,#efe83e 8%,#f5eb507d 95%,transparent 95%);padding:3px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sequence-nav button{font-size:8px;letter-spacing:.5px;border-radius:0!important;background:transparent}
.sequence-nav button[aria-current=step]{border-radius:0!important;background:#f6f2e4;border-color:#859778;color:#1e3829}
.workflow-collage{width:1000px;height:330px;top:49%}
.workflow-poster{left:105px;top:0;width:260px;height:310px;transform:none;background:none!important;padding:0;clip-path:none;box-shadow:none;color:#0f1712;z-index:5}
.workflow-poster h3{font-weight:400}
.workflow-strips{left:370px;top:93px;transform:rotate(-3deg);max-width:700px;z-index:4}
.workflow-strips span{font:400 16px/1.45 var(--label);letter-spacing:1px;padding:15px 21px 11px;background:#0f1915;color:#fffef6;margin:6px 0 0;box-shadow:2px 5px 7px #18271b1c;white-space:nowrap}
.workflow-strips span:nth-child(2){transform:rotate(3deg);margin-left:13px;margin-top:10px}
.workflow-inspect{top:267px;left:398px;z-index:9;font:500 8px var(--mono);letter-spacing:.6px;color:#576e4d;background:none;transform:rotate(-1deg);padding:9px 2px;min-height:38px}
.paper-cut{position:relative;width:260px;height:305px;filter:drop-shadow(4px 7px 4px #18291c20);isolation:isolate}
.paper-cut:before{content:'';position:absolute;inset:0;z-index:-2;clip-path:polygon(1% 2%,92% 0,100% 7%,99% 94%,94% 99%,9% 98%,1% 94%,0 11%);background:#f4f2e9}
.paper-cut:after,.build-board:after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='210'%3E%3Cg fill='none' stroke='%23142016' stroke-width='1'%3E%3Cpath d='M17 8l14 2m60 19l-7 3m68-15l3 12M30 76l-8-3m153 33l14-2M58 134l-4 10m62 39l18-2m57 13l-4-9M6 179l12 4m72-96l9 1'/%3E%3C/g%3E%3C/svg%3E")}
.cut-kicker,.cut-bottom{position:absolute;left:22px;right:18px;font:500 6px/1.6 var(--mono);letter-spacing:.4px;text-align:center}
.cut-kicker{top:45px}.cut-bottom{bottom:37px}.sticker-ink{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.frame-cut{transform:rotate(5deg)}.frame-cut:before{background:var(--studio-lime)}
.frame-cut h3{font:400 97px/1 var(--display);letter-spacing:-3px;position:absolute;top:100px;left:12px;margin:0;transform:scaleX(.89) scaleY(1.5);transform-origin:left center}
.human-seal{position:absolute;left:-62px;top:174px;width:100px;height:104px;transform:rotate(-13deg);filter:drop-shadow(2px 4px 2px #1b291e20);z-index:8}
.human-seal svg{width:70px;height:70px;display:block;margin:auto;fill:var(--studio-pink);stroke:#192318;stroke-width:2.8;background:#f8f6ee;border-radius:50%;border:5px solid #f8f6ee}
.human-seal svg path{fill:none;stroke-linecap:round}.human-seal>span{display:block;background:#f8f6ee;text-align:center;font:400 8px/1.3 var(--label);padding:5px 6px;color:#1a241a;transform:rotate(3deg)}
.pencil-arrow{position:absolute;right:-36px;top:3px;font:700 90px var(--hand);color:var(--studio-pink);transform:rotate(12deg)}
/* Make: UX, UI and the API belong to one paper system. */
.accent-sage .workflow-poster{left:20px;top:15px;width:960px;height:300px}
.build-board{position:relative;width:100%;height:280px;background:#faf8f0;box-shadow:2px 5px 5px #1c2c1b26;transform:rotate(-1deg);display:grid;grid-template-columns:repeat(3,1fr);padding:38px 30px 27px;gap:18px}
.build-board:after{opacity:.2;z-index:0}.board-index{position:absolute;left:29px;top:15px;font:500 6px var(--mono);letter-spacing:1px;color:#74816c}.build-column{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;min-width:0}
.mini-cut{font:400 98px/1 var(--display);padding:9px 19px 5px;position:relative;filter:drop-shadow(2px 2px 1px #20332215);color:#0f1811;letter-spacing:-4px}
.ux-cut{color:var(--studio-pink);background:#f6f3ed;transform:rotate(-5deg);clip-path:polygon(3% 0,96% 3%,100% 91%,6% 100%,0 16%)}
.ui-cut{background:var(--studio-lime);transform:rotate(5deg);clip-path:polygon(0 0,95% 2%,100% 96%,2% 100%)}
.api-cut{color:#fffdf6;background:var(--studio-pink);transform:rotate(3deg);clip-path:polygon(0 3%,95% 0,100% 94%,4% 100%)}
.mini-ribbon{font:400 12px/1.5 var(--label);letter-spacing:.7px;background:#101a15;color:#fffdf2;padding:10px 12px 7px;margin-top:13px;white-space:nowrap;transform:rotate(2deg)}
.build-column:nth-of-type(2) .mini-ribbon{transform:rotate(-4deg)}.build-column:nth-of-type(3) .mini-ribbon{transform:rotate(2deg)}
.board-foot{position:absolute;bottom:12px;left:0;right:0;text-align:center;font:500 6px var(--mono);letter-spacing:1px;color:#77836a}
.maker-seal{position:absolute;left:-38px;top:-25px;transform:rotate(-17deg);width:106px;height:91px;background:#111c16;color:#f6f3e8;border:7px solid #f6f3e8;border-radius:50%;font:500 25px/1.1 var(--mono);text-align:center;padding-top:13px;box-shadow:1px 3px 4px #18291c22}.maker-seal small{display:block;font:400 12px var(--label);letter-spacing:1px;margin-top:5px}
.accent-sage .workflow-strips{left:320px;top:310px;transform:none;display:flex;gap:12px;max-width:none}.accent-sage .workflow-strips span{font:500 7px var(--mono);background:none;color:#66785a;box-shadow:none;padding:0;margin:0;transform:none;letter-spacing:.2px}
.accent-sage .workflow-inspect{left:20px;top:310px}
/* Verify: a code-review stamp and a real access-control example behind it. */
.verify-cut{height:315px;transform:rotate(-4deg)}.verify-cut:before{background:#f1f0ed;clip-path:polygon(4% 0,96% 1%,100% 6%,99% 91%,94% 98%,4% 100%,0 93%,1% 6%)}
.verify-cut .cut-kicker{top:23px;font-size:5px}.verify-cut h3{position:absolute;left:17px;top:57px;margin:0;font:400 75px/1 var(--display);letter-spacing:-3px;transform:scaleY(1.3)}
.verify-cut>strong{position:absolute;left:15px;top:141px;font:400 63px/1 var(--display);letter-spacing:-2px;color:var(--studio-blue);white-space:nowrap;transform:scaleY(1.15)}
.verification-mark{position:absolute;left:103px;bottom:29px;width:60px;height:60px}.verification-mark svg{width:100%;height:100%;fill:#f1f0ed;stroke:#142317;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.verify-cut .cut-bottom{bottom:14px;font-size:5px}
.tape{position:absolute;width:95px;height:24px;z-index:8;clip-path:polygon(0 10%,6% 3%,15% 10%,26% 0,48% 7%,60% 0,77% 9%,93% 3%,100% 10%,98% 88%,90% 95%,70% 90%,53% 100%,31% 91%,17% 97%,3% 90%);opacity:.95}.tape-pink{background:var(--studio-pink)}
.accent-lilac .tape{left:3px;top:-4px;transform:rotate(-11deg)}.accent-lilac .pencil-arrow{right:-12px;top:214px;color:var(--studio-blue);font-size:80px}
/* Ship + learn: a globe and a handwritten finish, no random 3D ornament. */
.ship-cut{transform:rotate(-6deg);height:310px}.ship-cut:before{background:#f8f6f0;clip-path:polygon(3% 14%,15% 4%,42% 0,75% 4%,93% 16%,100% 38%,94% 57%,100% 78%,92% 96%,11% 100%,0 88%,6% 60%,0 38%)}
.ship-top{position:relative;height:176px;width:278px;left:-8px;top:8px}.ship-globe{width:100%;height:100%;color:#17251a}.ship-top h3{position:absolute;left:42px;top:40px;font:400 85px/.95 var(--display);letter-spacing:-3px;margin:0;transform:scaleY(1.25)}
.ship-learn{position:absolute;left:8px;top:168px;font:700 77px/.9 var(--hand);color:#131e17;white-space:nowrap;transform:rotate(1deg);letter-spacing:-3px}.ship-learn:after{content:'';display:block;background:var(--studio-pink);height:6px;width:150px;margin:13px 0 0 50px;transform:rotate(-4deg);clip-path:polygon(0 28%,96% 0,100% 70%,5% 100%)}
.ship-cut .cut-bottom{bottom:23px;font-size:5px}.accent-sand .tape{left:158px;top:1px;transform:rotate(9deg)}.ship-spark{position:absolute;left:-36px;top:195px;font-size:65px;color:var(--studio-pink);transform:rotate(12deg)}
/* Inspection is a secondary notebook sheet, never a replacement for the collage. */
.animated .workflow-artifact{left:370px;top:-35px;width:450px;border-radius:0;background:#faf8ee;border:1px solid #939f885c;padding:26px;box-shadow:4px 6px 0 #d9dfca,0 10px 25px #20321e15}
.animated .notes-open .workflow-inspect{top:330px;left:370px;background:#faf8ee;border:1px solid #9baa8c;font-size:9px;min-height:44px}
.workflow-artifact:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 25px,#adb99d18 26px,transparent 27px);pointer-events:none}
.workflow-artifact h4{font:400 27px/1.2 var(--display)}.artifact-top{font-size:8px;color:#4a6548}.brief-row p,.guard-intro{font-family:var(--mono);font-size:10px;color:#496245}.guard-choices button{font-size:9px;min-height:40px;color:#35532e}.guard-result{font-size:10px;min-height:36px;color:#35532e}.guard-run{font-size:10px;min-height:40px}.guard-foot{font-size:8px;color:#6d7f5b}.stack-flow strong{font-family:var(--mono);font-size:11px}.stack-flow small{font-family:var(--mono);font-size:8px}.release-flow strong,.release-flow small{font-family:var(--mono)}
@media(min-width:1600px){.card-copy .project-title{font-size:51px}.card-summary{font-size:13px}.sequence-description{font-size:13px}.sequence-caption h3{font-size:14px}.workflow-strips span{font-size:17px}.animated .sequence-graph-title{font-size:66px}}
@media(max-height:750px) and (min-width:801px){.hero-copy h1{font-size:clamp(65px,6.2vw,100px)}.card-copy .project-title{font-size:37px}.card-summary{font-size:10px;padding:11px 14px 17px}.card-statement{font-size:8px}.animated .sequence-heading{top:17vh}.sequence-heading h2{font-size:47px}.workflow-collage{top:49%}.animated .sequence-graph-title{font-size:40px;bottom:14vh}.animated .sequence-caption{bottom:13vh}.sequence-description{font-size:10px;line-height:1.8}.sequence-caption h3{font-size:10px}.sequence-label{font-size:6px;margin-bottom:6px}.workflow-strips span{font-size:15px}.animated .sequence-nav{bottom:5vh}}
@media(max-width:1100px) and (min-width:801px){.sequence-heading h2{font-size:45px}.workflow-collage{width:1000px}.sequence-description{font-size:9px}.animated .sequence-caption{left:42vw;right:7vw}.animated .sequence-graph-title{left:8vw;font-size:38px}}
body:not(.animated) .sequence-heading h2{font:400 42px/1.12 var(--display);max-width:600px;margin-top:20px}
body:not(.animated) .workflow-poster{position:relative;left:auto;top:auto;margin:0 auto;width:260px;height:320px}
body:not(.animated) .workflow-collage{width:100%;max-width:1000px;height:auto!important;min-height:0;display:flex;flex-direction:column;padding-top:15px}
body:not(.animated) .workflow-strips{position:relative;left:auto;top:auto;max-width:95%;align-self:center;transform:rotate(-2deg);margin:8px 0 34px}
body:not(.animated) .workflow-strips span{font-size:13px;white-space:normal;max-width:100%}
body:not(.animated) .workflow-artifact{position:relative;left:auto;right:auto;top:auto;width:100%;max-width:600px;align-self:center;transform:none;border-radius:0;margin:0 auto 20px;padding:25px}
body:not(.animated) .sequence-station{margin-bottom:65px}
body:not(.animated) .accent-sage .workflow-poster{width:100%;height:auto;min-height:300px}
body:not(.animated) .accent-sage .workflow-strips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0 25px}
body:not(.animated) .accent-sage .workflow-strips span{font-size:8px;color:#526844;margin:0;padding:0}
body:not(.animated) .workflow-mobile-copy{max-width:600px;padding-top:5px}
.workflow-mobile-copy h4{font-family:var(--display)!important;font-weight:400!important}.workflow-mobile-copy>p:not(.eyebrow){font-size:11px!important;color:#526847!important}
@media(max-width:800px){.hero-copy h1{font-size:clamp(43px,9.7vw,72px);line-height:1.08}.hero-kicker{font-size:7px}.work-intro h2{font-size:39px;line-height:1.15}.work-subtitle{font-size:29px}.work-description{font-size:10px;line-height:1.9}.card-copy .project-title{font-size:37px;line-height:1.1}.card-summary{font-size:11px;line-height:1.8}.card-statement{font-size:8px}.contact-copy h2{font-size:clamp(46px,11.5vw,74px);line-height:1.12}.partner-section h2{font-size:35px}.sequence-heading .eyebrow{font-size:7px}.sequence-nav button{font-size:7px!important;min-height:44px}.workflow-poster h3{font-weight:400}.workflow-inspect{display:none}.paper-cut{width:240px}.frame-cut h3{font-size:90px}.verify-cut h3{font-size:70px}.verify-cut>strong{font-size:59px}.workflow-strips span{letter-spacing:.3px}.build-board{height:auto;min-height:540px;padding:40px 22px 35px;grid-template-columns:1fr;gap:22px;max-width:500px;margin:auto}.build-column{flex-direction:row;gap:12px;justify-content:flex-start}.mini-cut{font-size:64px;padding:8px 12px;min-width:99px;text-align:center;letter-spacing:-2px}.mini-ribbon{font-size:9px;margin:0;white-space:normal;max-width:145px;padding:10px 9px 8px}.maker-seal{left:-5px;top:-20px;width:85px;height:74px;font-size:20px;padding-top:8px}.maker-seal small{font-size:9px}.board-index{font-size:5px;left:100px;top:17px;right:10px;line-height:1.7}.board-foot{font-size:4px;bottom:15px}.build-board:after{opacity:.12}body:not(.animated) .accent-sage .workflow-poster{min-height:540px}body:not(.animated) .sequence-heading h2{font-size:39px}.human-seal{left:-29px;top:181px;width:90px}.pencil-arrow{right:-3px}.ship-spark{left:-10px}.ship-top{width:260px;left:-7px}.ship-top h3{left:37px}.ship-learn{font-size:73px}.workflow-artifact .stack-flow{width:55%}.workflow-artifact .stack-flow strong{font-size:9px}.ai-loop{right:18px;width:31%;padding-left:12px}.ai-loop p{font-size:8px}.workflow-artifact .guard-choices button{font-size:8px}.top-nav a{font-family:var(--mono)}}

.sequence-tagline{font:500 10px/1.8 var(--mono);margin:18px 0 0;color:#405b43}
.animated .sequence-station[aria-hidden=true] .workflow-collage{filter:blur(4px);pointer-events:none}
@media(max-width:800px){.sequence-tagline{font-size:10px;max-width:260px}body:not(.animated) .workflow-strips{left:auto}}
.paper-cut h3{width:max-content}
body:not(.animated) .workflow-poster{order:0}
body:not(.animated) .workflow-strips{order:1}
body:not(.animated) .workflow-artifact{order:2}

body:not(.animated) .sequence-station{scroll-margin-top:110px}
/* Opening chapter: the engineer owns the architecture and the outcome. */
.sequence-chrome[data-stage=engineer] .sequence-heading h2{font-size:clamp(30px,3.2vw,48px);white-space:normal;max-width:460px}
.accent-human .workflow-poster{left:90px;width:300px;height:320px}
.engineer-cut{width:300px;height:320px;transform:rotate(-8deg)}
.engineer-cut:before{background:#f1f0ed;clip-path:polygon(13% 2%,78% 0,92% 7%,99% 24%,97% 75%,88% 95%,52% 100%,14% 95%,1% 77%,0 30%,5% 11%)}
.engineer-stamp-top{position:absolute;top:28px;left:23px;right:22px;text-align:center;font:400 57px/1 var(--display);letter-spacing:-2px;transform:rotate(-3deg)}
.engineer-smile{position:absolute;top:88px;left:100px;width:100px;height:100px;fill:var(--studio-pink);stroke:#111b15;stroke-width:4;stroke-linecap:round}
.engineer-smile path{fill:none}
.engineer-cut h3{position:absolute;top:196px;left:30px;right:25px;width:auto;font:400 45px/.95 var(--display);letter-spacing:-1px;text-align:center;margin:0;transform:rotate(-1deg)}
.engineer-cut .cut-bottom{bottom:18px;font-size:5px;letter-spacing:0}
.engineer-figure{position:absolute;left:-64px;top:93px;width:84px;height:219px;padding:7px;background:#f5f3ed;transform:rotate(-12deg);border-radius:12px;filter:drop-shadow(2px 5px 3px #172a1b24)}
.engineer-figure svg{height:100%;width:100%;fill:#18241b}.engineer-figure .figure-laptop{fill:#f5f3ed;stroke:#18241b;stroke-width:3;stroke-linecap:round}.engineer-figure .figure-code{fill:none;stroke:#18241b;stroke-width:2}
.engineer-branch{position:absolute;right:-20px;top:-19px;width:80px;height:80px;padding:9px;background:#f5f3ed;transform:rotate(15deg);border-radius:14px;filter:drop-shadow(2px 4px 3px #172a1b18)}
.engineer-branch svg{height:100%;width:100%;fill:#f5f3ed;stroke:#15261b;stroke-width:5;stroke-linecap:round}
.accent-human .workflow-strips{left:380px;top:103px}
.accent-human .workflow-inspect{left:410px;top:277px}
@media(max-width:800px){body:not(.animated) .accent-human .workflow-poster{left:auto;width:280px;max-width:100%;height:330px}.engineer-cut{width:270px;max-width:100%}.engineer-stamp-top{font-size:51px}.engineer-smile{left:85px}.engineer-cut h3{font-size:43px}.engineer-figure{left:-16px;top:104px;width:66px;height:180px}.engineer-branch{right:0;width:65px;height:65px}body:not(.animated) .accent-human .workflow-strips{left:auto;top:auto}.sequence-nav{flex-wrap:wrap}.sequence-nav button{font-size:6px!important;padding:8px 9px!important}}
.animated .maker-seal{top:8px}