/* FMKE spotlight card — [fmke_spotlight_card]
   Deliberately different from the hero card: single full-bleed image with
   a dark scrim, 3D flip headline, story-style top progress segments, and
   click-to-advance zones instead of split layout + dots. */
.fmke-spot{--s-int:6000ms;position:relative;overflow:hidden;border-radius:14px;min-height:300px;margin:32px 0;box-shadow:0 10px 28px rgba(31,61,44,.16);background:var(--fmke-primary-light,#FFF1E0);isolation:isolate}
.fmke-spot *{box-sizing:border-box}
.fmke-spot-wrap{max-width:66.4989em;margin:0 auto;padding:0 2.617em}
@media(max-width:782px){.fmke-spot-wrap{padding:0 12px}}
/* Large screens: break out of the theme's content column, matching the
   hero card, so the spotlight card also takes up 90% of the viewport. */
@media(min-width:1025px){
 .fmke-spot-wrap{width:90vw;max-width:1800px;margin-left:calc(50% - 45vw);margin-right:calc(50% - 45vw);padding:0}
}

/* full-bleed panning background */
.fmke-spot__bg{position:absolute;inset:0}
.fmke-spot__pane{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.fmke-spot__pane.is-active{opacity:1;z-index:1}
.fmke-spot__pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% center;animation:fmkePan var(--s-int) ease-in-out forwards}
.fmke-spot__pane.is-active img{animation-play-state:running}
.fmke-spot.is-paused .fmke-spot__pane img{animation-play-state:paused}
@keyframes fmkePan{from{object-position:30% center}to{object-position:70% center}}
.fmke-spot__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,rgba(255,241,224,.98) 0%,rgba(255,241,224,.94) 36%,rgba(255,241,224,.62) 62%,rgba(255,241,224,.2) 84%)}

/* story-style progress segments at the top */
.fmke-spot__bars{position:relative;z-index:5;display:flex;gap:6px;padding:16px 20px 0}
.fmke-spot__bar{flex:1;height:3px;border-radius:3px;background:rgba(31,61,44,.18);overflow:hidden}
.fmke-spot__bar i{display:block;height:100%;width:0;background:var(--fmke-primary,#FF6A00);transform-origin:left}
.fmke-spot__bar.is-done i{width:100%}
.fmke-spot__bar.is-active i{animation:fmkeSeg var(--s-int) linear forwards}
.fmke-spot.is-paused .fmke-spot__bar.is-active i{animation-play-state:paused}
@keyframes fmkeSeg{from{width:0}to{width:100%}}

.fmke-spot__body{position:relative;z-index:4;padding:34px 32% 40px 30px;min-height:264px;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.fmke-spot__body>*{pointer-events:auto}
@media(max-width:900px){.fmke-spot__body{padding-right:24px}}

.fmke-spot__pulse{display:inline-flex;align-items:center;gap:7px;background:var(--fmke-primary,#FF6A00);color:#fff;padding:5px 12px;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.fmke-spot__pulse b{width:6px;height:6px;border-radius:50%;background:#fff;animation:fmkePulse 1.4s ease-in-out infinite}
@keyframes fmkePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}}

/* 3D flip headline */
.fmke-spot__flip{position:relative;perspective:900px;overflow:hidden;min-height:calc(2 * clamp(24px,3.2vw,38px) * 1.2)}
.fmke-spot__face{position:absolute;inset:0;width:100%;backface-visibility:hidden;transform-origin:50% 50%;font-size:clamp(24px,3.2vw,38px);font-weight:800;color:var(--fmke-dark,#1F3D2C);line-height:1.2;margin:0;will-change:transform,opacity}
.fmke-spot__face:not(.is-active):not(.is-flipping-out){opacity:0;transform:rotateX(90deg);transition:none;pointer-events:none}
.fmke-spot__face.is-active{opacity:1;transform:rotateX(0deg);transition:transform .5s cubic-bezier(.33,.7,.25,1),opacity .15s ease}
.fmke-spot__face.is-flipping-out{opacity:0;transform:rotateX(-90deg);transition:transform .5s cubic-bezier(.5,0,.75,.3),opacity .35s ease .15s}

.fmke-spot__sub{position:relative;margin:16px 0 22px;max-width:46ch;color:#4a4a4a;font-size:15px;min-height:1.6em}
.fmke-spot__sub span{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .4s ease .15s,transform .4s ease .15s}
.fmke-spot__sub span.is-active{position:relative;opacity:1;transform:none}

/* ghost button with animated border draw */
.fmke-spot__cta{position:relative;display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:11px 22px;font-weight:700;color:var(--fmke-dark,#1F3D2C)!important;text-decoration:none!important;border-radius:8px;overflow:hidden;transition:color .25s}
.fmke-spot__cta::before{content:"";position:absolute;inset:0;border:1.5px solid var(--fmke-dark,#1F3D2C);border-radius:8px;transition:border-color .25s;opacity:.55}
.fmke-spot__cta::after{content:"";position:absolute;inset:0;background:var(--fmke-primary,#FF6A00);border-radius:8px;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:-1}
.fmke-spot__cta:hover{color:#fff!important}
.fmke-spot__cta:hover::after{transform:scaleX(1)}
.fmke-spot__cta:hover::before{border-color:transparent;opacity:0}

/* click zones + vertical dash nav */
.fmke-spot__zone{position:absolute;top:0;bottom:0;width:22%;z-index:3;cursor:pointer}
.fmke-spot__zone--prev{left:0}
.fmke-spot__zone--next{right:0}

/* visible, unambiguous prev/next controls, kept clear of the text column */
.fmke-spot__controls{position:absolute;right:18px;bottom:16px;z-index:7;display:flex;align-items:center;gap:10px}
.fmke-spot__arrow{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid rgba(31,61,44,.25);background:rgba(255,255,255,.85);color:var(--fmke-dark,#1F3D2C);font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s,border-color .2s;box-shadow:0 4px 10px rgba(31,61,44,.12)}
.fmke-spot__arrow:hover{background:var(--fmke-primary,#FF6A00);border-color:var(--fmke-primary,#FF6A00);color:#fff;transform:scale(1.08)}

.fmke-spot__nav{position:relative;z-index:7;display:flex;gap:7px}
.fmke-spot__navdot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(31,61,44,.3);cursor:pointer;transition:background .25s,transform .25s}
.fmke-spot__navdot.is-active{background:var(--fmke-dark,#1F3D2C);transform:scale(1.35)}

@media(max-width:640px){
  .fmke-spot__controls{display:none}
  .fmke-spot__body{padding:26px 20px 32px}
}
@media(prefers-reduced-motion:reduce){
  .fmke-spot *{animation:none!important}
  .fmke-spot__pane img{animation:none!important}
}