/*
Theme Name: Franck Fitrzyk Portfolio V4.4.3.2
Theme URI: https://franckfitrzyk.com/
Author: Franck Fitrzyk
Description: Dark editorial portfolio theme for a Senior Game Designer. Full-page layouts and reusable Gutenberg section patterns.
Version: 4.4.3
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: franck-fitrzyk-portfolio
*/

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Shared design language ---------- */

.ff-eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
}

.ff-meta {
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ff-card {
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.ff-card:hover {
  transform: translateY(-3px);
  border-color: rgba(232,159,51,.44);
}

.ff-line-card {
  border: 1px solid rgba(255,255,255,.11);
}

.ff-tag {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px;
  padding: 5px 8px !important;
  line-height: 1 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ff-image-placeholder {
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 68% 22%, rgba(232,159,51,.14), transparent 28%),
    linear-gradient(145deg, #122837 0%, #081722 70%);
}

.ff-hero {
  position: relative;
  overflow: hidden;
}

.ff-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 38%, rgba(255,255,255,.09), transparent 24%),
    radial-gradient(circle at 70% 46%, rgba(232,159,51,.06), transparent 30%),
    linear-gradient(90deg, rgba(5,17,26,.98) 0%, rgba(5,17,26,.82) 38%, rgba(5,17,26,.30) 72%, rgba(5,17,26,.18) 100%);
  pointer-events: none;
  z-index: 0;
}

.ff-hero > * {
  position: relative;
  z-index: 1;
}

.ff-hero-media {
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(145deg, rgba(18,40,55,.78), rgba(6,19,29,.12));
}

.ff-accent-rule {
  width: 34px;
  height: 2px;
  background: #E89F33;
}

.ff-number {
  font-variant-numeric: tabular-nums;
}

.ff-arrow-link a,
a.ff-arrow-link {
  text-decoration: none;
}

.ff-arrow-link a::after,
a.ff-arrow-link::after {
  content: " →";
}

.ff-card-title {
  margin-bottom: 4px !important;
}

.ff-project-card-image {
  overflow: hidden;
}

.ff-section-dark {
  background:
    radial-gradient(circle at 15% 10%, rgba(20,108,120,.08), transparent 32%),
    #06131D;
}

.ff-section-dark-alt {
  background:
    radial-gradient(circle at 82% 24%, rgba(20,108,120,.06), transparent 28%),
    #071722;
}

.ff-cta {
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 0%, rgba(232,159,51,.09), transparent 32%),
    #0B1B26;
}

.wp-block-button__link {
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
}

@media (max-width: 781px) {
  .ff-hero {
    min-height: auto !important;
  }

  .ff-home-title {
    font-size: clamp(44px, 12vw, 66px) !important;
  }

  .ff-project-title {
    font-size: clamp(42px, 11vw, 62px) !important;
  }

  .ff-desktop-spacer {
    display: none;
  }
}


/* V3 — cinematic full-bleed Cover heroes */
.ff-home-cover,.ff-project-cover{position:relative;overflow:hidden}
.ff-home-cover::after,.ff-project-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(4,14,22,.98) 0%,rgba(4,14,22,.90) 30%,rgba(4,14,22,.58) 52%,rgba(4,14,22,.18) 78%,rgba(4,14,22,.06) 100%);
}
.ff-home-cover .wp-block-cover__inner-container,.ff-project-cover .wp-block-cover__inner-container{position:relative;z-index:2}
.ff-home-cover img.wp-block-cover__image-background,.ff-project-cover img.wp-block-cover__image-background{object-fit:cover;object-position:center center}
.ff-cover-help{opacity:.55}
@media(max-width:781px){
  .ff-home-cover::after,.ff-project-cover::after{
    background:linear-gradient(180deg,rgba(4,14,22,.50) 0%,rgba(4,14,22,.84) 55%,rgba(4,14,22,.97) 100%);
  }
  .ff-home-cover,.ff-project-cover{min-height:620px!important}
}


/* ==========================================================
   V4 — Interactive project cards
   ========================================================== */
.ff-project-card {
  --ff-card-accent:#E89F33;
  position:relative;
  min-height:365px;
  overflow:hidden;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--ff-card-accent) 52%,transparent);
  background:#0B1B26;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ff-card-accent) 10%,transparent),
             0 0 20px color-mix(in srgb,var(--ff-card-accent) 12%,transparent),
             0 18px 38px rgba(0,0,0,.20);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.ff-accent-purple{--ff-card-accent:#8B5CFF}
.ff-accent-orange{--ff-card-accent:#E89F33}
.ff-accent-blue{--ff-card-accent:#3D9DFF}
.ff-accent-teal{--ff-card-accent:#35C6C8}
.ff-accent-red{--ff-card-accent:#FF6275}
.ff-accent-green{--ff-card-accent:#5AD19B}

.ff-project-card-media{
  position:absolute;inset:0;min-height:100%!important;border:0;
  transform:scale(1.005);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}
.ff-project-card-media img{width:100%;height:100%;object-fit:cover}
.ff-project-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,12,18,.04) 28%,rgba(4,12,18,.34) 58%,rgba(4,12,18,.93) 100%);
  z-index:1;
}
.ff-project-badges{position:absolute;top:12px;left:12px;right:12px;z-index:4}
.ff-project-badge{
  width:fit-content;padding:5px 7px!important;border-radius:4px;
  background:rgba(4,12,18,.84);border:1px solid rgba(255,255,255,.10);
  color:#F5F7FA;backdrop-filter:blur(8px);text-transform:uppercase;letter-spacing:.035em;
}
.ff-project-panel{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(10,20,26,.06) 0%,rgba(10,20,26,.91) 26%,rgba(10,20,26,.98) 100%);
  transform:translateY(68px);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.ff-project-card-link a{color:#F5F7FA;text-decoration:none}
.ff-project-card-link a::after{content:"";position:absolute;inset:0;z-index:8}
.ff-project-reveal{opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .22s ease}
.ff-project-tag{
  width:fit-content;padding:4px 6px!important;
  border:1px solid color-mix(in srgb,var(--ff-card-accent) 55%,transparent);
  border-radius:3px;color:#F5F7FA;background:rgba(4,12,18,.72);
  text-transform:uppercase;letter-spacing:.05em;
}
.ff-project-card:focus-within{outline:2px solid var(--ff-card-accent);outline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .ff-project-card:hover,.ff-project-card:focus-within{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--ff-card-accent) 90%,white 10%);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--ff-card-accent) 45%,transparent),
               0 0 34px color-mix(in srgb,var(--ff-card-accent) 34%,transparent),
               0 22px 46px rgba(0,0,0,.28);
  }
  .ff-project-card:hover .ff-project-panel,
  .ff-project-card:focus-within .ff-project-panel{transform:translateY(0)}
  .ff-project-card:hover .ff-project-reveal,
  .ff-project-card:focus-within .ff-project-reveal{opacity:1;transform:translateY(0)}
  .ff-project-card:hover .ff-project-card-media,
  .ff-project-card:focus-within .ff-project-card-media{transform:scale(1.035);filter:saturate(1.06) brightness(.92)}
}
@media (hover:none),(pointer:coarse){
  .ff-project-panel{transform:translateY(0)}
  .ff-project-reveal{opacity:1;transform:none}
}

/* ==========================================================
   V4 — reusable icon system
   ========================================================== */
.ff-icon-library-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.ff-icon-library-item{
  position:relative;min-height:82px;
  padding:18px 14px 14px 58px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
}
.ff-icon-library-item::before{
  content:"";position:absolute;left:17px;top:20px;width:27px;height:27px;
  background-color:#E89F33;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ff-icon-library-item:hover{border-color:rgba(232,159,51,.38);background:#102331!important}
@media(max-width:900px){.ff-icon-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ff-icon-library-grid{grid-template-columns:1fr}}

.ff-icon--systems::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIvPjxwYXRoIGQ9Ik0xOS40IDE1YTEuOCAxLjggMCAwIDAgLjM2IDJsLjA1LjA1LTIuNzYgMi43Ni0uMDUtLjA1YTEuOCAxLjggMCAwIDAtMi0uMzYgMS44IDEuOCAwIDAgMC0xLjEgMS42NVYyMWgtMy45di0uMDdBMS44IDEuOCAwIDAgMCA4LjkgMTkuM2ExLjggMS44IDAgMCAwLTIgLjM2bC0uMDUuMDUtMi43Ni0yLjc2LjA1LS4wNWExLjggMS44IDAgMCAwIC4zNi0yIDEuOCAxLjggMCAwIDAtMS42NS0xLjFIMi44VjkuOWguMDdBMS44IDEuOCAwIDAgMCA0LjUgOC44YTEuOCAxLjggMCAwIDAtLjM2LTJsLS4wNS0uMDVMNi44NSA0bC4wNS4wNWExLjggMS44IDAgMCAwIDIgLjM2QTEuOCAxLjggMCAwIDAgMTAgMi43NlYyLjdoMy45di4wN0ExLjggMS44IDAgMCAwIDE1IDQuNGExLjggMS44IDAgMCAwIDItLjM2bC4wNS0uMDUgMi43NiAyLjc2LS4wNS4wNWExLjggMS44IDAgMCAwLS4zNiAyIDEuOCAxLjggMCAwIDAgMS42NSAxLjFoLjA3djMuOWgtLjA3QTEuOCAxLjggMCAwIDAgMTkuNCAxNXoiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIvPjxwYXRoIGQ9Ik0xOS40IDE1YTEuOCAxLjggMCAwIDAgLjM2IDJsLjA1LjA1LTIuNzYgMi43Ni0uMDUtLjA1YTEuOCAxLjggMCAwIDAtMi0uMzYgMS44IDEuOCAwIDAgMC0xLjEgMS42NVYyMWgtMy45di0uMDdBMS44IDEuOCAwIDAgMCA4LjkgMTkuM2ExLjggMS44IDAgMCAwLTIgLjM2bC0uMDUuMDUtMi43Ni0yLjc2LjA1LS4wNWExLjggMS44IDAgMCAwIC4zNi0yIDEuOCAxLjggMCAwIDAtMS42NS0xLjFIMi44VjkuOWguMDdBMS44IDEuOCAwIDAgMCA0LjUgOC44YTEuOCAxLjggMCAwIDAtLjM2LTJsLS4wNS0uMDVMNi44NSA0bC4wNS4wNWExLjggMS44IDAgMCAwIDIgLjM2QTEuOCAxLjggMCAwIDAgMTAgMi43NlYyLjdoMy45di4wN0ExLjggMS44IDAgMCAwIDE1IDQuNGExLjggMS44IDAgMCAwIDItLjM2bC4wNS0uMDUgMi43NiAyLjc2LS4wNS4wNWExLjggMS44IDAgMCAwLS4zNiAyIDEuOCAxLjggMCAwIDAgMS42NSAxLjFoLjA3djMuOWgtLjA3QTEuOCAxLjggMCAwIDAgMTkuNCAxNXoiLz48L3N2Zz4=")}
.ff-icon--economy::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjgiIHI9IjQiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE2IiByPSI0Ii8+PHBhdGggZD0iTTcgOGg0TTkgNnY0TTEzIDE2aDRNMTUgMTR2NCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjgiIHI9IjQiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjE2IiByPSI0Ii8+PHBhdGggZD0iTTcgOGg0TTkgNnY0TTEzIDE2aDRNMTUgMTR2NCIvPjwvc3ZnPg==")}
.ff-icon--progression::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgMThoNHYtNGg0di00aDRWNmg0Ii8+PHBhdGggZD0ibTE2IDQgNCAyLTIgNCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgMThoNHYtNGg0di00aDRWNmg0Ii8+PHBhdGggZD0ibTE2IDQgNCAyLTIgNCIvPjwvc3ZnPg==")}
.ff-icon--liveops::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE1IiByeD0iMiIvPjxwYXRoIGQ9Ik04IDN2NE0xNiAzdjRNNCAxMGgxNiIvPjxwYXRoIGQ9Im05IDE1IDIgMiA0LTQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE1IiByeD0iMiIvPjxwYXRoIGQ9Ik04IDN2NE0xNiAzdjRNNCAxMGgxNiIvPjxwYXRoIGQ9Im05IDE1IDIgMiA0LTQiLz48L3N2Zz4=")}
.ff-icon--monetization::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgM2gxMmwyIDUtOCA1LTgtNSAyLTV6Ii8+PHBhdGggZD0ibTQgOCA4IDEzIDgtMTNNOCA4aDgiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgM2gxMmwyIDUtOCA1LTgtNSAyLTV6Ii8+PHBhdGggZD0ibTQgOCA4IDEzIDgtMTNNOCA4aDgiLz48L3N2Zz4=")}
.ff-icon--leveldesign::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMTggOCA4bDQgNiAzLTUgNiA5SDN6Ii8+PHBhdGggZD0iTTUgMThoMTQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMTggOCA4bDQgNiAzLTUgNiA5SDN6Ii8+PHBhdGggZD0iTTUgMThoMTQiLz48L3N2Zz4=")}
.ff-icon--openworld::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTMgNiA2LTMgNiAzIDYtM3YxNWwtNiAzLTYtMy02IDNWNnoiLz48cGF0aCBkPSJNOSAzdjE1TTE1IDZ2MTUiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTMgNiA2LTMgNiAzIDYtM3YxNWwtNiAzLTYtMy02IDNWNnoiLz48cGF0aCBkPSJNOSAzdjE1TTE1IDZ2MTUiLz48L3N2Zz4=")}
.ff-icon--multiplayer::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjgiIHI9IjMiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjkiIHI9IjIuNSIvPjxwYXRoIGQ9Ik0zIDIwYzAtNCAyLjUtNiA2LTZzNiAyIDYgNk0xNCAxNWM0IDAgNyAxLjUgNyA1Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjgiIHI9IjMiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjkiIHI9IjIuNSIvPjxwYXRoIGQ9Ik0zIDIwYzAtNCAyLjUtNiA2LTZzNiAyIDYgNk0xNCAxNWM0IDAgNyAxLjUgNyA1Ii8+PC9zdmc+")}
.ff-icon--combat::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNyIvPjxwYXRoIGQ9Ik0xMiAydjVNMTIgMTd2NU0yIDEyaDVNMTcgMTJoNSIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjIiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNyIvPjxwYXRoIGQ9Ik0xMiAydjVNMTIgMTd2NU0yIDEyaDVNMTcgMTJoNSIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjIiLz48L3N2Zz4=")}
.ff-icon--puzzle::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTggM2g1djRhMiAyIDAgMSAwIDQgMFYzaDR2NmgtNGEyIDIgMCAxIDAgMCA0aDR2OGgtOHYtNGEyIDIgMCAxIDAtNCAwdjRIM3YtOGg0YTIgMiAwIDEgMCAwLTRIM1YzaDV6Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTggM2g1djRhMiAyIDAgMSAwIDQgMFYzaDR2NmgtNGEyIDIgMCAxIDAgMCA0aDR2OGgtOHYtNGEyIDIgMCAxIDAtNCAwdjRIM3YtOGg0YTIgMiAwIDEgMCAwLTRIM1YzaDV6Ii8+PC9zdmc+")}
.ff-icon--narrative::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgNGgxMWEzIDMgMCAwIDEgMyAzdjEwSDhhMyAzIDAgMCAwLTMgM1Y0eiIvPjxwYXRoIGQ9Ik04IDhoN004IDEyaDciLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgNGgxMWEzIDMgMCAwIDEgMyAzdjEwSDhhMyAzIDAgMCAwLTMgM1Y0eiIvPjxwYXRoIGQ9Ik04IDhoN004IDEyaDciLz48L3N2Zz4=")}
.ff-icon--ux::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE2IiByeD0iMiIvPjxwYXRoIGQ9Ik0zIDloMThNOCA5djExIi8+PHBhdGggZD0ibTEzIDE0IDIgMiA0LTQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE2IiByeD0iMiIvPjxwYXRoIGQ9Ik0zIDloMThNOCA5djExIi8+PHBhdGggZD0ibTEzIDE0IDIgMiA0LTQiLz48L3N2Zz4=")}
.ff-icon--prototype::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgM2g2bDEgNSA0IDMtMyA2LTUgNC01LTQtMy02IDQtMyAxLTV6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMiIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgM2g2bDEgNSA0IDMtMyA2LTUgNC01LTQtMy02IDQtMyAxLTV6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMiIvPjwvc3ZnPg==")}
.ff-icon--tools::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTE0IDYgNC00IDQgNC00IDQiLz48cGF0aCBkPSJtMTMgNy05IDlhMyAzIDAgMCAwIDQgNGw5LTkiLz48cGF0aCBkPSJtNyAxNyAyIDIiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTE0IDYgNC00IDQgNC00IDQiLz48cGF0aCBkPSJtMTMgNy05IDlhMyAzIDAgMCAwIDQgNGw5LTkiLz48cGF0aCBkPSJtNyAxNyAyIDIiLz48L3N2Zz4=")}
.ff-icon--data::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgMjBWMTBNMTAgMjBWNE0xNiAyMHYtN00yMiAyMEgyIi8+PHBhdGggZD0ibTQgOCA2LTQgNiA3IDYtNSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgMjBWMTBNMTAgMjBWNE0xNiAyMHYtN00yMiAyMEgyIi8+PHBhdGggZD0ibTQgOCA2LTQgNiA3IDYtNSIvPjwvc3ZnPg==")}
.ff-icon--retention::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDIxcy03LTQuNS05LTljLTEuNS0zLjUuNS03IDQtNyAyIDAgMy41IDEgNSAzIDEuNS0yIDMtMyA1LTMgMy41IDAgNS41IDMuNSA0IDctMiA0LjUtOSA5LTkgOXoiLz48cGF0aCBkPSJNOCAxMmg4Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDIxcy03LTQuNS05LTljLTEuNS0zLjUuNS03IDQtNyAyIDAgMy41IDEgNSAzIDEuNS0yIDMtMyA1LTMgMy41IDAgNS41IDMuNSA0IDctMiA0LjUtOSA5LTkgOXoiLz48cGF0aCBkPSJNOCAxMmg4Ii8+PC9zdmc+")}
.ff-icon--onboarding::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIzIi8+PHBhdGggZD0iTTYgMjF2LTJhNiA2IDAgMCAxIDEyIDB2MiIvPjxwYXRoIGQ9Im0xNyA3IDIgMiAzLTMiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIzIi8+PHBhdGggZD0iTTYgMjF2LTJhNiA2IDAgMCAxIDEyIDB2MiIvPjxwYXRoIGQ9Im0xNyA3IDIgMiAzLTMiLz48L3N2Zz4=")}
.ff-icon--quests::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgM2gxMnYxOGwtNi0zLTYgM1YzeiIvPjxwYXRoIGQ9Im05IDEwIDIgMiA0LTQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgM2gxMnYxOGwtNi0zLTYgM1YzeiIvPjxwYXRoIGQ9Im05IDEwIDIgMiA0LTQiLz48L3N2Zz4=")}
.ff-icon--events::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgM3Y0TTE5IDN2NE00IDloMTYiLz48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTgiIGhlaWdodD0iMTYiIHJ4PSIyIi8+PHBhdGggZD0ibTEyIDEyIDEuMiAyLjQgMi44LjQtMiAyIC41IDIuOC0yLjUtMS4zLTIuNSAxLjMuNS0yLjgtMi0yIDIuOC0uNEwxMiAxMnoiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgM3Y0TTE5IDN2NE00IDloMTYiLz48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTgiIGhlaWdodD0iMTYiIHJ4PSIyIi8+PHBhdGggZD0ibTEyIDEyIDEuMiAyLjQgMi44LjQtMiAyIC41IDIuOC0yLjUtMS4zLTIuNSAxLjMuNS0yLjgtMi0yIDIuOC0uNEwxMiAxMnoiLz48L3N2Zz4=")}
.ff-icon--vr::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgOGgxNmwxIDdhMyAzIDAgMCAxLTMgM2gtMmwtMi00aC00bC0yIDRINmEzIDMgMCAwIDEtMy0zbDEtN3oiLz48Y2lyY2xlIGN4PSI4IiBjeT0iMTIiIHI9IjEiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjEyIiByPSIxIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgOGgxNmwxIDdhMyAzIDAgMCAxLTMgM2gtMmwtMi00aC00bC0yIDRINmEzIDMgMCAwIDEtMy0zbDEtN3oiLz48Y2lyY2xlIGN4PSI4IiBjeT0iMTIiIHI9IjEiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjEyIiByPSIxIi8+PC9zdmc+")}
.ff-icon--mobile::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIwIiByeD0iMiIvPjxwYXRoIGQ9Ik0xMCA1aDRNMTEgMTloMiIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIwIiByeD0iMiIvPjxwYXRoIGQ9Ik0xMCA1aDRNMTEgMTloMiIvPjwvc3ZnPg==")}
.ff-icon--pc::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEzIiByeD0iMiIvPjxwYXRoIGQ9Ik04IDIxaDhNMTIgMTZ2NSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEzIiByeD0iMiIvPjxwYXRoIGQ9Ik04IDIxaDhNMTIgMTZ2NSIvPjwvc3ZnPg==")}
.ff-icon--console::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgOGgxMGE1IDUgMCAwIDEgNC41IDdsLTEgMi41YTIgMiAwIDAgMS0zLjIuOEwxNSAxNkg5bC0yLjMgMi4zYTIgMiAwIDAgMS0zLjItLjhMMi41IDE1QTUgNSAwIDAgMSA3IDh6Ii8+PHBhdGggZD0iTTcgMTF2NE01IDEzaDRNMTYgMTJoLjAxTTE5IDE0aC4wMSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgOGgxMGE1IDUgMCAwIDEgNC41IDdsLTEgMi41YTIgMiAwIDAgMS0zLjIuOEwxNSAxNkg5bC0yLjMgMi4zYTIgMiAwIDAgMS0zLjItLjhMMi41IDE1QTUgNSAwIDAgMSA3IDh6Ii8+PHBhdGggZD0iTTcgMTF2NE01IDEzaDRNMTYgMTJoLjAxTTE5IDE0aC4wMSIvPjwvc3ZnPg==")}
.ff-icon--collaboration::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTggMTJhNCA0IDAgMSAxIDggMCIvPjxwYXRoIGQ9Ik01IDIxdi0yYTUgNSAwIDAgMSA1LTVoNGE1IDUgMCAwIDEgNSA1djIiLz48cGF0aCBkPSJtMyA5IDMgMiAyLTNNMjEgOWwtMyAyLTItMyIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTggMTJhNCA0IDAgMSAxIDggMCIvPjxwYXRoIGQ9Ik01IDIxdi0yYTUgNSAwIDAgMSA1LTVoNGE1IDUgMCAwIDEgNSA1djIiLz48cGF0aCBkPSJtMyA5IDMgMiAyLTNNMjEgOWwtMyAyLTItMyIvPjwvc3ZnPg==")}
.ff-icon--production::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNSIgeT0iNCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE3IiByeD0iMiIvPjxwYXRoIGQ9Ik05IDRWMmg2djJNOCA5aDhNOCAxM2g4TTggMTdoNSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNSIgeT0iNCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE3IiByeD0iMiIvPjxwYXRoIGQ9Ik05IDRWMmg2djJNOCA5aDhNOCAxM2g4TTggMTdoNSIvPjwvc3ZnPg==")}
.ff-icon--psychology::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDNhNiA2IDAgMCAwLTYgNmMwIDIgMSAzIDIgNHY0aDR2NGg0di01YzItMSAzLTMgMy02YTcgNyAwIDAgMC03LTd6Ii8+PHBhdGggZD0iTTkgOWMxLTIgNS0yIDYgME0xMCAxM2g0Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDNhNiA2IDAgMCAwLTYgNmMwIDIgMSAzIDIgNHY0aDR2NGg0di01YzItMSAzLTMgMy02YTcgNyAwIDAgMC03LTd6Ii8+PHBhdGggZD0iTTkgOWMxLTIgNS0yIDYgME0xMCAxM2g0Ii8+PC9zdmc+")}
.ff-icon--balancing::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDN2MThNNSA2aDE0TTcgNmwtNCA3aDhMNyA2ek0xNyA2bC00IDdoOGwtNC03eiIvPjxwYXRoIGQ9Ik04IDIxaDgiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDN2MThNNSA2aDE0TTcgNmwtNCA3aDhMNyA2ek0xNyA2bC00IDdoOGwtNC03eiIvPjxwYXRoIGQ9Ik04IDIxaDgiLz48L3N2Zz4=")}
.ff-icon--gameloop::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgN2gxMGwtMi0yTTE3IDE3SDdsMiAyIi8+PHBhdGggZD0iTTE3IDdhNiA2IDAgMCAxIDIgOE03IDE3YTYgNiAwIDAgMS0yLTgiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgN2gxMGwtMi0yTTE3IDE3SDdsMiAyIi8+PHBhdGggZD0iTTE3IDdhNiA2IDAgMCAxIDIgOE03IDE3YTYgNiAwIDAgMS0yLTgiLz48L3N2Zz4=")}
.ff-icon--exploration::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Im0xNSA5LTIgNC00IDIgMi00IDQtMnoiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Im0xNSA5LTIgNC00IDIgMi00IDQtMnoiLz48L3N2Zz4=")}
.ff-icon--social::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxIDE1YTQgNCAwIDAgMS00IDRIOWwtNSAzIDEuNS00QTcgNyAwIDAgMSAzIDEzYzAtNCA0LTcgOS03czkgMyA5IDd2MnoiLz48cGF0aCBkPSJNOCAxMmguMDFNMTIgMTJoLjAxTTE2IDEyaC4wMSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxIDE1YTQgNCAwIDAgMS00IDRIOWwtNSAzIDEuNS00QTcgNyAwIDAgMSAzIDEzYzAtNCA0LTcgOS03czkgMyA5IDd2MnoiLz48cGF0aCBkPSJNOCAxMmguMDFNMTIgMTJoLjAxTTE2IDEyaC4wMSIvPjwvc3ZnPg==")}
.ff-icon--accessibility::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSI0IiByPSIyIi8+PHBhdGggZD0iTTUgOGgxNE0xMiA2djdNOCAyMWw0LTggNCA4TTggMTFsLTMgNU0xNiAxMWwzIDUiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSI0IiByPSIyIi8+PHBhdGggZD0iTTUgOGgxNE0xMiA2djdNOCAyMWw0LTggNCA4TTggMTFsLTMgNU0xNiAxMWwzIDUiLz48L3N2Zz4=")}

/* ==========================================================
   V4.1 — robust card fallback
   Ensures the interaction works even when color-mix() is unavailable.
   ========================================================== */

.ff-project-card {
  height: 365px;
  border: 1px solid var(--ff-card-accent, #E89F33);
  box-shadow:
    0 0 12px rgba(232,159,51,.16),
    0 18px 38px rgba(0,0,0,.20);
}

.ff-project-card > .ff-project-card-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
}

.ff-project-card > .ff-project-badges {
  position: absolute !important;
}

.ff-project-card > .ff-project-panel {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
}

.ff-accent-purple { --ff-glow-rgb: 139,92,255; }
.ff-accent-orange { --ff-glow-rgb: 232,159,51; }
.ff-accent-blue   { --ff-glow-rgb: 61,157,255; }
.ff-accent-teal   { --ff-glow-rgb: 53,198,200; }
.ff-accent-red    { --ff-glow-rgb: 255,98,117; }
.ff-accent-green  { --ff-glow-rgb: 90,209,155; }

@media (hover:hover) and (pointer:fine) {
  .ff-project-card:hover,
  .ff-project-card:focus-within {
    border-color: var(--ff-card-accent, #E89F33);
    box-shadow:
      0 0 0 1px var(--ff-card-accent, #E89F33),
      0 0 30px rgba(var(--ff-glow-rgb, 232,159,51), .46),
      0 22px 46px rgba(0,0,0,.30);
  }
}

/* Editor preview: keep card structure readable in Gutenberg too. */
.editor-styles-wrapper .ff-project-card {
  position: relative;
  min-height: 365px;
}


/* ==========================================================
   V4.2 — Full-card clickable hitbox
   ========================================================== */

.ff-project-card-link a::after {
  content: none !important;
  display: none !important;
}

.ff-project-card-hitbox {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  cursor: pointer;
}

.ff-project-card:has(.ff-project-card-hitbox:hover),
.ff-project-card:has(.ff-project-card-hitbox:focus-visible) {
  transform: translateY(-4px);
  border-color: var(--ff-card-accent, #E89F33);
  box-shadow:
    0 0 0 1px var(--ff-card-accent, #E89F33),
    0 0 30px rgba(var(--ff-glow-rgb, 232,159,51), .46),
    0 22px 46px rgba(0,0,0,.30);
}

.ff-project-card:has(.ff-project-card-hitbox:hover) .ff-project-panel,
.ff-project-card:has(.ff-project-card-hitbox:focus-visible) .ff-project-panel {
  transform: translateY(0);
}

.ff-project-card:has(.ff-project-card-hitbox:hover) .ff-project-reveal,
.ff-project-card:has(.ff-project-card-hitbox:focus-visible) .ff-project-reveal {
  opacity: 1;
  transform: translateY(0);
}

.ff-project-card:has(.ff-project-card-hitbox:hover) .ff-project-card-media,
.ff-project-card:has(.ff-project-card-hitbox:focus-visible) .ff-project-card-media {
  transform: scale(1.035);
  filter: saturate(1.06) brightness(.92);
}

.ff-project-card-hitbox:focus-visible {
  outline: 2px solid var(--ff-card-accent, #E89F33);
  outline-offset: -4px;
  border-radius: 13px;
}


/* ==========================================================
   V4.3 — Direct full-card click behavior
   ========================================================== */

.ff-project-card {
  cursor: pointer !important;
}

/* Remove/deactivate any older transparent hitbox if one remains. */
.ff-project-card-hitbox {
  display: none !important;
  pointer-events: none !important;
}

/* Ensure the actual title link remains visually normal. */
.ff-project-card-link a {
  position: relative;
  z-index: 2;
}

/* Keyboard focus on the whole card. */
.ff-project-card[tabindex="0"]:focus-visible {
  outline: 2px solid var(--ff-card-accent, #E89F33);
  outline-offset: 4px;
}


/* ==========================================================
   V4.4 — Interactive timeline section
   ========================================================== */

.ff-timeline-shell {
  position: relative;
  overflow: visible;
  z-index: 4;
}

.ff-timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.ff-timeline-toolbar-text {
  color: #8D9EAC;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ff-timeline-nav {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(232,159,51,.38);
  background: rgba(9,24,34,.84);
  color: #E89F33;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ff-timeline-nav:hover {
  transform: translateY(-2px);
  border-color: rgba(232,159,51,.75);
  box-shadow: 0 0 20px rgba(232,159,51,.18);
}

.ff-timeline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 30;
}

.ff-timeline-overlay.is-visible {
  pointer-events: auto;
}

.ff-timeline-scroll {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,159,51,.45) rgba(255,255,255,.06);
}

.ff-timeline-scroll::-webkit-scrollbar {
  height: 10px;
}

.ff-timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(232,159,51,.45);
  border-radius: 999px;
}

.ff-timeline-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

.ff-timeline-canvas {
  position: relative;
  min-width: 1480px;
  padding: 10px 8px 78px;
}

.ff-timeline-years {
  display: grid;
  grid-template-columns: repeat(14, minmax(70px, 1fr));
  gap: 0;
  margin-bottom: 18px;
  color: #F5F7FA;
  font-size: 13px;
}

.ff-timeline-years span {
  display: block;
  text-align: center;
  opacity: .88;
}

.ff-timeline-track {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(232,159,51,.35) 50%, rgba(255,255,255,.18) 100%);
  margin-bottom: 42px;
}

.ff-timeline-track::before {
  content: "";
  position: absolute;
  inset: -6px 0 auto 0;
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(7.142% - 1px),
    rgba(255,255,255,.08) calc(7.142% - 1px) 7.142%
  );
  pointer-events: none;
}

.ff-timeline-period {
  --ff-card-accent: #E89F33;
  position: absolute;
  top: 66px;
  height: 56px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 8px 28px rgba(0,0,0,.18);
  overflow: hidden;
}

.ff-timeline-period::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  pointer-events: none;
}

.ff-timeline-period.ff-accent-purple { --ff-card-accent: #8B5CFF; }
.ff-timeline-period.ff-accent-blue   { --ff-card-accent: #3D9DFF; }
.ff-timeline-period.ff-accent-orange { --ff-card-accent: #E89F33; }
.ff-timeline-period.ff-accent-teal   { --ff-card-accent: #35C6C8; }
.ff-timeline-period.ff-accent-green  { --ff-card-accent: #5AD19B; }

.ff-timeline-period {
  border-color: color-mix(in srgb, var(--ff-card-accent) 55%, rgba(255,255,255,.10));
  box-shadow: 0 0 26px color-mix(in srgb, var(--ff-card-accent) 18%, transparent);
}

.ff-timeline-period-range {
  position: relative;
  z-index: 1;
  color: #F5F7FA;
  opacity: .75;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 4px;
}

.ff-timeline-period-title {
  position: relative;
  z-index: 1;
  color: #F5F7FA;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-timeline-event {
  --ff-card-accent: #E89F33;
  position: absolute;
  top: 118px;
  transform: translateX(-50%);
  z-index: 10;
}

.ff-timeline-event.ff-accent-purple { --ff-card-accent: #8B5CFF; }
.ff-timeline-event.ff-accent-blue   { --ff-card-accent: #3D9DFF; }
.ff-timeline-event.ff-accent-orange { --ff-card-accent: #E89F33; }
.ff-timeline-event.ff-accent-teal   { --ff-card-accent: #35C6C8; }
.ff-timeline-event.ff-accent-green  { --ff-card-accent: #5AD19B; }

.ff-timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--ff-card-accent);
  background: #071722;
  box-shadow: 0 0 0 4px rgba(7,23,34,.95), 0 0 18px color-mix(in srgb, var(--ff-card-accent) 42%, transparent);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.ff-timeline-dot:hover,
.ff-timeline-dot:focus-visible,
.ff-timeline-event.is-active .ff-timeline-dot {
  transform: scale(1.08);
  background: var(--ff-card-accent);
  box-shadow: 0 0 0 4px rgba(7,23,34,.95), 0 0 26px color-mix(in srgb, var(--ff-card-accent) 62%, transparent);
  outline: none;
}

.ff-timeline-event::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -44px;
  width: 2px;
  height: 44px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ff-card-accent) 80%, white 20%), transparent 100%);
  opacity: .9;
}

.ff-timeline-floating-panel {
  position: absolute;
  width: 420px;
  max-width: min(420px, calc(100vw - 56px));
  pointer-events: auto;
}

.ff-timeline-panel-card {
  --ff-card-accent: #E89F33;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,23,34,.97);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 24px 54px rgba(0,0,0,.34), 0 0 24px color-mix(in srgb, var(--ff-card-accent) 25%, transparent);
  padding: 14px;
  backdrop-filter: blur(14px);
}

.ff-timeline-panel-card.ff-accent-purple { --ff-card-accent: #8B5CFF; }
.ff-timeline-panel-card.ff-accent-blue   { --ff-card-accent: #3D9DFF; }
.ff-timeline-panel-card.ff-accent-orange { --ff-card-accent: #E89F33; }
.ff-timeline-panel-card.ff-accent-teal   { --ff-card-accent: #35C6C8; }
.ff-timeline-panel-card.ff-accent-green  { --ff-card-accent: #5AD19B; }

.ff-timeline-panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ff-card-accent) 26%, transparent);
}

.ff-timeline-panel-media {
  min-height: 136px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C4CED7;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.ff-timeline-panel-copy h4 {
  margin: 0 0 6px;
  color: #F5F7FA;
  font-size: 28px;
  line-height: 1.05;
}

.ff-timeline-panel-kicker {
  margin-bottom: 8px;
  color: var(--ff-card-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.ff-timeline-panel-meta {
  margin: 0 0 10px;
  color: #C4CED7;
  font-size: 13px;
  line-height: 1.5;
}

.ff-timeline-panel-copy p:last-child {
  margin: 0;
  color: #F5F7FA;
  font-size: 14px;
  line-height: 1.6;
}

.ff-timeline-edit-note {
  margin-top: 148px;
  color: #8D9EAC;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .ff-timeline-toolbar-text {
    display: none;
  }

  .ff-timeline-floating-panel {
    width: min(360px, calc(100vw - 42px));
  }

  .ff-timeline-panel-card {
    grid-template-columns: 1fr;
  }

  .ff-timeline-panel-media {
    min-height: 150px;
  }

  .ff-timeline-panel-copy h4 {
    font-size: 24px;
  }
}


/* ==========================================================
   V4.4.2 — Timeline interaction / alignment fixes
   ========================================================== */

/*
 * The dot center is now exactly aligned with the horizontal timeline:
 * canvas track ≈ 49px from the canvas top;
 * dot is 18px high, therefore top = 40px.
 */
.ff-timeline-event {
  top: 40px !important;
}

/* No vertical stem above the point: the point itself sits on the timeline. */
.ff-timeline-event::before {
  display: none !important;
}

/*
 * Floating panels are presentation-only.
 * Leaving the source point immediately closes the panel,
 * so the panel must not capture the mouse.
 */
.ff-timeline-overlay,
.ff-timeline-overlay.is-visible,
.ff-timeline-floating-panel {
  pointer-events: none !important;
}

/*
 * Overlay stays above following content without affecting document flow.
 */
.ff-timeline-overlay {
  overflow: visible !important;
  z-index: 100 !important;
}

.ff-timeline-shell,
.ff-timeline-section-wrap {
  overflow: visible !important;
}

/* Keep work periods below the timeline itself. */
.ff-timeline-period {
  top: 66px !important;
}

/* Hide the implementation note on the public page. */
.ff-timeline-edit-note {
  display: none !important;
}

/*
 * Give the timeline just enough intrinsic height for the period row.
 * Floating cards do NOT contribute to this height.
 */
.ff-timeline-canvas {
  padding-bottom: 44px !important;
  min-height: 156px;
}