/* FODL split panels — THE CRAFT / THE PROOF, directly below the services cards.
   Ported from power-of-animation-webflow-dribble.webflow.io (the Webflow x Dribbble
   workshop comp): a 100vh two-panel split, each half a muted looping video with a
   poster-type title + bordered tag pinned to the bottom. Hovering a half insets the
   whole panel (padding 0 -> 65px, CSS transition .8s cubic-bezier(.77,0,.175,1) —
   their exact curve) while the title block and the clipped info block (copy +
   button) slide up (IX2 spec: yPercent 100 -> 0, 800ms inOutQuart in / 400ms out).
   Titles use our Funnel Display in place of their Bulevar Poster; their italic serif
   copy (PP Editorial New italic) is dropped for the site's own body-copy token — Geist
   at the same size/leading/colour the sections above use, so nothing here reads foreign.
   Buttons are their ghost chip with the white wipe re-branded to FODL yellow.
   Entrance (scroll-into-view take on their load intro): video settles 1.2 -> 1 over
   4s while title letters rise per-char (100ms stagger), then the tag fades in —
   driven by the inline script (fpw block) at the end of index.html. */

.fpw-section{background-color:#0A0A0A;display:flex;height:100vh;position:relative;overflow:hidden}
.fpw-col{--fpw-inset:min(65px,4.3vw);background-color:#0A0A0A;width:50%;height:100%;padding:0;position:relative;transition:padding .8s cubic-bezier(.77,0,.175,1)}
.fpw-col:hover{padding:var(--fpw-inset)}
.fpw-inner{width:100%;height:100%;position:relative}

/* --- media --- */
.fpw-media{position:absolute;inset:0;overflow:hidden}
.fpw-video{object-fit:cover;opacity:.72;width:100%;height:100%;display:block}
/* original leans on dark footage; ours is brighter, so a bottom shade holds the
   text zone (and echoes the site's veil convention) */
.fpw-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,#0a0a0ae0 0%,#0a0a0a40 40%,#0a0a0a00 65%)}

/* --- content: bottom-anchored column; the info zone below the title reserves its
   own layout slot, so the resting title (translated 100% of itself) sits exactly
   over it — the original's geometry --- */
.fpw-content{position:absolute;inset:0;flex-flow:column;justify-content:flex-end;padding:6.4vw 3.25vw 2.2vw;display:flex}
.fpw-block{position:relative;transform:translateY(100%);transition:transform .4s cubic-bezier(.77,0,.175,1)}
.fpw-col:hover .fpw-block{transform:translateY(0);transition-duration:.8s}
.fpw-clip{overflow:hidden}
.fpw-title{color:#f0f0f0;font-family:"Funnel Display",sans-serif;font-weight:800;font-size:min(6.4vw,6.5rem);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;margin:0}
.fpw-ch{display:inline-block}
.fpw-tag{color:#f0f0f0;border:1px solid #ffffff33;margin-top:1.25rem;padding:.62em 1.05em;font-family:Geist,sans-serif;font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1;display:inline-block;align-self:flex-start}
.fpw-block,.fpw-info{display:flex;flex-flow:column;align-items:flex-start}

/* --- info reveal: the overflow-hidden window clips its child, which rests at
   translateY(100%) --- */
/* fixed window height (original: 155px) — keeps both resting titles on one
   baseline no matter how the copy wraps */
.fpw-info{overflow:hidden;position:relative;height:9.7rem}
.fpw-info-child{grid-row-gap:1.9rem;flex-flow:column;align-items:flex-start;padding-top:1.2rem;display:flex;transform:translateY(100%);transition:transform .4s cubic-bezier(.77,0,.175,1)}
.fpw-col:hover .fpw-info-child{transform:translateY(0);transition-duration:.8s}
/* body copy uses the site token (Geist 500 / 1rem / 1.7 / -.03em / #dcdcdc @ 80%),
   same as .fpr-sub, .fcta-paragraph and .fct-paragraph */
.fpw-copy{color:#dcdcdccc;max-width:26rem;font-family:Geist,sans-serif;font-style:normal;font-weight:500;font-size:1rem;line-height:1.7;letter-spacing:-.03em;margin:0}

/* --- ghost button with the label roll + yellow wipe (theirs is white) --- */
.fpw-btn{color:#fff;border:1px solid #fff;padding:.66em 1.35em .74em;font-family:Geist,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;text-decoration:none;display:inline-block;position:relative;overflow:hidden}
.fpw-btn-wipe{background-color:#EEB603;position:absolute;inset:0;transform:translateY(102%);transition:transform .3s cubic-bezier(.77,0,.175,1)}
.fpw-btn:hover .fpw-btn-wipe{transform:translateY(0);transition-duration:.5s}
.fpw-btn-clip{display:block;position:relative;overflow:hidden}
.fpw-btn-text{display:block;position:relative;transition:transform .3s cubic-bezier(.77,0,.175,1)}
.fpw-btn-text.is-ab{color:#0a0a0a;position:absolute;inset:0;transform:translateY(110%)}
.fpw-btn:hover .fpw-btn-text{transform:translateY(-110%);transition-duration:.5s}
.fpw-btn:hover .fpw-btn-text.is-ab{transform:translateY(0);transition-duration:.5s}

/* --- stacked + revealed below 992px: hover is unreliable there, so both panels
   hold the open state --- */
@media screen and (max-width:991px){
.fpw-section{flex-flow:column;height:auto}
.fpw-col{width:100%;height:74vh;padding:clamp(14px,3.5vw,28px)}
.fpw-content{padding:8vw 6vw 5vw}
.fpw-block,.fpw-info-child{transform:none}
.fpw-info{height:auto}
.fpw-title{font-size:min(11vw,5rem)}
}
@media screen and (max-width:479px){
.fpw-col{height:70vh}
.fpw-copy{max-width:20rem}
}

/* --- reduced motion: both panels rest open, nothing translates or zooms --- */
@media (prefers-reduced-motion: reduce){
.fpw-col{padding:var(--fpw-inset);transition:none}
.fpw-block,.fpw-info-child{transform:none;transition:none}
.fpw-btn-wipe,.fpw-btn-text{transition:none}
}