/* ===================================================================
   Fatme Kayed — unified page system (fkx)
   One hue (257°), light + dark, per the brand colour guide.
   Loads after site.css; only styles the fkx-* content layer.
   =================================================================== */

:root{
  --fkx-bg:#ffffff;
  --fkx-bg-alt:#f6f3fa;
  --fkx-surface:#ffffff;
  --fkx-ink:#41355f;
  --fkx-ink-strong:#2b2240;
  --fkx-body:#675d7f;
  --fkx-muted:#8d869f;
  --fkx-line:#d3cae7;
  --fkx-accent:#a08ccb;
  --fkx-accent-soft:#f1eef7;
  --fkx-on-accent:#ffffff;
  --fkx-shadow:rgba(65,53,95,.10);
  --fkx-shadow-lg:rgba(65,53,95,.20);
  --fkx-radius:1.75rem;
  --fkx-ease:cubic-bezier(.22,1,.36,1);
  --fkx-pad:clamp(1.25rem,5vw,5rem);
  --fkx-gap:clamp(3rem,8vw,8rem);
}

html.fk-v5-dark-mode{
  --fkx-bg:#14101f;
  --fkx-bg-alt:#1b1529;
  --fkx-surface:#1e1830;
  --fkx-ink:#f1eef7;
  --fkx-ink-strong:#ffffff;
  --fkx-body:#c3bbd5;
  --fkx-muted:#9990ad;
  --fkx-line:rgba(160,140,203,.22);
  --fkx-accent:#bcaedb;
  --fkx-accent-soft:rgba(160,140,203,.13);
  --fkx-on-accent:#14101f;
  --fkx-shadow:rgba(0,0,0,.45);
  --fkx-shadow-lg:rgba(0,0,0,.62);
}

/* Chrome follows the same palette in dark mode */
html.fk-v5-dark-mode body,
html.fk-v5-dark-mode body.fk-custom-theme{ background:var(--fkx-bg); color:var(--fkx-body); }
html.fk-v5-dark-mode .fk-site-header{ background:rgba(20,16,31,.86); border-bottom-color:var(--fkx-line); }
html.fk-v5-dark-mode .fk-menu a{ color:var(--fkx-ink); }
html.fk-v5-dark-mode .fk-brand img{ filter:brightness(0) invert(1) opacity(.92); }
html.fk-v5-dark-mode .fk-site-footer,
html.fk-v5-dark-mode .fk-footer{ background:var(--fkx-bg-alt); color:var(--fkx-body); border-top-color:var(--fkx-line); }
html.fk-v5-dark-mode .fk-mobile-panel{ background:var(--fkx-surface); }
html.fk-v5-dark-mode .fk-theme-toggle{ color:var(--fkx-ink); border-color:var(--fkx-line); }

.fkx-home, .fkx-page{ background:var(--fkx-bg); color:var(--fkx-body); }

/* ---------- shared primitives ---------- */
.fkx-kicker{
  display:inline-block; font-size:.72rem; letter-spacing:.2em; font-weight:700;
  text-transform:uppercase; color:var(--fkx-accent);
}
.fkx-home h1, .fkx-page-hero h1{
  font-size:clamp(2.9rem,6.4vw,6.4rem); line-height:1.02; letter-spacing:-.045em;
  margin:1.1rem 0; color:var(--fkx-ink-strong); font-weight:700;
}
.fkx-home h2, .fkx-page h2{
  font-size:clamp(2rem,3.8vw,3.6rem); line-height:1.12; letter-spacing:-.035em;
  color:var(--fkx-ink-strong); margin:.7rem 0; font-weight:700;
}
.fkx-home h3, .fkx-page h3{
  font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.32; color:var(--fkx-ink);
  margin:.5rem 0; font-weight:700;
}
.fkx-home p, .fkx-page p{ color:var(--fkx-body); line-height:1.85; }

.fkx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2.2rem; border-radius:999px; background:var(--fkx-ink);
  color:#fff!important; font-weight:600; text-decoration:none!important;
  border:1.5px solid var(--fkx-ink); transition:all .35s var(--fkx-ease);
}
html.fk-v5-dark-mode .fkx-btn{ background:var(--fkx-accent); border-color:var(--fkx-accent); color:var(--fkx-on-accent)!important; }
.fkx-btn:hover{ background:var(--fkx-accent); border-color:var(--fkx-accent); transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--fkx-shadow-lg); }
html.fk-v5-dark-mode .fkx-btn:hover{ background:#d3cae7; border-color:#d3cae7; }

.fkx-textlink{
  color:var(--fkx-ink); font-weight:700; text-decoration:none!important;
  border-bottom:1px solid var(--fkx-line); padding-bottom:.2rem; transition:all .3s var(--fkx-ease);
}
.fkx-textlink:hover{ color:var(--fkx-accent); border-bottom-color:var(--fkx-accent); }

.fkx-section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }

/* ---------- home: hero ---------- */
.fkx-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:var(--fkx-gap); align-items:center; max-width:1380px; margin:auto;
  padding:clamp(3.5rem,9vw,8rem) var(--fkx-pad);
}
.fkx-hero-copy p{ font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:38rem; }
.fkx-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2.2rem; }
.fkx-hero-visual{ position:relative; border-radius:2.5rem; overflow:hidden; box-shadow:0 30px 80px -30px var(--fkx-shadow-lg); }
.fkx-hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.fkx-hero-badge{
  position:absolute; inset-inline-start:1.4rem; bottom:1.4rem; padding:.7rem 1.15rem;
  border-radius:999px; background:var(--fkx-ink); color:#fff; font-size:.75rem; letter-spacing:.06em;
}
html.fk-v5-dark-mode .fkx-hero-badge{ background:var(--fkx-accent); color:var(--fkx-on-accent); }

/* ---------- home: method ---------- */
.fkx-method{ max-width:1280px; margin:auto; padding:0 var(--fkx-pad) clamp(3.5rem,7vw,6rem); }
.fkx-method-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); margin-top:2rem; }
.fkx-method-grid article{ padding:2rem 0 0; border-top:2px solid var(--fkx-line); transition:border-color .4s var(--fkx-ease); }
.fkx-method-grid article:hover{ border-top-color:var(--fkx-accent); }
.fkx-method-grid b{ color:var(--fkx-accent); font-size:.85rem; letter-spacing:.14em; }

/* ---------- home: proof ---------- */
.fkx-proof{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--fkx-gap); align-items:center;
  max-width:1280px; margin:auto; padding:clamp(3.5rem,7vw,7rem) var(--fkx-pad);
}
.fkx-proof-copy p{ max-width:36rem; }
.fkx-orbit{
  aspect-ratio:1; border-radius:50%; position:relative; max-width:430px; margin-inline:auto; width:100%;
  background:
    radial-gradient(circle, var(--fkx-surface) 0 19%, var(--fkx-accent-soft) 20% 41%,
    var(--fkx-accent) 42% 43%, var(--fkx-bg-alt) 44%);
  box-shadow:0 30px 70px -30px var(--fkx-shadow-lg);
}
.fkx-orbit-core{
  position:absolute; inset:41%; display:grid; place-items:center; border-radius:50%;
  background:var(--fkx-ink); color:#fff; font-weight:700; font-size:.95rem; letter-spacing:.06em;
}
html.fk-v5-dark-mode .fkx-orbit-core{ background:var(--fkx-accent); color:var(--fkx-on-accent); }
.fkx-orbit i{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--fkx-accent); }
.fkx-orbit i:nth-of-type(1){ top:6%; inset-inline-start:46%; }
.fkx-orbit i:nth-of-type(2){ inset-inline-end:7%; top:47%; }
.fkx-orbit i:nth-of-type(3){ bottom:7%; inset-inline-start:41%; }

/* ---------- home: numbers ---------- */
.fkx-numbers{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem);
  max-width:1280px; margin:auto; padding:clamp(3rem,6vw,5rem) var(--fkx-pad);
  border-top:1px solid var(--fkx-line); border-bottom:1px solid var(--fkx-line);
}
.fkx-numbers strong{
  display:block; font-size:clamp(2.1rem,4vw,3.5rem); line-height:1; color:var(--fkx-ink-strong);
  letter-spacing:-.03em; font-weight:700;
}
.fkx-numbers span{ display:block; margin-top:.7rem; font-size:.9rem; color:var(--fkx-muted); line-height:1.5; }

/* ---------- cases (home + work) ---------- */
.fkx-cases{ max-width:1280px; margin:auto; padding:clamp(3.5rem,7vw,7rem) var(--fkx-pad); }
.fkx-cases-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.fkx-case-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.fkx-case, .fkx-work-card{
  position:relative; padding:clamp(1.75rem,3vw,2.6rem); background:var(--fkx-surface);
  border:1px solid var(--fkx-line); border-radius:var(--fkx-radius);
  box-shadow:0 18px 45px -30px var(--fkx-shadow); text-align:start;
  transition:transform .45s var(--fkx-ease), box-shadow .45s var(--fkx-ease), border-color .45s var(--fkx-ease);
}
.fkx-case:hover, .fkx-work-card:hover{ transform:translateY(-6px); border-color:var(--fkx-accent); box-shadow:0 34px 70px -34px var(--fkx-shadow-lg); }
.fkx-case-no{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.16em; color:var(--fkx-accent); }
.fkx-case-org{ display:block; margin-top:.9rem; font-size:.78rem; font-weight:600; letter-spacing:.08em; color:var(--fkx-muted); text-transform:uppercase; }
.fkx-case p, .fkx-work-card p{ font-size:.98rem; margin:.7rem 0 0; }
.fkx-case a, .fkx-work-more{
  display:inline-block; margin-top:1.4rem; font-weight:700; font-size:.9rem;
  color:var(--fkx-accent); text-decoration:none!important;
}
.fkx-work-card{ cursor:pointer; }
.fkx-work-card:focus-visible{ outline:2px solid var(--fkx-accent); outline-offset:3px; }

/* ---------- home: closing ---------- */
.fkx-cta{
  text-align:center; padding:clamp(4rem,8vw,7rem) var(--fkx-pad);
  background:radial-gradient(120% 140% at 20% 0%, #4d3f6e 0%, #41355f 55%, #2b2240 100%);
  color:#fff; border-radius:2.5rem 2.5rem 0 0;
}
html.fk-v5-dark-mode .fkx-cta{ background:radial-gradient(120% 140% at 20% 0%, #2a2142 0%, #1b1529 55%, #14101f 100%); }
.fkx-cta h2{ color:#fff!important; max-width:900px; margin:1rem auto 2rem; }
.fkx-cta .fkx-kicker{ color:#d3cae7; }
.fkx-cta .fkx-btn{ background:#fff; border-color:#fff; color:#41355f!important; }
.fkx-cta .fkx-btn:hover{ background:var(--fkx-accent); border-color:var(--fkx-accent); color:#fff!important; }

/* ---------- inner page hero ---------- */
.fkx-page-hero{
  padding:clamp(4.5rem,10vw,9rem) var(--fkx-pad) clamp(3rem,6vw,5rem);
  text-align:center; background:linear-gradient(140deg,#2b2240,#41355f 58%,#7d6c9c);
  color:#fff; border-radius:0 0 3rem 3rem;
}
html.fk-v5-dark-mode .fkx-page-hero{ background:linear-gradient(140deg,#14101f,#241c38 58%,#3b3157); }
.fkx-page-hero h1{ color:#fff; max-width:1000px; margin-inline:auto; }
.fkx-page-hero p{ color:rgba(255,255,255,.85); max-width:680px; margin:1.4rem auto 0; font-size:clamp(1rem,1.5vw,1.2rem); }
.fkx-page-hero .fkx-kicker{ color:#d3cae7; }

/* ---------- about: statement ---------- */
.fkx-statement{
  max-width:1200px; margin:auto; padding:clamp(3.5rem,7vw,7rem) var(--fkx-pad);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--fkx-gap); align-items:start;
}
.fkx-statement p{ font-size:clamp(1rem,1.4vw,1.15rem); }

/* ---------- about: journey ---------- */
.fkx-journey-wrap{ max-width:1000px; margin:auto; padding:0 var(--fkx-pad) clamp(4rem,8vw,7rem); }
.fkx-journey{ list-style:none; margin:0; padding:0; position:relative; }
.fkx-journey::before{
  content:""; position:absolute; inset-inline-start:11px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,transparent,var(--fkx-line) 7%,var(--fkx-line) 93%,transparent);
}
.fkx-jn{ position:relative; display:grid; grid-template-columns:24px 1fr; gap:1.6rem; padding-bottom:2.6rem; }
.fkx-jn:last-child{ padding-bottom:0; }
.fkx-jn-marker{
  width:24px; height:24px; border-radius:50%; background:var(--fkx-surface);
  border:2px solid var(--fkx-line); position:relative; z-index:1; margin-top:.35rem;
  transition:all .4s var(--fkx-ease);
}
.fkx-jn:hover .fkx-jn-marker{ background:var(--fkx-accent); border-color:var(--fkx-accent); transform:scale(1.15); }
.fkx-jn-period{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.1em; color:var(--fkx-accent);
  background:var(--fkx-accent-soft); padding:.35rem .85rem; border-radius:999px; margin-bottom:.6rem;
}
.fkx-jn h3{ margin:0 0 .3rem; }
.fkx-jn-org{ font-size:.88rem; font-weight:600; color:var(--fkx-muted); margin:0 0 .6rem!important; }
.fkx-jn p{ font-size:.98rem; margin:0; }

/* ---------- work: filters + grid ---------- */
.fkx-work{ max-width:1280px; margin:auto; padding:clamp(3rem,6vw,5.5rem) var(--fkx-pad) clamp(4rem,8vw,7rem); }
.fkx-filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:clamp(2.2rem,4vw,3.2rem); }
.fkx-filter{
  padding:.7rem 1.5rem; border-radius:999px; border:1.5px solid var(--fkx-line);
  background:transparent; color:var(--fkx-body); font-family:inherit; font-size:.9rem;
  font-weight:600; cursor:pointer; transition:all .3s var(--fkx-ease);
}
.fkx-filter:hover{ border-color:var(--fkx-accent); color:var(--fkx-ink); }
.fkx-filter.is-active{ background:var(--fkx-ink); border-color:var(--fkx-ink); color:#fff; }
html.fk-v5-dark-mode .fkx-filter.is-active{ background:var(--fkx-accent); border-color:var(--fkx-accent); color:var(--fkx-on-accent); }
.fkx-work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.fkx-work-card[hidden]{ display:none; }

/* ---------- modal ---------- */
.fkx-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.fkx-modal[hidden]{ display:none; }
.fkx-modal-backdrop{ position:absolute; inset:0; background:rgba(20,16,31,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.fkx-modal-box{
  position:relative; background:var(--fkx-surface); border:1px solid var(--fkx-line);
  border-radius:1.75rem; max-width:720px; width:100%; max-height:86vh; overflow-y:auto;
  padding:clamp(2rem,4vw,3rem); box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  animation:fkxIn .4s var(--fkx-ease);
}
@keyframes fkxIn{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
.fkx-modal-box h2{ font-size:clamp(1.6rem,3vw,2.4rem)!important; margin:.6rem 0 1rem; }
.fkx-modal-box p{ font-size:1rem; margin:0 0 1rem; }
.fkx-modal-close{
  position:absolute; top:1rem; inset-inline-end:1rem; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--fkx-line); background:var(--fkx-bg-alt); color:var(--fkx-ink);
  font-size:1.4rem; line-height:1; cursor:pointer; transition:all .3s var(--fkx-ease);
}
.fkx-modal-close:hover{ background:var(--fkx-ink); color:#fff; border-color:var(--fkx-ink); transform:rotate(90deg); }
.fkx-metrics{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.4rem 0; }
.fkx-metrics div{ background:var(--fkx-accent-soft); border-radius:1rem; padding:.9rem 1.3rem; min-width:110px; }
.fkx-metrics b{ display:block; font-size:1.5rem; font-weight:700; color:var(--fkx-ink-strong); line-height:1.15; }
.fkx-metrics span{ font-size:.76rem; color:var(--fkx-muted); }
.fkx-points{ list-style:none; padding:0; margin:1.2rem 0 0; }
.fkx-points li{
  position:relative; padding:.7rem 0 .7rem 1.5rem; border-bottom:1px solid var(--fkx-line);
  color:var(--fkx-body); font-size:.95rem;
}
[dir="rtl"] .fkx-points li{ padding:.7rem 1.5rem .7rem 0; }
.fkx-points li::before{
  content:""; position:absolute; inset-inline-start:0; top:1.15rem; width:7px; height:7px;
  border-radius:50%; background:var(--fkx-accent);
}
.fkx-points li:last-child{ border-bottom:none; }

/* ---------- contact ---------- */
/* .fkx-contact / .fkx-contact-card are fully defined later in this file
   (the "contact cards with icons" block) — no rules here, to avoid two
   same-specificity definitions fighting the cascade. */

/* ---------- reveal ---------- */
.fkx-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--fkx-ease) var(--fkx-delay,0ms), transform .8s var(--fkx-ease) var(--fkx-delay,0ms); }
.fkx-reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media(max-width:960px){
  .fkx-numbers{ grid-template-columns:repeat(2,1fr); }
  .fkx-method-grid{ grid-template-columns:1fr; }
}
@media(max-width:860px){
  .fkx-hero, .fkx-proof, .fkx-statement{ grid-template-columns:1fr; }
  .fkx-hero-visual{ order:-1; max-height:340px; }
  .fkx-page-hero{ border-radius:0 0 1.5rem 1.5rem; }
  .fkx-cta{ border-radius:1.5rem 1.5rem 0 0; }
}
@media(prefers-reduced-motion:reduce){
  .fkx-reveal{ opacity:1!important; transform:none!important; transition:none!important; }
  .fkx-modal-box{ animation:none; }
}

/* =====================================================================
   v9 — hero refinement, services, clients, single case, contact form
   ===================================================================== */

/* ---------- theme toggle: one rule that works in both modes ----------
   (Base styles previously lived in a dead CSS layer and were lost when it
   was removed; rebuilt here on tokens so light/dark adapt automatically.) */
.fk-theme-toggle{
  display:inline-grid; place-items:center; width:40px; height:40px; padding:0;
  border-radius:50%; cursor:pointer; font-size:1rem; line-height:1;
  border:1px solid var(--fkx-line); background:var(--fkx-accent-soft);
  color:var(--fkx-ink);
  transition:background .3s var(--fkx-ease), color .3s var(--fkx-ease),
             border-color .3s var(--fkx-ease), transform .3s var(--fkx-ease);
}
.fk-theme-toggle:hover{
  background:var(--fkx-accent); border-color:var(--fkx-accent);
  color:var(--fkx-on-accent); transform:rotate(18deg);
}
.fk-theme-toggle:focus-visible{ outline:2px solid var(--fkx-accent); outline-offset:2px; }

/* ---------- breathing room before the footer ---------- */
.fk-site-footer{ margin-block-start:clamp(2.5rem,5vw,4.5rem); }
.fkx-single-case > .fkx-cta,
.fkx-page > .fkx-cta,
.fkx-home > .fkx-cta{ margin-block-start:clamp(2.5rem,5vw,4.5rem); }

/* Nothing decorative may create a horizontal scrollbar (bites hardest in RTL).
   Must be `clip`, not `hidden`: `hidden` on html/body makes a scroll container
   and would break the sticky header. */
html, body{ overflow-x:clip; }
.fkx-home, .fkx-page{ overflow-x:clip; }

/* ---------- hero: framed visual + trust strip ---------- */
.fkx-hero-visual{ position:relative; border-radius:0; overflow:visible; box-shadow:none; }
.fkx-hero-frame{
  position:relative; border-radius:2.25rem; overflow:hidden;
  box-shadow:0 40px 90px -40px var(--fkx-shadow-lg);
  border:1px solid var(--fkx-line);
}
.fkx-hero-frame img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }
.fkx-hero-ring{
  position:absolute; inset:auto auto -1.2rem 1.2rem; width:9rem; height:9rem; border-radius:50%;
  border:1px solid var(--fkx-accent); opacity:.35; pointer-events:none; z-index:-1;
}
[dir="rtl"] .fkx-hero-ring{ inset:auto 1.2rem -1.2rem auto; }
.fkx-hero-trust{
  list-style:none; margin:2.4rem 0 0; padding:1.4rem 0 0; display:flex; flex-wrap:wrap;
  gap:.6rem 1.6rem; border-top:1px solid var(--fkx-line);
}
.fkx-hero-trust li{
  position:relative; color:var(--fkx-muted); font-size:.86rem; font-weight:500;
  padding-inline-start:1.1rem;
}
.fkx-hero-trust li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--fkx-accent);
}

/* ---------- numbers: centred in both languages ---------- */
.fkx-numbers > div{ text-align:center; }
.fkx-numbers span{ margin-inline:auto; max-width:16rem; }

/* ---------- services ---------- */
.fkx-services{ max-width:1280px; margin:auto; padding:clamp(3rem,6vw,6rem) var(--fkx-pad); }
.fkx-services-head p{ max-width:44rem; margin-top:1rem; }
.fkx-services-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.4vw,2rem); margin-top:clamp(2rem,4vw,3rem);
}
.fkx-service{
  padding:clamp(1.8rem,3vw,2.6rem); border:1px solid var(--fkx-line); border-radius:1.5rem;
  background:var(--fkx-surface); transition:transform .45s var(--fkx-ease), border-color .45s var(--fkx-ease), box-shadow .45s var(--fkx-ease);
}
.fkx-service:hover{ transform:translateY(-6px); border-color:var(--fkx-accent); box-shadow:0 26px 60px -34px var(--fkx-shadow-lg); }
.fkx-service b{ color:var(--fkx-accent); font-size:.82rem; letter-spacing:.14em; }
.fkx-service h3{ margin:.9rem 0 .7rem; font-size:clamp(1.25rem,2vw,1.6rem); color:var(--fkx-ink-strong); }
.fkx-service p{ color:var(--fkx-muted); line-height:1.85; margin:0; }

/* ---------- clients ---------- */
.fkx-clients{ max-width:1280px; margin:auto; padding:clamp(2.5rem,5vw,5rem) var(--fkx-pad); }
.fkx-client-list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem;
}
.fkx-client-list li{
  padding:.75rem 1.25rem; border:1px solid var(--fkx-line); border-radius:999px;
  color:var(--fkx-ink); font-size:.92rem; font-weight:500; background:var(--fkx-surface);
  transition:border-color .35s var(--fkx-ease), color .35s var(--fkx-ease);
}
.fkx-client-list li:hover{ border-color:var(--fkx-accent); color:var(--fkx-ink-strong); }

/* ---------- work cards as links ---------- */
.fkx-card-link{ color:inherit; text-decoration:none; }
.fkx-card-link::after{ content:""; position:absolute; inset:0; }
.fkx-work-card, .fkx-case{ position:relative; }
.fkx-card-metrics{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.2rem; }
.fkx-card-metrics span{ color:var(--fkx-muted); font-size:.82rem; }
.fkx-card-metrics b{ color:var(--fkx-ink-strong); font-size:1rem; }

/* ---------- single case study ---------- */
.fkx-crumbs{
  max-width:860px; margin:auto; padding:clamp(1.5rem,3vw,2.5rem) var(--fkx-pad) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:.84rem; color:var(--fkx-muted);
}
.fkx-crumbs a{ color:var(--fkx-muted); text-decoration:none; border-bottom:1px solid transparent; }
.fkx-crumbs a:hover{ color:var(--fkx-accent); border-bottom-color:var(--fkx-accent); }
.fkx-crumbs [aria-current]{ color:var(--fkx-ink); }

.fkx-case-article{ max-width:860px; margin:auto; padding:clamp(2rem,4vw,3.5rem) var(--fkx-pad) 0; }
.fkx-case-hero h1{
  font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.1; letter-spacing:-.04em;
  color:var(--fkx-ink-strong); margin:.9rem 0 0;
}
.fkx-case-org-line{ margin:1rem 0 0; color:var(--fkx-accent); font-weight:600; font-size:.95rem; }
.fkx-case-summary{ margin:1.2rem 0 0; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.8; color:var(--fkx-muted); }
.fkx-case-figure{ margin:clamp(2rem,4vw,3rem) 0 0; border-radius:1.5rem; overflow:hidden; border:1px solid var(--fkx-line); }
.fkx-case-figure img{ display:block; width:100%; height:auto; }
.fkx-case-metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem;
  margin:clamp(2rem,4vw,3rem) 0 0; padding:clamp(1.4rem,2.5vw,2rem);
  border:1px solid var(--fkx-line); border-radius:1.25rem; background:var(--fkx-bg-alt);
}
.fkx-case-metrics b{ display:block; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1; color:var(--fkx-ink-strong); letter-spacing:-.03em; }
.fkx-case-metrics span{ display:block; margin-top:.5rem; font-size:.84rem; color:var(--fkx-muted); line-height:1.5; }
.fkx-case-body{ margin-top:clamp(2rem,4vw,3rem); }
.fkx-case-body p{ font-size:1.06rem; line-height:1.95; color:var(--fkx-muted); margin:0 0 1.3rem; }
.fkx-case-body h2{ font-size:clamp(1.5rem,2.6vw,2rem); color:var(--fkx-ink-strong); margin:2.2rem 0 1rem; }
.fkx-case-body h3{ font-size:clamp(1.2rem,2vw,1.5rem); color:var(--fkx-ink-strong); margin:1.8rem 0 .8rem; }
.fkx-case-body ul, .fkx-case-body ol{ margin:0 0 1.4rem; padding-inline-start:1.3rem; color:var(--fkx-muted); line-height:1.9; }
.fkx-case-points{ margin-top:clamp(2rem,4vw,3rem); }
.fkx-case-points h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--fkx-ink-strong); margin:0 0 1.2rem; }
.fkx-case-points ul{ list-style:none; margin:0; padding:0; }
.fkx-case-points li{
  position:relative; padding:.9rem 0 .9rem 1.6rem; border-bottom:1px solid var(--fkx-line);
  color:var(--fkx-muted); line-height:1.8;
}
[dir="rtl"] .fkx-case-points li{ padding:.9rem 1.6rem .9rem 0; }
.fkx-case-points li::before{
  content:""; position:absolute; inset-inline-start:0; top:1.45em;
  width:7px; height:7px; border-radius:50%; background:var(--fkx-accent);
}
.fkx-case-points li:last-child{ border-bottom:none; }
.fkx-case-related{ max-width:1280px; margin:auto; padding:clamp(3.5rem,7vw,6rem) var(--fkx-pad) 0; }

/* ---------- contact form ---------- */
.fkx-form-wrap{
  max-width:1280px; margin:auto; padding:clamp(2.5rem,5vw,5rem) var(--fkx-pad) clamp(3.5rem,7vw,7rem);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:start;
}
.fkx-form-intro h2{ font-size:clamp(1.7rem,3vw,2.5rem); color:var(--fkx-ink-strong); margin:.8rem 0 1rem; }
.fkx-form-intro p{ color:var(--fkx-muted); line-height:1.85; }
.fkx-wa-inline{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem; padding:.85rem 1.4rem;
  border-radius:999px; border:1px solid #25d366; color:#128c4a; background:rgba(37,211,102,.08);
  font-weight:600; font-size:.95rem; text-decoration:none; transition:background .3s var(--fkx-ease);
}
.fkx-wa-inline:hover{ background:rgba(37,211,102,.18); }
.fkx-wa-inline svg{ width:20px; height:20px; }
html.fk-v5-dark-mode .fkx-wa-inline{ color:#4ade80; }

.fkx-form{
  padding:clamp(1.6rem,3vw,2.6rem); border:1px solid var(--fkx-line); border-radius:1.5rem;
  background:var(--fkx-surface); box-shadow:0 24px 60px -40px var(--fkx-shadow-lg); position:relative;
}
.fkx-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fkx-field{ display:block; margin-bottom:1.1rem; }
.fkx-field > span{ display:block; margin-bottom:.45rem; font-size:.85rem; font-weight:600; color:var(--fkx-ink); }
.fkx-field input, .fkx-field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--fkx-line); border-radius:.85rem;
  background:var(--fkx-bg); color:var(--fkx-ink); font:inherit; font-size:.98rem;
  transition:border-color .3s var(--fkx-ease), box-shadow .3s var(--fkx-ease);
}
.fkx-field input:focus, .fkx-field textarea:focus{
  outline:none; border-color:var(--fkx-accent); box-shadow:0 0 0 3px var(--fkx-accent-soft);
}
.fkx-field textarea{ resize:vertical; min-height:9rem; }
.fkx-hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.fkx-form .fkx-btn{ width:100%; justify-content:center; margin-top:.4rem; border:none; cursor:pointer; }
.fkx-form-note{
  margin:0 0 1.3rem; padding:.9rem 1.1rem; border-radius:.85rem; font-size:.93rem; line-height:1.6;
}
.fkx-form-note--ok{ background:rgba(37,211,102,.12); color:#0f7a41; border:1px solid rgba(37,211,102,.4); }
.fkx-form-note--error{ background:rgba(220,60,60,.1); color:#b02a2a; border:1px solid rgba(220,60,60,.35); }
html.fk-v5-dark-mode .fkx-form-note--ok{ color:#5ee89a; }
html.fk-v5-dark-mode .fkx-form-note--error{ color:#ff9b9b; }

.fkx-contact-card--wa{ border-color:rgba(37,211,102,.45); }
.fkx-contact-card--wa:hover{ border-color:#25d366; }

/* ---------- floating WhatsApp ---------- */
.fkx-wa-float{
  position:fixed; inset-block-end:1.5rem; inset-inline-end:1.5rem; z-index:900;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25d366; color:#fff; box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:transform .35s var(--fkx-ease), box-shadow .35s var(--fkx-ease);
}
.fkx-wa-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 20px 44px -12px rgba(37,211,102,.85); }
.fkx-wa-float svg{ width:30px; height:30px; }

@media (max-width:900px){
  .fkx-services-grid{ grid-template-columns:1fr; }
  .fkx-form-wrap{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .fkx-field-row{ grid-template-columns:1fr; gap:0; }
  .fkx-hero-trust{ gap:.5rem 1.1rem; }
  .fkx-hero-ring{ display:none; }
  .fkx-wa-float{ inset-block-end:1rem; inset-inline-end:1rem; width:52px; height:52px; }
  .fkx-wa-float svg{ width:27px; height:27px; }
}

/* =====================================================================
   v10 — testimonials, client logos, insights, FAQ, contact icons
   ===================================================================== */

/* ---------- testimonials ---------- */
.fkx-voices{ max-width:1280px; margin:auto; padding:clamp(3rem,6vw,6rem) var(--fkx-pad); }
.fkx-voice-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(1.2rem,2.4vw,2rem);
}
.fkx-voice{
  position:relative; margin:0; padding:clamp(1.8rem,3vw,2.6rem);
  border:1px solid var(--fkx-line); border-radius:1.5rem; background:var(--fkx-surface);
  transition:border-color .45s var(--fkx-ease), box-shadow .45s var(--fkx-ease);
}
.fkx-voice:hover{ border-color:var(--fkx-accent); box-shadow:0 26px 60px -34px var(--fkx-shadow-lg); }
.fkx-voice-mark{ width:34px; height:34px; color:var(--fkx-accent); opacity:.5; }
.fkx-voice blockquote{ margin:1rem 0 1.6rem; padding:0; border:0; }
.fkx-voice blockquote p{
  margin:0 0 .8rem; font-size:clamp(1.02rem,1.5vw,1.15rem); line-height:1.9; color:var(--fkx-ink);
}
.fkx-voice blockquote p:last-child{ margin-bottom:0; }
.fkx-voice figcaption{ display:flex; align-items:center; gap:.9rem; padding-top:1.2rem; border-top:1px solid var(--fkx-line); }
.fkx-voice-photo img{ width:46px; height:46px; border-radius:50%; object-fit:cover; display:block; }
.fkx-voice-who b{ display:block; color:var(--fkx-ink-strong); font-size:.98rem; }
.fkx-voice-who span{ display:block; margin-top:.2rem; color:var(--fkx-muted); font-size:.84rem; line-height:1.5; }

/* ---------- client logos ---------- */
.fkx-logo-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px; background:var(--fkx-line); border:1px solid var(--fkx-line); border-radius:1.25rem; overflow:hidden;
}
.fkx-logo{
  background:var(--fkx-surface); min-height:112px; display:grid; place-items:center; padding:1.4rem 1.1rem;
  transition:background .35s var(--fkx-ease);
}
.fkx-logo:hover{ background:var(--fkx-bg-alt); }
.fkx-logo a{ display:grid; place-items:center; width:100%; height:100%; }
.fkx-logo img{
  max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain; display:block;
  filter:grayscale(1); opacity:.62;
  transition:filter .4s var(--fkx-ease), opacity .4s var(--fkx-ease);
}
.fkx-logo:hover img{ filter:grayscale(0); opacity:1; }
html.fk-v5-dark-mode .fkx-logo img{ filter:grayscale(1) brightness(0) invert(1); opacity:.55; }
html.fk-v5-dark-mode .fkx-logo:hover img{ filter:grayscale(0) brightness(1) invert(0); opacity:1; }
.fkx-logo--text{ color:var(--fkx-muted); font-size:.92rem; font-weight:600; text-align:center; line-height:1.5; }

/* ---------- insights (blog) ---------- */
.fkx-insights{ max-width:1280px; margin:auto; padding:clamp(3rem,6vw,6rem) var(--fkx-pad); }
.fkx-insights--archive{ padding-top:clamp(2rem,4vw,3.5rem); }
.fkx-insight-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1.2rem,2.4vw,2rem); margin-top:clamp(1.5rem,3vw,2.5rem);
}
.fkx-insight{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--fkx-line); border-radius:1.5rem; overflow:hidden; background:var(--fkx-surface);
  transition:transform .45s var(--fkx-ease), border-color .45s var(--fkx-ease), box-shadow .45s var(--fkx-ease);
}
.fkx-insight:hover{ transform:translateY(-6px); border-color:var(--fkx-accent); box-shadow:0 26px 60px -34px var(--fkx-shadow-lg); }
.fkx-insight-thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--fkx-bg-alt); }
.fkx-insight-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--fkx-ease); }
.fkx-insight:hover .fkx-insight-thumb img{ transform:scale(1.05); }
.fkx-insight time{ display:block; padding:1.4rem 1.5rem 0; color:var(--fkx-accent); font-size:.8rem; letter-spacing:.1em; }
.fkx-insight h2, .fkx-insight h3{
  margin:.6rem 0 .6rem; padding:0 1.5rem; font-size:clamp(1.12rem,1.7vw,1.35rem); line-height:1.45;
  color:var(--fkx-ink-strong);
}
.fkx-insight p{ margin:0; padding:0 1.5rem 1.7rem; color:var(--fkx-muted); font-size:.95rem; line-height:1.8; }

.fkx-pagination{ margin-top:clamp(2rem,4vw,3rem); }
.fkx-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.fkx-pagination .page-numbers{
  display:grid; place-items:center; min-width:42px; height:42px; padding:0 .7rem;
  border:1px solid var(--fkx-line); border-radius:.75rem; color:var(--fkx-ink);
  text-decoration:none; font-size:.95rem; transition:all .3s var(--fkx-ease);
}
.fkx-pagination .page-numbers:hover{ border-color:var(--fkx-accent); color:var(--fkx-accent); }
.fkx-pagination .page-numbers.current{ background:var(--fkx-accent); border-color:var(--fkx-accent); color:var(--fkx-on-accent); }
.fkx-pagination .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.fkx-empty{ color:var(--fkx-muted); text-align:center; padding:3rem 0; }

/* ---------- FAQ ---------- */
.fkx-faq{ max-width:900px; margin:auto; padding:clamp(3rem,6vw,6rem) var(--fkx-pad); }
.fkx-faq-list{ margin-top:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--fkx-line); }
.fkx-faq-item{ border-bottom:1px solid var(--fkx-line); }
.fkx-faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.35rem 0; cursor:pointer; list-style:none;
  color:var(--fkx-ink-strong); font-size:clamp(1.02rem,1.6vw,1.18rem); font-weight:600; line-height:1.6;
  transition:color .3s var(--fkx-ease);
}
.fkx-faq-item summary::-webkit-details-marker{ display:none; }
.fkx-faq-item summary:hover{ color:var(--fkx-accent); }
.fkx-faq-item summary i{
  position:relative; flex:none; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--fkx-line); transition:transform .35s var(--fkx-ease), border-color .35s var(--fkx-ease);
}
.fkx-faq-item summary i::before,
.fkx-faq-item summary i::after{
  content:""; position:absolute; inset:50% 5px auto 5px; height:1.5px; margin-top:-.75px;
  background:var(--fkx-accent); transition:transform .35s var(--fkx-ease);
}
.fkx-faq-item summary i::after{ transform:rotate(90deg); }
.fkx-faq-item[open] summary i{ border-color:var(--fkx-accent); }
.fkx-faq-item[open] summary i::after{ transform:rotate(0deg); }
.fkx-faq-answer{ padding:0 0 1.6rem; }
.fkx-faq-answer p{ margin:0 0 .9rem; color:var(--fkx-muted); line-height:1.9; font-size:1rem; }
.fkx-faq-answer p:last-child{ margin-bottom:0; }

/* ---------- contact cards with icons ----------
   Plain flexbox row: align-items:center guarantees the icon sits centred
   against the text block regardless of how many lines the text wraps to.
   (An earlier CSS-grid version relied on row-track auto-sizing splitting
   extra space evenly above/below the two text lines — that assumption
   does not hold once a value wraps, so the icon drifted off-centre.) */
.fkx-contact{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.25rem);
  max-width:900px; margin-inline:auto;
}
.fkx-contact-card{
  display:flex; align-items:center; gap:1.1rem;
  padding:clamp(1.15rem,2.2vw,1.5rem); border:1px solid var(--fkx-line); border-radius:1.15rem;
  background:var(--fkx-surface); text-decoration:none;
  transition:transform .4s var(--fkx-ease), border-color .4s var(--fkx-ease), box-shadow .4s var(--fkx-ease);
}
.fkx-contact-card:hover{ transform:translateY(-4px); border-color:var(--fkx-accent); box-shadow:0 24px 54px -34px var(--fkx-shadow-lg); }
.fkx-contact-icon{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin:0; padding:0; line-height:0; flex:none;
  border-radius:.85rem; background:var(--fkx-accent-soft); color:var(--fkx-accent);
  transition:background .4s var(--fkx-ease), color .4s var(--fkx-ease), transform .4s var(--fkx-ease);
}
/* display:block removes the inline-SVG baseline gap that pushes the glyph up. */
.fkx-contact-icon svg{ width:23px; height:23px; display:block; flex:none; }
.fkx-contact-card:hover .fkx-contact-icon{ background:var(--fkx-accent); color:var(--fkx-on-accent); transform:scale(1.06); }
.fkx-contact-text{ display:flex; flex-direction:column; min-width:0; }
.fkx-contact-label{
  color:var(--fkx-muted); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.4;
}
.fkx-contact-card b{
  margin-top:.18rem;
  color:var(--fkx-ink-strong); font-size:1rem; font-weight:600; line-height:1.45;
  overflow-wrap:anywhere;
}
.fkx-contact-card--wa .fkx-contact-icon{ background:rgba(37,211,102,.12); color:#12a150; }
.fkx-contact-card--wa:hover{ border-color:#25d366; }
.fkx-contact-card--wa:hover .fkx-contact-icon{ background:#25d366; color:#fff; }
html.fk-v5-dark-mode .fkx-contact-card--wa .fkx-contact-icon{ color:#4ade80; }

@media (max-width:680px){
  .fkx-voice-grid, .fkx-insight-grid{ grid-template-columns:1fr; }
  .fkx-logo-grid{ grid-template-columns:repeat(2,1fr); }
  .fkx-contact{ grid-template-columns:1fr; }
}

/* Same baseline fix everywhere an inline SVG sits in a centred box. */
.fkx-wa-float svg,
.fkx-wa-inline svg,
.fkx-voice-mark,
.fk-theme-toggle svg{ display:block; }