/* Formacha creative layer (homepage, Oct 2026).
 * Large natural cutouts, hand-written notes and halftone, layered on next.css.
 * Remove this file and the marked blocks in index.html to roll back. */

.formacha-next{--hand:'Caveat','Bradley Hand','Segoe Print',cursive}

/* ---------- shared pieces ---------- */
/* decorative layers may spill sideways; never let them widen the page on phones */
.formacha-next main{overflow-x:clip}
.formacha-next img.cutout{display:block;max-width:none;width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 28px 36px rgba(0,0,0,.38))}
[data-theme=light] .formacha-next img.cutout{filter:drop-shadow(0 24px 30px rgba(70,48,28,.2))}

/* real halftone: dot size falls off from the centre; colour follows the theme accent */
.formacha-next .halftone{position:absolute;pointer-events:none;background:var(--accent);opacity:.3;
  -webkit-mask:url('/assets/img/people/halftone.webp') center/contain no-repeat;mask:url('/assets/img/people/halftone.webp') center/contain no-repeat}
[data-theme=light] .formacha-next .halftone{opacity:.22}

.formacha-next .hand-note{position:absolute;z-index:4;margin:0;display:flex;align-items:flex-end;gap:4px;white-space:nowrap;pointer-events:none;
  font:700 40px/1 var(--hand);letter-spacing:0;color:var(--accent);transform:rotate(var(--r,-6deg))}
.formacha-next .hand-note svg{flex:none;width:58px;height:auto;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

.formacha-next .float-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:11px 18px 11px 11px;border-radius:12px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.28);color:var(--fg);font-size:13px;line-height:1.3;transform:rotate(var(--r,0deg));animation:fc-float 7s ease-in-out infinite}
.formacha-next .float-chip__icon{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff}
.formacha-next .float-chip__icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.formacha-next .float-chip strong{display:block;font-weight:650}
.formacha-next .float-chip small{display:block;margin-top:2px;font:9.5px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
@keyframes fc-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-7px) rotate(var(--r,0deg))}}
@media(prefers-reduced-motion:reduce){.formacha-next .float-chip{animation:none}}

/* ---------- 1. hero: marketer standing on the hero line, campaign card in front ---------- */
.formacha-next .next-hero-split .next-campaign-stage--person{display:block;align-self:stretch;position:relative;min-height:600px;padding:0}
.next-campaign-stage--person .hero-person{position:absolute;z-index:1;bottom:-66px;right:-24px;height:620px}
.next-campaign-stage--person .halftone{width:620px;height:620px;right:-150px;top:-30px;z-index:0}
.next-campaign-stage--person .card-orbit{width:600px;height:600px;top:-10px;left:auto;right:-110px;max-width:none;z-index:0}
.next-campaign-stage--person .card-perspective{position:absolute;z-index:0;left:10px;top:40px;width:300px;transform:scale(.72);transform-origin:left top}
.next-campaign-stage--person .card-caption{display:none}

/* ---------- 2. your marketer panel ---------- */
.formacha-next .marketer-panel{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:end;gap:56px;
  margin-top:96px;padding:0 56px 0 0;border:1px solid var(--border);border-radius:14px;
  background:radial-gradient(ellipse at 18% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),var(--surface-ledger)}
.formacha-next .marketer-panel__media{position:relative;align-self:stretch;min-height:540px}
.formacha-next .marketer-panel__person{position:absolute;z-index:2;left:50%;bottom:0;height:680px;transform:translateX(-50%)}
.formacha-next .marketer-panel__media .halftone{width:560px;height:560px;left:50%;top:-40px;transform:translateX(-50%);z-index:1}
.formacha-next .marketer-panel__media .hand-note{right:-26px;top:-38px;--r:5deg}
.formacha-next .marketer-panel__media .hand-note svg{transform:scaleX(-1) rotate(-12deg);margin-bottom:-18px}
.formacha-next .marketer-panel__media .float-chip{left:2%;bottom:120px;--r:-4deg}
.formacha-next .marketer-panel__copy{padding:64px 0 60px}
.formacha-next .marketer-panel__copy h2{margin:17px 0;font-size:clamp(34px,3.9vw,52px);line-height:1.08;letter-spacing:-.06em}
.formacha-next .marketer-panel__copy h2 em{font-style:normal;color:var(--accent)}
.formacha-next .marketer-panel__copy .lede{font-size:15px}
.formacha-next .marketer-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.formacha-next .marketer-list li{display:flex;gap:12px;align-items:baseline;padding:15px 12px 15px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.5}
.formacha-next .marketer-list li span{flex:none;font:10px/1.6 var(--font-mono);letter-spacing:.1em;color:var(--accent)}
.formacha-next .marketer-panel__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- 3. case-study teaser: marketer rising out of the card ---------- */
.formacha-next .proof-teaser--person{position:relative;margin-top:150px;padding-right:330px;min-height:190px}
.formacha-next .proof-teaser--person .proof-teaser__person{position:absolute;right:46px;bottom:0;height:400px;z-index:2}
.formacha-next .proof-teaser--person .halftone{width:420px;height:420px;right:-6px;bottom:-40px;z-index:1}

/* ---------- 4. the offer: waving marketer seen from above ---------- */
.formacha-next .guarantee--person{position:relative;padding-right:min(46%,520px);overflow:visible}
.formacha-next .guarantee--person .guarantee__person{position:absolute;right:18px;bottom:0;height:500px;z-index:2}
.formacha-next .guarantee--person .halftone{--accent:#f07869;width:460px;height:460px;right:30px;top:-60px;z-index:1}
.formacha-next .guarantee--person .hand-note{--accent:#f07869;color:#f07869;font-size:40px;right:min(37%,420px);top:-40px;--r:-5deg}
.formacha-next .guarantee--person .hand-note svg{transform:rotate(18deg);margin-bottom:-26px}
.formacha-next section.container:has(.guarantee--person){margin-top:120px}

/* ---------- responsive ---------- */
@media(max-width:1200px){
  .next-campaign-stage--person .hero-person{height:580px;right:-24px}
  .next-campaign-stage--person .card-perspective{left:0;top:40px;transform:scale(.66)}
  .formacha-next .marketer-panel{gap:36px;padding-right:40px}
}
@media(max-width:980px){
  .next-campaign-stage--person .card-perspective{transform:scale(.62)}
  .formacha-next .proof-teaser--person{padding-right:290px}
  .formacha-next .proof-teaser--person .proof-teaser__person{height:340px;right:24px}
}
@media(max-width:900px){
  .formacha-next .next-hero-split .next-campaign-stage--person{min-height:560px;margin-top:10px}
  .next-campaign-stage--person .hero-person{height:600px;right:50%;transform:translateX(50%);bottom:-66px}
  .next-campaign-stage--person .halftone{right:50%;transform:translateX(50%);width:520px;height:520px}
  .next-campaign-stage--person .card-orbit{right:50%;transform:translateX(50%) rotate(-22deg) scaleX(1.12);width:480px;height:480px}
  .next-campaign-stage--person .card-perspective{left:0;top:0;transform:scale(.56)}
  .formacha-next .marketer-panel{grid-template-columns:1fr;padding:0 32px 8px;gap:0;margin-top:120px}
  .formacha-next .marketer-panel__media{min-height:420px;order:-1}
  .formacha-next .marketer-panel__person{height:540px}
  .formacha-next .marketer-panel__copy{padding:34px 0 30px}
  .formacha-next .guarantee--person{padding-right:32px;padding-top:330px}
  .formacha-next .guarantee--person .guarantee__person{top:-80px;bottom:auto;right:50%;transform:translateX(50%);height:400px}
  .formacha-next .guarantee--person .halftone{right:50%;transform:translateX(50%);top:-90px}
  .formacha-next .guarantee--person .hand-note{display:none}
}
@media(min-width:761px) and (max-width:900px){
  .formacha-next .next-hero-split .next-campaign-stage--person{min-height:520px}
  .next-campaign-stage--person .hero-person{height:560px;right:-30px;transform:none}
  .next-campaign-stage--person .card-perspective{z-index:0;left:-40px;top:24px;transform:scale(.6)}
}
@media(max-width:760px){
  .formacha-next .next-hero-split .next-campaign-stage--person{position:static;min-height:470px}
  .next-campaign-stage--person .hero-person{height:500px;bottom:0}
  .next-campaign-stage--person .card-perspective{z-index:3;left:auto;right:20px;top:22px;transform:scale(.31) rotate(6deg);transform-origin:right top}
  .next-campaign-stage--person .halftone{top:auto;bottom:60px;width:420px;height:420px}
  .next-campaign-stage--person .card-orbit{top:auto;bottom:90px;width:380px;height:380px}
  .formacha-next .next-hero-split .hero__content .kicker{display:flex;max-width:calc(100% - 132px)}
  .formacha-next .next-hero-split .hero__headline{margin-top:42px}
  .formacha-next .marketer-panel{padding:0 22px 4px;margin-top:100px}
  .formacha-next .marketer-panel__media{min-height:360px}
  .formacha-next .marketer-panel__person{height:460px}
  .formacha-next .marketer-panel__media .hand-note{right:0;top:-46px;font-size:26px}
  .formacha-next .marketer-panel__media .float-chip{left:0;bottom:70px}
  .formacha-next .marketer-panel__media .halftone{width:400px;height:400px;top:-30px}
  .formacha-next .guarantee--person .halftone{width:380px;height:380px;top:-70px}
  .formacha-next .marketer-list{grid-template-columns:1fr}
  .formacha-next .proof-teaser--person{padding-right:24px;padding-top:250px;margin-top:120px;flex-direction:column;align-items:flex-start}
  .formacha-next .proof-teaser--person .proof-teaser__copy{flex:none}
  .formacha-next .proof-teaser--person{gap:22px}
  .formacha-next .proof-teaser--person .proof-teaser__person{right:50%;transform:translateX(50%);top:-130px;bottom:auto;height:360px}
  .formacha-next .proof-teaser--person .halftone{right:50%;transform:translateX(50%);top:-140px;bottom:auto;width:360px;height:360px}
}