/* ============================================================
   v6 · Full-bleed scroll-flip section (Option A2, built into the site)
   Default (mobile / no-JS / reduced-motion): the two states stack as
   full-height panels. .is-live (wide desktop + GSAP): the stage pins and
   the states cross-dissolve on scroll — skin → scalp. Isolated to index-v6.
   ============================================================ */
.fbflip{position:relative;z-index:3;background:var(--blue-deep)}
.fbflip__stage{position:relative}

/* --- state block (full-bleed) --- */
.fbflip__state{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;isolation:isolate}
.fbflip__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.02)}
.fbflip__scrims{position:absolute;inset:0;z-index:1;pointer-events:none}
.fbflip__scrims::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,54,63,.82) 0%,rgba(0,54,63,.52) 20%,rgba(0,54,63,.16) 42%,rgba(0,54,63,0) 62%)}
.fbflip__scrims::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,54,63,.55) 0%,rgba(0,54,63,.22) 26%,rgba(0,54,63,0) 52%)}

/* --- copy --- */
.fbflip__copy{position:absolute;z-index:2;
  left:clamp(28px,5.5vw,110px);right:clamp(28px,5vw,80px);bottom:clamp(40px,7vh,96px);
  max-width:1180px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:end}
.fbflip__lede{grid-column:1}
.fbflip .eyebrow2{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--gold);margin-bottom:clamp(16px,1.5vw,22px);
  text-shadow:0 1px 18px rgba(0,54,63,.55)}
.fbflip__headline{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:.005em;
  font-size:clamp(30px,3.1vw,50px);color:var(--text-light);text-shadow:0 2px 36px rgba(0,54,63,.4);
  margin-bottom:clamp(18px,1.7vw,26px)}
.fbflip__headline em{font-style:normal;font-weight:400;color:inherit}
.fbflip__body{font-family:var(--font-sans);font-size:clamp(15px,1.05vw,17px);line-height:1.7;color:var(--text-soft);
  max-width:48ch;text-shadow:0 1px 16px rgba(0,54,63,.45)}

/* --- numbered index --- */
.fbflip__index{grid-column:2;align-self:end;padding-bottom:6px}
.fbflip__index ol{list-style:none;margin:0;padding:0}
.fbflip__index li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:clamp(16px,1.5vw,24px);
  padding:clamp(13px,1.15vw,17px) 0;border-top:1px solid rgba(242,219,146,.16)}
.fbflip__index li:last-child{border-bottom:1px solid rgba(242,219,146,.16)}
.fbflip__index .num{font-family:var(--font-display);font-weight:400;font-size:clamp(14px,1.05vw,17px);color:var(--gold);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 1px 14px rgba(0,54,63,.5)}
.fbflip__index .txt{font-family:var(--font-sans);font-size:clamp(13px,.95vw,15px);line-height:1.45;color:var(--text-light);
  text-shadow:0 1px 14px rgba(0,54,63,.5)}

/* --- scroll-state indicator (desktop live only) --- */
.fbflip__toggle{position:absolute;z-index:4;top:clamp(28px,3.4vh,48px);left:clamp(28px,5.5vw,110px);
  display:none;gap:clamp(24px,2.4vw,40px);align-items:center}
.fbflip__toggle span{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(10px,.76vw,12px);color:var(--text-soft);opacity:.55;position:relative;padding-bottom:8px;
  transition:opacity .5s var(--ease-out),color .5s var(--ease-out);text-shadow:0 1px 16px rgba(0,54,63,.5)}
.fbflip__toggle span::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--gold-light);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.fbflip__toggle span.on{opacity:1;color:var(--text-light)}
.fbflip__toggle span.on::after{transform:scaleX(1)}

/* ============ LIVE (wide desktop + GSAP): pin + cross-dissolve ============ */
.fbflip.is-live{height:auto}
.fbflip.is-live .fbflip__stage{height:100vh;overflow:hidden}
.fbflip.is-live .fbflip__toggle{display:flex}
.fbflip.is-live .fbflip__state{position:absolute;inset:0;height:100%;will-change:opacity}
.fbflip.is-live .fbflip__state[data-state="scalp"]{opacity:0}

/* narrow */
@media (max-width:820px){
  .fbflip__copy{grid-template-columns:1fr;gap:clamp(22px,5vw,32px);bottom:clamp(28px,5vh,60px)}
  .fbflip__index{grid-column:1;align-self:start}
  .fbflip__body{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.fbflip__media{transform:none}}