.potrero-comparison{padding-block:105px 95px}.potrero-comparison .transformation-heading{margin-bottom:38px}.potrero-comparison .transformation-heading h2{max-width:640px}.potrero-comparison .transformation-heading>p{max-width:330px}.pitch-comparison{--split:50%;position:relative;height:640px;border:1px solid #d9d1c7;border-radius:18px;overflow:hidden;isolation:isolate;background:#eae2d7;touch-action:pan-y;cursor:ew-resize;user-select:none}.pitch-layer{position:absolute;inset:0;overflow:hidden}.pitch-layer>img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}.pitch-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:2}.pitch-layer:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#f4efe7f5);pointer-events:none}.pitch-tag{position:absolute;top:26px;left:28px;display:flex;gap:8px;align-items:center;background:#faf6eeeF;border:1px solid #cfc5b7;border-radius:99px;padding:10px 14px;font-size:11px;color:#4d4337}.pitch-tag:before{content:"";width:5px;height:5px;background:#80715e;border-radius:50%}.pitch-after .pitch-tag{left:auto;right:28px;border-color:#bacb9e;color:#324915}.pitch-after .pitch-tag:before{background:#6e9f14}.pitch-copy{position:absolute;left:32px;bottom:30px;z-index:1;max-width:40%;display:grid;gap:9px}.pitch-copy strong{font:400 clamp(27px,3vw,44px)/1.05 var(--serif);letter-spacing:-.025em}.pitch-copy>span{font-size:12px;color:#6f6252;line-height:1.5}.pitch-after .pitch-copy{left:auto;right:32px;text-align:right}.pitch-after .pitch-copy strong{color:#314b12}.pitch-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:1px;background:#fffaf0;pointer-events:none;box-shadow:1px 0 2px #211b281a}.pitch-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border:1px solid #e9e2d7;outline:1px solid #8aa55f;outline-offset:4px;background:#faf6ef;border-radius:50%;color:#345118;box-shadow:0 6px 18px #30271b24}.pitch-grip svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.pitch-comparison.is-dragging .pitch-grip{transform:translate(-50%,-50%) scale(.93)}.pitch-grip{transition:transform .2s}.pitch-comparison:focus-within{outline:2px solid #597e27;outline-offset:5px}.pitch-controls{display:grid;grid-template-columns:auto minmax(80px,240px) auto;align-items:center;justify-content:center;gap:22px;margin-top:23px}.pitch-controls button{appearance:none;border:0;background:none;padding:9px 0;font:500 11px var(--sans);color:#594d3f;cursor:pointer}.pitch-controls button:last-child{color:#39571a}.pitch-controls button:focus-visible{outline:2px solid #668d36;outline-offset:4px;border-radius:2px}.pitch-controls input{width:100%;accent-color:#5c7f31;height:24px;cursor:ew-resize}.pitch-controls input:focus-visible{outline:2px solid #668d36;outline-offset:3px;border-radius:10px}.pitch-instruction{display:block;text-align:center;color:#776957;font-size:10px;line-height:1.5;margin-top:9px}.pitch-receipt{position:absolute;right:32px;top:30%;z-index:1;background:#161b12ee;color:#f9f9ee;padding:15px 18px;border-radius:10px;border:1px solid #668634;max-width:235px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px #19200f20}.pitch-receipt svg{width:25px;height:25px;flex-shrink:0;stroke:#b6ed4f;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.pitch-receipt strong{font-size:12px;display:block;font-weight:500}.pitch-receipt small{font-size:10px;color:#c3d0b6;display:block;margin-top:5px}.pitch-paper-note{position:absolute;top:34%;left:30px;z-index:1;background:#f8f3e8f2;color:#534838;border:1px solid #d0c4b0;border-radius:6px;padding:12px 15px;font-size:11px;box-shadow:0 6px 18px #35271514}.pitch-paper-note svg{display:block;width:130px;height:8px;margin-top:7px;fill:none;stroke:#7e715a;stroke-width:1.5;stroke-dasharray:150;stroke-dashoffset:0}.pitch-motion-on .pitch-receipt{animation:pitch-confirm 4.5s cubic-bezier(.16,1,.3,1) both}.pitch-motion-on .pitch-paper-note svg{animation:pitch-write 3.8s ease-out both}.pitch-motion-paused *{animation-play-state:paused!important}@keyframes pitch-confirm{0%,35%{opacity:0;transform:translateY(8px)}60%,100%{opacity:1;transform:translateY(0)}}@keyframes pitch-write{0%,15%{stroke-dashoffset:150}75%,100%{stroke-dashoffset:0}}
@media(max-width:760px){.potrero-comparison{padding-block:70px 65px}.potrero-comparison .transformation-heading{margin-bottom:27px}.potrero-comparison .transformation-heading h2{font-size:49px}.potrero-comparison .transformation-heading>p{font-size:14px;line-height:1.8;margin-top:22px}.pitch-comparison{height:490px;border-radius:13px}.pitch-layer>img{object-position:50% 50%}.pitch-tag{top:17px;left:14px;padding:8px 10px;font-size:9px;gap:5px}.pitch-after .pitch-tag{right:14px}.pitch-copy{left:17px;bottom:24px;max-width:41%;gap:7px}.pitch-after .pitch-copy{right:17px}.pitch-copy strong{font-size:28px;line-height:1.08}.pitch-copy>span{font-size:10px;line-height:1.5}.pitch-grip{width:44px;height:44px;outline-offset:3px}.pitch-grip svg{width:22px}.pitch-receipt{right:15px;top:65%;max-width:170px;padding:10px;gap:8px}.pitch-receipt strong{font-size:10px}.pitch-receipt small{font-size:8px;line-height:1.5}.pitch-receipt svg{width:19px;height:19px}.pitch-paper-note{left:14px;top:28%;font-size:9px;padding:10px}.pitch-paper-note svg{width:100px}.pitch-controls{grid-template-columns:auto minmax(60px,1fr) auto;gap:15px;margin-top:17px}.pitch-controls button{font-size:10px}.pitch-instruction{font-size:9px}}
@media(max-width:360px){.potrero-comparison .transformation-heading h2{font-size:43px}.pitch-comparison{height:460px}.pitch-copy strong{font-size:24px}.pitch-receipt{max-width:146px}.pitch-tag{font-size:8px;padding:8px}.pitch-after .pitch-tag{right:11px}.pitch-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){.pitch-comparison *{animation:none!important;transition:none!important}}
@media(max-width:760px){.pitch-receipt{top:55%}}
.pitch-comparison:focus-within{outline:none}.pitch-divider:focus{outline:none}.pitch-divider:focus-visible .pitch-grip{outline:2px solid #597e27;outline-offset:5px}.pitch-comparison{margin-bottom:0}.potrero-process .process-accessible-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.potrero-process .process-scene-header{justify-content:flex-end}.potrero-process .process-drawing:after{display:none}.potrero-process .process-photo{object-position:center}.process-heading{margin-bottom:38px}
@media(max-width:760px){.potrero-process .process-scene{height:300px}.potrero-process .process-photo{top:0;height:100%;object-fit:contain}.potrero-process .process-scene-header{top:15px;right:15px}.potrero-comparison .pitch-comparison{height:420px}}
.pitch-layer:after{display:none}
.potrero-comparison .transformation-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,330px);gap:56px;align-items:end}
.comparison-summary{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.comparison-summary>p{margin:0;max-width:330px;font:400 15px/1.8 var(--sans);color:var(--muted)}
@font-face{font-family:"Atavux Marker";src:url("assets/fonts/kalam-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.featured-note{position:relative;display:block;box-sizing:border-box;width:280px;max-width:calc(100% - 8px);padding:18px 26px 20px;margin:0 0 9px 3px;background:linear-gradient(165deg,#694acb 0%,#6040c0 82%,#7557d2 100%);color:#fff;border-radius:2px 3px 15px 3px;box-shadow:2px 9px 14px #37245a22,0 2px 3px #37245a14;transform:rotate(-3deg);transform-origin:top left}
.featured-note:after{content:"";position:absolute;inset:auto 10px 4px 24%;height:14px;border-radius:50%;box-shadow:7px 10px 10px #37245a16;z-index:-1;transform:rotate(3deg)}
.featured-note>span{display:block;font:700 34px/1.15 "Atavux Marker",cursive;letter-spacing:-.025em;transform:rotate(-1deg);text-align:center}
.comparison-summary{gap:22px}
@media(max-width:1000px){.potrero-comparison .transformation-heading{grid-template-columns:minmax(0,1fr) 280px;gap:30px}}
@media(max-width:760px){.potrero-comparison .transformation-heading{grid-template-columns:1fr;gap:30px}.comparison-summary{gap:19px}.comparison-summary>p{font-size:14px}.featured-note{width:270px;padding:18px 24px}.featured-note>span{font-size:32px}}
/* Square paper note, fastened along its right edge with clear tape. */
.featured-note{display:grid;place-items:center;width:230px;aspect-ratio:1;padding:24px 16px;margin-right:24px;border-radius:1px;background:linear-gradient(145deg,#6c4dce,#6041bd);box-shadow:-4px 10px 17px #37245a25,0 1px 2px #37245a18;transform:rotate(-3deg)}
.featured-note:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px);border-top:1px solid #ffffff12}
.featured-note:after{content:"";position:absolute;inset:auto;right:-20px;top:50%;width:43px;height:112px;border-radius:0;background:linear-gradient(96deg,#ffffff16,#fffff74d 24%,#fffff729 70%,#ffffff47);border:1px solid #ffffff42;box-shadow:1px 2px 3px #261c3412;z-index:1;transform:translateY(-50%) rotate(5deg);clip-path:polygon(0 2%,12% 0,25% 2%,40% 0,58% 2%,74% 0,89% 2%,100% 0,100% 98%,86% 100%,72% 98%,56% 100%,41% 98%,25% 100%,10% 98%,0 100%);pointer-events:none}
.featured-note>span{position:relative;font-size:34px;z-index:1}
@media(max-width:760px){.featured-note{width:220px;max-width:calc(100% - 30px);padding:24px 16px}.featured-note>span{font-size:33px}}
.pitch-grip{color:#564ac7;outline-color:#9281d2}
.pitch-grip .pitch-brand-icon{display:block;width:30px;height:30px;object-fit:contain;transform:translate(-2px,-1px);pointer-events:none}
.pitch-grip .pitch-wrench{position:absolute;right:6px;bottom:6px;width:17px;height:17px;padding:2px;border-radius:50%;box-sizing:content-box;background:#faf6ef;stroke:#564ac7;stroke-width:1.8;fill:none}
.featured-note:after,.note-corner-tape{background:linear-gradient(96deg,#fff7de38,#fffdf1a1 23%,#f7efd765 63%,#fffefa94);border:1px solid #fffdf6a3;box-shadow:1px 3px 4px #261c3424}
.note-corner-tape{position:absolute;display:block;right:-24px;top:5px;width:89px;height:31px;z-index:2;transform:rotate(43deg);pointer-events:none;clip-path:polygon(1% 0,100% 0,98% 15%,100% 29%,98% 45%,100% 62%,98% 78%,100% 100%,0 100%,2% 80%,0 63%,2% 44%,0 27%,2% 13%)}
@media(max-width:760px){.pitch-grip .pitch-brand-icon{width:26px;height:26px}.pitch-grip .pitch-wrench{width:14px;height:14px;right:3px;bottom:3px}}
/* Compact note with only the upper corner taped. */
.featured-note{width:180px;padding:20px 12px}
.featured-note:after{display:none}
.featured-note>span{font-size:29px}
.note-corner-tape{width:72px;height:27px;right:-19px;top:4px}
@media(max-width:760px){.featured-note{width:170px;padding:20px 12px}.featured-note>span{font-size:27px}}
/* Yellow paper and uneven black marker lettering. */
.featured-note{background:linear-gradient(145deg,#fff090,#f5dd66);color:#24201b;box-shadow:-4px 10px 17px #5b4b2425,0 1px 2px #5b4b2418}
.featured-note:before{border-top-color:#fff8c680;background:repeating-linear-gradient(0deg,#886d1205 0 1px,transparent 1px 3px)}
.featured-note .marker-word{display:block;font-weight:700;white-space:nowrap;line-height:1.2;transform:rotate(-2deg)}
.featured-note .marker-word+ .marker-word{transform:translate(2px,3px) rotate(1.5deg)}
.marker-word>span{display:inline-block;transform:rotate(-2deg)}
.marker-word>span:nth-child(3n){transform:translateY(-1px) rotate(2deg)}
.marker-word>span:nth-child(4n){transform:translateY(1px) rotate(-3deg)}
.marker-word>span:nth-child(5n){transform:rotate(3deg)}
/* Each ink mark is uncovered in writing order, preserving the uneven baseline. */
.ink-ready .marker-word>span{clip-path:polygon(-15% -20%,-15% -20%,-15% 120%,-15% 120%)}
.ink-ready.ink-writing .marker-word>span{animation:marker-ink-write var(--ink-duration,150ms) cubic-bezier(.22,.61,.36,1) var(--ink-delay,0ms) both}
@keyframes marker-ink-write{0%{clip-path:polygon(-15% -20%,-15% -20%,-15% 120%,-15% 120%)}45%{clip-path:polygon(-15% -20%,70% -20%,20% 120%,-15% 120%)}100%{clip-path:polygon(-15% -20%,120% -20%,120% 120%,-15% 120%)}}
@media(prefers-reduced-motion:reduce){.ink-ready .marker-word>span{clip-path:none!important;animation:none!important}}
/* The comparison follows the selected product, on the same paper surface. */
#proyectos #operacion{padding-top:65px;padding-bottom:55px}
#operacion[data-project="waygo"] .pitch-after .pitch-tag{color:#294f84}
#operacion[data-project="waygo"] .pitch-after .pitch-tag:after{background:#4e739f}
#operacion[data-project="urbanstore"] .pitch-after .pitch-tag{color:#874f32}
#operacion[data-project="urbanstore"] .pitch-after .pitch-tag:after{background:#a56d4a}
@media(max-width:760px){#proyectos #operacion{padding-top:45px;padding-bottom:25px}}
#operacion .pitch-before>img{filter:saturate(.25)}
@media(max-width:760px){
  #operacion[data-project="waygo"] .pitch-before>img,#operacion[data-project="urbanstore"] .pitch-before>img{object-position:30% center}
  #operacion[data-project="waygo"] .pitch-after>img,#operacion[data-project="urbanstore"] .pitch-after>img{object-position:30% center}
}
/* Let the doorstep, parcel and couple remain legible together on a phone. */
@media(max-width:760px){
  #operacion[data-project="urbanstore"] .pitch-comparison{height:auto;aspect-ratio:1.4}
  #operacion[data-project="urbanstore"] .pitch-after>img{object-position:50% center}
}
/* A frozen outgoing scene keeps both illustrations present during the dissolve. */
.pitch-transition-ghost{position:absolute;inset:0;z-index:2;pointer-events:none;isolation:isolate;overflow:hidden}
.pitch-transition-ghost .pitch-layer{pointer-events:none}
.pitch-comparison.is-project-transitioning>.pitch-layer,.pitch-transition-ghost{will-change:transform,opacity,filter}
@media(prefers-reduced-motion:reduce){.pitch-transition-ghost{display:none}}