/* r33 · Section 04 "The approach": torn paper → mended → bywill → the business rises.
   Scroll-scrubbed (sticky stage driven by scroll position, no scroll-jacking).
   Default (no JS / reduced motion) = the finished state. approach.js adds .is-anim. */
@font-face{font-family:"BW Pencil";src:url(assets/fonts/caveat-latin-600.woff2) format("woff2");font-weight:600;font-display:swap}
.ap{--ap-hdr:72px;--ap-wall:#19161e;--ap-ink:#0f0f0f;--ap-off:#FAF8F2;--ap-deep:#245B36;--ap-green:#6CBF5B;
  position:relative;background:var(--ap-wall);color:var(--ap-off);overflow:clip}
.ap-track{position:relative}
.ap-sticky{position:relative}
.ap.is-anim .ap-track{height:380vh}
.ap.is-anim .ap-sticky{position:sticky;top:var(--ap-hdr);height:calc(100vh - var(--ap-hdr));height:calc(100svh - var(--ap-hdr));overflow:hidden}
.ap-scene{--stageW:min(100vw,calc((100svh - var(--ap-hdr) - 190px) * .75));
  position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(14px,3svh,28px) 0 clamp(8px,2svh,18px);
  background:radial-gradient(ellipse 85% 60% at 50% 52%,#2a2530 0%,#1f1b25 45%,var(--ap-wall) 82%)}
.ap:not(.is-anim) .ap-scene{padding:80px 0 56px}

/* headline: torn paper scraps, site type */
.ap-head{position:relative;z-index:6;width:min(100%,calc(var(--stageW) + 24px));padding:0 19.2px;margin-bottom:-3%}
.ap .eyebrow{color:var(--ap-off);margin:0 0 14px 4px;transform:rotate(-1deg)}
.ap .eyebrow span{border-color:#ffffff80;color:var(--ap-green)}
.ap h2{margin:0;position:relative;font-weight:650}
.ap-scrap{position:relative;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.ap-paper{display:block;position:relative;padding:.36em .62em .42em}
.ap-paper::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ap-a{width:97%;transform:rotate(-1.4deg)}
.ap-half{position:relative;display:block}
.ap-half+.ap-half{position:absolute;inset:0}
.ap-a .ap-paper{background:linear-gradient(170deg,#FAF8F2 0%,#F1EBDD 100%);color:var(--ap-ink);
  font:650 clamp(26px,7.6vw,46px)/.95 Arial,"Helvetica Neue",sans-serif;letter-spacing:-.075em}
.ap-b{width:max-content;max-width:94%;margin:-5px 6px 0 auto;transform:rotate(1.6deg)}
.ap-b .ap-paper{background:linear-gradient(165deg,#F6F1E4 0%,#ECE4D2 100%);padding:.26em .6em .36em .55em}
.ap-b em{display:block;font:italic 400 clamp(24px,6.6vw,42px)/1.02 Georgia,serif;letter-spacing:-.06em;color:var(--ap-deep)}
.ap-tape{position:absolute;z-index:3;width:64px;height:22px;background:rgba(108,191,91,.66);box-shadow:0 1px 2px rgba(0,0,0,.25);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,100% 4%,94% 18%,100% 32%,95% 50%,100% 66%,94% 84%,100% 100%,0 96%,5% 78%,0 60%,6% 42%,0 24%)}
.ap-tape-a{left:55%;top:-10px;transform:rotate(84deg) translateX(30%)}
.ap-tape-a2{left:3%;top:-9px;transform:rotate(-14deg)}
.ap-tape-b{right:10%;top:-11px;transform:rotate(8deg)}

/* stage: 3:4 art, same framing in every frame */
.ap-stage{position:relative;width:var(--stageW);aspect-ratio:3/4;flex:none}
.ap-art{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
.ap-layer{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.ap.is-anim .ap-layer,.ap.is-anim .ap-piece,.ap.is-anim .ap-city{will-change:transform,opacity}
.ap-piece{position:absolute}
.ap-piece img{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.ap-pencil{position:absolute;white-space:nowrap;font:600 clamp(13px,3.7vw,20px)/1 "BW Pencil",cursive;color:#2e2a26;opacity:.9;transform:rotate(var(--r,-4deg))}
.ap-pencil.red{color:#9b2b2b}
.ap-city{position:absolute;left:21%;top:25.5%;width:58%;transform-origin:50% 92%}
.ap-city img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 16px rgba(0,0,0,.55))}
.ap-burst{position:absolute;left:50%;top:55%;width:72%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(108,191,91,.55) 0%,rgba(108,191,91,.18) 30%,transparent 62%);mix-blend-mode:screen;pointer-events:none}
.ap-logo{position:absolute;z-index:4;left:50%;top:7%;width:clamp(150px,40%,240px);height:auto;transform:translateX(-50%);
  filter:drop-shadow(0 0 22px rgba(108,191,91,.25)) drop-shadow(0 6px 10px rgba(0,0,0,.5))}

/* after: ragged paper tags */
.ap-tag{position:absolute;z-index:5;white-space:nowrap;font:800 clamp(9.5px,2.5vw,12.5px)/1 Arial,"Helvetica Neue",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ap-deep);
  transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.ap-tag span{display:block;background:#FAF8F2;padding:.5em .7em .46em;
  clip-path:polygon(0 6%,8% 0,22% 7%,38% 1%,55% 6%,72% 0,88% 5%,100% 2%,98% 30%,100% 58%,97% 100%,80% 94%,63% 100%,45% 95%,28% 100%,12% 94%,2% 100%,3% 66%,0 34%)}
.ap-tag.key{font-size:clamp(10.5px,2.9vw,14px)}
.ap-tag.key span{background:var(--ap-green);color:var(--ap-ink)}

@media (min-width:900px){
  .ap{--ap-hdr:82px}
  .ap-scene{flex-direction:row;gap:clamp(24px,4vw,72px);--stageW:min(52vw,calc((100svh - var(--ap-hdr) - 36px) * .75));padding:18px 57.6px;
    background:radial-gradient(ellipse 34% 62% at 66% 46%,#2c2732 0%,#211d27 45%,transparent 100%),radial-gradient(ellipse 80% 70% at 40% 50%,#1d1a22 0%,var(--ap-wall) 75%)}
  .ap:not(.is-anim) .ap-scene{padding:112px 57.6px}
  .ap-head{width:min(38vw,560px);margin:0;padding:0}
  .ap .eyebrow{margin-bottom:22px}
  .ap-a .ap-paper{font-size:clamp(40px,4.4vw,68px)}
  .ap-b em{font-size:clamp(36px,3.9vw,60px)}
  .ap-pencil{font-size:clamp(15px,1.5vw,22px)}
  .ap-tag{font-size:12px}.ap-tag.key{font-size:14px}
}

/* finished state (no JS / reduced motion) */
.ap:not(.is-anim) .ap-k2,.ap:not(.is-anim) .ap-k3,.ap:not(.is-anim) .ap-burst,.ap:not(.is-anim) .ap-pieces{display:none}