/* ZIV Creativo / studio edition. Real work is the artwork; the interface frames it. */
:root{--studio-paper:#f0eee8;--studio-ink:#171713;--studio-electric:#2450ee;--studio-acid:#dbf36c;--studio-line:#c9c7be}
html{scroll-behavior:smooth}
#estudio{scroll-margin-top:90px}
body{background:var(--studio-paper)}
.wrap{width:min(1460px,calc(100% - 90px))}
.hero-shell{background:var(--studio-paper);overflow:clip}
.hero-shell:before{content:'ZIV CREATIVO / ESTUDIO DIGITAL / MÉXICO';right:12px;top:41%;color:#77776f}
.site-header{position:relative;z-index:5;border-bottom-color:var(--studio-line)}
.site-header .button.small{background:var(--studio-electric)}
.site-header .button.small:hover{background:#111}
.hero{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(25px,4vw,85px);align-items:center;min-height:min(850px,calc(100svh - 110px));padding-top:60px;padding-bottom:90px}
.hero-copy{position:relative;z-index:2}
.hero .eyebrow{color:#5e5e55}
.hero h1{position:relative;z-index:3;margin:28px -14vw 35px 0;font-size:clamp(76px,7.8vw,144px);line-height:.81;letter-spacing:-.097em;font-weight:500;white-space:nowrap;pointer-events:none}
.hero h1 span{color:var(--studio-electric);font-style:italic;letter-spacing:-.11em}
.hero-intro{max-width:420px;font-size:17px;line-height:1.55;color:#626159}
.hero-intro strong{display:block;margin-top:12px;color:#22221e;font-weight:500}
.hero-bottom{margin-top:38px}
.round-link{background:var(--studio-acid);border:0;color:#111}
.round-link:hover{background:var(--studio-electric);color:#fff}
.studio-collage{position:relative;min-height:640px;isolation:isolate}
.studio-collage:before{content:'';position:absolute;top:1%;left:22%;width:67%;height:81%;border:1px solid #aaa9a0;transform:rotate(7deg);z-index:-1}
.studio-collage:after{content:'✳';position:absolute;top:0;right:0;font-size:8vw;line-height:1;color:var(--studio-electric);animation:studio-spin 32s linear infinite;z-index:-2}
.studio-collage-index{position:absolute;right:0;top:18%;writing-mode:vertical-rl;font:10px 'DM Mono',monospace;letter-spacing:.18em;color:#77766f}
.studio-window{position:absolute;display:block;overflow:hidden;background:#20201f;color:#fff;box-shadow:0 26px 55px #27221d32;transition:transform .55s cubic-bezier(.18,.75,.28,1),box-shadow .4s;will-change:transform}
.studio-window:hover{transform:translateY(-14px) rotate(0deg) scale(1.025);box-shadow:0 38px 75px #27221d4a;z-index:6}
.studio-window img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.18,.75,.28,1)}
.studio-window:hover img{transform:scale(1.06)}
.studio-window-main{top:9%;left:4%;width:82%;height:67%;transform:rotate(-3deg);z-index:2}
.studio-window-main img{height:calc(100% - 31px)}
.window-bar{display:flex;justify-content:space-between;align-items:center;height:31px;padding-inline:13px;background:#161616;color:#ddd;font:9px 'DM Mono',monospace;letter-spacing:.04em}
.window-bar span:first-child{color:var(--studio-acid);letter-spacing:.25em}
.window-caption{position:absolute;left:20px;bottom:20px;display:flex;align-items:end;gap:18px;font-size:clamp(25px,3vw,45px);font-weight:600;letter-spacing:-.07em;text-shadow:0 2px 12px #000}
.window-caption small{max-width:60px;font:8px/1.4 'DM Mono',monospace;letter-spacing:.1em}
.studio-window-side{top:1%;right:2%;width:29%;height:29%;transform:rotate(8deg);z-index:3;border:7px solid #fff}
.studio-window-side span,.studio-window-bottom span{position:absolute;left:9px;bottom:9px;padding:7px;background:#fff;color:#111;font:9px 'DM Mono',monospace}
.studio-window-bottom{bottom:2%;right:2%;width:49%;height:36%;transform:rotate(5deg);z-index:4;border:8px solid #fff}
.studio-collage-seal{position:absolute;left:-3%;bottom:8%;z-index:5;display:grid;place-content:center;width:120px;height:120px;border-radius:50%;background:var(--studio-acid);color:#151515;text-align:center;font:700 13px/1.1 'DM Mono',monospace;letter-spacing:-.04em;transform:rotate(-13deg);box-shadow:0 16px 25px #0002}
.service-ribbon{padding-block:21px;border:0;border-top:1px solid var(--studio-line);border-bottom:1px solid var(--studio-line);border-radius:0;box-shadow:none;background:transparent;transform:none;animation:none}
.service-ribbon>span:nth-child(even){color:var(--studio-electric)}

/* Three campaigns, not three feature cards. */
.process-section{padding-top:150px;padding-bottom:100px}
.process-section .section-heading.centered{grid-template-columns:1.2fr .8fr;gap:35px 8vw;align-items:end}
.process-section .section-heading h2{font-size:clamp(68px,7.1vw,120px);line-height:.86;max-width:1000px}
.process-section .section-heading>p:last-child:not(.eyebrow){font-size:18px;max-width:370px;color:#5e5e55}
.steps{display:block;margin-top:110px}
.step-card,.step-card:nth-child(2),.step-card:nth-child(3){display:grid;grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr);align-items:center;gap:5vw;min-height:650px;margin:0 0 100px;padding:0;background:transparent;border:0;box-shadow:none;transform:none;translate:none}
.step-card:hover{transform:none;box-shadow:none}
.step-card:nth-child(2){grid-template-columns:minmax(0,1.22fr) minmax(290px,.78fr)}
.step-card:nth-child(2) .step-story{grid-column:2;grid-row:1}
.step-card:nth-child(2) .step-visual{grid-column:1;grid-row:1}
.step-story{position:relative;z-index:2;padding:40px 0}
.step-story .step-number{position:static;display:inline-block;margin-bottom:55px;padding:0;border:0;border-radius:0;background:none;color:var(--studio-electric);font:500 11px 'DM Mono',monospace;letter-spacing:.14em}
.step-story h3{margin:0 0 32px;font-size:clamp(53px,5.5vw,92px);line-height:.89;letter-spacing:-.08em;font-weight:500}
.step-story p{max-width:390px;font-size:17px;line-height:1.6;color:#5c5b54}
.step-story a{display:inline-flex;justify-content:space-between;gap:40px;min-width:240px;margin-top:38px;padding:15px 0;border-bottom:1px solid #24241f;color:#1a1a17;font:600 12px 'DM Sans',sans-serif;transition:color .25s,gap .25s}
.step-story a:hover{color:var(--studio-electric);gap:55px}
.editorial-step-visual{position:relative;height:min(680px,65vw);max-height:none;aspect-ratio:auto;margin:0;overflow:hidden;background:#d9d7ce}
.editorial-step-visual img{width:100%;height:100%;object-fit:cover;object-position:top}
.editorial-step-visual>span.stage-label{position:absolute;z-index:2;left:24px;top:24px;bottom:auto;background:#f2f0e9;color:#191919;padding:10px 12px;font:10px 'DM Mono',monospace;letter-spacing:.08em}
.editorial-step-visual>span.stage-note{position:absolute;z-index:2;left:auto;right:20px;bottom:20px;background:var(--studio-acid);color:#111;padding:10px 12px;font:10px 'DM Mono',monospace}
.stage-web{background:#ecd2cc}
.stage-web img{position:absolute;top:18%;left:11%;width:78%;height:auto;max-height:57%;margin:0;object-fit:contain;box-shadow:26px 32px 0 #ce756d,-26px -26px 0 #f6ebe2;transform:rotate(-5deg)}
.step-card:hover .stage-web img:not(.stage-float){transform:rotate(-2deg) scale(1.04)}
.stage-web img.stage-float{top:auto;left:-2%;bottom:7%;width:49%;height:auto;max-height:38%;border:8px solid #fff;box-shadow:0 24px 30px #0003;transform:rotate(7deg)}
.stage-business{background:#1a1c1d}
.stage-business img{position:absolute;top:18%;left:11%;width:79%;height:auto;max-height:58%;margin:0;object-fit:contain;box-shadow:-25px 25px 0 #d6f172,25px -25px 0 #717a83;transform:rotate(4deg)}
.step-card:hover .stage-business img:not(.stage-float){transform:rotate(1deg) scale(1.04)}
.stage-business img.stage-float{top:auto;left:auto;right:-3%;bottom:5%;width:50%;height:auto;max-height:37%;border:8px solid #fff;box-shadow:0 22px 30px #0007;transform:rotate(-8deg)}
.stage-ai{background:#1e2d9d;color:#fff}
.stage-ai .stage-label{background:#e7f385}
.interface-composition{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 65% 45%,#5574ff 0,#1e2d9d 52%,#151b53 100%)}
.interface-composition:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent)}
.interface-terminal{position:absolute;top:20%;left:10%;width:74%;min-height:45%;padding:30px;background:#11131cf0;color:#e9f4e0;box-shadow:25px 30px 0 #0c143a80;transform:rotate(-4deg)}
.interface-terminal>span,.interface-terminal small{display:block;font:10px 'DM Mono',monospace;letter-spacing:.09em;color:#d9f77b}
.interface-terminal code{display:block;margin:35px 0 28px;font:clamp(15px,2vw,29px)/1.7 'DM Mono',monospace;letter-spacing:-.04em}
.interface-message{position:absolute;right:3%;top:20%;width:37%;padding:22px;background:#fff;color:#151515;box-shadow:0 20px 35px #0003;transform:rotate(7deg)}
.interface-message span{font:9px 'DM Mono',monospace;color:#4560de}
.interface-message p{margin-top:14px;font-size:15px;line-height:1.35}
.interface-response{top:auto;bottom:16%;right:7%;background:#dcf36d;transform:rotate(-4deg)}
.interface-signal{position:absolute;left:6%;bottom:7%;font-size:90px;color:#dcf36d;animation:studio-spin 30s linear infinite}
.conditions{max-width:600px;margin:10px 0 0 auto;font-size:11px;line-height:1.5}

/* Work presented as a changing editorial sequence. */
.work-section{background:#171714;padding-block:135px 145px}
.work-section .wrap{width:min(1460px,calc(100% - 90px))}
.work-heading{margin-bottom:15px}
.work-section h2{font-size:clamp(70px,7.3vw,120px);line-height:.86;letter-spacing:-.08em}
.work-section .eyebrow{color:#d6ef78}
.work-section .button.outline{border-color:#fff;color:#fff}
.public-projects-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:85px 20px;margin-top:85px}
.public-project:nth-child(n){grid-column:span 6}
.public-project:nth-child(1){grid-column:span 12}
.public-project:nth-child(2),.public-project:nth-child(5){grid-column:span 5}
.public-project:nth-child(3),.public-project:nth-child(4){grid-column:span 7}
.public-project{border:0;background:transparent;color:#fff;box-shadow:none;overflow:visible;transition:none}
.public-project:hover{transform:none;background:transparent;box-shadow:none}
.public-project>a{padding:0}
.public-project-number{color:#b7b7a8;font:10px 'DM Mono',monospace;letter-spacing:.1em}
.public-project img,.public-project:nth-child(n) img{display:block;width:100%;height:auto;aspect-ratio:1.3;object-fit:cover;object-position:top;border:0;border-radius:0;filter:none;box-shadow:none;transition:transform .7s cubic-bezier(.16,.75,.27,1),filter .5s}
.public-project:nth-child(1) img{aspect-ratio:2.1}
.public-project:nth-child(2) img,.public-project:nth-child(5) img{aspect-ratio:1.05}
.public-project:nth-child(5) img{aspect-ratio:1.5}
.public-project:nth-child(3) img,.public-project:nth-child(4) img{aspect-ratio:1.5}
.public-project:nth-child(8) img,.public-project:nth-child(9) img{aspect-ratio:1.6}
.public-project img:hover{transform:scale(1.015);filter:brightness(1.13)}
.public-project div{margin-top:19px}
.public-project h3{font-size:clamp(24px,2.5vw,39px);font-weight:500}
.public-project:nth-child(1) h3{font-size:clamp(48px,5vw,80px);letter-spacing:-.08em}
.public-project p,.public-project small{color:#a6a69d}
.public-project i{border-color:#888}
.portfolio-section-foot{margin-top:100px}

/* The offer is still transparent and shoppable, but each tier reads as a campaign. */
.pricing-v2{background:#e8e7df;padding-block:145px}
.pricing-v2-heading h2{font-size:clamp(63px,7vw,105px);line-height:.88}
.project-pricing-grid{display:block;margin-top:80px}
.project-pricing-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:0 7vw;min-height:680px;margin-bottom:40px;padding:44px;border:0;border-radius:0;background:#f8f7f2;box-shadow:none;overflow:hidden}
.project-pricing-card:hover{transform:none;box-shadow:0 25px 60px #18181521}
.project-pricing-card .pricing-cover,.project-pricing-card .pricing-ai-cover{grid-column:1;grid-row:1/7;width:100%;height:100%;min-height:560px;margin:0;object-fit:cover;object-position:top;background:#242424}
.project-pricing-card header,.project-pricing-card>.project-summary,.project-pricing-card>.project-includes,.project-pricing-card>ul,.project-pricing-card>.scope-note,.project-pricing-card>.plan-cta{grid-column:2}
.project-pricing-card header{align-self:end;padding-bottom:20px;margin:0 0 20px}
.project-pricing-card h3{font-size:clamp(45px,4vw,74px);font-weight:500;letter-spacing:-.07em}
.project-pricing-card .project-summary{min-height:0;margin-bottom:20px}
.project-pricing-card ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-bottom:20px}
.project-pricing-card .plan-cta{align-self:end;max-width:none}
.project-business{background:#dff064;color:#151715}
.project-business .pricing-cover{object-position:center}
.project-web .pricing-cover{object-fit:contain;background:#ebd1c9;padding:35px}
.project-business .pricing-cover{object-fit:contain;background:#1c1d1e;padding:35px}
.project-ai{background:#171b2b;color:#fff}
.pricing-ai-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:35px;background:radial-gradient(circle at 70% 30%,#4165ed,#161b39 60%,#0c0d14);overflow:hidden}
.pricing-ai-cover:after{content:'';position:absolute;inset:12%;border:1px solid #ffffff62;border-radius:50%;transform:skew(-20deg) rotate(-10deg)}
.pricing-ai-cover span{position:relative;z-index:2;font:11px 'DM Mono',monospace;letter-spacing:.1em;color:#d9f383}
.pricing-ai-cover strong{position:relative;z-index:2;font-size:clamp(65px,7vw,125px);line-height:.83;letter-spacing:-.1em;font-weight:500}
.pricing-ai-cover i{position:absolute;right:-35px;top:5%;font-size:300px;color:#dff266;font-style:normal;line-height:1;animation:studio-spin 34s linear infinite}
.payment-structure{margin-top:12px}

/* The quieter sections still carry the same authored rhythm. */
.benefits-section{position:relative;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8vw;padding-block:150px 165px}
.benefits-section .section-heading{min-width:0}
.benefits-section .section-heading h2{font-size:clamp(65px,6vw,110px);line-height:.88}
.benefits-section .section-heading>p:not(.eyebrow){max-width:420px;font-size:17px;line-height:1.5}
.studio-proof{position:relative;width:min(100%,570px);margin-top:30px;aspect-ratio:1.25;overflow:visible}
.studio-proof span{position:absolute;left:0;bottom:0;font:10px 'DM Mono',monospace;letter-spacing:.16em;color:#76766f}
.studio-proof img{display:block;width:115%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 20px #0002);transform:rotate(-4deg)}
.benefits-grid{margin-top:30px}
.benefits-grid article{padding-block:31px}
.benefits-grid article h3,.benefits-grid article p{text-align:left}
.benefits-grid h3{font-size:clamp(24px,2.3vw,35px)}
.benefits-grid p{font-size:14px}
.benefit-icon{font-size:33px}
.individual-services{padding-top:25px}
.individual-services-heading{margin-bottom:60px}
.individual-services-heading h3{font-size:clamp(55px,5vw,85px);line-height:.9;letter-spacing:-.075em}
.individual-services-grid article{min-height:150px;transition:padding .35s,background .35s}
.individual-services-grid article:hover{padding-inline:25px;background:#d9e7ad}
.individual-services-grid h4{font-size:clamp(27px,2.8vw,43px)}
.external-costs-note{padding:55px 65px;background:#212221;border-radius:0}
.external-costs-note h3{font-size:clamp(37px,4vw,65px);line-height:.95;letter-spacing:-.065em}
.faq-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;padding-block:160px}
.faq-section .section-heading.centered{align-self:start;text-align:left;position:sticky;top:110px}
.faq-section .section-heading h2{font-size:clamp(60px,5vw,90px);line-height:.9}
.faq-list{padding:0;background:transparent}
.faq-list details{padding:27px 0;border-top:1px solid var(--studio-line)}
.faq-list details:last-child{border-bottom:1px solid var(--studio-line)}
.faq-list details[open]{padding-inline:22px;background:#e6e5dc}
.faq-list summary{font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.04em}
.faq-list details p{color:#64645b}
.demo-section{position:relative;overflow:hidden;margin-block:0 110px;padding:90px;background:#1a279d;border-radius:0;box-shadow:none}
.demo-section:before{content:'ZIV';position:absolute;right:-.03em;bottom:-.24em;color:#ffffff10;font-size:clamp(260px,35vw,610px);font-weight:700;line-height:1;letter-spacing:-.14em;pointer-events:none}
.demo-copy{position:relative;z-index:1}
.demo-copy h2{font-size:clamp(60px,6.2vw,105px);line-height:.85}
.demo-copy h2 span{color:#e5f876}
.demo-form{position:relative;z-index:1;border-radius:0;box-shadow:24px 24px 0 #090e5899}
.site-footer{padding-top:95px;background:#161713}
.site-footer .wordmark{font-size:clamp(90px,12vw,190px);line-height:.8;letter-spacing:-.13em}
.site-footer .footer-top{align-items:end}
.site-footer .footer-top p{font-size:17px}
.floating-nav{border:1px solid #ffffff25;box-shadow:0 18px 50px #0004}

/* Portfolio and demo galleries are companion publications, not a different brand. */
.portfolio-page,.portfolio-page .portfolio-wrap,body:has(.gallery-header){background:var(--studio-paper)}
.portfolio-page .portfolio-wrap,.gallery-header,body:has(.gallery-header) main,.gallery-footer{width:min(1460px,calc(100% - 90px))}
.portfolio-page .portfolio-hero{padding-block:145px 100px}
.portfolio-page h1{font-size:clamp(85px,9vw,160px);line-height:.83;letter-spacing:-.09em}
.portfolio-page .portfolio-grid{gap:100px 24px}
.portfolio-page .project-cover,.portfolio-page .project-browser{transition:transform .55s cubic-bezier(.18,.75,.28,1)}
.portfolio-page .portfolio-card:hover .project-cover,.portfolio-page .portfolio-card:hover .project-browser{transform:translateY(-8px)}
.gallery-intro{padding-block:140px 90px}
.gallery-intro h1{font-size:clamp(78px,9vw,145px);line-height:.84;letter-spacing:-.085em}
.demo-grid{gap:35px 20px}
.demo-project{border:0;border-radius:0;box-shadow:none;transition:transform .4s}
.demo-project:hover{transform:translateY(-8px);box-shadow:none}
.demo-project>img{aspect-ratio:1.45;object-fit:cover;object-position:top}
.gallery-close{padding-block:90px}

/* Scroll-led entrances and masked stage reveals; content remains visible without JS. */
@media(prefers-reduced-motion:no-preference){
  .studio-motion-ready .step-card:not(.is-visible),.studio-motion-ready .public-project:not(.is-visible),.studio-motion-ready .project-pricing-card:not(.is-visible),.studio-motion-ready .studio-proof:not(.is-visible){opacity:0;translate:0 34px}
  .studio-motion-ready .step-card,.studio-motion-ready .public-project,.studio-motion-ready .project-pricing-card,.studio-motion-ready .studio-proof{transition:opacity .8s ease,translate .8s cubic-bezier(.18,.75,.28,1),box-shadow .35s}
  .studio-motion-ready .editorial-step-visual:not(.is-visible){clip-path:inset(0 0 12% 0);opacity:.35}
  .studio-motion-ready .editorial-step-visual{transition:clip-path 1s cubic-bezier(.18,.75,.28,1),opacity .8s}
}

@keyframes studio-spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){
  .hero{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(70px,8.5vw,100px)}.studio-collage{min-height:520px}
  .step-card,.step-card:nth-child(2),.step-card:nth-child(3){min-height:540px}.editorial-step-visual{height:550px}.step-story h3{font-size:clamp(50px,5.5vw,70px)}
  .project-pricing-card{gap:0 4vw;padding:25px}.project-pricing-card .pricing-cover,.project-pricing-card .pricing-ai-cover{min-height:480px}.project-pricing-card ul{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wrap,.work-section .wrap{width:calc(100% - 36px)}
  .hero{display:block;min-height:0;padding-top:66px;padding-bottom:50px}
  .hero h1{margin:25px 0 25px;font-size:clamp(65px,13vw,110px);white-space:normal}
  .hero-intro{max-width:570px}.studio-collage{height:550px;min-height:0;margin-top:55px}
  .studio-window-main{width:77%;height:67%;left:5%;top:10%}.studio-window-side{width:33%;height:25%}.studio-window-bottom{width:52%;height:35%}.studio-collage-seal{width:95px;height:95px;font-size:10px}
  .process-section{padding-top:100px}.process-section .section-heading.centered{display:block}.process-section .section-heading h2{margin:20px 0;font-size:clamp(57px,10vw,78px)}
  .steps{margin-top:70px}.step-card,.step-card:nth-child(2),.step-card:nth-child(3){display:flex;flex-direction:column;align-items:stretch;gap:15px;min-height:0;margin-bottom:85px}
  .step-card:nth-child(2) .step-story,.step-card:nth-child(2) .step-visual{grid-column:auto;grid-row:auto}
  .step-story{padding:0}.step-story .step-number{margin-bottom:22px}.step-story h3{font-size:clamp(53px,10vw,77px)}.step-story a{margin-top:20px}
  .editorial-step-visual{height:min(78vw,540px);min-height:340px}
  .conditions{margin:0}.work-section{padding-block:95px}.work-section h2{font-size:clamp(58px,10vw,80px)}
  .public-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 16px}.public-project:nth-child(n){grid-column:span 1}.public-project:nth-child(1){grid-column:span 2}
  .public-project:nth-child(n) img{aspect-ratio:1.12}.public-project:nth-child(1) img{aspect-ratio:1.7}.public-project:nth-child(8) img,.public-project:nth-child(9) img{aspect-ratio:1.6}
  .pricing-v2{padding-block:100px}.pricing-v2-heading h2{font-size:clamp(57px,10vw,75px)}.project-pricing-grid{margin-top:55px}
  .project-pricing-card{display:block;min-height:0;padding:22px 22px 30px;margin-bottom:24px}
  .project-pricing-card .pricing-cover,.project-pricing-card .pricing-ai-cover{width:calc(100% + 44px);height:330px;min-height:0;margin:-22px -22px 30px}
  .project-pricing-card ul{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-ai-cover strong{font-size:75px}
  .benefits-section{padding-block:100px}.studio-proof{max-width:500px;margin-inline:auto}.faq-section{display:block;padding-block:100px}.faq-section .section-heading.centered{position:static}.faq-list{margin-top:50px}
  .demo-section{padding:55px 35px}.portfolio-page .portfolio-wrap,.gallery-header,body:has(.gallery-header) main,.gallery-footer{width:calc(100% - 38px)}
}
@media(max-width:540px){
  .hero h1{font-size:clamp(58px,14.5vw,78px)}.hero-intro{font-size:16px}.studio-collage{height:390px;margin-top:45px}.studio-collage:after{font-size:80px}
  .studio-window-main{width:82%;height:66%;top:12%;left:2%}.studio-window-side{width:37%;height:30%;right:0}.studio-window-bottom{width:54%;height:33%;bottom:0;right:1%}.window-caption{left:10px;bottom:8px;font-size:24px}.window-caption small{display:none}.studio-collage-seal{left:-3%;bottom:5%;width:74px;height:74px;font-size:8px}
  .process-section .section-heading h2,.work-section h2{font-size:clamp(48px,12vw,67px)}.step-story h3{font-size:clamp(48px,11.5vw,68px)}
  .editorial-step-visual{height:400px;min-height:0}.interface-terminal{left:6%;width:82%;padding:20px}.interface-message{width:52%;padding:13px}.interface-message p{font-size:11px}.interface-terminal code{font-size:13px}
  .public-projects-grid{display:block}.public-project{margin-bottom:55px}.public-project:nth-child(n) img{aspect-ratio:1.4}.public-project:nth-child(1) img{aspect-ratio:1.55}.public-project:nth-child(8) img,.public-project:nth-child(9) img{aspect-ratio:1.6}
  .project-pricing-card .pricing-cover,.project-pricing-card .pricing-ai-cover{height:250px}.project-pricing-card ul{grid-template-columns:1fr}.pricing-ai-cover strong{font-size:55px}.pricing-ai-cover i{font-size:180px}
  .studio-proof{width:100%;margin-top:15px}.studio-proof img{width:110%}.external-costs-note{padding:35px 26px}.demo-section{padding:45px 24px}.demo-copy h2{font-size:clamp(58px,14vw,80px)}
  .portfolio-page .portfolio-hero,.gallery-intro{padding-block:90px 65px}.portfolio-page h1,.gallery-intro h1{font-size:clamp(65px,12vw,90px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.studio-collage:after,.interface-signal,.pricing-ai-cover i{animation:none}.studio-window,.studio-window img,.public-project img{transition:none!important}}

/* Original transparent objects live outside the portfolio; website captures live only in work. */
.studio-art-hero{display:grid;place-items:center;background:radial-gradient(circle at 46% 44%,#dce4fa 0,transparent 56%)}
.studio-art-hero:before{inset:10% 8% 9% 12%;width:auto;height:auto;border-color:#bbb9b0;transform:rotate(-7deg)}
.studio-art-hero:after{right:4%;top:1%;font-size:11vw;color:#dce8ba}
.hero-art-outline{position:absolute;z-index:0;top:9%;left:13%;font-size:clamp(300px,38vw,640px);font-weight:700;line-height:.8;letter-spacing:-.2em;color:#dbd9ce;transform:rotate(-12deg)}
.studio-art-hero .hero-object{position:relative;z-index:2;display:block;width:112%;height:95%;max-width:none;object-fit:contain;filter:drop-shadow(0 34px 35px #1b2d7436);animation:studio-object-float 8s ease-in-out infinite}
.hero-object-caption{position:absolute;z-index:3;left:4%;bottom:6%;padding:13px 17px;background:#171713;color:#fff;font:11px 'DM Mono',monospace;letter-spacing:.12em}
.studio-art-hero .studio-collage-seal{left:auto;right:0;bottom:1%;z-index:4}
.stage-object{isolation:isolate}
.stage-object .stage-word{position:absolute;z-index:0;left:3%;bottom:4%;width:94%;overflow:hidden;color:#ffffff8c;font-size:clamp(105px,13vw,260px);font-weight:700;line-height:.72;letter-spacing:-.1em;white-space:nowrap;pointer-events:none}
.stage-web.stage-object{background:#eadfd2}
.stage-web.stage-object .stage-word{color:#d1bca7}
.stage-business.stage-object{background:#261f1b}
.stage-business.stage-object .stage-word{left:-5%;font-size:clamp(90px,11vw,210px);color:#e46c372c}
.stage-ai.stage-object{background:#dfe5ed}
.stage-ai.stage-object .stage-word{left:-3%;font-size:clamp(85px,10vw,185px);color:#a9bce0}
.stage-object img,.stage-web.stage-object img,.stage-business.stage-object img,.stage-ai.stage-object img{position:absolute;z-index:1;top:5%;left:1%;display:block;width:98%;height:90%;max-height:none;margin:0;border:0;object-fit:contain;box-shadow:none;transform:rotate(-5deg);filter:drop-shadow(0 25px 30px #0003);transition:transform .7s cubic-bezier(.18,.75,.28,1)}
.stage-web.stage-object img{top:-5%;left:12%;width:78%;height:112%;transform:rotate(5deg)}
.stage-business.stage-object img{top:7%;left:-6%;width:112%;height:82%;transform:rotate(-4deg)}
.stage-ai.stage-object img{top:8%;left:-5%;width:110%;height:82%;transform:rotate(4deg)}
.step-card:hover .stage-web.stage-object img{transform:rotate(1deg) scale(1.045)}
.step-card:hover .stage-business.stage-object img{transform:rotate(-1deg) scale(1.045)}
.step-card:hover .stage-ai.stage-object img{transform:rotate(1deg) scale(1.045)}
.pricing-object{position:relative;grid-column:1;grid-row:1/7;display:block;width:100%;height:100%;min-height:560px;overflow:hidden;isolation:isolate}
.pricing-object>span{position:absolute;z-index:3;top:26px;left:26px;color:#171713;font:11px 'DM Mono',monospace;letter-spacing:.12em}
.pricing-object img{position:absolute;z-index:2;top:2%;left:4%;width:92%;height:96%;object-fit:contain;filter:drop-shadow(0 24px 25px #0003);transition:transform .65s cubic-bezier(.18,.75,.28,1)}
.project-pricing-card:hover .pricing-object img{transform:scale(1.06) rotate(-3deg)}
.pricing-object>b{position:absolute;z-index:1;left:-4%;bottom:3%;font-size:clamp(95px,10vw,200px);line-height:.7;letter-spacing:-.12em;font-weight:700;white-space:nowrap}
.pricing-object-web{background:#d5d5c9}.pricing-object-web>b{color:#bdc0ad}
.pricing-object-business{background:#1a1a18}.pricing-object-business>span{color:#dfee71}.pricing-object-business>b{color:#dbef6a33;font-size:clamp(70px,8vw,150px)}
.pricing-object-ai{background:#ccd8ec}.pricing-object-ai>b{color:#9db0d4}.pricing-object-ai img{transform:rotate(5deg)}
.project-pricing-card:hover .pricing-object-ai img{transform:scale(1.05) rotate(0)}
@keyframes studio-object-float{50%{transform:translateY(-14px) rotate(2deg)}}
@media(max-width:760px){
  .studio-art-hero .hero-object{width:108%;height:100%}.hero-art-outline{font-size:85vw}.hero-object-caption{left:0;bottom:4%;font-size:9px}
  .stage-object .stage-word{font-size:26vw}.stage-business.stage-object .stage-word,.stage-ai.stage-object .stage-word{font-size:22vw}
  .pricing-object{width:calc(100% + 44px);height:330px;min-height:0;margin:-22px -22px 30px}.pricing-object>b{font-size:35vw}.pricing-object-business>b{font-size:22vw}
}
@media(max-width:540px){.studio-art-hero .hero-object{width:110%}.studio-art-hero .studio-collage-seal{right:-2%;bottom:3%}.pricing-object{height:270px}.pricing-object>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.studio-art-hero .hero-object{animation:none}}

/* Keep the quick links available on the way back without covering the work while reading. */
.floating-nav{transition:transform .3s ease,opacity .3s ease}
.studio-dock-hidden .floating-nav{transform:translate(-50%,calc(100% + 42px));opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.floating-nav{transition:none}}

/* Recognizable workspaces, isolated on alpha. No backplates, frames or graphic boxes. */
.studio-art-hero,.studio-art-hero:before,.studio-art-hero:after{background:none}
.studio-art-hero:before,.studio-art-hero:after{content:none}
.studio-art-hero{display:grid;place-items:center;overflow:visible}
.studio-art-hero .hero-object{position:relative;width:118%;height:auto;max-height:640px;max-width:none;object-fit:contain;filter:none;animation:studio-device-float 8s ease-in-out infinite}
.hero-toolmarks{max-width:560px;margin-top:27px}
.hero-toolmarks-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;color:#72716a;font:10px 'DM Mono',monospace;letter-spacing:.11em;white-space:nowrap}
.hero-toolmarks-heading span:last-child{color:#4d4c45}
.hero-toolmarks-track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,28px);grid-auto-columns:max-content;gap:12px 27px;max-width:100%;margin:0;padding:0 0 11px;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#b8b6aa transparent;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
.hero-toolmarks-track li{display:inline-flex;align-items:center;gap:7px;min-width:max-content;font-size:12px;font-weight:600;scroll-snap-align:start}
.hero-toolmarks-track img{display:block;width:22px;height:22px;object-fit:contain}
.hero-bottom{margin-top:30px}
.step-card,.step-card:nth-child(2),.step-card:nth-child(3){min-height:560px;margin-bottom:75px}
.stage-web.stage-object,.stage-business.stage-object,.stage-ai.stage-object,.editorial-step-visual{background:none;color:inherit;overflow:visible}
.editorial-step-visual{height:560px}
.stage-object img,.stage-web.stage-object img,.stage-business.stage-object img,.stage-ai.stage-object img{top:0;left:0;width:100%;height:100%;max-width:none;object-fit:contain;box-shadow:none;filter:none;transform:none}
.step-card:hover .stage-web.stage-object img,.step-card:hover .stage-business.stage-object img,.step-card:hover .stage-ai.stage-object img{transform:translateY(-8px) scale(1.025)}
.pricing-v2{background:var(--studio-paper)}
.project-pricing-card,.project-pricing-card.project-business,.project-pricing-card.project-ai{background:transparent;color:var(--studio-ink);border-top:1px solid var(--studio-line);padding:50px 0;min-height:610px;margin:0;overflow:visible}
.project-pricing-card:last-child{border-bottom:1px solid var(--studio-line)}
.project-pricing-card:hover{box-shadow:none}
.pricing-object,.pricing-object-web,.pricing-object-business,.pricing-object-ai{background:none;overflow:visible;min-height:500px}
.pricing-object img,.pricing-object-ai img{top:0;left:0;width:100%;height:100%;object-fit:contain;filter:none;transform:none}
.project-pricing-card:hover .pricing-object img,.project-pricing-card:hover .pricing-object-ai img{transform:translateY(-8px) scale(1.025)}
.studio-proof{display:block;width:min(100%,550px);min-width:0;height:auto;aspect-ratio:auto;margin-top:65px}
.studio-proof>span{position:static;display:block;margin-bottom:18px;color:var(--studio-electric);font:11px 'DM Mono',monospace;letter-spacing:.13em}
.studio-proof-marquee{width:100%;max-width:100%;margin-top:18px;border-top:1px solid var(--studio-line);border-bottom:1px solid var(--studio-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.studio-proof-marquee-track{display:flex;width:max-content}
.studio-proof-grid{display:flex;align-items:center;flex:none;gap:26px;margin:0;padding:14px 26px 14px 0;list-style:none;text-align:left}
.studio-proof-grid li{display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap;font:600 13px/1.25 'DM Sans',sans-serif}
.studio-proof-grid img{display:block;flex:none;width:23px;height:23px;object-fit:contain;filter:none;transform:none}
.studio-proof-marquee.is-animated{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.studio-proof-marquee.is-animated .studio-proof-marquee-track{animation:studio-marks-scroll 62s linear infinite;will-change:transform}
.studio-proof-marquee.is-animated:hover .studio-proof-marquee-track,.studio-proof-marquee.is-animated:focus-within .studio-proof-marquee-track{animation-play-state:paused}
.studio-proof-grid[aria-hidden="true"]{pointer-events:none}
.studio-proof>small{display:block;max-width:420px;margin-top:23px;font:12px/1.5 'DM Mono',monospace;color:#6b6b63}
@keyframes studio-marks-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.studio-proof-marquee.is-animated{overflow-x:auto;mask-image:none}.studio-proof-marquee.is-animated .studio-proof-marquee-track{animation:none;will-change:auto}.studio-proof-grid[aria-hidden="true"]{display:none}}
@keyframes studio-device-float{50%{transform:translateY(-12px)}}
@media(max-width:760px){
  .studio-art-hero .hero-object{width:105%;height:100%;max-height:none}
  .hero-toolmarks{max-width:100%}.hero-toolmarks-heading{font-size:9px}.hero-toolmarks-track{column-gap:20px}.hero-toolmarks-track li{font-size:11px}
  .editorial-step-visual{height:min(66vw,490px);min-height:300px}
  .project-pricing-card,.project-pricing-card.project-business,.project-pricing-card.project-ai{padding:32px 0;min-height:0}
  .pricing-object,.pricing-object-web,.pricing-object-business,.pricing-object-ai{width:100%;height:300px;min-height:0;margin:0 0 25px}
  .studio-proof{margin-top:35px}
}
@media(max-width:540px){
  .hero-bottom{display:none}.studio-collage{margin-top:24px}
  .editorial-step-visual{height:250px;min-height:0}
  .pricing-object,.pricing-object-web,.pricing-object-business,.pricing-object-ai{height:250px}
}
@media(prefers-reduced-motion:reduce){.studio-art-hero .hero-object{animation:none}}