
:root{
  --orange:#ED5514; --orange-d:#C7440D; --orange-l:#F47A3E;
  --ink:#141210; --paper:#F1EBDD; --paper-l:#FBF7EC; --grey:#8A8378;
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --hand:'Caveat','Comic Sans MS',cursive;
  --wild:1; --tooth:64px;
}
html[data-mode=agency]{
  --orange:#1b5fc4; --orange-d:#144a9c; --orange-l:#3d82e0; --ink:#0b2a5b; --paper:#f3f6fb; --paper-l:#ffffff; --grey:#6b7a93;
  --display:Arial,Helvetica,sans-serif; --hand:Arial,Helvetica,sans-serif; --wild:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--orange)}
.grain{position:fixed;inset:0;z-index:9990;pointer-events:none;mix-blend-mode:multiply;opacity:.55;background-image:var(--grain)}
html[data-mode=agency] .grain{display:none}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:99999}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- nav ---------- */
.nav{opacity:var(--navo,1);position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,3vw,44px);transition:color .25s;color:var(--ink);pointer-events:none}
.nav > *{pointer-events:auto}
.nav .logo{display:block;width:clamp(96px,9vw,128px);position:relative;aspect-ratio:509/242}
.nav .logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s}
.nav .logo .lo{opacity:0}
.nav[data-t=paper] .logo .lw{opacity:0}.nav[data-t=paper] .logo .lo{opacity:1}
.nav .links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);font-weight:700;font-size:15px;letter-spacing:.01em}
.nav .links a{text-decoration:none;position:relative;padding:4px 0}
.nav .links a:not(.talk)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s;filter:url(#rough)}
.nav .links a:hover::after{transform:scaleX(1)}
.nav[data-t=ink]{color:var(--paper)}
.nav[data-t=orange]{color:var(--ink)}
.mode{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border:2px solid currentColor;border-radius:99px}
.mode i{width:30px;height:16px;border-radius:99px;border:2px solid currentColor;position:relative}
.mode i::after{content:"";position:absolute;left:2px;top:2px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:transform .25s}
html[data-mode=agency] .mode i::after{transform:translateX(14px)}
.stampbtn{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:1.05em;padding:.35em .8em .3em;border:.14em solid currentColor;border-radius:.2em;transform:rotate(calc(-3deg * var(--wild)));filter:url(#ink);text-decoration:none;transition:transform .15s}
.stampbtn:hover{transform:rotate(calc(2deg * var(--wild))) scale(1.06)}
.nav .talk{color:var(--paper);background:var(--ink);border-color:var(--ink);font-size:16px;filter:none}
.nav[data-t=ink] .talk{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.burger{display:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:18px;padding:.25em .7em;border:3px solid currentColor;border-radius:.2em;transform:rotate(-3deg)}
.menu{position:fixed;inset:0;z-index:999;background:var(--ink);color:var(--paper);display:none;flex-direction:column;justify-content:center;gap:6px;padding:90px 8vw 40px}
.menu.open{display:flex}
.menu a{font-family:var(--display);text-transform:uppercase;font-size:clamp(44px,13vw,80px);line-height:1.02;text-decoration:none}
.menu a:hover{color:var(--orange)}
@media(max-width:980px){.nav .links{display:none}.burger{display:block;pointer-events:auto}}

/* ---------- shared bits ---------- */
main > section{position:relative}
.teeth{position:absolute;left:0;width:100%;height:calc(var(--tooth) + 12px);pointer-events:none;z-index:5}
.teeth.b{bottom:calc(-1 * var(--tooth) - 12px);filter:drop-shadow(0 9px 7px rgba(20,18,16,.38))}
.teeth.t{top:calc(-1 * var(--tooth) - 12px);filter:drop-shadow(0 -4px 5px rgba(20,18,16,.25))}
.teeth path.f{fill:var(--sheet)} .teeth path.r{fill:var(--paper-l)}
.wrap{width:min(1240px,92vw);margin:0 auto}
.kick{margin-bottom:14px;font-family:var(--hand);font-weight:700;font-size:clamp(26px,2.6vw,40px);line-height:1;color:var(--orange);transform:rotate(-2deg);display:inline-block}
.h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(46px,9.2vw,150px);line-height:.92;letter-spacing:.005em}
.w{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.02;padding:.02em 0 .12em;margin-bottom:-.16em}
.w > span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k) * 60ms)}
.in .w > span, .no-js .w > span{transform:none}
.reveal{transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none}
.doodle path,.doodle circle{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough)}
.draw{stroke-dasharray:1 1;stroke-dashoffset:1}
.no-js .draw{stroke-dashoffset:0}
.hand{font-family:var(--hand);font-weight:700}


/* ---------- PEOPLE (real photos, cut out, pasted on) ---------- */
.cut{position:absolute;isolation:isolate;pointer-events:none;line-height:0}
.cut img{display:block;height:100%;width:auto;filter:drop-shadow(3px 0 0 #FBF7EC) drop-shadow(-3px 0 0 #FBF7EC) drop-shadow(0 3px 0 #FBF7EC) drop-shadow(0 -3px 0 #FBF7EC) drop-shadow(0 16px 14px rgba(20,18,16,.38))}
.cut::before{content:"";position:absolute;z-index:-1;left:-16%;right:-16%;top:24%;bottom:-2%;background:var(--scrap,#FBF7EC);transform:rotate(var(--sr,-3deg));clip-path:polygon(0 3%,7% 0,19% 4%,34% 0,52% 3%,70% 0,88% 4%,100% 1%,98% 30%,100% 58%,97% 100%,0 100%,2% 62%,0 30%);opacity:.96}
.cut::after{content:"";position:absolute;z-index:-1;left:-8%;right:-26%;top:46%;bottom:-6%;background-image:radial-gradient(circle,rgba(20,18,16,.5) 2px,transparent 2.8px);background-size:10px 10px;transform:rotate(calc(var(--sr,-3deg) * -1.4));-webkit-mask-image:linear-gradient(100deg,transparent,#000 60%);mask-image:linear-gradient(100deg,transparent,#000 60%)}
html[data-mode=agency] .cut{display:none}
.bubble{position:absolute;z-index:3;font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.4vw,36px);line-height:1;color:var(--ink);background:var(--paper-l);padding:.32em .6em .3em;white-space:nowrap;transform:rotate(-4deg);box-shadow:3px 4px 0 rgba(20,18,16,.28);clip-path:polygon(0 4%,6% 0,16% 5%,30% 0,48% 4%,66% 0,82% 5%,100% 1%,98% 40%,100% 70%,97% 100%,80% 95%,60% 100%,40% 94%,20% 100%,5% 95%,0 100%,2% 55%)}
.hp-hero{z-index:1;right:clamp(24px,4.4vw,90px);bottom:clamp(180px,28vh,280px);height:min(62vh,720px);transform:translateY(calc((1 - var(--r)) * 90px));--scrap:var(--ink)}
.hp-hero .bubble{left:-120%;top:30%}
.hp-memo{z-index:3;left:-31%;top:22%;height:clamp(230px,28vw,400px);--sr:-4deg}
.hp-memo .bubble{left:62%;top:-14%;font-size:clamp(22px,2.3vw,34px)}
.memo{z-index:1}
.hp-pick{right:1%;bottom:100%;margin-bottom:-6px;z-index:0;height:clamp(150px,27vw,400px);transition:transform .55s cubic-bezier(.2,1.3,.4,1),opacity .35s;--scrap:#2b2824}
.hp-pick.seeker{right:7%}
.padwrap[data-pick=look] .hp-pick.hirer{transform:translateY(60px);opacity:0}
.padwrap[data-pick=hire] .hp-pick.seeker{transform:translateY(60px);opacity:0}
.lineup{position:relative;margin-top:clamp(70px,9vw,130px);display:flex;align-items:flex-end;justify-content:center;gap:clamp(30px,6vw,110px);border-bottom:7px solid var(--ink);padding:0 2%;background:repeating-linear-gradient(to top,transparent 0,transparent 79px,rgba(20,18,16,.22) 79px,rgba(20,18,16,.22) 81px)}
.lineup .cut{position:relative;height:clamp(250px,31vw,440px);--scrap:var(--paper-l)}
.lineup .cut.grp{height:clamp(190px,24vw,350px)}
.lineup .cap{position:absolute;left:0;top:-56px;font-family:var(--hand);font-weight:700;font-size:clamp(26px,2.6vw,38px);color:var(--ink);transform:rotate(-2deg);line-height:1}
.hp-map{z-index:0;left:70%;bottom:-6%;height:62%;--scrap:var(--paper-l);--sr:3deg}
.map>svg{position:relative;z-index:1}
.hp-ring{z-index:0;right:1%;top:clamp(60px,9vw,140px);height:clamp(300px,34vw,500px);--scrap:var(--orange-d);--sr:3deg}
.ring-us .giant,.ring-us .telbig,.ring-us .real{position:relative;z-index:1}
@media(max-width:820px){
  .hp-hero{height:36vh;bottom:40vh;right:2vw}
  .hp-hero .bubble{display:none}
  .hp-memo{display:none}
  .hp-pick{height:clamp(130px,38vw,190px)}
  .lineup{flex-wrap:wrap;gap:0;justify-content:center;border-bottom-width:6px}
  .lineup .cap{position:static;flex:0 0 100%;margin:0 0 6px}
  .lineup .cut{height:44vw}.lineup .cut.grp{height:38vw}
  .hp-map{display:none}
  .hp-ring{position:relative;right:auto;top:auto;bottom:auto;display:block;margin:30px 0 0 auto;height:260px;width:max-content}
}

/* ---------- HERO ---------- */
.hero{height:320vh;background:var(--orange);--sheet:var(--orange);--r:0;--k:0;--c:0}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;cursor:none}
.under{position:absolute;inset:0;background:var(--orange);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(86px,13vh,130px) clamp(18px,4.6vw,80px) clamp(18px,5vh,56px);overflow:hidden}
.shard{position:absolute;pointer-events:none}
.shard.a{left:-6vw;bottom:-8vh;width:56vw;height:46vh;background:var(--orange-d);clip-path:polygon(0 14%,9% 6%,13% 16%,24% 2%,31% 12%,44% 0,52% 10%,63% 3%,72% 15%,86% 6%,100% 24%,96% 100%,0 100%);transform:rotate(-3deg)}
.shard.b{right:-8vw;top:-6vh;width:44vw;height:44vh;background:var(--orange-l);clip-path:polygon(8% 0,100% 0,100% 88%,91% 94%,84% 82%,72% 96%,63% 84%,50% 100%,42% 86%,30% 94%,22% 80%,10% 90%,0 62%,6% 40%,0 22%);transform:rotate(4deg);opacity:.55}
.dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(20,18,16,.28) 1.6px,transparent 2.4px);background-size:11px 11px;-webkit-mask-image:radial-gradient(ellipse at 100% 100%,#000 0,transparent 55%);mask-image:radial-gradient(ellipse at 100% 100%,#000 0,transparent 55%)}
.eyebrow{position:relative;z-index:2;font-weight:800;font-size:clamp(11px,1.15vw,15px);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.h1{position:relative;z-index:2;align-self:center;font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--paper-l);font-size:min(12vw,23vh);line-height:.9;letter-spacing:.004em;transform:scale(calc(1.07 - .07 * var(--r)));transform-origin:0 50%}
.h1 .l{display:block}
.agw{position:relative;display:inline-block;color:var(--paper-l)}
.agw::after{content:"";position:absolute;left:-2%;right:-2%;top:46%;height:.15em;background:var(--ink);border-radius:.08em;transform:scaleX(var(--k)) rotate(-3deg);transform-origin:left;filter:url(#rough)}
.agw::before{content:"";position:absolute;left:-1%;right:-3%;top:60%;height:.1em;background:var(--ink);border-radius:.08em;transform:scaleX(calc(var(--k) * 1)) rotate(2deg);transform-origin:left;filter:url(#rough);opacity:.9}
.agnote{position:absolute;right:2%;top:calc(100% - .06em);font-family:var(--hand);font-weight:700;text-transform:none;font-size:.2em;line-height:1;color:var(--ink);white-space:nowrap;transform:rotate(-4deg);opacity:var(--k)}
.under-b{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sub{max-width:27em;font-size:clamp(16px,1.55vw,23px);line-height:1.4;font-weight:500;color:var(--ink)}
.tel{position:relative;display:inline-block;font-family:var(--display);font-size:clamp(34px,5.4vw,84px);line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;letter-spacing:.01em;padding:.06em .14em}
.tel svg{position:absolute;left:-11%;top:-38%;width:122%;height:176%;color:var(--paper-l);overflow:visible}
.telnote{display:block;font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.1vw,32px);color:var(--ink);transform:rotate(-2deg);margin:0 0 4px .1em}
.cta{font-size:clamp(20px,2vw,30px);color:var(--ink);border-color:var(--ink)}
.cta:hover{background:var(--ink);color:var(--orange)}
.scrollnote{position:absolute;z-index:6;left:50%;bottom:4.5vh;transform:translateX(-50%) rotate(-2deg);font-family:var(--hand);font-weight:700;font-size:clamp(26px,2.8vw,42px);color:#fff;text-align:center;line-height:1;opacity:calc(1 - var(--r) * 12);pointer-events:none;text-shadow:0 2px 0 rgba(11,42,91,.6)}
.scrollnote svg{margin:6px auto 0;width:44px;height:58px;color:#fff;animation:bob 1.3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(8px)}}
.half{position:absolute;inset:0;z-index:4;will-change:transform;filter:drop-shadow(0 20px 28px rgba(0,0,0,calc(var(--r) * .42)))}
.half.L{transform-origin:0 100%;transform:translate3d(calc(var(--r) * -96vw),calc(var(--r) * 30vh),0) rotate(calc(var(--r) * -24deg))}
.half.R{transform-origin:100% 100%;transform:translate3d(calc(var(--r) * 96vw),calc(var(--r) * 46vh),0) rotate(calc(var(--r) * 21deg))}
.half.L .ag{clip-path:var(--clipL)} .half.R .ag{clip-path:var(--clipR)}
.hero.torn .half{display:none}
.hero.whole .half.L .ag{clip-path:none} .hero.whole .half.R{display:none}
.pencil{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;will-change:transform;filter:drop-shadow(1px 2px 0 rgba(255,255,255,.55))}
@media(hover:none){.pencil{display:none}}
canvas.scrib{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:multiply}
/* fake agency page */
.ag{position:absolute;inset:0;background:#fff;color:#0b2a5b;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;overflow:hidden}
.ag-top{height:66px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 4.4vw;border-bottom:1px solid #e3e8f0;font-size:14px;color:#3d4b66}
.ag-logo{font-size:23px;font-weight:800;letter-spacing:-.01em;color:#0b2a5b}.ag-logo sup{font-size:11px;font-weight:400}
.ag-top nav span{margin-left:30px}
.ag-top .ag-in{border:1px solid #0b2a5b;border-radius:4px;padding:8px 14px;color:#0b2a5b;font-weight:700}
.ag-hero{position:relative;flex:1;background:linear-gradient(118deg,#0b2a5b 0%,#173f91 52%,#2b86d4 100%);color:#fff;padding:clamp(24px,7vh,80px) 6vw 0;overflow:hidden}
.ag-hero::before{content:"";position:absolute;right:-9vw;top:-18vh;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.26),rgba(255,255,255,0) 68%)}
.ag-hero::after{content:"";position:absolute;right:11vw;bottom:-22vh;width:30vw;height:30vw;border-radius:50%;border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 62px rgba(255,255,255,.04)}
.ag-eye{position:relative;font-size:clamp(10px,1vw,13px);letter-spacing:.24em;font-weight:700;color:#7fd1ff}
.ag-h{position:relative;font-size:clamp(28px,4.15vw,70px);line-height:1.18;font-weight:800;letter-spacing:-.015em;max-width:15.5em;margin:1.6vh 0 2.4vh}
.ag-p{position:relative;font-size:clamp(14px,1.55vw,25px);line-height:1.75;max-width:33em;color:#d6e6ff}
.ag-btn{position:relative;display:inline-block;margin-top:3.4vh;background:#19c9b8;color:#04233f;font-weight:700;font-size:clamp(13px,1.2vw,18px);padding:1em 2em;border-radius:40px}
.ag-chat{position:absolute;right:3vw;bottom:calc(5vh + 54px);width:min(300px,34vw);background:#fff;color:#0b2a5b;border-radius:18px 18px 4px 18px;padding:14px 16px;font-size:clamp(11px,1vw,14px);line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.ag-chat b{display:block;font-size:.9em;color:#2b86d4;margin-bottom:3px}
.ag-cookie{position:absolute;left:0;right:0;bottom:0;background:#fff;color:#334;padding:12px 4.4vw;font-size:clamp(10px,.95vw,13px);display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dde4ee}
.ag-cookie span:last-child{background:#0b2a5b;color:#fff;border-radius:4px;padding:7px 14px;font-weight:700}
/* redline marks (inline, wrap-safe) */
.jar{--s:0;background:linear-gradient(var(--mk),var(--mk)) 0 56%/calc(var(--s) * 100%) .13em no-repeat,linear-gradient(var(--mk),var(--mk)) 0 42%/calc(var(--s) * 92%) .09em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;--mk:#ED5514}
.says{display:inline-block;font-family:var(--hand);font-weight:700;font-size:1.3em;line-height:.8;color:#FFE7C2;margin-left:.3em;transform:rotate(-2.5deg) translateY(calc((1 - var(--s2,0)) * 10px));opacity:var(--s2,0);letter-spacing:0;white-space:nowrap}
.ag-h .says{font-size:1.05em}
.ag-btn .says{position:absolute;left:105%;top:50%;margin-top:-.35em;color:#FFE7C2}
.ag-chat .says{display:block;color:#ED5514;font-size:1.9em;margin:4px 0 0}
.ag-chat .jar{--mk:#ED5514}
/* per-phrase progress, set by hero script */
.hero .j0{--s:var(--s0)}.hero .j0+.says{--s2:var(--s0b)}.hero .j1{--s:var(--s1)}.hero .j1+.says{--s2:var(--s1b)}.hero .j2{--s:var(--s2x)}.hero .j2+.says{--s2:var(--s2b)}.hero .j3{--s:var(--s3)}.hero .j3+.says{--s2:var(--s3b)}.hero .j4{--s:var(--s4)}.hero .j4+.says{--s2:var(--s4b)}.hero .j5{--s:var(--s5)}.hero .j5+.says{--s2:var(--s5b)}

/* ---------- LETTER ---------- */
.letter{background:var(--paper);--sheet:var(--paper);padding:clamp(120px,15vw,200px) 0 clamp(120px,13vw,190px);overflow:visible}
.letter .halftone{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(20,18,16,.12) 1.4px,transparent 2px);background-size:9px 9px;-webkit-mask-image:linear-gradient(100deg,#000,transparent 40%);mask-image:linear-gradient(100deg,#000,transparent 40%);pointer-events:none}
.letter .intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(38px,6vw,90px);position:relative}
.letter .h2{max-width:8.5em}
.letter .h2 em{font-style:normal;color:var(--orange)}
.letter .aside{max-width:19em;font-size:clamp(17px,1.5vw,22px);line-height:1.4;font-weight:500;padding-bottom:.6em}
.memo-wrap{position:relative;width:min(840px,94vw);margin:0 auto;filter:drop-shadow(0 18px 18px rgba(20,18,16,.28));transform:rotate(-1.1deg)}
.memo{position:relative;background:#FFFEFA;padding:clamp(40px,6vw,76px) clamp(24px,5vw,72px) clamp(46px,6vw,80px);font-family:'Courier New',Courier,monospace;font-size:clamp(15px,1.75vw,22px);line-height:2.35;color:#2b2a27;clip-path:var(--memoClip);background-image:repeating-linear-gradient(transparent 0,transparent calc(1px),transparent 1px)}
.memo::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 0 0,rgba(180,140,80,.16),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(180,140,80,.14),transparent 50%);pointer-events:none}
.memo .subj{font-weight:700;border-bottom:2px solid #2b2a27;display:inline-block;line-height:1.6;margin-bottom:.9em}
.memo p{margin:0 0 .5em}
.memo .jar{--mk:#ED5514;--s:var(--p,0);--s2:var(--p,0);transition:none}
.memo .says{color:var(--ink);font-size:1.5em;line-height:.7;transform:rotate(-3deg) translateY(calc((1 - var(--sx,0)) * 8px));opacity:var(--sx,0)}
.memo .sig{margin-top:1.2em;display:flex;align-items:flex-end;gap:14px}
.memo .sig svg{width:170px;height:56px;color:#1b2f6b}
.clip{position:absolute;left:8%;top:-34px;width:46px;height:116px;z-index:3;color:#9aa3ae;transform:rotate(-2deg)}
.ring{position:absolute;right:7%;top:18%;width:150px;height:150px;border-radius:50%;border:9px solid rgba(110,64,26,.2);border-top-color:rgba(110,64,26,.08);border-left-color:rgba(110,64,26,.28);filter:blur(.7px);transform:rotate(30deg);pointer-events:none;z-index:2}
.nope{position:absolute;right:-1.5%;bottom:-3%;z-index:4;font-family:var(--display);text-transform:uppercase;font-size:clamp(70px,13vw,190px);line-height:.9;color:var(--orange);border:.07em solid var(--orange);border-radius:.1em;padding:.04em .16em 0;mix-blend-mode:multiply;filter:url(#ink);opacity:calc(var(--p) * 1.4);transform:rotate(calc(-9deg * var(--wild))) scale(calc(1 + (1 - var(--p)) * 1.8));pointer-events:none}

/* ---------- CHOOSE ---------- */
.choose{background:var(--ink);color:var(--paper);--sheet:var(--ink);padding:clamp(110px,13vw,170px) 0 clamp(120px,14vw,200px);overflow:visible}
.choose .big{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .3em;font-family:var(--display);text-transform:uppercase;font-size:clamp(54px,11.2vw,190px);line-height:.95}
.choose .big .or{font-family:var(--hand);text-transform:none;font-size:.4em;color:var(--orange);font-weight:700;transform:rotate(-6deg)}
.pick{position:relative;font-family:inherit;text-transform:inherit;color:rgba(241,235,221,.34);transition:color .25s;padding:0 .04em}
.pick[aria-selected=true]{color:var(--paper)}
.pick:hover{color:var(--paper)}
.pick svg{position:absolute;left:-4%;bottom:-.08em;width:108%;height:.2em;color:var(--orange);overflow:visible}
.pick svg path{opacity:0;stroke:currentColor;stroke-width:15;fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .55s cubic-bezier(.2,.8,.2,1);filter:url(#rough)}
.pick[aria-selected=true] svg path{stroke-dashoffset:0;opacity:1}
.padwrap{perspective:2200px;position:relative;margin:clamp(40px,6vw,80px) auto 0;width:min(880px,94vw);height:clamp(520px,60vw,610px)}
.page{position:absolute;inset:0;background:#FBF7EC;color:var(--ink);transform-origin:0 50%;transition:transform .9s cubic-bezier(.6,.1,.2,1),opacity .4s .3s;backface-visibility:hidden;padding:46px 40px 30px clamp(70px,9vw,104px);border-radius:3px 10px 10px 3px;box-shadow:0 30px 60px rgba(0,0,0,.5);background-image:linear-gradient(90deg,transparent clamp(58px,7.4vw,84px),#e9674a clamp(58px,7.4vw,84px),#e9674a calc(clamp(58px,7.4vw,84px) + 2px),transparent calc(clamp(58px,7.4vw,84px) + 2px)),repeating-linear-gradient(transparent 0,transparent 53px,rgba(60,110,170,.35) 53px,rgba(60,110,170,.35) 54px);background-position:0 0,0 14px}
.page.off{transform:rotateY(-118deg);opacity:0;pointer-events:none}
.page::before{content:"";position:absolute;left:14px;top:30px;bottom:30px;width:26px;background:radial-gradient(circle at 50% 50%,#1c1a17 0 7px,transparent 8px) 0 0/26px 56px repeat-y}
.page h3{font-family:var(--hand);font-weight:700;font-size:clamp(40px,5vw,62px);line-height:54px;color:var(--ink);margin-bottom:0;transform:rotate(-1deg)}
.page ul{list-style:none}
.page li{font-family:var(--hand);font-weight:500;font-size:clamp(27px,3vw,36px);line-height:54px;color:#232120;position:relative;padding-left:1.3em;margin:0}
.page li::before{content:"";position:absolute;left:0;top:14px;width:26px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M2 12 L9 19 L24 3' fill='none' stroke='%23ED5514' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
html[data-mode=agency] .page li::before{filter:hue-rotate(200deg)}
.page .go{position:absolute;right:34px;bottom:34px;font-size:clamp(20px,2vw,28px);color:var(--orange);border-color:var(--orange)}
.page .go:hover{background:var(--orange);color:var(--paper-l)}
@media(max-width:700px){.page{padding:34px 20px 24px 62px}.page li{line-height:44px;font-size:25px}.page h3{line-height:46px}.padwrap{height:600px}}

/* ---------- DESKS ---------- */
.desks{background:var(--paper);--sheet:var(--paper);padding:clamp(120px,14vw,190px) 0 clamp(110px,12vw,170px)}
.desks .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,40px)}
.desks .h2 em{font-style:normal;color:var(--orange)}
.desks .note{font-family:var(--hand);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1;transform:rotate(-3deg);display:flex;align-items:center;gap:10px;color:var(--ink)}
.desks .note svg{width:70px;height:48px;color:var(--orange)}
.wall{position:relative;height:clamp(560px,64vw,900px)}
.wall .num{position:absolute;right:-1%;top:-8%;font-family:var(--display);font-size:clamp(220px,40vw,640px);line-height:1;color:transparent;pointer-events:none;background-image:radial-gradient(circle,rgba(237,85,20,.5) 3px,transparent 4px);background-size:14px 14px;-webkit-background-clip:text;background-clip:text;opacity:.7}
.stamp{--rr:calc(var(--r) * var(--wild));position:absolute;left:var(--x);top:var(--y);display:block;text-decoration:none;font-family:var(--display);text-transform:uppercase;line-height:.98;letter-spacing:.015em;font-size:var(--fs);color:var(--c,var(--orange));text-align:center;padding:.16em .36em .12em;border:.1em solid var(--c,var(--orange));border-radius:.14em;transform:rotate(var(--rr));filter:url(#ink);mix-blend-mode:multiply;transition:opacity .25s,transform .25s;z-index:1}
.stamp small{display:block;font-family:var(--body);font-weight:800;font-size:.2em;letter-spacing:.3em;margin-bottom:.35em;opacity:.85}
.stamp.k2{--c:var(--ink);border-width:.07em;border-radius:0;border-left:0;border-right:0;padding-left:.2em;padding-right:.2em}
.stamp.k3{border-radius:99px;padding:.18em .6em .14em}
.stamp.k4{background:var(--c,var(--orange));color:var(--paper)}
.stamp.k4 small{opacity:.8}
.js .stamp{opacity:0}
.wall.landed .stamp{animation:slam .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i) * 150ms)}
@keyframes slam{0%{opacity:0;transform:translateY(-60px) scale(2.3) rotate(calc(var(--rr) + 12deg))}55%{opacity:1;transform:translateY(3px) scale(.95) rotate(var(--rr))}100%{opacity:1;transform:rotate(var(--rr))}}
.wall.landed.done .stamp{animation:none;opacity:1}
.wall.done:hover .stamp{opacity:.32}
.wall.done .stamp:hover,.wall.done .stamp:focus-visible{opacity:1;transform:rotate(calc(var(--rr) * -.4)) scale(1.07);z-index:5;outline:none}
@media(max-width:820px){
  .wall{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 14px;padding-top:10px}
  .stamp{position:relative;left:auto;top:auto;font-size:clamp(26px,8vw,44px) !important}
  .wall .num{display:none}
}

/* ---------- STATEMENT ---------- */
.state{background:var(--orange);--sheet:var(--orange);color:var(--ink);padding:clamp(120px,14vw,190px) 0 clamp(120px,14vw,190px);overflow:visible}
.state .shard{position:absolute}
.state .shard.s1{left:-8vw;top:-4vh;width:52vw;height:60vh;background:var(--orange-d);clip-path:polygon(0 0,100% 0,92% 14%,100% 30%,88% 44%,96% 60%,84% 78%,90% 100%,0 100%);opacity:.7}
.state .rn{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,8.6vw,140px);line-height:1.05;display:flex;flex-wrap:nowrap;gap:.04em;align-items:center}
.rl{display:inline-block;padding:.02em .09em 0;line-height:1;box-shadow:2px 3px 0 rgba(20,18,16,.25);transform:rotate(var(--a));position:relative;top:var(--t)}
.rl.v1{background:var(--paper-l);color:var(--ink);font-family:var(--display)}
.rl.v2{background:var(--ink);color:var(--paper);font-family:Georgia,'Times New Roman',serif;font-weight:700;text-transform:none}
.rl.v3{background:#fff;color:var(--orange-d);font-family:var(--body);font-weight:800}
.rl.v4{background:var(--paper);color:var(--ink);font-family:'Courier New',monospace;font-weight:700}
.rl.v5{background:#111;color:var(--orange-l);font-family:Impact,var(--display)}
.rl.v6{background:#f6e8c4;color:#7a1f0a;font-family:Georgia,serif;font-style:italic;font-weight:700;text-transform:none}
.state .both{font-family:var(--display);text-transform:uppercase;font-size:clamp(46px,9vw,140px);line-height:.95;color:var(--paper-l);margin-top:.12em}
.state .both span{position:relative;display:inline-block}
.state .both span svg{position:absolute;left:-3%;bottom:-.1em;width:106%;height:.22em;color:var(--ink);overflow:visible}
.state .body{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(40px,6vw,90px);align-items:start}
.state .body p{font-size:clamp(18px,1.7vw,25px);line-height:1.45;font-weight:500;max-width:27em}
.state .body p + p{margin-top:.9em}
.tally{position:relative}
.tally svg{width:100%;overflow:visible;color:var(--ink)}
.tally path{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round;filter:url(#rough)}
.tally .cap{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px;font-family:var(--hand);font-weight:700;color:var(--ink);font-size:clamp(26px,2.6vw,38px);line-height:1}
.tally .years{font-family:var(--display);font-size:clamp(54px,7vw,110px);line-height:.9;color:var(--paper-l)}
.tally .years small{font-family:var(--hand);font-size:.34em;color:var(--ink);display:block;margin-top:.1em}
@media(max-width:820px){.state .body{grid-template-columns:1fr}}

/* ---------- ROUTE ---------- */
.route{background:var(--paper);--sheet:var(--paper);padding:clamp(120px,14vw,190px) 0 clamp(90px,11vw,150px);overflow:visible}
.route .h2{max-width:9em}
.route .h2 em{font-style:normal;color:var(--orange)}
.route .lede{max-width:30em;font-size:clamp(18px,1.7vw,24px);font-weight:500;margin-top:20px}
.map{position:relative;margin-top:clamp(20px,4vw,60px);width:100%}
.map>svg{width:100%;height:auto;overflow:visible}
.map .trail{fill:none;stroke:var(--ink);stroke-width:5;stroke-dasharray:3 16;stroke-linecap:round;opacity:.9}
.map .ln{fill:none;stroke:var(--orange);stroke-width:9;stroke-linecap:round;filter:url(#rough);stroke-dasharray:1 1}
.map .pin circle{fill:var(--paper);stroke:var(--ink);stroke-width:6}
.map .pin text{font-family:var(--display);font-size:56px;fill:var(--ink);text-transform:uppercase}
.map .pin .hn{font-family:var(--hand);font-weight:700;font-size:44px;fill:var(--orange);text-transform:none}
.plane{position:absolute;left:0;top:0;width:clamp(46px,5vw,76px);transform-origin:50% 50%;will-change:transform;color:var(--ink)}
.plane svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(3px 5px 0 rgba(20,18,16,.18))}

/* ---------- INSIGHTS ---------- */
.insights{background:var(--paper-l);--sheet:var(--paper-l);padding:clamp(110px,12vw,170px) 0 clamp(120px,13vw,190px)}
.insights .h2{font-size:clamp(40px,7vw,110px)}
.line{position:relative;height:clamp(440px,42vw,520px);margin-top:20px}
.line > svg{position:absolute;left:0;top:0;width:100%;height:100px;overflow:visible}
.line > svg path{fill:none;stroke:var(--ink);stroke-width:3;vector-effect:non-scaling-stroke}
.scrap{position:absolute;top:var(--ty);left:var(--lx);width:clamp(230px,26vw,330px);transform-origin:50% 0;animation:sway 5.5s ease-in-out infinite alternate;animation-delay:var(--dl);text-decoration:none;display:block;filter:drop-shadow(0 12px 10px rgba(20,18,16,.22))}
.scrap .peg{position:absolute;left:50%;top:-22px;width:20px;height:50px;margin-left:-10px;background:linear-gradient(90deg,#b98652,#d3a06a 45%,#a47040);border-radius:4px 4px 7px 7px;z-index:3}
.scrap .peg::after{content:"";position:absolute;left:0;right:0;top:20px;height:3px;background:rgba(20,18,16,.4)}
.scrap .sheet{position:relative;background:var(--paper);padding:34px 22px 56px;clip-path:var(--sc);color:var(--ink)}
.scrap time{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--orange);display:block;line-height:1;margin-bottom:8px}
.scrap h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(25px,2.4vw,33px);line-height:1.02}
.scrap .rd{display:inline-block;margin-top:14px;font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-bottom:3px solid var(--orange)}
.scrap:hover{animation-play-state:paused;transform:rotate(0deg) scale(1.03)}
@keyframes sway{from{transform:rotate(calc(-3.2deg * var(--wild)))}to{transform:rotate(calc(3deg * var(--wild)))}}
@media(max-width:820px){.line{height:auto;display:flex;flex-direction:column;gap:46px;align-items:center;padding-top:30px}.line>svg{display:none}.scrap{position:relative;top:auto;left:auto}}

/* ---------- RING US ---------- */
.ring-us .wrap{position:relative}
.ring-us{background:var(--ink);color:var(--paper);--sheet:var(--ink);padding:clamp(120px,14vw,190px) 0 40px;overflow:hidden}
.ring-us .giant{font-family:var(--display);text-transform:uppercase;color:var(--orange);font-size:clamp(90px,24vw,400px);line-height:.84;letter-spacing:-.005em}
.ring-us .telbig{display:inline-block;font-family:var(--display);color:var(--paper);font-size:clamp(40px,8.6vw,140px);line-height:1;text-decoration:none;margin-top:.1em;letter-spacing:.01em}
.ring-us .telbig:hover{color:var(--orange)}
.ring-us .real{font-family:var(--hand);font-weight:700;font-size:clamp(26px,2.8vw,42px);color:var(--orange);display:block;transform:rotate(-2deg);margin-top:8px}
.padform{position:relative;margin-top:clamp(50px,7vw,100px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.padform .lede{font-size:clamp(18px,1.7vw,24px);max-width:22em;font-weight:500;color:rgba(241,235,221,.88)}
.padform .lede b{color:var(--orange)}
.fields{display:grid;gap:22px}
.fields label.t span{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--orange);display:block;line-height:1}
.fields input[type=text],.fields input[type=email],.fields textarea{width:100%;background:transparent;border:0;border-bottom:3px solid rgba(241,235,221,.5);color:var(--paper);font-family:var(--hand);font-weight:500;font-size:34px;line-height:1.3;padding:4px 0;outline:none;border-radius:0;resize:vertical}
.fields input:focus,.fields textarea:focus{border-bottom-color:var(--orange)}
.who{display:flex;gap:14px;flex-wrap:wrap}
.who label{cursor:pointer}
.who input{position:absolute;opacity:0}
.who label span{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:24px;padding:.3em .7em .25em;border:3px solid rgba(241,235,221,.5);border-radius:.2em;transform:rotate(-2deg);color:rgba(241,235,221,.7);filter:url(#ink)}
.who input:checked + span{color:var(--ink);background:var(--orange);border-color:var(--orange)}
.who input:focus-visible + span{outline:3px dashed var(--paper);outline-offset:3px}
.send{justify-self:start;position:relative;font-size:30px;color:var(--ink);background:var(--orange);border-color:var(--orange);margin-top:6px}
.send:hover{background:var(--paper);border-color:var(--paper)}
.sentstamp{position:absolute;right:4%;top:30%;font-family:var(--display);text-transform:uppercase;font-size:clamp(70px,12vw,170px);color:var(--paper);border:.07em solid var(--paper);padding:.02em .14em 0;transform:rotate(-12deg) scale(2.4);opacity:0;pointer-events:none;filter:url(#ink);z-index:4}
.padform.sent .sentstamp{opacity:.95;transform:rotate(-12deg) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .15s}
footer{position:relative;margin-top:clamp(80px,10vw,140px);padding-top:30px;border-top:2px solid rgba(241,235,221,.2);display:flex;flex-wrap:wrap;gap:30px 60px;justify-content:space-between;font-size:15px;color:rgba(241,235,221,.8)}
footer img{width:150px}
footer a{text-decoration:none}footer a:hover{color:var(--orange)}
footer .cols{display:flex;gap:clamp(30px,6vw,90px);flex-wrap:wrap}
footer h4{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:var(--paper);font-size:18px;margin-bottom:8px}
footer li{list-style:none;line-height:1.9}
.fine{width:100%;font-size:13px;opacity:.7;padding-bottom:24px}
@media(max-width:820px){.padform{grid-template-columns:1fr}}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);z-index:99999;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:99px;font-weight:700;font-size:15px;opacity:0;transition:.35s;pointer-events:none;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
  .scrap,.scrollnote svg{animation:none}
  .w > span{transform:none;transition:none}
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  html{scroll-behavior:auto}
}

/* ---- ALS sticker over the corporate page ---- */
.nav.herobar{opacity:0!important;pointer-events:none!important}
.sticker{display:none;position:fixed;z-index:1001;top:clamp(76px,10vh,104px);right:clamp(14px,3.4vw,56px);width:clamp(150px,15vw,214px);padding:16px 16px 14px;background:var(--orange);color:var(--ink);text-decoration:none;transform:rotate(7deg);border-radius:10px 10px 10px 4px;box-shadow:0 10px 18px rgba(0,0,0,.35),0 0 0 4px #fff;clip-path:none;font-family:var(--hand);font-weight:700;line-height:1;text-align:center}
.nav.herobar~.sticker{display:block;animation:stick .6s cubic-bezier(.2,1.6,.4,1) both .2s}
.sticker img{width:76%;margin:0 auto 10px}
.sticker .hn{display:block;font-size:clamp(17px,1.5vw,22px);line-height:1.05}
.sticker::after{content:"";position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;background:linear-gradient(135deg,#fff 50%,rgba(20,18,16,.25) 50%);border-radius:0 0 4px 0;box-shadow:-3px -3px 6px rgba(0,0,0,.2);clip-path:polygon(100% 0,0 100%,100% 100%)}
@keyframes stick{from{opacity:0;transform:rotate(18deg) scale(1.8)}to{opacity:1;transform:rotate(7deg) scale(1)}}
html[data-mode=agency] .sticker{display:none!important}
@media(max-width:700px){.sticker{width:112px;padding:8px 8px 8px;top:47vh;right:12px;left:auto}.sticker .hn{font-size:14px}.sticker .hn i{display:none}.ag-top nav span:not(.ag-in){display:none}.ag-logo{white-space:nowrap}}
.ag-trust{position:absolute;left:6vw;bottom:calc(4px + 46px);z-index:2;display:flex;gap:2.2vw;font-size:clamp(9px,.8vw,12px);letter-spacing:.14em;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;white-space:nowrap;padding:10px 0}
.ag-trust span+span{padding-left:2.2vw;border-left:1px solid rgba(255,255,255,.35)}
@media(max-width:980px){.ag-trust{display:none}}
html,body{overflow-x:clip}

/* =================== INNER PAGES =================== */
body.inner{background:var(--ink)}
.sec{position:relative;padding:clamp(120px,13vw,180px) 0 clamp(120px,13vw,180px)}
.sec.paper{background:var(--paper);--sheet:var(--paper)}
.sec.pl{background:var(--paper-l);--sheet:var(--paper-l)}
.sec.ink{background:var(--ink);color:var(--paper);--sheet:var(--ink)}
.sec.orange{background:var(--orange);color:var(--ink);--sheet:var(--orange)}
.sec.ink .kick{color:var(--orange)} .sec.orange .kick{color:var(--ink)}
.h2 em{font-style:normal;color:var(--orange)}
.sec.orange .h2 em{color:var(--paper-l)}
.lede{font-size:clamp(18px,1.7vw,24px);font-weight:500;max-width:30em;margin-top:20px}
.sec.ink .lede{color:rgba(241,235,221,.88)}
.h2.m{font-size:clamp(40px,7vw,104px)}

/* page hero */
.phero{position:relative;background:var(--orange);--sheet:var(--orange);color:var(--ink);padding:clamp(130px,17vh,190px) 0 clamp(110px,12vw,170px);min-height:min(100vh,860px);overflow:visible}
.phero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:center}
.phero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(54px,9.6vw,158px);line-height:.9;letter-spacing:.003em}
.phero h1 .w{vertical-align:baseline}
.phero .sub{font-size:clamp(19px,1.9vw,27px);font-weight:500;max-width:25em;margin-top:26px}
.phero .go{margin-top:30px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-size:clamp(20px,2vw,30px)}
.phero .kick{color:var(--ink)}
.phero .fig{position:relative;height:clamp(380px,50vw,700px)}
.phero .fig .cut{right:2%;bottom:0;height:100%;--sr:-5deg;--scrap:var(--ink)}
.phero .bgword{position:absolute;right:-2%;top:-6%;font-family:var(--display);font-size:clamp(200px,34vw,520px);line-height:1;color:transparent;background-image:radial-gradient(circle,rgba(20,18,16,.38) 3px,transparent 4px);background-size:14px 14px;-webkit-background-clip:text;background-clip:text;pointer-events:none;text-transform:uppercase;white-space:nowrap}
.phero .shard{position:absolute;pointer-events:none;background:var(--paper-l);opacity:.9;clip-path:polygon(0 8%,30% 0,100% 12%,92% 100%,10% 90%);transform:rotate(var(--sr,6deg))}
@media(max-width:820px){.phero .wrap{grid-template-columns:1fr}.phero .fig{height:clamp(330px,88vw,460px);margin-top:10px}.phero .fig .cut{right:auto;left:50%;transform:translateX(-50%)}}

/* strike + handwriting replacement */
.rs{position:relative;display:inline-block;white-space:nowrap}
.rs::after{content:"";position:absolute;left:-3%;right:-3%;top:44%;height:.17em;background:var(--strk,var(--ink));transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.6,0,.2,1) .5s;transform:scaleX(0) rotate(-2deg);filter:url(#rough);opacity:.92}
.sec.ink .rs{--strk:var(--orange)}
body.loaded .rs::after,.in .rs::after,.no-js .rs::after{transform:scaleX(1) rotate(-2deg)}
.says2{position:absolute;left:50%;top:92%;transform:translateX(-50%) rotate(-5deg) scale(.7);font-family:var(--hand);font-weight:700;font-size:.34em;line-height:1;color:var(--paper-l);text-transform:none;white-space:nowrap;opacity:0;transition:opacity .4s 1.1s,transform .5s cubic-bezier(.2,1.6,.4,1) 1.1s;letter-spacing:0;pointer-events:none}
.phero .says2{color:var(--paper-l);text-shadow:2px 2px 0 var(--ink)}
.sec.paper .says2,.sec.pl .says2{color:var(--orange);text-shadow:none}
.sec.ink .says2{color:var(--orange)}
body.loaded .says2,.in .says2,.no-js .says2{opacity:1;transform:translateX(-50%) rotate(-5deg) scale(1)}
.rs.brk .says2{top:84%}

/* hand notes + arrows */
.note2{font-family:var(--hand);font-weight:700;font-size:clamp(26px,2.6vw,40px);line-height:1;color:var(--orange);display:inline-flex;gap:10px;align-items:center;transform:rotate(-3deg)}
.note2 svg{width:64px;height:44px;flex:none}
.sec.orange .note2,.phero .note2{color:var(--ink)}
.doodle path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough)}

/* steps */
.steps{display:flex;flex-direction:column;gap:clamp(60px,8vw,120px);margin-top:clamp(40px,5vw,80px)}
.step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:center}
.step:nth-child(even) .txt{order:2}
.step .big{position:absolute;left:-1%;top:-34%;font-family:var(--display);font-size:clamp(200px,28vw,420px);line-height:1;color:transparent;background-image:radial-gradient(circle,rgba(237,85,20,.55) 3px,transparent 4px);background-size:13px 13px;-webkit-background-clip:text;background-clip:text;pointer-events:none;z-index:0}
.step:nth-child(even) .big{left:auto;right:-1%}
.step .txt{position:relative;z-index:1}
.step h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,5.6vw,86px);line-height:.95}
.step p{font-size:clamp(18px,1.7vw,24px);font-weight:500;max-width:21em;margin-top:14px}
.step .pic{position:relative;height:clamp(260px,30vw,420px);z-index:1}
.step .pic .cut{left:50%;top:0;height:100%;transform:translateX(-50%);--sr:var(--sr0,-4deg)}
.step:nth-child(even) .pic .cut{--sr:4deg}
.step .hn{font-family:var(--hand);font-weight:700;color:var(--orange);font-size:clamp(26px,2.6vw,38px);display:block;margin-top:14px;transform:rotate(-2deg)}
@media(max-width:820px){.step{grid-template-columns:1fr}.step:nth-child(even) .txt{order:0}.step .big{top:-20%}}

/* tick list */
.ticks{list-style:none;margin-top:30px;display:grid;gap:6px}
.ticks li{position:relative;font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4.2vw,64px);line-height:1.08;padding-left:1.25em;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.5,0,.2,1);transition-delay:calc(var(--i)*200ms)}
.ticks.in li,.no-js .ticks li{clip-path:inset(-10% -5% -10% -5%)}
.ticks li::before{content:"";position:absolute;left:0;top:.14em;width:.85em;height:.85em;background:var(--orange);clip-path:polygon(0 56%,14% 42%,36% 64%,82% 8%,100% 22%,38% 98%)}
.sec.orange .ticks li::before{background:var(--ink)}

/* stamps, inline */
.sprow{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px) clamp(14px,2.4vw,34px);margin-top:clamp(30px,4vw,60px);align-items:flex-start}
.sp{display:block;text-decoration:none;font-family:var(--display);text-transform:uppercase;line-height:.98;letter-spacing:.015em;font-size:var(--fs,clamp(30px,5vw,76px));color:var(--c,var(--orange));text-align:center;padding:.16em .36em .12em;border:.1em solid var(--c,var(--orange));border-radius:.14em;transform:rotate(calc(var(--r,0deg)*var(--wild)));filter:url(#ink);mix-blend-mode:multiply;transition:transform .25s}
.sp small{display:block;font-family:var(--body);font-weight:800;font-size:.2em;letter-spacing:.3em;margin-bottom:.35em;opacity:.85}
.sp.k2{--c:var(--ink);border-width:.07em;border-radius:0;border-left:0;border-right:0}
.sp.k3{border-radius:99px;padding:.18em .6em .14em}
.sp.k4{background:var(--c,var(--orange));color:var(--paper)}
.sp:hover{transform:rotate(calc(var(--r,0deg)*-.4)) scale(1.06)}
.sp.reveal.in{animation:slam2 .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d,0s)}
@keyframes slam2{0%{opacity:0;transform:translateY(-60px) scale(2.2) rotate(calc(var(--r,0deg) + 12deg))}55%{opacity:1;transform:translateY(3px) scale(.95) rotate(var(--r,0deg))}100%{opacity:1;transform:rotate(var(--r,0deg))}}
.js .sp.reveal{opacity:0}.js .sp.reveal.in{opacity:1}
.sec.ink .sp{mix-blend-mode:normal}

/* promise rows (candidates) */
.promises{display:grid;gap:clamp(30px,4vw,60px);margin-top:clamp(30px,4vw,60px)}
.promise{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,50px);align-items:center}
.promise .sp{min-width:3.2em}
.promise p{font-size:clamp(18px,1.7vw,24px);font-weight:500;max-width:24em}
.promise h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4vw,60px);line-height:1}
.promise .hn{font-family:var(--hand);font-weight:700;color:var(--orange);font-size:clamp(24px,2.4vw,34px);display:inline-block;transform:rotate(-2deg)}
@media(max-width:700px){.promise{grid-template-columns:1fr}}

/* trio fits-your-life */
.trio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px);margin-top:clamp(40px,5vw,80px)}
.trio .it{position:relative;text-align:center}
.trio .pic{position:relative;height:clamp(260px,30vw,420px)}
.trio .pic .cut{left:50%;top:0;height:100%;transform:translateX(-50%)}
.trio .it:nth-child(2) .cut{--sr:3deg}
.trio .hn{display:block;font-family:var(--hand);font-weight:700;color:var(--orange);font-size:clamp(26px,3vw,44px);margin-top:18px;transform:rotate(-3deg)}
.trio .it p{font-weight:700;font-size:clamp(17px,1.5vw,21px);max-width:14em;margin:6px auto 0}
@media(max-width:820px){.trio{grid-template-columns:1fr;gap:56px}}

/* two-column text block */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.two p{font-size:clamp(18px,1.7vw,23px);font-weight:500;margin-top:16px;max-width:28em}
.two .pic{position:relative;height:clamp(300px,36vw,520px)}
.two .pic .cut{left:50%;top:0;height:100%;transform:translateX(-50%)}
@media(max-width:820px){.two{grid-template-columns:1fr}}

/* timeline (about) */
.tl{position:relative;margin-top:clamp(30px,4vw,60px);display:grid;gap:clamp(34px,4vw,60px);padding-left:clamp(26px,5vw,70px)}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:6px;background:var(--orange);filter:url(#rough);border-radius:3px}
.tl .ev{position:relative}
.tl .ev::before{content:"";position:absolute;left:calc(-1 * clamp(26px,5vw,70px) - 4px);top:.5em;width:22px;height:22px;border-radius:50%;background:var(--paper);border:6px solid var(--ink)}
.tl .yr{font-family:var(--hand);font-weight:700;font-size:clamp(34px,4vw,58px);color:var(--orange);line-height:1}
.tl p{font-size:clamp(18px,1.7vw,23px);font-weight:500;max-width:30em}

/* values */
.vals{display:grid;gap:clamp(34px,5vw,80px);margin-top:clamp(30px,4vw,60px)}
.val{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,4vw,60px);align-items:baseline;border-top:3px solid currentColor;padding-top:20px}
.val h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(38px,6.2vw,100px);line-height:.95}
.val p{font-size:clamp(18px,1.7vw,23px);font-weight:500;max-width:22em}
.val .hn{font-family:var(--hand);font-weight:700;color:var(--orange);display:block;font-size:clamp(24px,2.4vw,34px);margin-top:10px;transform:rotate(-2deg)}
.sec.orange .val .hn{color:var(--paper-l)}
@media(max-width:820px){.val{grid-template-columns:1fr}}

/* where we work list */
.locs{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:30px}
.locs a{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);text-decoration:none;border-bottom:.1em solid var(--orange);line-height:1.1}
.locs a:hover{color:var(--orange)}
.route .map .hp-map{height:clamp(190px,26vw,340px);left:34%;top:30%}

/* pct */
.pct{font-family:var(--display);font-size:clamp(110px,26vw,420px);line-height:.85;color:var(--orange);text-transform:uppercase;letter-spacing:-.01em;display:block;transform:rotate(calc(-3deg*var(--wild)))}
.pct small{font-family:var(--hand);font-size:.16em;text-transform:none;color:var(--paper);display:block;letter-spacing:0;margin-top:.2em;transform:rotate(2deg)}
.perks{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);margin-top:clamp(30px,4vw,60px)}
.tag{position:relative;font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.4vw,36px);line-height:1.05;padding:.45em .9em .35em 1.15em;background:var(--paper-l);color:var(--ink);transform:rotate(var(--r,0deg));clip-path:polygon(0 50%,9% 0,100% 0,100% 100%,9% 100%);box-shadow:none}
.tag:nth-child(3n+1){background:var(--orange)}.tag:nth-child(5n+3){background:var(--paper)}
.tag::before{content:"";position:absolute;left:3.4%;top:50%;width:.4em;height:.4em;border-radius:50%;background:var(--ink);transform:translateY(-50%)}
.sec.pl .tag{background:var(--ink);color:var(--paper)}.sec.pl .tag:nth-child(3n+1){background:var(--orange);color:var(--ink)}.sec.pl .tag::before{background:var(--paper)}

/* quotes on a line */
.qline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin-top:clamp(50px,6vw,90px);padding-top:26px}
.qline::before{content:"";position:absolute;left:-4%;right:-4%;top:6px;height:4px;background:var(--ink);transform:rotate(-.6deg);filter:url(#rough);opacity:.85}
.q{position:relative;filter:drop-shadow(0 12px 10px rgba(20,18,16,.22));animation:sway 5.5s ease-in-out infinite alternate;transform-origin:50% 0;animation-delay:var(--dl,0s)}
.q:nth-child(even){--dl:-2s}.q:nth-child(3n){--dl:-3.4s}
.q .peg{position:absolute;left:50%;top:-24px;width:20px;height:50px;margin-left:-10px;background:linear-gradient(90deg,#b98652,#d3a06a 45%,#a47040);border-radius:4px 4px 7px 7px;z-index:3}
.q .peg::after{content:"";position:absolute;left:0;right:0;top:20px;height:3px;background:rgba(20,18,16,.4)}
.q .sheet{position:relative;background:var(--paper);padding:34px 20px 40px;clip-path:var(--sc);color:var(--ink);min-height:100%}
.q blockquote{font-size:clamp(16px,1.35vw,19px);font-weight:500;line-height:1.45}
.q blockquote::before{content:"\201C";display:block;font-family:var(--display);font-size:64px;line-height:.6;color:var(--orange);margin-bottom:10px}
.q cite{display:block;margin-top:16px;font-family:var(--hand);font-weight:700;font-style:normal;font-size:26px;color:var(--orange);line-height:1}
.q cite small{display:block;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:6px}
@media(max-width:980px){.qline{grid-template-columns:1fr 1fr;row-gap:48px}.qline::before{display:none}}
@media(max-width:600px){.qline{grid-template-columns:1fr}}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}

/* process three steps (join) */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px);margin-top:clamp(40px,5vw,70px)}
.proc .p{position:relative}
.proc .n{font-family:var(--display);font-size:clamp(90px,12vw,190px);line-height:.9;color:var(--orange)}
.proc h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.6vw,54px);line-height:1}
.proc p{font-weight:500;margin-top:8px;max-width:16em}
@media(max-width:820px){.proc{grid-template-columns:1fr}}

/* contact */
.chan{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);align-items:flex-start;margin-top:clamp(30px,4vw,60px)}
.chan .c{max-width:24em}
.chan h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3vw,42px);color:var(--orange)}
.chan p,.chan a.big{font-size:clamp(18px,1.7vw,23px);font-weight:500}
.chan a.big{display:block;font-family:var(--display);font-size:clamp(34px,5vw,76px);text-decoration:none;line-height:1.05;text-transform:none;margin-top:6px;word-break:break-word}
.chan a.big:hover{color:var(--orange)}
.cta-pad.sec{padding-top:clamp(120px,14vw,190px)}
.ring-us.sec{padding-bottom:40px}
.ring-us .giant.s{font-size:clamp(70px,16vw,260px)}

/* cv pile (employers hero) */
.pile{position:absolute;left:-4%;bottom:6%;width:min(34%,230px);aspect-ratio:3/4;pointer-events:none}
@media(max-width:820px){.pile{display:none}}
.cvsheet{position:absolute;inset:0;background:var(--paper-l);transform:rotate(var(--r));box-shadow:3px 6px 0 rgba(20,18,16,.22);padding:14px 14px;background-image:repeating-linear-gradient(transparent 0 11px,rgba(20,18,16,.18) 11px 12px)}
.cvsheet i{position:absolute;left:-6%;right:-6%;top:44%;height:7px;background:var(--orange);transform:rotate(-8deg);filter:url(#rough)}
.cvsheet b{position:absolute;left:10%;top:10%;font-family:var(--hand);font-size:20px;color:var(--ink)}
html[data-mode=agency] .says2{font-family:Arial,sans-serif}

.phero h1{margin-bottom:.22em}.phero .sub{margin-top:34px}
.ring-us .giant.s{line-height:.88}

/* =================== TEXTURE LAYERS =================== */
html,body{overflow-x:clip}
.sec>.wrap,.phero>.wrap{position:relative;z-index:2}
.sec::before,.sec::after,.phero::before,.phero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
/* paper: fibres, faint grid, corner halftone, coffee ring */
.sec.paper::before,.sec.pl::before{background:
  radial-gradient(circle,rgba(20,18,16,.16) 1.6px,transparent 2.2px) 0 0/12px 12px,
  repeating-linear-gradient(0deg,transparent 0 47px,rgba(20,18,16,.05) 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 47px,rgba(20,18,16,.04) 47px 48px);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 100% 0%,#000,transparent 70%),linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.sec.paper::before{background:
  radial-gradient(circle,rgba(237,85,20,.30) 2px,transparent 2.8px) 0 0/13px 13px;
  -webkit-mask-image:radial-gradient(ellipse 45% 40% at 96% 8%,#000,transparent 72%);mask-image:radial-gradient(ellipse 45% 40% at 96% 8%,#000,transparent 72%)}
.sec.paper::after{background:
  radial-gradient(circle at 8% 78%,transparent 0 70px,rgba(122,74,30,.16) 71px 75px,transparent 77px),
  radial-gradient(circle at 8.4% 78.6%,transparent 0 62px,rgba(122,74,30,.10) 63px 65px,transparent 67px),
  repeating-linear-gradient(0deg,transparent 0 63px,rgba(20,18,16,.045) 63px 64px),
  radial-gradient(ellipse at 50% 120%,rgba(122,74,30,.16),transparent 55%)}
.sec.pl::before{background:radial-gradient(circle,rgba(20,18,16,.20) 1.7px,transparent 2.4px) 0 0/11px 11px;-webkit-mask-image:radial-gradient(ellipse 50% 45% at 0% 100%,#000,transparent 72%);mask-image:radial-gradient(ellipse 50% 45% at 0% 100%,#000,transparent 72%)}
.sec.pl::after{background:
  radial-gradient(circle at 92% 22%,transparent 0 56px,rgba(237,85,20,.22) 57px 61px,transparent 63px),
  repeating-linear-gradient(0deg,transparent 0 39px,rgba(237,85,20,.10) 39px 40px),
  radial-gradient(ellipse at 0% 0%,rgba(122,74,30,.12),transparent 50%)}
/* ink: chalk scratches, halftone fade, orange glow */
.sec.ink::before{background:radial-gradient(circle,rgba(237,85,20,.35) 2px,transparent 2.8px) 0 0/14px 14px;-webkit-mask-image:radial-gradient(ellipse 55% 50% at 0% 100%,#000,transparent 70%);mask-image:radial-gradient(ellipse 55% 50% at 0% 100%,#000,transparent 70%)}
.sec.ink::after{background:
  repeating-linear-gradient(115deg,transparent 0 90px,rgba(241,235,221,.05) 90px 92px,transparent 92px 210px),
  radial-gradient(ellipse 40% 50% at 100% 0%,rgba(237,85,20,.22),transparent 70%),
  radial-gradient(ellipse 100% 60% at 50% 100%,rgba(237,85,20,.10),transparent 70%)}
/* orange: dark halftone blotches, hatching, splatter */
.sec.orange::before,.phero::before{background:radial-gradient(circle,rgba(20,18,16,.34) 2.2px,transparent 3px) 0 0/14px 14px;-webkit-mask-image:radial-gradient(ellipse 42% 55% at 0% 100%,#000,transparent 70%),radial-gradient(ellipse 36% 45% at 100% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 42% 55% at 0% 100%,#000,transparent 70%);-webkit-mask-composite:source-over}
.sec.orange::after,.phero::after{background:
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(20,18,16,.07) 22px 24px),
  radial-gradient(ellipse 60% 50% at 80% 100%,rgba(199,68,13,.55),transparent 70%),
  radial-gradient(ellipse 50% 45% at 10% 0%,rgba(244,122,62,.55),transparent 70%),
  radial-gradient(circle at 70% 30%,rgba(20,18,16,.18) 0 3px,transparent 4px),
  radial-gradient(circle at 74% 34%,rgba(20,18,16,.15) 0 6px,transparent 7px),
  radial-gradient(circle at 18% 70%,rgba(20,18,16,.16) 0 4px,transparent 5px),
  radial-gradient(circle at 22% 66%,rgba(20,18,16,.14) 0 2px,transparent 3px)}
/* tape strips + torn scraps + scribbles, decorative */
.tape{position:absolute;z-index:1;width:clamp(80px,9vw,140px);height:clamp(26px,3vw,40px);background:rgba(244,214,140,.82);transform:rotate(var(--r,-8deg));clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 4%,96% 30%,100% 55%,95% 100%,10% 96%,6% 100%,2% 90%,0 100%,3% 50%);box-shadow:0 2px 3px rgba(20,18,16,.2);pointer-events:none;mix-blend-mode:multiply}
.scrib{position:absolute;z-index:1;pointer-events:none;color:var(--c,var(--orange));width:var(--w,180px);height:auto;opacity:.9}
.scrib path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough)}
.bigword{position:absolute;z-index:0;pointer-events:none;font-family:var(--display);text-transform:uppercase;line-height:.8;font-size:clamp(160px,30vw,460px);color:transparent;-webkit-text-stroke:2px rgba(20,18,16,.12);white-space:nowrap}
.sec.ink .bigword{-webkit-text-stroke:2px rgba(241,235,221,.10)}
.sec.orange .bigword{-webkit-text-stroke:2px rgba(20,18,16,.2)}
.step .pic .cut,.trio .pic .cut,.two .pic .cut{--scrap:#FBF7EC}
.sec.ink .cut{--scrap:#e9dfc8}
.q .sheet{background-image:repeating-linear-gradient(transparent 0 27px,rgba(20,18,16,.07) 27px 28px),radial-gradient(circle at 90% 8%,rgba(122,74,30,.18),transparent 40%)}
.tl .ev p,.val p,.promise p{position:relative}
.phero .shard{background-image:repeating-linear-gradient(transparent 0 11px,rgba(20,18,16,.15) 11px 12px)}
@media(max-width:820px){.sec::before,.sec::after{opacity:.8}.bigword{font-size:42vw}}
.phero h1 .rs,.h2 .rs{margin-bottom:.32em}
.sec.orange .proc .n{color:var(--ink)}
.sec.orange .proc p{color:var(--ink)}
