/* ================= PER-SECTION: READABLE SIZES, LEAD CTAs, RESIZABLE TITLES ================= */

/* readable base sizes everywhere */
.small{font-size:clamp(14px,1.05vw,16px);line-height:1.7}
.mono{font-size:12px}
.hand.corner,.pl-head,.talk>.hand,.contact>.hand{font-size:19px}
.label-box{font-size:21px;padding:6px 20px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}

/* section call-to-action block */
.sec-cta{grid-column:1/-1;margin-top:clamp(50px,6vw,80px);text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-cta>.hand{font-size:clamp(19px,1.6vw,23px);margin-bottom:2px;position:relative}
.sec-cta>.hand::after{content:"";display:block;width:70%;height:6px;margin:2px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M0 4 Q 25 0 50 3 T 100 2' fill='none' stroke='%23f5c518' stroke-width='3'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.sec-cta .cta-row{margin-top:18px}
.sec-cta.inline{margin-top:34px}
.sec-cta.big .cta-main,.sec-cta.big .cta-ghost{font-size:clamp(15px,1.4vw,18px);padding:22px 30px}
.banners .sec-cta{position:relative;z-index:2}

/* About */
.tab{font-size:12px;padding:10px 16px 10px 20px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.tab:hover,.tab.on{padding-left:38px}
.tab.on{box-shadow:5px 5px 0 var(--ink)}
.tag-y{font-size:12px;padding:4px 10px}
.journey li{font-size:16px}
.journey b{font-size:12px}

/* Works */
.w-tab{font-size:12px;padding:8px 20px;top:-32px}
.wcard h3{font-size:clamp(20px,1.8vw,26px)}
.wcard p{font-size:14px}
.wcard::after{content:"VIEW CASE ↗";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);background:var(--yellow);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--mono);font-weight:700;font-size:14px;padding:12px 18px;opacity:0;transition:opacity .3s,transform .4s var(--ease)}
.wcard:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Banners: project links become real buttons */
.ban-tab{font-size:12px;padding:8px 20px}
.ban-txt p:not(.mono){font-size:15px}
.ban-txt a{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-size:13px;padding:12px 18px;border:2px solid currentColor;box-shadow:4px 4px 0 currentColor;border-bottom-width:2px;transition:transform .15s,box-shadow .15s,letter-spacing .3s}
.b-dark .ban-txt a{color:var(--yellow)}
.ban-txt a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 currentColor;letter-spacing:1px}

/* Case */
.mtags span{font-size:12px;padding:6px 12px}
.note{font-size:14px;padding:14px 16px}
.note b{font-size:10px}
.note.big{width:210px}
.note.big span{font-size:14px}
.results>.hand{font-size:22px}

/* Talk */
.lg{font-size:17px;padding:10px 22px}
.talk .mid{font-size:clamp(19px,1.8vw,24px);max-width:560px}

/* Contact */
.note-form{width:min(440px,92vw);padding:26px}
.note-form .q{font-size:11px}
.step .hand{font-size:21px}
.step input,.step textarea{font-size:16px}

/* ---------- Resizable titles (handles appear on hover) ---------- */
.pix-title{--fs:clamp(64px,8.5vw,128px);font-size:var(--fs)}
.contact .pix-title{--fs:clamp(60px,7vw,100px)}
.rs{position:relative;display:inline-block;padding:0 10px;outline:2px dashed transparent;outline-offset:4px;transition:outline-color .25s}
.rs .hd{opacity:0;border-color:var(--blue)}
.rs:hover,.rs.resizing{outline-color:var(--blue)}
.rs:hover .hd,.rs.resizing .hd{opacity:1}
.rs .hd:hover,.rs .hd.active{background:var(--blue)}
.rs .size-badge{top:-34px}
.rs .rs-tip{position:absolute;left:100%;top:-6px;margin-left:16px;background:var(--blue);color:#fff;font-family:var(--mono);font-size:10px;padding:3px 8px;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;letter-spacing:0}
.rs:hover .rs-tip{opacity:1}
.rs.resized .rs-tip{display:none}
.contact-box .rs{outline:0}
.contact-box .rs .hd{display:none}

@media (max-width:900px){
  .rs .rs-tip{display:none}
  .rs .hd{display:none}
  .rs{outline:0!important}
  .sec-cta .cta-row{width:100%}
  .wcard::after{display:none}
}