/* ===== base (all pages) ===== */
:root {
  --bg: #070707;
  --ink: #fff;
  --red: #ef1b1b;
  --line: rgba(255, 255, 255, 0.12);
  --display:
    "Anton", "Bebas Neue", "Oswald", "Impact", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}
:root {
  --hc: "Barlow Condensed", "Anton", Impact, sans-serif;
  --wrap: 1240px;
  --px: clamp(20px, 5vw, 80px);
  --sy: clamp(72px, 9vw, 128px);
}
html {
  scroll-behavior: smooth;
}
.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ===== hero (all pages) ===== */
.hero {
  position: relative;
  min-height: max(700px, 92svh);
  overflow: hidden;
  isolation: isolate;
}
.photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/images/hero-bg.jpg") 50% 0 / cover no-repeat;
}
.shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7) 0,
      rgba(0, 0, 0, 0.4) 52%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 22%);
}
.scr {
  position: absolute;
  z-index: 2;
  color: rgba(225, 225, 225, 0.6);
  pointer-events: none;
}
.scr.a {
  left: 1vw;
  top: 1%;
  width: 15vw;
  height: 34%;
}
.scr.b {
  left: -1vw;
  top: 44%;
  width: 13vw;
  height: 34%;
  transform: scaleX(-1);
}
.scr.c {
  right: 1vw;
  top: 1%;
  width: 17vw;
  height: 36%;
  transform: scaleX(-1);
}
.scr.d {
  right: 2vw;
  bottom: 2%;
  width: 14vw;
  height: 32%;
}
.nav {
  direction: rtl;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  padding: 0 clamp(20px, 3.6vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo b {
  font: 400 46px/1 var(--display);
  letter-spacing: 0.05em;
}
.logo b i {
  font-style: normal;
  color: var(--red);
}
.logo small {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  margin-top: 5px;
  font-weight: 600;
  opacity: 0.85;
}
.links {
  display: flex;
  gap: clamp(20px, 2.7vw, 52px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 15.5px;
  direction:rtl;
}
.links a {
  opacity: 0.92;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
}
.links a:hover {
  opacity: 1;
  color: #fff;
}
.pill {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 8px 8px 8px 26px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s;
}
.pill:hover {
  background: rgba(255, 255, 255, 0.08);
}
.dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  flex: none;
}
.dot svg,
.soc .c svg {
  width: 18px;
  height: 18px;
}
.pill .short,
.burger {
  display: none;
}
.burger {
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  place-items: center;
}
.inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 168px 20px 120px;
}
h1 {
  margin: 0;
  font: 400 clamp(2.6rem, 4.3vw, 5.3rem)/0.98 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 900px;
}
h1 span {
  display: block;
}
h1 .r {
  color: var(--red);
}
.lead {
  margin: 34px 0 0;
  max-width: 560px;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.cta {
  position: relative;
  margin-top: 36px;
  padding-bottom: 6px;
  font: 500 clamp(20px, 1.5vw, 28px)/1.1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform-origin: left;
}
.cta:hover::after,
.cta:focus-visible::after {
  animation: sweep 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes sweep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.socials {
  position: absolute;
  z-index: 4;
  left: clamp(20px, 3.6vw, 68px);
  bottom: 44px;
  display: flex;
  gap: clamp(18px, 2.4vw, 44px);
}
.soc {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.soc .c {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  display: grid;
  place-items: center;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.soc:hover .c {
  background: var(--red);
  color: #fff;
  transform: translate(2px, -2px);
}
.strip {
  background: var(--red);
  color: #fff;
  overflow: hidden;
  height: clamp(72px, 8.6vw, 108px);
  display: flex;
  align-items: center;
}
.track {
  display: flex;
  width: max-content;
  animation: run 46s linear infinite;
}
.track div {
  display: flex;
  align-items: center;
  flex: none;
}
.track span {
  font: 400 clamp(3.2rem, 6vw, 6.4rem)/1 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 0.06em;
}
.track em {
  width: 0.34em;
  height: 0.34em;
  background: #fff;
  margin: 0 clamp(28px, 3.4vw, 58px);
  transform: skewX(-14deg);
  font-size: clamp(3.2rem, 6vw, 6.4rem);
  flex: none;
}
@keyframes run {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 1100px) {
  .links {
    display: none;
  }
  .burger {
    display: grid;
  }
  .nav {
    justify-content: flex-start;
  }
  .pill {
    margin-left: auto;
  }
}
@media (max-width: 820px) {
  .inner {
    padding-top: 450px;
  }
  .photo {
    background-position: 76% 0;
  }
}
@media (max-width: 640px) {
  .nav {
    height: 80px;
  }
  .photo {
    background-position: 84% 0;
  }
  .shade {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.5) 55%,
      rgba(0, 0, 0, 0.72)
    );
  }
  .logo b {
    font-size: 38px;
  }
  .logo small {
    display: none;
  }
  .pill {
    padding: 5px 5px 5px 16px;
    gap: 10px;
    font-size: 12px;
    
  }
  .pill .long {
    display: none;
    
  }
  .pill .short {
    display: inline;
  }
  .dot {
    width: 34px;
    height: 34px;
  }
  .inner {
    padding: 380px 18px 130px;
  }
  h1 {
    font-size: 9.4vw;
  }
  .lead {
    margin-top: 24px;
  }
  .cta {
    margin-top: 28px;
  }
  .socials {
    bottom: 26px;
    gap: 14px;
  }
  .soc {
    font-size: 11.5px;
    gap: 8px;
  }
  .soc .c {
    width: 24px;
    height: 24px;
  }
  .scr {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .track {
    animation: none;
  }
  .cta:hover::after {
    animation: none;
  }
}

/* ===== sections (all pages) ===== */
:root {
  --brand-red: #e62b27;
  --red-ink: #c81f1b;
  --brand-orange: #ff5a1f;
  --bg-dark: #121212;
  --bg-dark-2: #1a1a1a;
  --bg-light: #f5f5f5;
  --on-dark-body: #c9c9c9;
  --on-light: #0d0d0d;
  --on-light-body: #4a4a4a;
  --head: "Barlow Condensed", "Anton", "Arial Narrow", sans-serif;
}
.sec {
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 80px);
  font: 400 1.0625rem/1.6 var(--body);
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
}
.ctr {
  text-align: center;
}
.light {
  color: var(--on-light);
  background:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px) 0 0/140px 140px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px) 0 0/140px
      140px,
    var(--bg-light);
}
.dark {
  background: var(--bg-dark);
  color: #fff;
}
.black {
  background: #000;
  color: #fff;
}
.ttl {
  margin: 12px 0 0;
  font: 800 clamp(2.5rem, 6vw, 5rem)/0.98 var(--head);
  text-transform: uppercase;
}
.ttl em {
  font-style: normal;
  color: var(--brand-red);
}
.lbl {
  font: 600 0.8rem/1 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0;
}
.dark .lbl,
.black .lbl {
  color: #ff4d48;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 8px 8px 8px 26px;
  font: 600 0.9rem var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
}
.btn .a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.3s;
}
.btn .a svg {
  width: 18px;
  height: 18px;
}
.btn:hover .a {
  transform: translate(3px, -3px);
}
.btn.solid {
  
  color: #fff;
  direction: rtl;
  padding-right: 23px;
  font-size: 16px;
  padding-left: 17px;
  background: var(--red-ink);
  border-color: var(--red-ink);
}
.btn.solid .a {
  background: #fff;
  color: var(--red-ink);
}
.btn:focus-visible,
.step:focus-visible,
.tile:focus-visible,
.ft a:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 4px;
}
.ic {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--brand-red);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 34px 20px;
  text-align: center;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}
.card h3 {
  font: 700 1.5rem/1.05 var(--head);
  text-transform: uppercase;
  margin: 16px 0 0;
}
.js .rv {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.6s,
    translate 0.6s;
}
.js .rv.in {
  opacity: 1;
  translate: none;
}
.split {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .cards .card:nth-child(3n/**/+1),.cards .card:nth-child(3n) {
    margin-top: 44px;
  }
}
@media (min-width: 960px) {
  .split {
    grid-template-columns: 5fr 7fr;
  }
}
.steps {
  list-style: none;
  margin: 56px 0;
  padding: 0;
  display: grid;
  gap: 44px 24px;
 grid-template-columns: repeat(2, 1fr);
    direction: rtl;

}
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0 30px;
}
.ring {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto 28px;
}
.num {
  position: absolute;
  top: -34px;
  right: -48px;
  font: 800 8rem/1 var(--head);
  color: #3a3d38;
  transition: color 0.3s;
}
.sico {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: background 0.3s;
}
.sico svg {
  width: 72px;
  height: 72px;
  stroke: #1f2a5a;
  stroke-width: 1.4;
}
.step.on .sico {
  background: var(--brand-red);
}
.step.on .sico svg {
  stroke: #fff;
}
.step.on .num {
  color: var(--brand-red);
}
.step h3 {
  font: 700 1.4rem/1.1 var(--head);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.step p {
  margin: 0;
  color: var(--on-light-body);
}
.why {
  display: grid;
  gap: 32px 28px;
  grid-template-columns: 1fr;
  margin-top: 36px;
}
@media (min-width: 560px) {
  .why {
    grid-template-columns: 1fr 1fr;
  }
}
.why h3 {
  font: 700 1.6rem/1 var(--head);
  text-transform: uppercase;
  margin: 14px 0 6px;
}
.why p {
  margin: 0;
  color: var(--on-dark-body);
}
.progs {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 56px;
     direction: rtl;

}
@media (min-width: 640px) {
  .progs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .progs {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card.d {
  background: #222;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 14px 14px 30px;
}
.card.d:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}
.card.d p {
  color: var(--on-dark-body);
  margin: 10px 0 0;
  font-size: 1rem;
}
.thumb {
  aspect-ratio: 4/3;
  border-radius: 14px;
  background: var(--g);
}
.ig {
  color: #ff4d48;
}
.car {
  position: relative;
  margin-top: 40px;
}
.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar {
  display: none;
}
.tile {
  position: relative;
  flex: 0 0 calc((100% - 16px) / 2);
  aspect-ratio: 1;
  scroll-snap-align: start;
  border-radius: 6px;
  background: var(--g);
  overflow: hidden;
  display: grid;
  place-items: center;
}
@media (min-width: 900px) {
  .tile {
    flex-basis: calc((100% - 64px) / 5);
  }
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(230, 43, 39, 0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
.tile svg {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  opacity: 0;
  transition: opacity 0.3s;
}
.tile:hover::after,
.tile:focus-visible::after,
.tile:hover svg,
.tile:focus-visible svg {
  opacity: 1;
}
.ft {
  background: var(--bg-dark);
  color: var(--on-dark-body);
  padding: 64px clamp(20px, 5vw, 80px) 28px;
  font: 400 1rem/1.6 var(--body);
  direction: rtl;
}
.fg {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .fg {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .fg {
    grid-template-columns: repeat(5, 1fr);
  }
}
.fg h3 {
  font: 700 1.4rem/1 var(--head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.fg ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ft a {
  color: var(--on-dark-body);
  text-decoration: none;
}
.ft a:hover {
  color: #fff;
  text-decoration: underline;
}
.fb {
  font: 400 2.4rem/1 var(--head);
  color: #fff;
  letter-spacing: 0.05em;
}
.fb i {
  font-style: normal;
  color: var(--brand-red);
}
.fbar {
  max-width: 1280px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid #2c2c2c;
  font-size: 0.875rem;
}
@media (prefers-reduced-motion: reduce) {
  .js .rv {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .card,
  .btn .a,
  .sico,
  .num {
    transition: none;
  }
  .rail {
    scroll-behavior: auto;
  }
}
.logo img {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.flogo {
  border-radius: 50%;
  display: block;
}
@media (max-width: 640px) {
  .logo img {
    width: 56px;
    height: 56px;
  }
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.15));
}
.progs li:nth-child(1) .thumb {
  background:
    none center/cover,
    var(--g);
}
.progs li:nth-child(2) .thumb {
  background:
    none center/cover,
    var(--g);
}
.progs li:nth-child(3) .thumb {
  background:
    none center/cover,
    var(--g);
}
.progs li:nth-child(4) .thumb {
  background:
    none center/cover,
    var(--g);
}
.progs li:nth-child(5) .thumb {
  background:
    none center/cover,
    var(--g);
}
.progs li:nth-child(6) .thumb {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(1) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(2) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(3) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(4) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(5) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(6) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(7) {
  background:
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(8) {
  background:
    none center/cover,
    var(--g);
}

/* ===== about (home, trans) ===== */
:root {
  --d: clamp(40px, 7vw, 110px);
}
:where(body.p-home, body.p-trans) .links a[aria-current] {
  color: #fff;
  border-bottom: 2px solid var(--brand-red);
  padding-bottom: 4px;
}
:where(body.p-home, body.p-trans) .ar {
  display: block;
  font:
    800 0.5em/1.25 "Cairo",
    var(--body);
  color: var(--brand-red);
  margin-top: 6px;
  letter-spacing: 0;
  text-transform: none;
}
:where(body.p-home, body.p-trans) .lrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
:where(body.p-home, body.p-trans) .lrow::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--brand-red);
}
:where(body.p-home, body.p-trans) .btn.ghost {
  color: #fff;
}
:where(body.p-home, body.p-trans) .cta2 .btn {
  margin-top: 14px;
}
:where(body.p-home, body.p-trans) .sgrid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  :where(body.p-home, body.p-trans) .sgrid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
:where(body.p-home, body.p-trans) .stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: 1.15fr 0.85fr;
  gap: 16px;
  aspect-ratio: 1/1.05;
}
:where(body.p-home, body.p-trans) .stack div {
  background: #111 center/cover;
  border: 4px solid #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
:where(body.p-home, body.p-trans) .s1 {
  grid-area: 1/1;
  background-image: none;
}
:where(body.p-home, body.p-trans) .s2 {
  grid-area: 2/1;
  background-image: none;
}
:where(body.p-home, body.p-trans) .s3 {
  grid-area: 1/2/3/3;
  background-image: none;
}
:where(body.p-home, body.p-trans) .stack::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 28%;
  width: 2px;
  height: 70px;
  background: var(--brand-red);
  transform: skewX(-20deg);
}
:where(body.p-home, body.p-trans) .g {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, var(--a, #222), #0a0a0a);
  background-size: cover;
  background-position: center;
}
:where(body.p-home, body.p-trans) .cta2 {
  position: relative;
  z-index: 1;
  padding: clamp(90px, 12vw, 170px) clamp(20px, 5vw, 80px);
  background:
    linear-gradient(
      90deg,
      #000 0,
      rgba(0, 0, 0, 0.86) 45%,
      rgba(0, 0, 0, 0.25)
    ),
    url(../assets/images/hero-bg.jpg) 75% 62% / cover;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font: 400 1.0625rem/1.6 var(--body);
}
:where(body.p-home, body.p-trans) .ac2 {
  max-width: 560px;
}
:where(body.p-home, body.p-trans) .cta2 .ttl {
  font-size: clamp(3rem, 7vw, 6rem);
}

/* ===== content (home, trans) ===== */
:where(body.p-home, body.p-trans) [lang="ar"] {
  font-family: "Cairo", "Barlow", sans-serif;
}
:where(body.p-home, body.p-trans) .ttl[lang="ar"] {
  font-family: "Cairo", var(--head);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}
:where(body.p-home, body.p-trans) h3[lang="ar"],
:where(body.p-home, body.p-trans) h4[lang="ar"] {
  font-family: "Cairo", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
  line-height: 1.3;
}
:where(body.p-home, body.p-trans) .lbl[lang="ar"],
:where(body.p-home, body.p-trans) .btn[lang="ar"],
:where(body.p-home, body.p-trans) .cta[lang="ar"] {
  letter-spacing: 0;
  text-transform: none;
  font-family: "Cairo", var(--body);
}
:where(body.p-home, body.p-trans) .cta[lang="ar"] {
  font-weight: 700;
}
:where(body.p-home, body.p-trans) .sub-ar {
  margin: 16px 0 0;
  font:
    800 clamp(1.8rem, 3.2vw, 3rem)/1.2 "Cairo",
    sans-serif;
  color: #fff;
}
:where(body.p-home, body.p-trans) .inner .lead {
  margin-top: 10px;
}
:where(body.p-home, body.p-trans) .ctas {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
:where(body.p-home, body.p-trans) .ctas .cta {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 22px);
}
:where(body.p-home, body.p-trans) .cta.alt::after {
  background: rgba(255, 255, 255, 0.45);
}
:where(body.p-home, body.p-trans) .doc {
  position: absolute;
  z-index: 4;
  right: clamp(20px, 5vw, 80px);
  top: 160px;
  text-align: right;
  display: none;
}
:where(body.p-home, body.p-trans) .doc b {
  display: block;
  font:
    800 1.8rem/1.2 "Cairo",
    sans-serif;
}
:where(body.p-home, body.p-trans) .doc span {
  display: block;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px solid var(--brand-red);
  color: #ddd;
}
@media (min-width: 1100px) {
  :where(body.p-home, body.p-trans) .doc {
    display: block;
  }
}
:where(body.p-home, body.p-trans) .stats {
  background: #0b0b0b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 80px);
  color: #fff;
}
:where(body.p-home, body.p-trans) .stats .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (min-width: 800px) {
  :where(body.p-home, body.p-trans) .stats .wrap {
    grid-template-columns: repeat(4, 1fr);
  }
}
:where(body.p-home, body.p-trans) .st {
  text-align: center;
}
:where(body.p-home, body.p-trans) .st b {
  display: block;
  font: 400 clamp(2.6rem, 5vw, 4.4rem)/1 var(--display);
}
:where(body.p-home, body.p-trans) .st span {
  display: block;
  margin-top: 8px;
  color: var(--on-dark-body);
  font-weight: 600;
}
:where(body.p-home, body.p-trans) .st + .st {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
:where(body.p-home, body.p-trans) .ap {
  max-width: 560px;
  margin: 0 0 16px;
  text-align: right;
}
:where(body.p-home, body.p-trans) .light .ap {
  color: var(--on-light-body);
}
:where(body.p-home, body.p-trans) .dark .ap,
:where(body.p-home, body.p-trans) .ft .ap,
:where(body.p-home, body.p-trans) .cta2 .ap {
  color: var(--on-dark-body);
}
:where(body.p-home, body.p-trans) .ctr2 {
  margin-inline: auto;
  text-align: center;
}
:where(body.p-home, body.p-trans) .sec .ttl + .ap {
  margin-top: 22px;
}
:where(body.p-home, body.p-trans) .sig {
  display: flex;
  flex-direction: column;
  margin: 22px 0 26px;
  text-align: right;
}
:where(body.p-home, body.p-trans) .sig b {
  font:
    800 1.3rem "Cairo",
    sans-serif;
  color: var(--on-light);
}
:where(body.p-home, body.p-trans) .sig span {
  font-size: 0.9rem;
  direction: ltr;
  text-align: right;
  color: var(--on-light-body);
}
:where(body.p-home, body.p-trans) .dark .sig b {
  color: #fff;
}
:where(body.p-home, body.p-trans) .why p,
:where(body.p-home, body.p-trans) .why h3 {
  text-align: start;
}
:where(body.p-home, body.p-trans) .why li {
  text-align: right;
  direction: rtl;
}
:where(body.p-home, body.p-trans) .chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
:where(body.p-home, body.p-trans) .chips li {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 0.85rem;
  color: #e6e6e6;
}
:where(body.p-home, body.p-trans) .pillars {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  :where(body.p-home, body.p-trans) .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  :where(body.p-home, body.p-trans) .pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}
:where(body.p-home, body.p-trans) .card.d .pn {
  display: block;
  margin: 10px 0 6px;
  font: 400 1.1rem var(--display);
  letter-spacing: 0.08em;
  color: #ff4d48;
}
:where(body.p-home, body.p-trans) .pillars .card.d {
  padding: 26px 18px 30px;
}
:where(body.p-home, body.p-trans) .pillars h3 {
  margin: 4px 0 8px;
  font-size: 1.5rem;
  color: #fff;
}
:where(body.p-home, body.p-trans) .steps.six {
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 1100px) {
  :where(body.p-home, body.p-trans) .steps.six {
    grid-template-columns: repeat(3, 1fr);
  }
}
:where(body.p-home, body.p-trans) .plans {
  list-style: none;
  margin: 48px 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}
@media (min-width: 1000px) {
  :where(body.p-home, body.p-trans) .plans {
    grid-template-columns: repeat(3, 1fr);
  }
}
:where(body.p-home, body.p-trans) .plan {
  padding: 34px 26px;
}
:where(body.p-home, body.p-trans) .plan h3 {
  margin: 0 0 12px;
  font: 800 2rem var(--head);
  letter-spacing: 0.05em;
}
:where(body.p-home, body.p-trans) .plan p {
  margin: 0 auto;
  color: var(--on-light-body);
}
:where(body.p-home, body.p-trans) .plan b {
  display: block;
  margin-top: 20px;
}
:where(body.p-home, body.p-trans) .tk {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
:where(body.p-home, body.p-trans) .tk li::before {
  content: "✓ ";
  color: var(--brand-red);
  font-weight: 700;
}
:where(body.p-home, body.p-trans) .plan.hot {
  background: #121212;
  color: #fff;
  border: 2px solid var(--brand-red);
}
:where(body.p-home, body.p-trans) .plan.hot p,
:where(body.p-home, body.p-trans) .plan.hot li {
  color: #d9d9d9;
}
:where(body.p-home, body.p-trans) .faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 40px auto 0;
  text-align: right;
}
:where(body.p-home, body.p-trans) .q {
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0 22px;
}
:where(body.p-home, body.p-trans) .q summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
:where(body.p-home, body.p-trans) .q summary::-webkit-details-marker {
  display: none;
}
:where(body.p-home, body.p-trans) .q summary::after {
  content: "+";
  color: var(--brand-red);
  font-size: 1.5rem;
  line-height: 1;
}
:where(body.p-home, body.p-trans) .q[open] summary::after {
  content: "–";
}
:where(body.p-home, body.p-trans) .q p {
  margin: 0 0 18px;
  color: var(--on-dark-body);
}
:where(body.p-home, body.p-trans) .ctas2 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}
:where(body.p-home, body.p-trans) .slog {
  margin: 26px 0 0;
  font: 700 0.8rem var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ddd;
}
:where(body.p-home, body.p-trans) .cf {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
@media (min-width: 600px) {
  :where(body.p-home, body.p-trans) .cf {
    grid-template-columns: 1fr 1fr;
  }
}
:where(body.p-home, body.p-trans) .cf label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: var(--on-light);
}
:where(body.p-home, body.p-trans) .cf .full,
:where(body.p-home, body.p-trans) .cf button {
  grid-column: 1/-1;
}
:where(body.p-home, body.p-trans) .cf .btn {
  justify-content: center;
}
:where(body.p-home, body.p-trans) .cf input,
:where(body.p-home, body.p-trans) .cf textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fafafa;
  color: #111;
}
:where(body.p-home, body.p-trans) .cf input:focus,
:where(body.p-home, body.p-trans) .cf textarea:focus {
  outline: 3px solid var(--brand-orange);
  border-color: transparent;
}
:where(body.p-home, body.p-trans) .ft .slog {
  margin: 10px 0 0;
  font-size: 0.72rem;
}

/* ===== transformations (trans) ===== */
:where(body.p-trans) .phead {
  position: relative;
  padding: 176px clamp(20px, 5vw, 80px) 80px;
  text-align: center;
  background:
    linear-gradient(-26deg, rgb(0 0 0 / 17%), rgb(0 0 0 / 84%)), url(../assets/images/hero-bg.jpg) 70% 12% / cover
}
:where(body.p-trans) .phead .ttl {
  max-width: 900px;
  margin-inline: auto;
}
:where(body.p-trans) .phead .lbl {
  color: #ff4d48;
}
:where(body.p-trans) .links a[aria-current] {
  color: #fff;
  border-bottom: 2px solid var(--brand-red);
  padding-bottom: 4px;
}
:where(body.p-trans) .tgrid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  max-width: 1040px;
  /* direction: rtl; */
}
@media (min-width: 640px) {
  :where(body.p-trans) .tgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
:where(body.p-trans) .tc {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 26px;
  overflow: hidden;
  background: #111;
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
:where(body.p-trans) .tc:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}
:where(body.p-trans) .halves {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
:where(body.p-trans) .halves img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--x, 50%) center;
  display: block;
}
:where(body.p-trans) .halves::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--brand-red);
}
:where(body.p-trans) .tag {
  position: absolute;
  top: 18px;
  z-index: 2;
  background: #0a0a0a;
  color: #fff;
  font: 700 0.8rem/1 var(--body);
  padding: 8px 14px;
  border-radius: 99px;
}
:where(body.p-trans) .tag.b {
  left: 18px;
}
:where(body.p-trans) .tag.a {
  left: calc(50% + 18px);
}
:where(body.p-trans) .tinfo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 96px 24px 26px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.95) 0,
    rgba(0, 0, 0, 0.75) 55%,
    transparent
  );
}
:where(body.p-trans) .trow {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
:where(body.p-trans) .meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ff4d48;
  color: #ff6b66;
  background: rgba(230, 43, 39, 0.14);
  border-radius: 99px;
  padding: 6px 14px;
  font: 700 0.75rem/1 var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
:where(body.p-trans) .meta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
:where(body.p-trans) .kind {
  font: 700 0.72rem var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d0d0d0;
}
:where(body.p-trans) .tinfo h3 {
  margin: 14px 0 6px;
  font: 800 1.9rem/1 var(--head);
  text-transform: uppercase;
}
:where(body.p-trans) .tinfo p {
  margin: 0;
  color: #e0e0e0;
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (max-width: 420px) {
  :where(body.p-trans) .tinfo {
    padding: 80px 16px 18px;
  }
  :where(body.p-trans) .tinfo h3 {
    font-size: 1.6rem;
  }
  :where(body.p-trans) .tinfo p {
    font-size: 0.85rem;
  }
}

/* ===== polish (all pages) ===== */
:root {
  --r-lg: 20px;
  --r-md: 14px;
  --line-d: rgba(255, 255, 255, 0.1);
  --line-l: rgba(0, 0, 0, 0.09);
  --sec-y: clamp(72px, 9vw, 120px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sec,
.stats,
.cta2 {
  padding: var(--sec-y) clamp(20px, 5vw, 48px);
}
.stats {
  padding-block: clamp(40px, 5vw, 64px);
  background: #0b0b0b;
}
.sec .wrap,
.stats .wrap,
.cta2 .wrap {
  max-width: 1200px;
}
.sec.light {
  background: #ececec;
}
.sec.dark {
  background: #0d0d0d;
}
.sec.dark.bg-dark-2 {
  background: #131313 !important;
}
.sec.black {
  background: #070707;
}
.sec .ttl {
  margin: 10px 0 0;
}
.sec .ttl[lang="ar"] {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.3;
}
.sec.ctr .ttl {
  margin-inline: auto;
}
.sec .lbl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-red);
}
.sec.light .lbl {
  color: var(--red-ink);
}
.sec .lbl::before {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor;
}
.lrow .lbl::before,
.sec.ctr .lbl::before {
  display: none;
}
.ap {
  font-size: 1.02rem;
  line-height: 1.9;
}
.sec.ctr > .wrap > .lbl {
  margin-bottom: 0;
}
.btn {
  border-radius: 999px;
  transition:
    transform 0.4s var(--ease),
    background 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn.solid:hover {
  box-shadow: 0 12px 30px rgba(200, 31, 27, 0.4);
}
.card {
  background: #fff;
  border: 1px solid var(--line-l);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
  padding: 30px 22px;
}
.card:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}
.card.d {
  background: #191919;
  border: 1px solid var(--line-d);
  box-shadow: none;
}
.card.d:hover {
  border-color: rgba(230, 43, 39, 0.6);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.st b {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
}
.stack div {
  border: 0;
  border-radius: var(--r-md);
}
.why {
  grid-template-columns: 1fr !important;
  gap: 0;
  margin-top: 30px;
}
.why li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line-d);
}
.why li:last-child {
  border-bottom: 1px solid var(--line-d);
}
.why li .ic {
  grid-row: 1/3;
  width: 50px;
  height: 50px;
  padding: 12px;
  border: 1px solid var(--line-d);
  border-radius: 14px;
  margin: 0;
}
.why li h3 {
  margin: 0;
  font-size: 1.2rem;
}
.why li p {
  margin: 4px 0 0;
  font-size: 0.98rem;
  line-height: 1.75;
}
#coaching .card .ic {
  width: 54px;
  height: 54px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(230, 43, 39, 0.09);
}
#coaching .card h3 {
  font-size: 1.25rem;
}
.pillars {
  gap: 22px;
       direction: rtl;

}
.pillars .card.d {
  padding: 30px 20px;
}
.chips {
  gap: 6px;
}
.chips li {
  font-size: 0.8rem;
  padding: 4px 11px;
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8d8d8;
}
.steps.six {
  gap: 48px 28px;
}
.steps.six .ring {
  width: 118px;
  height: 118px;
  margin-bottom: 22px;
}
.steps.six .num {
  font-size: 5.4rem;
  top: -24px;
  right: -34px;
}
.steps.six .sico svg {
  width: 46px;
  height: 46px;
}
.step {
  transition: transform 0.4s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
}
.step h3 {
  font-size: 1.5rem;
}
.step p {
  font-size: 0.98rem;
  max-width: 30ch;
  margin-inline: auto;
}
.progs {
  gap: 26px;
}
.progs h3 {
  font-size: 1.3rem;
}
.card.d .thumb {
  border-radius: var(--r-md);
}
.progs li:nth-child(2) .thumb {
  background:
    none center/cover,
    none center 20% / cover,
    var(--g);
}
.progs li:nth-child(3) .thumb {
  background:
    none center/cover,
    none center/cover,
    var(--g);
}
.progs li:nth-child(4) .thumb {
  background:
    none center/cover,
    none center/cover,
    var(--g);
}
.progs li:nth-child(5) .thumb {
  background:
    none center/cover,
    url(../assets/images/why.jpg) center/cover,
    var(--g);
}
.plans {
  gap: 24px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 36px 28px;
}
.plan .tk {
  flex: 1;
}
.plan.hot {
  translate: 0 -10px;
  border: 2px solid var(--brand-red);
  box-shadow: 0 24px 60px rgba(230, 43, 39, 0.16);
}
@media (max-width: 999px) {
  .plan.hot {
    translate: none;
  }
}
.faq {
  gap: 12px;
}
.q {
  border-radius: var(--r-md);
  background: #171717;
  transition: border-color 0.3s;
}
.q[open] {
  border-color: rgba(230, 43, 39, 0.55);
}
.q summary {
  padding: 20px 0;
  font-size: 1.05rem;
}
.q summary:hover {
  color: #fff;
}
.q p {
  line-height: 1.85;
}
.q summary:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 4px;
  border-radius: 8px;
}
@supports (interpolate-size: allow-keywords) {
  .q {
    interpolate-size: allow-keywords;
  }
  .q::details-content {
    height: 0;
    overflow: hidden;
    transition:
      height 0.45s var(--ease),
      content-visibility 0.45s allow-discrete;
  }
  .q[open]::details-content {
    height: auto;
  }
}
.rail .tile:nth-child(1) {
  background:
    none center/cover,
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(2) {
  background:
    none center/cover,
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(3) {
  background:
    none center/cover,
    url(../assets/images/why.jpg) center/cover,
    var(--g);
}
.rail .tile:nth-child(4) {
  background:
    none center/cover,
    none center/cover,
    var(--g);
}
.rail .tile:nth-child(5) {
  background:
    none center/cover,
    url(../assets/images/hero-bg.jpg) 75% 20% / cover,
    var(--g);
}
.rail .tile:nth-child(6) {
  background:
    none center/cover,
    url(../assets/images/logo.jpg) center/cover,
    var(--g);
}
.rail .tile:nth-child(7) {
  background:
    none center/cover,
    none center 30% / cover,
    var(--g);
}
.rail .tile:nth-child(8) {
  background:
    none center/cover,
    none center 30% / cover,
    var(--g);
}
.cta2 {
  background:
 linear-gradient(
423deg, rgb(0 0 0 / 59%), rgb(0 0 0 / 55%)), radial-gradient(60% 100% at 50% 115%, rgba(230, 43, 39, 0.35), transparent 70%), url(../assets/images/back1.jpg) 75% 55% / cover ;
}
.cta2 .ac2 {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-top: -35px;
}
.cta2 .ap {
  margin-inline: auto !important;
  text-align: center;
}
.ctas2 {
  justify-content: center;
}
.cf {
  border: 1px solid var(--line-l);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 38px);
}
.cf input,
.cf textarea {
  border-radius: 12px;
}
.ft {
  padding-inline: clamp(20px, 5vw, 48px);
}
.progs li:nth-child(1) .thumb {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1611077544218-c93992b06e92?auto=format&fit=crop&w=800&q=80")
      center/cover,
    var(--g);
}
.progs li:nth-child(2) .thumb {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1632781297772-1d68f375d878?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.progs li:nth-child(3) .thumb {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1599058917212-d750089bc07e?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.progs li:nth-child(4) .thumb {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1486218119243-13883505764c?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.progs li:nth-child(5) .thumb {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=800&q=80")
      center/cover,
    var(--g);
}
.progs li:nth-child(6) .thumb {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1682241367368-6387d5d4921a?auto=format&fit=crop&w=700&q=75")
      center/cover,
    var(--g);
}
.rail .tile:nth-child(1) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1605296867304-46d5465a13f1?auto=format&fit=crop&w=900&q=80")
      center 25% / cover,
    var(--g);
}
.rail .tile:nth-child(2) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1634492859027-11de47469325?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.rail .tile:nth-child(3) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1526407297627-d845b359a55b?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.rail .tile:nth-child(4) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1632781297772-1d68f375d878?auto=format&fit=crop&w=900&q=80")
      center 25% / cover,
    var(--g);
}
.rail .tile:nth-child(5) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.rail .tile:nth-child(6) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1517963879433-6ad2b056d712?auto=format&fit=crop&w=900&q=80")
      center/cover,
    var(--g);
}
.rail .tile:nth-child(7) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1605296867304-46d5465a13f1?auto=format&fit=crop&w=900&q=80")
      center 60% / cover,
    var(--g);
}
.rail .tile:nth-child(8) {
  background:
    none center/cover,
    url("https://images.unsplash.com/photo-1526407297627-d845b359a55b?auto=format&fit=crop&w=900&q=80")
      center 30% / cover,
    var(--g);
}
.hero,
.phead {
  position: relative;
  z-index: 60;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transition:
    height 0.4s var(--ease),
    background 0.4s,
    box-shadow 0.4s,
    border-color 0.4s;
}
.nav.sc {
  height: 76px;
  background: rgba(255, 255, 255, 0.97); /* ناف أبيض عند التمرير */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.nav .logo img {
  transition:
    width 0.4s var(--ease),
    height 0.4s var(--ease);
}
.nav.sc .logo img {
  width: 60px;
  height: 60px;
}
.links a {
  position: relative;
  padding-block: 8px;
  transition:
    color 0.3s,
    transform 0.4s var(--ease);
}
.links a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.links a:hover {
  color: #fff;
  transform: translateY(-2px);
}
.links a:hover::before,
.links a[aria-current]::before {
  transform: scaleX(1);
}
@keyframes navIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.logo,
.links li,
.pill,
.burger {
  animation: navIn 0.7s var(--ease) both;
}
.links li:nth-child(1) {
  animation-delay: 0.08s;
}
.links li:nth-child(2) {
  animation-delay: 0.14s;
}
.links li:nth-child(3) {
  animation-delay: 0.2s;
}
.links li:nth-child(4) {
  animation-delay: 0.26s;
}
.links li:nth-child(5) {
  animation-delay: 0.32s;
}
.links li:nth-child(6) {
  animation-delay: 0.38s;
}
.links li:nth-child(7) {
  animation-delay: 0.44s;
}
.pill,
.burger {
  animation-delay: 0.5s;
}
.pill {
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.4s var(--ease);
}
.pill:hover {
  transform: translateY(-2px);
  background: var(--red-ink);
  border-color: var(--red-ink);
}
.pill .dot {
  transition:
    transform 0.4s var(--ease),
    background 0.3s,
    color 0.3s;
}
.pill:hover .dot {
  transform: rotate(45deg);
  background: #fff;
  color: var(--red-ink);
}
@media (max-width: 1100px) {
  .nav.open {
    background: rgba(8, 8, 8, 0.97);
  }
  .nav.open .links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 18px clamp(20px, 5vw, 48px) 28px;
    background: rgba(8, 8, 8, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav.open .links li {
    animation: none;
  }
  .nav.open .links a {
    padding: 12px 0;
    font-size: 1.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo,
  .links li,
  .pill,
  .burger {
    animation: none;
  }
}
.stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  display: block;
}
.stack .s1 {
  grid-area: 1/1;
}
.stack .s2 {
  grid-area: 2/1;
}
.stack .s3 {
  grid-area: 1/2/3/3;
}
#coaching .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#coaching .cards .card {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 18px;
}
@media (max-width: 1100px) {
  #coaching .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  #coaching .cards {
    grid-template-columns: 1fr;
  }
}
#steps .step {
  display: block;
  width: 100%;
  padding: 0 24px;
  text-align: center;
  cursor: default;
}
#steps .ring {
  display: block;
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
}
#steps .sico {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: background 0.35s;
}
#steps .sico svg {
  width: 46px;
  height: 46px;
  stroke: #1f2a5a;
  transition: stroke 0.35s;
}
#steps .step:hover {
  transform: none;
}
#steps .step:hover .sico {
  background: var(--brand-red);
}
#steps .step:hover .sico svg {
  stroke: #fff;
}

/* ===== pages (pg) ===== */
:root {
  --rd: #ff2b2b;
  --panel: #131316;
  --bd2: rgba(255, 255, 255, 0.09);
  --pad: clamp(20px, 5vw, 48px);
}
body.pg {
  background: #050506;
  color: #fff;
  font-family: "Cairo", "Barlow", sans-serif;
  line-height: 1.7;
}
.pg a {
  color: inherit;
  text-decoration: none;
}
:where(body.pg) .ab-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
:where(body.pg) .dh-banner {
  position: relative;
  z-index: 60;
  height: clamp(380px, 56vw, 560px);
  overflow: hidden;
  background: #000;
}
:where(body.pg) .dh-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../assets/images/moooh.jpg) 78% 8% / cover;
  filter: grayscale(1) contrast(1.15) brightness(0.85);
}

@media (max-width: 600px) {
:where(body.pg) .dh-banner::before {
  
  background: url(../assets/images/mooohs.jpg) 78% 8% / cover;
}


}

:where(body.pg) .dh-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7),
    transparent 32%,
    transparent 62%,
    #050506
  );
}
:where(body.pg) .dh {
  padding-bottom: clamp(60px, 9vw, 120px);
}
:where(body.pg) .dh-av {
  position: relative;
  z-index: 61;
  width: clamp(170px, 22vw, 230px);
  aspect-ratio: 1;
  margin: calc(clamp(170px, 22vw, 230px) / -2) auto 0;
  border-radius: 50%;
  border: 5px solid #fff;
  overflow: hidden;
  background: #000;
}
:where(body.pg) .dh-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(body.pg) .dh h1 {
  margin: 26px auto 4px;
  max-width: 100%;
  text-align: center;
  font:
    800 clamp(2.4rem, 6.5vw, 4.4rem)/1.25 "Cairo",
    sans-serif;
}
:where(body.pg) .dh .role {
  margin: 0;
  text-align: center;
  font:
    700 clamp(1.05rem, 2.2vw, 1.5rem) "Barlow",
    sans-serif;
}
:where(body.pg) .dh-bio {
  max-width: 860px;
  margin: 60px auto 0;
  padding-inline: var(--pad);
}
:where(body.pg) .dh-bio p {
  margin: 0 0 30px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 2.1;
  color: #f0f0f0;
}
:where(body.pg) .dh-bio .q {
  color: var(--rd);
  font-weight: 800;
  font-size: 1.4rem;
}
:where(body.pg) .dh-cta {
  text-align: center;
  margin: 56px 0 0;
}
:where(body.pg) .ab-mft {
  padding: clamp(60px, 8vw, 96px) var(--pad);
  background: #07070a;
}
:where(body.pg) .ab-mft .ab-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
:where(body.pg) .ab-link {
  color: var(--rd) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--rd);
}
@media (max-width: 1000px) {
  :where(body.pg) .ab-mft .ab-wrap {
    grid-template-columns: 1fr;
  }
}

/* ===== articles (home, calc, articles) ===== */
:where(body.p-home, body.p-calc, body.p-articles) .artsec,
:where(body.p-home, body.p-calc, body.p-articles) .ar-sec {
  background: #f5f5f5
    radial-gradient(circle, rgba(0, 0, 0, 0.09) 1px, transparent 1.3px) 0 0/22px
    22px;
  color: #0b0b0b;
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 48px);
  font-family: "Cairo", "Barlow", sans-serif;
}
:where(body.p-home, body.p-calc, body.p-articles) .ar-sec {
  padding-top: clamp(40px, 6vw, 72px);
}
:where(body.p-home, body.p-calc, body.p-articles) .ar-top {
  position: relative;
  z-index: 60;
  height: 96px;
  background: #080808;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-wrap {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-eye {
  margin: 0 0 6px;
  color: #c81f1b;
  font-weight: 700;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-wrap h1,
:where(body.p-home, body.p-calc, body.p-articles) .af-wrap h2 {
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
  font:
    800 clamp(3rem, 7vw, 5.5rem)/1.15 "Cairo",
    sans-serif;
  letter-spacing: -0.01em;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-sub {
  max-width: 640px;
  margin: 16px auto 0;
  color: #555;
  font-size: 1.1rem;
}
/* كانت CSS Nesting؛ سُطِّحت لتعمل في المتصفحات الأقدم (Chrome < 120 / Safari < 17.2) */
body.p-home .af-pills,
body.p-calc .af-pills,
body.p-articles .af-pills {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  min-height: 70px;
  margin: 0 0 44px;
  gap: 4px;

  padding: 10px 12px;

  border: none;
  border-radius: 999px;

  overflow-x: auto;
  scrollbar-width: none;
  direction: rtl;
}

body.p-home .af-pills::-webkit-scrollbar,
body.p-calc .af-pills::-webkit-scrollbar,
body.p-articles .af-pills::-webkit-scrollbar {
  display: none;
}


:where(body.p-home, body.p-calc, body.p-articles) .af-pill {
  font:
    600 1rem "Cairo",
    sans-serif;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #fafafa;
  color: #0b0b0b;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 0.3s,
    background 0.3s,
    color 0.3s,
    transform 0.4s var(--ease);
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pill:hover {
  border-color: #c81f1b;
  transform: translateY(-2px);
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pill.on {
  background: #0b0b0b;
  color: #fff;
  border-color: #0b0b0b;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pill:focus-visible {
  outline: 2px solid #c81f1b;
  outline-offset: 3px;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  text-align: start;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-grid.four {
  grid-template-columns: repeat(4, 1fr);
}
:where(body.p-home, body.p-calc, body.p-articles) .art {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s;
}
:where(body.p-home, body.p-calc, body.p-articles) .art:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.12);
}
:where(body.p-home, body.p-calc, body.p-articles) .art[hidden] {
  display: none !important;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-im {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center 25%;
  background-color: #1a1a1a;
  transition: transform 0.7s var(--ease);
}
:where(body.p-home, body.p-calc, body.p-articles) .art:hover .art-im {
  transform: scale(1.04);
}
:where(body.p-home, body.p-calc, body.p-articles) .art-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: rgba(100, 100, 100, 0.85);
  color: #fff;
  font:
    600 0.9rem "Cairo",
    sans-serif;
  padding: 7px 18px;
  border-radius: 999px;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-b {
  padding: 20px 22px 24px;
  text-align: right;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-b h3 {
  margin: 0;
  font:
    700 1.1rem/1.65 "Cairo",
    sans-serif;
  color: #0b0b0b;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-more {
  margin: 48px 0 0;
}
@media (max-width: 1100px) {
  :where(body.p-home, body.p-calc, body.p-articles) .art-grid.four {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1000px) {
  :where(body.p-home, body.p-calc, body.p-articles) .art-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  :where(body.p-home, body.p-calc, body.p-articles) .art-grid,
  :where(body.p-home, body.p-calc, body.p-articles) .art-grid.four {
    grid-template-columns: 1fr;
  }
  :where(body.p-home, body.p-calc, body.p-articles) .af-pill {
    padding: 10px 20px;
  }
}
:where(body.p-home, body.p-calc, body.p-articles) .cl {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 48px) clamp(60px, 8vw, 110px);
  background: #050506;
  font-family: "Cairo", sans-serif;
}
:where(body.p-home, body.p-calc, body.p-articles) .cl label,
:where(body.p-home, body.p-calc, body.p-articles) .cl .fld {
  display: grid;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #e9e9ec;
}
:where(body.p-home, body.p-calc, body.p-articles) .cl .full {
  grid-column: 1/-1;
}
:where(body.p-home, body.p-calc, body.p-articles) .cl input[type="number"],
:where(body.p-home, body.p-calc, body.p-articles) .cl select {
  font: inherit;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0c0c0f;
  color: #fff;
}
:where(body.p-home, body.p-calc, body.p-articles) .cl input:focus,
:where(body.p-home, body.p-calc, body.p-articles) .cl select:focus {
  outline: 0;
  border-color: var(--rd);
  box-shadow: 0 0 0 3px rgba(255, 43, 43, 0.18);
}
:where(body.p-home, body.p-calc, body.p-articles) .cl form .btn {
  justify-content: center;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 52px;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pager[hidden] {
  display: none;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pager button {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #0b0b0b;
  font:
    600 0.95rem "Cairo",
    sans-serif;
  cursor: pointer;
  transition:
    border-color 0.3s,
    background 0.3s,
    color 0.3s,
    transform 0.4s var(--ease);
}
:where(body.p-home, body.p-calc, body.p-articles)
  .af-pager
  button:hover:not(:disabled) {
  border-color: #c81f1b;
  transform: translateY(-2px);
}
:where(body.p-home, body.p-calc, body.p-articles)
  .af-pager
  button[aria-current="page"] {
  background: #0b0b0b;
  border-color: #0b0b0b;
  color: #fff;
}
:where(body.p-home, body.p-calc, body.p-articles) .af-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}
:where(body.p-home, body.p-calc, body.p-articles)
  .af-pager
  button:focus-visible {
  outline: 2px solid #c81f1b;
  outline-offset: 3px;
}
:where(body.p-home, body.p-calc, body.p-articles) a.art {
  color: inherit;
  text-decoration: none;
}
:where(body.p-home, body.p-calc, body.p-articles) a.art:focus-visible {
  outline: 3px solid #c81f1b;
  outline-offset: 3px;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-d {
  margin: 8px 0 0;
  color: #5a5a5a;
  font-size: 0.95rem;
  line-height: 1.85;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-b h3 {
  font-size: 1.08rem;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-grid.three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) {
  :where(body.p-home, body.p-calc, body.p-articles) .art-grid.three {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  :where(body.p-home, body.p-calc, body.p-articles) .art-grid.three {
    grid-template-columns: 1fr;
  }
}
:where(body.p-home, body.p-calc, body.p-articles) .aw {
  background: #f5f5f5
    radial-gradient(circle, rgba(0, 0, 0, 0.09) 1px, transparent 1.3px) 0 0/22px
    22px;
  color: #0b0b0b;
  font-family: "Cairo", "Barlow", sans-serif;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-in {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 32px) 40px;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-bc {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #6a6a6a;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-bc a:hover {
  color: #c81f1b;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 22px 0 12px;
  font-size: 0.92rem;
  color: #555;
}
:where(body.p-home, body.p-calc, body.p-articles) .art-tag.st {
  position: static;
  display: inline-block;
  background: #0b0b0b;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-in h1 {
  margin: 0 0 28px;
  font:
    800 clamp(1.9rem, 4.5vw, 3rem)/1.45 "Cairo",
    sans-serif;
  letter-spacing: -0.01em;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-img {
  margin: 0 0 40px;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
  background: #1a1a1a;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-body p {
  margin: 0 0 20px;
  font-size: 1.12rem;
  line-height: 2.05;
  color: #222;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-body h2 {
  margin: 46px 0 14px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid #c81f1b;
  font:
    800 1.6rem/1.5 "Cairo",
    sans-serif;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-body h3 {
  margin: 28px 0 8px;
  font:
    800 1.2rem/1.6 "Cairo",
    sans-serif;
  color: #c81f1b;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-body ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-body li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 1.08rem;
  line-height: 1.9;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.85em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c81f1b;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-src {
  margin: 44px 0 0;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  font-size: 0.92rem;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-src ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-src a {
  color: #c81f1b;
  text-decoration: underline;
  direction: ltr;
  display: inline-block;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-cta {
  margin: 48px 0 0;
  padding: 32px;
  background: #121212;
  color: #fff;
  border-radius: 22px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-cta p {
  margin: 0 0 20px;
  font-size: 1.1rem;
  line-height: 1.9;
  color: #ddd;
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-rel {
  padding-top: clamp(40px, 6vw, 72px);
}
:where(body.p-home, body.p-calc, body.p-articles) .aw-rel h2 {
  margin: 0;
  font:
    800 clamp(1.8rem, 4vw, 2.6rem)/1.3 "Cairo",
    sans-serif;
}

/* ===== calculator (calc) ===== */
body.pg:where(body.p-calc) {
  background: #050506;
}
body.pg:where(body.p-calc)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(5, 5, 6, 0.94) 0,
      rgba(5, 5, 6, 0.72) 45%,
      rgba(5, 5, 6, 0.45) 100%
    ),
    linear-gradient(180deg, rgba(5, 5, 6, 0.35), #050506 92%),
    url(../assets/images/hero-bg.jpg) right top/cover no-repeat;
}
:where(body.p-calc) main.cl {
  background: transparent;
  padding-top: clamp(8px, 2vw, 24px);
}
:where(body.p-calc) .mft-calorie-calculator {
  --c-red: #e50914;
  --c-red-soft: rgba(229, 9, 20, 0.12);
  --c-text: #fff;
  --c-mute: #b8bec9;
  --c-err: #ff6b6b;
  --c-panel: #111;
  --c-panel2: #161616;
  --c-line: rgba(255, 255, 255, 0.12);
  --c-line2: rgba(255, 255, 255, 0.2);
  --glass: rgba(12, 17, 26, 0.74);
  --field: rgba(255, 255, 255, 0.045);
  --field-line: rgba(255, 255, 255, 0.13);
  max-width: 1240px;
  margin: 0 auto;
  color: var(--c-text);
  font-family: "Cairo", sans-serif;
  line-height: 1.8;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
:where(body.p-calc) .mft-calorie-calculator *,
:where(body.p-calc) .mft-calorie-calculator *::before,
:where(body.p-calc) .mft-calorie-calculator *::after {
  box-sizing: border-box;
}
:where(body.p-calc) .mft-calorie-calculator [hidden] {
  display: none !important;
}
:where(body.p-calc) .mft-calorie-calculator h2,
:where(body.p-calc) .mft-calorie-calculator h3,
:where(body.p-calc) .mft-calorie-calculator h4,
:where(body.p-calc) .mft-calorie-calculator p {
  margin: 0;
}
:where(body.p-calc) .mft-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:where(body.p-calc) .mft-calorie-calculator .mft-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-header {
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
  padding-inline: clamp(4px, 2vw, 24px);
}
:where(body.p-calc) .mft-calorie-calculator .mft-eyebrow {
  display: inline-block;
  color: #d92b3c; /* AA: كان #ff4d57 (3.3:1) على الأبيض */
  font-weight: 700;
  font-size: 0.92rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-header h2 {
  position: relative;
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height: 1.3;
  padding-bottom: 18px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-accent {
  color: var(--c-red);
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-header h2::after {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  translate: -50% 0;
  bottom: 0;
  width: 112px;
  height: 4px;
  border-radius: 4px;
  background: var(--c-red);
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-intro {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  color: #d9dde5;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-note {
  max-width: 620px;
  margin-inline: auto;
  color: var(--c-mute);
  font-size: 0.9rem;
  text-align: center;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: clamp(18px, 3vw, 36px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
:where(body.p-calc) .mft-calorie-calculator fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
:where(body.p-calc) .mft-calorie-calculator legend {
  padding: 0;
  float: inline-start;
  width: 100%;
}
:where(body.p-calc) .mft-calorie-calculator legend + * {
  clear: both;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-section {
  padding: 0 0 26px;
}
@media (min-width: 1024px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-calculator-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }
  :where(body.p-calc) .mft-calorie-calculator .mft-section-data {
    padding-inline-end: clamp(22px, 3vw, 40px);
  }
  :where(body.p-calc) .mft-calorie-calculator .mft-section-activity {
    padding-inline-start: clamp(22px, 3vw, 40px);
    border-inline-start: 1px solid var(--c-line);
  }
  :where(body.p-calc) .mft-calorie-calculator .mft-calculator-actions,
  :where(body.p-calc) .mft-calorie-calculator .mft-method-note {
    grid-column: 1/-1;
  }
}
@media (max-width: 1023px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-section-activity {
    padding-top: 26px;
    border-top: 1px solid var(--c-line);
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin-bottom: 8px;
  
}
:where(body.p-calc) .mft-calorie-calculator .mft-section-description {
  color: var(--c-mute);
  margin-bottom: 22px;
  font-size: 0.98rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 18px;
}
@media (min-width: 560px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-field-full,
:where(body.p-calc) .mft-calorie-calculator .mft-row-card,
:where(body.p-calc) .mft-calorie-calculator .mft-form-grid > .mft-info-row {
  grid-column: 1/-1;
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-field {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-field > label,
:where(body.p-calc) .mft-calorie-calculator .mft-choice-group > legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #f4f6fa;
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-field > label .mft-ico,
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-choice-group
  > legend
  .mft-ico {
  color: #c9ced8;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-group > legend {
  margin-bottom: 9px;
  float: none;
}
:where(body.p-calc) .mft-calorie-calculator .mft-optional {
  color: var(--c-mute);
  font-weight: 600;
  font-size: 0.88rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-row-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--field-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}
@media (min-width: 560px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-row-card {
    grid-template-columns: 1fr 1fr;
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-field small,
:where(body.p-calc) .mft-calorie-calculator .mft-info-row small {
  color: var(--c-mute);
  font-size: 0.84rem;
  line-height: 1.7;
}
:where(body.p-calc) .mft-calorie-calculator small.mft-error {
  color: var(--c-err);
  font-weight: 600;
  font-size: 0.88rem;
}
:where(body.p-calc) .mft-calorie-calculator small.mft-error::before {
  content: "! ";
  font-weight: 800;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-calculator-section
  > small.mft-error {
  display: block;
  margin-top: 14px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--c-mute);
}
:where(body.p-calc) .mft-calorie-calculator .mft-info-row .mft-ico {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-input-group
  input[type="number"],
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap select {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--field-line);
  background: var(--field);
  color: #fff;
  font:
    600 1.05rem "Cairo",
    sans-serif;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-input-group
  input[type="number"] {
  padding-inline-end: 70px;
  -moz-appearance: textfield;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-input-group
  input::-webkit-outer-spin-button,
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-input-group
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-input-group
  input::placeholder {
  color: #7b8392;
  font-weight: 500;
}
:where(body.p-calc) .mft-calorie-calculator .mft-input-group input:hover,
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap select:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}
:where(body.p-calc) .mft-calorie-calculator .mft-input-group input:focus,
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap select:focus {
  outline: 0;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.28);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-input-group
  input[aria-invalid="true"],
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-select-wrap
  select[aria-invalid="true"] {
  border-color: var(--c-err);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}
:where(body.p-calc) .mft-calorie-calculator .mft-input-unit {
  position: absolute;
  inset-inline-end: 16px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #d4d9e2;
  font-size: 0.85rem;
  pointer-events: none;
}
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap {
  position: relative;
}
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 46px;
  cursor: pointer;
}
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap select:invalid {
  color: #8a92a1;
  font-weight: 500;
}
:where(body.p-calc) .mft-calorie-calculator .mft-select-wrap select option {
  background: #10151f;
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-chev {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  fill: none;
  stroke: #c9ced8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-group {
  border: 0;
  padding: 0;
  margin: 0;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-option {
  position: relative;
  display: block;
  gap: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-option input,
:where(body.p-calc) .mft-calorie-calculator .mft-activity-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 14px;
  border: 1px solid var(--field-line);
  background: var(--field);
  font-weight: 700;
  color: #e3e6ec;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
:where(body.p-calc) .mft-calorie-calculator .mft-choice-option:hover span {
  border-color: rgba(255, 255, 255, 0.4);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-choice-option
  input:checked
  + span {
  background: linear-gradient(180deg, #f01420, #c40812);
  border-color: #ff4d57;
  color: #fff;
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.4);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-choice-option
  input:focus-visible
  + span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-activity-list {
    grid-template-columns: 1fr 1fr;
  }
  :where(body.p-calc) .mft-calorie-calculator .mft-activity-option:last-child {
    grid-column: 1/-1;
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-option {
  position: relative;
  display: block;
  gap: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-content {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  height: 100%;
  padding: 16px 18px;
  padding-inline-end: 54px;
  border: 1px solid var(--field-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-content::before {
  content: "";
  position: absolute;
  inset-inline-end: 18px;
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #7d8594;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-head strong {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.4;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-icon {
  width: 34px;
  height: 34px;
  flex: none;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-icon .on {
  fill: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-icon .off {
  fill: rgba(255, 255, 255, 0.22);
}
:where(body.p-calc) .mft-calorie-calculator .mft-activity-content small {
  color: var(--c-mute);
  font-size: 0.88rem;
  line-height: 1.75;
  font-weight: 400;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-activity-option:hover
  .mft-activity-content {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-activity-option
  input:checked
  + .mft-activity-content {
  border: 2px solid var(--c-red);
  padding: 15px 17px;
  padding-inline-end: 53px;
  background: var(--c-red-soft);
  box-shadow:
    0 0 0 4px rgba(229, 9, 20, 0.12),
    0 10px 28px rgba(229, 9, 20, 0.18);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-activity-option
  input:checked
  + .mft-activity-content::before {
  top: 17px;
  inset-inline-end: 17px;
  border-color: var(--c-red);
  background: var(--c-red);
  box-shadow: inset 0 0 0 5px #1a0d10;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-activity-option
  input:checked
  + .mft-activity-content
  .mft-activity-icon
  .on {
  fill: #ff4d57;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-activity-option
  input:focus-visible
  + .mft-activity-content {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-actions {
  display: flex;
  padding-top: 6px;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-calculator-form
  .mft-primary-button {
  width: 100%;
  min-height: 64px;
  gap: 16px;
  font-size: 1.3rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, #f01420, #c40812);
  box-shadow:
    0 14px 34px rgba(229, 9, 20, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-calculator-form
  .mft-primary-button:hover {
  background: linear-gradient(180deg, #ff2430, #d10a14);
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(229, 9, 20, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-calculator-form
  .mft-primary-button
  .mft-ico {
  width: 24px;
  height: 24px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-method-note {
  margin-top: 18px;
  color: var(--c-mute);
  font-size: 0.88rem;
  text-align: center;
}
:where(body.p-calc) .mft-calorie-calculator .mft-method-note strong {
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-primary-button,
:where(body.p-calc) .mft-calorie-calculator .mft-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 30px;
  border-radius: 999px;
  font:
    800 1.05rem "Cairo",
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s,
    background 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
:where(body.p-calc) .mft-calorie-calculator .mft-primary-button {
  background: var(--c-red);
  border: 2px solid var(--c-red);
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-primary-button:hover {
  background: #c40812;
  border-color: #c40812;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(229, 9, 20, 0.35);
}
:where(body.p-calc) .mft-calorie-calculator .mft-secondary-button {
  background: transparent;
  border: 2px solid var(--c-line2);
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-secondary-button:hover {
  border-color: #fff;
  transform: translateY(-2px);
}
:where(body.p-calc) .mft-calorie-calculator .mft-primary-button:focus-visible,
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-secondary-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-calculator-actions {
  display: flex;
}
:where(body.p-calc)
  .mft-calorie-calculator
  .mft-calculator-actions
  .mft-primary-button {
  width: 100%;
}
@media (min-width: 640px) {
  :where(body.p-calc)
    .mft-calorie-calculator
    .mft-calculator-actions
    .mft-primary-button {
    width: auto;
    min-width: 300px;
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-results {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  scroll-margin-top: 90px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-results-header {
  display: grid;
  gap: 6px;
  text-align: center;
}
:where(body.p-calc) .mft-calorie-calculator .mft-results-header h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}
:where(body.p-calc) .mft-calorie-calculator .mft-results-header h2:focus {
  outline: 0;
}
:where(body.p-calc) .mft-calorie-calculator .mft-results-header p {
  color: var(--c-mute);
}
:where(body.p-calc) .mft-calorie-calculator .mft-main-result {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(26px, 5vw, 48px) clamp(18px, 4vw, 40px);
  border-radius: 24px;
  border: 1px solid var(--c-line2);
  border-top: 4px solid var(--c-red);
  background:
    radial-gradient(70% 90% at 50% 0, rgba(229, 9, 20, 0.18), transparent 70%),
    linear-gradient(180deg, #181818, #0e0e0e);
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-label {
  display: block;
  color: #d6d6db;
  font-weight: 700;
  font-size: 1.02rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-main-result-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  margin: 10px 0 8px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-main-result-value output {
  font:
    400 clamp(4.2rem, 16vw, 7.5rem)/1 "Anton",
    sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  direction: ltr;
  unicode-bidi: isolate;
}
:where(body.p-calc) .mft-calorie-calculator .mft-main-result-value span {
  color: var(--c-red);
  font-weight: 800;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-caption {
  color: var(--c-mute);
  max-width: 520px;
  margin: 0 auto;
  font-size: 0.95rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-alert {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.08);
  color: #ffd3d3;
  font-size: 0.94rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-results-grid,
:where(body.p-calc) .mft-calorie-calculator .mft-macro-grid,
:where(body.p-calc) .mft-calorie-calculator .mft-guide-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-results-grid,
  :where(body.p-calc) .mft-calorie-calculator .mft-macro-grid,
  :where(body.p-calc) .mft-calorie-calculator .mft-guide-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-card,
:where(body.p-calc) .mft-calorie-calculator .mft-macro-card,
:where(body.p-calc) .mft-calorie-calculator .mft-guide-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-panel);
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-card-label {
  color: var(--c-mute);
  font-weight: 700;
  font-size: 0.92rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-card > strong {
  font:
    800 1.5rem/1.3 "Cairo",
    sans-serif;
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-card > strong output {
  font:
    400 2.2rem/1.1 "Anton",
    sans-serif;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-card > strong small {
  color: var(--c-mute);
  font:
    500 0.85rem "Cairo",
    sans-serif;
}
:where(body.p-calc) .mft-calorie-calculator .mft-result-card p,
:where(body.p-calc) .mft-calorie-calculator .mft-macro-card p,
:where(body.p-calc) .mft-calorie-calculator .mft-guide-card p {
  color: var(--c-mute);
  font-size: 0.9rem;
  line-height: 1.8;
}
:where(body.p-calc) .mft-calorie-calculator .mft-subsection-header {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-subsection-header h3 {
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}
:where(body.p-calc) .mft-calorie-calculator .mft-subsection-header p {
  color: var(--c-mute);
  font-size: 0.95rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-header > span {
  font-weight: 800;
  font-size: 1.05rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-header strong {
  font:
    400 1.7rem/1 "Anton",
    sans-serif;
  letter-spacing: 0.02em;
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-header strong output {
  direction: ltr;
  unicode-bidi: isolate;
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-header strong {
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-header strong output {
  font:
    400 1.8rem/1 "Anton",
    sans-serif;
}
:where(body.p-calc) .mft-calorie-calculator .mft-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
:where(body.p-calc) .mft-calorie-calculator .mft-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--c-red);
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
:where(body.p-calc) .mft-calorie-calculator .mft-macro-share {
  color: #d6d6db;
  font-size: 0.85rem;
  font-weight: 600;
}
:where(body.p-calc) .mft-calorie-calculator .mft-guide-card h4 {
  font:
    400 1.4rem/1.2 "Anton",
    sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
}
:where(body.p-calc) .mft-calorie-calculator .mft-guide-card:nth-child(3) h4 {
  font:
    800 1.15rem "Cairo",
    sans-serif;
  letter-spacing: 0;
}
:where(body.p-calc) .mft-calorie-calculator .mft-smart-guidance {
  padding: clamp(20px, 4vw, 32px);
  border-radius: 18px;
  background: var(--c-panel2);
  border: 1px solid var(--c-line);
  border-inline-start: 4px solid var(--c-red);
}
:where(body.p-calc) .mft-calorie-calculator .mft-smart-guidance h3 {
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 8px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-smart-guidance p {
  color: #d6d6db;
}
:where(body.p-calc) .mft-calorie-calculator .mft-smart-guidance ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-smart-guidance li {
  position: relative;
  padding-inline-start: 22px;
  color: #d6d6db;
  font-size: 0.95rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-smart-guidance li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
}
:where(body.p-calc) .mft-calorie-calculator .mft-cta {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px);
  border-radius: 24px;
  border: 1px solid var(--c-line2);
  background:
    radial-gradient(
      80% 120% at 50% 100%,
      rgba(229, 9, 20, 0.16),
      transparent 70%
    ),
    #0d0d0d;
}
:where(body.p-calc) .mft-calorie-calculator .mft-cta h3 {
  font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.5;
}
:where(body.p-calc) .mft-calorie-calculator .mft-cta p {
  max-width: 620px;
  color: #d6d6db;
}
:where(body.p-calc) .mft-calorie-calculator .mft-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  width: 100%;
}
@media (max-width: 560px) {
  :where(body.p-calc) .mft-calorie-calculator .mft-cta-actions > a {
    width: 100%;
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-disclaimer {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3.5vw, 28px);
  border-radius: 16px;
  border: 1px solid var(--c-line);
  background: #0b0b0b;
  color: var(--c-mute);
  font-size: 0.88rem;
}
:where(body.p-calc) .mft-calorie-calculator .mft-disclaimer h3 {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}
@media (prefers-reduced-motion: reduce) {
  :where(body.p-calc) .mft-calorie-calculator * {
    transition: none !important;
  }
}
:where(body.p-calc) .mft-calorie-calculator .mft-form-field > label {
  gap: 8px;
}
:where(body.p-calc) .mft-calorie-calculator .mft-primary-button,
:where(body.p-calc) .mft-calorie-calculator .mft-secondary-button {
  text-decoration: none;
}

/* ===== more (home) ===== */
:where(body.p-home) .gx {
  display: grid;
  gap: 22px;
  margin-top: 44px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  :where(body.p-home) .gx {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  :where(body.p-home) .g3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
:where(body.p-home) .gx .card .ic {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(230, 43, 39, 0.1);
}
:where(body.p-home) .gx .card h3 {
  margin: 14px 0 6px;
  font-size: 1.25rem;
}
:where(body.p-home) .gx .card.d h3 {
  color: #fff;
}
:where(body.p-home) .sec.ctr > .wrap > .ap {
  margin-inline: auto;
}
:where(body.p-home) .sec[id="services"],
:where(body.p-home) .sec[id="testimonials"],
:where(body.p-home) .sec[id="classes"] {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
:where(body.p-home) .role {
  display: block;
  margin-bottom: 10px;
  font:
    600 0.85rem "Barlow",
    sans-serif;
  color: var(--red-ink);
  letter-spacing: 0.04em;
  direction: ltr;
}
:where(body.p-home) .lf {
  position: relative;
  min-height: 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center 25%;
  display: flex;
  align-items: flex-end;
  transition: transform 0.4s var(--ease);
}
:where(body.p-home) .lf:hover {
  transform: translateY(-6px);
}
:where(body.p-home) .lf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.88),
    rgba(0, 0, 0, 0.15) 65%
  );
}
:where(body.p-home) .lf > div {
  position: relative;
  z-index: 1;
  padding: 20px;
  text-align: right;
  width: 100%;
}
:where(body.p-home) .lf b {
  display: block;
  font: 400 1.5rem var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  direction: ltr;
  text-align: right;
  color: #fff;
}
:where(body.p-home) .lf p {
  margin: 4px 0 0;
  color: #ddd;
  font-size: 0.95rem;
}

/* ===== extra (home) ===== */
:where(body.p-home) .ar-sec {
  background: #f6f6f6
    radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1.2px) 0 0/22px 22px;
  color: #0b0b0b;
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 48px);
  font-family: "Cairo", "Barlow", sans-serif;
}
:where(body.p-home) .ar-sec .wrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== contact (home) ===== */
:where(body.p-home) #contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      60% 80% at 100% 30%,
      rgba(229, 9, 20, 0.14),
      transparent 70%
    ),
    linear-gradient(135deg, #171b23 0, #0e1117 60%, #0a0c10 100%);
  color: #fff;
}
:where(body.p-home) #contact .ct-join {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  direction: ltr;
}
:where(body.p-home) #contact .ct-join > * {
  direction: rtl;
}
@media (min-width: 1000px) {
  :where(body.p-home) #contact .ct-join {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}
:where(body.p-home) #contact .cf {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 18px;
  padding: clamp(26px, 3.6vw, 44px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.04)
  );
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  color: #fff;
}
@media (min-width: 600px) {
  :where(body.p-home) #contact .cf {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  :where(body.p-home) #contact .cf {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1000px) and (min-width: 1280px) {
  :where(body.p-home) #contact .cf {
    grid-template-columns: 1fr 1fr;
  }
}
:where(body.p-home) #contact .cf-title {
  grid-column: 1/-1;
  margin: 0 0 6px;
  font:
    800 clamp(1.7rem, 3vw, 2.3rem)/1.2 "Cairo",
    sans-serif;
  color: #fff;
}
:where(body.p-home) #contact .cf label {
  display: grid;
  gap: 4px;
  font-weight: 600;
  font-size: 0.98rem;
  color: #f2f4f8;
}
:where(body.p-home) #contact .cf label:nth-of-type(1),
:where(body.p-home) #contact .cf .full,
:where(body.p-home) #contact .cf button,
:where(body.p-home) #contact .cf-title {
  grid-column: 1/-1;
}
:where(body.p-home) #contact .cf input,
:where(body.p-home) #contact .cf textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font:
    500 1.15rem "Cairo",
    sans-serif;
  outline: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  resize: vertical;
}
:where(body.p-home) #contact .cf input:hover,
:where(body.p-home) #contact .cf textarea:hover {
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
:where(body.p-home) #contact .cf input:focus,
:where(body.p-home) #contact .cf textarea:focus {
  border-bottom-color: #ff3b3b;
  box-shadow: 0 1px 0 #ff3b3b;
  outline: 0;
}
:where(body.p-home) #contact .cf input:focus-visible,
:where(body.p-home) #contact .cf textarea:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}
:where(body.p-home) #contact .cf .btn {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  margin-top: 10px;
  padding: 12px 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f01420, #c40812);
  color: #fff;
  font:
    800 1.2rem "Cairo",
    sans-serif;
  box-shadow:
    0 14px 34px rgba(229, 9, 20, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s;
}
:where(body.p-home) #contact .cf .btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ff2430, #d10a14);
  box-shadow:
    0 18px 40px rgba(229, 9, 20, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
:where(body.p-home) #contact .cf .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
:where(body.p-home) #contact .cf .btn .a {
  display: none;
}
:where(body.p-home) #contact .cf-sub {
  grid-column: 1/-1;
  margin: -6px 0 6px;
  color: #c3c9d4;
  font-size: 0.98rem;
  line-height: 1.8;
}
:where(body.p-home) #contact .cf .req {
  color: #ff4d57;
  font-weight: 800;
}
:where(body.p-home) #contact .cf .opt {
  color: #a9b0bd;
  font-weight: 500;
  font-size: 0.85rem;
}
:where(body.p-home) #contact .cf label.cf-full {
  grid-column: 1/-1;
}
:where(body.p-home) #contact .cf input::placeholder,
:where(body.p-home) #contact .cf textarea::placeholder {
  color: #7d8696;
  font-weight: 400;
  font-size: 1.02rem;
}
:where(body.p-home) #contact .cf select {
  width: 100%;
  padding: 10px 0 12px;
  padding-inline-end: 30px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font:
    500 1.1rem "Cairo",
    sans-serif;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: 0;
  transition: border-color 0.2s;
}
:where(body.p-home) #contact .cf select:invalid,
:where(body.p-home) #contact .cf select option[value=""] {
  color: #7d8696;
}
:where(body.p-home) #contact .cf select option {
  background: #10151f;
  color: #fff;
}
:where(body.p-home) #contact .cf select:hover {
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
:where(body.p-home) #contact .cf select:focus {
  border-bottom-color: #ff3b3b;
  box-shadow: 0 1px 0 #ff3b3b;
}
:where(body.p-home) #contact .cf select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}
:where(body.p-home) #contact .cf-note {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  color: #a9b0bd;
  font-size: 0.85rem;
  line-height: 1.7;
}
:where(body.p-home) #contact .cf-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
:where(body.p-home) #contact .cf-title {
  position: relative;
  padding-bottom: 12px;
}
:where(body.p-home) #contact .cf-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: #e50914;
}
:where(body.p-home) #contact .cf label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}
:where(body.p-home) #contact .cf label > input,
:where(body.p-home) #contact .cf label > textarea {
  flex: 1 0 100%;
  min-width: 0;
}
:where(body.p-home) #contact .cf-title {
  font-family: "Changa", "Cairo", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}
:where(body.p-home) #contact .cf-title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
}
:where(body.p-home) #contact {
  scroll-margin-top: 40px;
}
:where(body.p-home) #contact .ct-head {
  max-width: 780px;
  margin: 0 auto clamp(34px, 5vw, 60px);
  text-align: center;
  position: relative;
}
:where(body.p-home) #contact .ct-head .lbl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  direction: ltr;
  margin: 0;
  font:
    700 0.95rem/1 "Cairo",
    sans-serif;
  letter-spacing: 0;
  color: #ff4d48;
}
:where(body.p-home) #contact .ct-head .lbl::before {
  display: block;
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
}
:where(body.p-home) #contact .ct-head .ttl {
  margin: 14px 0 0;
  text-align: center;
  color: #fff;
  text-transform: none;
  font:
    800 clamp(2.2rem, 5vw, 3.8rem)/1.25 "Changa",
    "Cairo",
    sans-serif;
}
:where(body.p-home) #contact .ct-head .ttl em {
  font-style: normal;
  color: #ff3b3b;
}
:where(body.p-home) #contact .ct-head .ap {
  max-width: 660px;
  margin: 20px auto 0;
  text-align: center;
  color: #d3d8e1;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 2;
}
:where(body.p-home) #contact .cf-status {
  grid-column: 1/-1;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #b9f5cf;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.7;
}
:where(body.p-home) #contact .cf-status[hidden] {
  display: none;
}
:where(body.p-home) #contact .cf input:user-invalid {
  border-bottom-color: #ff6b6b;
}
:where(body.p-home) #contact .ct-side {
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: #0d0d0d;
  color: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Cairo", system-ui, sans-serif;
}
:where(body.p-home) #contact .ct-side svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:where(body.p-home) #contact .ct-side svg.fill {
  fill: currentColor;
  stroke: none;
}
:where(body.p-home) #contact .ct-photo {
  position: relative;
  margin: 0;
}
:where(body.p-home) #contact .ct-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: 72% 18%;
}
:where(body.p-home) #contact .ct-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(13, 13, 13, 0.96));
  pointer-events: none;
}
:where(body.p-home) #contact .ct-photo figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: 22px;
  bottom: 16px;
  display: grid;
  gap: 2px;
}
:where(body.p-home) #contact .ct-photo b {
  font:
    800 1.25rem/1.3 "Changa",
    "Cairo",
    sans-serif;
}
:where(body.p-home) #contact .ct-photo span {
  font-size: 0.82rem;
  color: #ff6b66;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: start;
}

/* ===== testimonials (home) ===== */
:where(body.p-home) #testimonials .ba-ttl {
  margin: clamp(36px, 5vw, 56px) 0 0;
  font:
    800 clamp(1.7rem, 3.2vw, 2.4rem)/1.3 "Cairo",
    sans-serif;
  color: #fff;
  text-transform: none;
}
:where(body.p-home) #testimonials .ba-ttl em {
  font-style: normal;
  color: var(--brand-red);
}
:where(body.p-home) #testimonials .ba-lead {
  max-width: 620px;
  margin: 12px auto 0;
  font-weight: 600;
}
:where(body.p-home) #testimonials .ba-grid {
  list-style: none;
  margin: 36px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1200px;
  justify-items: center;
  direction: rtl;
}
@media (min-width: 900px) {
  :where(body.p-home) #testimonials .ba-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
}
:where(body.p-home) #testimonials .ba-card {
  position: relative;
  direction: ltr;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3/4;
  border-radius: 26px;
  overflow: hidden;
  background: #111;
  color: #fff;
  text-align: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
:where(body.p-home) #testimonials .ba-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55);
}
:where(body.p-home) #testimonials .ba-halves {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
:where(body.p-home) #testimonials .ba-halves img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}
:where(body.p-home) #testimonials .ba-halves::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--brand-red);
  box-shadow: 0 0 14px rgba(230, 43, 39, 0.7);
}
:where(body.p-home) #testimonials .ba-tag {
  position: absolute;
  top: 16px;
  z-index: 2;
  background: rgba(10, 10, 10, 0.88);
  color: #fff;
  font:
    700 0.75rem/1 "Barlow",
    sans-serif;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: 99px;
}
:where(body.p-home) #testimonials .ba-tag.b {
  left: 16px;
}
:where(body.p-home) #testimonials .ba-tag.a {
  left: calc(50% + 16px);
  background: #dc2622; /* AA للنص الأبيض الصغير: كان var(--brand-red) #e62b27 (4.43:1) */
}
:where(body.p-home) #testimonials .ba-info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 96px 22px 22px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.96) 0,
    rgba(0, 0, 0, 0.78) 55%,
    transparent
  );
  direction: rtl;
}
:where(body.p-home) #testimonials .ba-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
:where(body.p-home) #testimonials .ba-kind {
  font:
    700 0.72rem "Barlow",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d0d0d0;
  direction: ltr;
}
:where(body.p-home) #testimonials .ba-meta {
  border: 1px solid #ff4d48;
  color: #ff6b66;
  background: rgba(230, 43, 39, 0.14);
  border-radius: 99px;
  padding: 6px 14px;
  font:
    700 0.8rem/1 "Cairo",
    sans-serif;
}
:where(body.p-home) #testimonials .ba-info h4 {
  margin: 12px 0 4px;
  font:
    800 1.5rem/1.3 "Cairo",
    sans-serif;
  color: #fff;
  text-align: start;
}
:where(body.p-home) #testimonials .ba-info p {
  margin: 0;
  color: #e0e0e0;
  font-size: 0.93rem;
  line-height: 1.7;
  text-align: start;
}
:where(body.p-home) #testimonials .ba-more {
  margin: 36px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  :where(body.p-home) #testimonials .ba-card {
    transition: none;
  }
}

/* ===== instagram (home) ===== */
:where(body.p-home) .car {
  margin-top: 40px;
}
:where(body.p-home) .car .rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  overflow: visible;
  scroll-snap-type: none;
}
@media (min-width: 700px) {
  :where(body.p-home) .car .rail {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
:where(body.p-home) .car .rail .tile {
  flex: none;
  width: 100%;
  min-width: 0;
  scroll-snap-align: none;
  border-radius: 14px;
}

/* ===== home: light surfaces (#ececec) for former black sections ===== */
body.p-home {
  --surface: #ececec;
  --hl: rgba(0, 0, 0, 0.1);
}

/* backgrounds */
body.p-home .stats,
body.p-home .sec.dark,
body.p-home .sec.dark.bg-dark-2,
body.p-home .sec.black,
body.p-home #contact {
  background: var(--surface) !important;
  color: var(--on-light);
}
body.p-home .stats,
body.p-home .sec.dark,
body.p-home .sec.black,
body.p-home #contact {
  border-top: 1px solid var(--hl);
  border-bottom: 0;
}
body.p-home .stats {
  border-top: 0;
  border-bottom: 1px solid var(--hl);
}

/* text */
body.p-home .sec.dark .lbl,
body.p-home .sec.black .lbl,
body.p-home #contact .ct-head .lbl {
  color: var(--red-ink);
}
body.p-home .sec.dark .ap,
body.p-home .sec.dark .why p,
body.p-home .sec.dark .card.d p,
body.p-home .st span,
body.p-home .q p {
  color: var(--on-light-body);
}
body.p-home .sec.dark .ap[style*="font-weight:700"] {
  color: var(--on-light);
}
body.p-home .ttl.ig,
body.p-home .card.d .pn {
  color: var(--red-ink);
}
body.p-home .pillars h3,
body.p-home .gx .card.d h3,
body.p-home .card.d h3,
body.p-home .q summary,
body.p-home .q summary:hover,
body.p-home #testimonials .ba-ttl {
  color: var(--on-light);
}
body.p-home #testimonials .ba-ttl em {
  color: var(--brand-red);
}

/* stats */
body.p-home .st + .st {
  border-inline-start-color: var(--hl);
}

/* cards, chips, faq, story, classes */
body.p-home .card.d {
  background: #fff;
  border: 1px solid var(--line-l);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
}
body.p-home .card.d:hover {
  border-color: rgba(230, 43, 39, 0.6);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}
body.p-home .chips li {
  border-color: rgba(0, 0, 0, 0.2);
  color: #333;
}
body.p-home .q {
  background: #fff;
  border-color: var(--line-l);
}
body.p-home .q[open] {
  border-color: rgba(230, 43, 39, 0.55);
}
body.p-home .sec[id="services"],
body.p-home .sec[id="testimonials"],
body.p-home .sec[id="classes"] {
  border-top: 1px solid var(--hl);
}

/* photo cards keep their dark overlay, softer shadows on light */
body.p-home #testimonials .ba-card {
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
body.p-home #testimonials .ba-card:hover {
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.26);
}

/* contact */
body.p-home #contact .ct-head .ttl,
body.p-home #contact .cf-title {
  color: var(--on-light);
}
body.p-home #contact .ct-head .ap,
body.p-home #contact .cf-sub {
  color: var(--on-light-body);
}
body.p-home #contact .ct-side {
  background: #fff;
  color: var(--on-light);
  border: 1px solid var(--line-l);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}
body.p-home #contact .ct-photo::after {
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.82));
}
body.p-home #contact .ct-photo b {
  color: #fff;
}
body.p-home #contact .cf-note,
body.p-home #contact .cf .opt {
  color: #666;
}
body.p-home #contact .cf .req {
  color: var(--red-ink);
}
body.p-home #contact .cf {
  background: #fff;
  border: 1px solid var(--line-l);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--on-light);
}
body.p-home #contact .cf label {
  color: #222;
}
body.p-home #contact .cf input,
body.p-home #contact .cf textarea,
body.p-home #contact .cf select {
  color: var(--on-light);
  border-bottom-color: rgba(0, 0, 0, 0.28);
}
body.p-home #contact .cf input:hover,
body.p-home #contact .cf textarea:hover,
body.p-home #contact .cf select:hover {
  border-bottom-color: rgba(0, 0, 0, 0.55);
}
body.p-home #contact .cf input:focus,
body.p-home #contact .cf textarea:focus,
body.p-home #contact .cf select:focus {
  border-bottom-color: var(--brand-red);
  box-shadow: 0 1px 0 var(--brand-red);
}
body.p-home #contact .cf input:focus-visible,
body.p-home #contact .cf textarea:focus-visible,
body.p-home #contact .cf select:focus-visible {
  outline-color: rgba(0, 0, 0, 0.6);
}
body.p-home #contact .cf input::placeholder,
body.p-home #contact .cf textarea::placeholder,
body.p-home #contact .cf select:invalid {
  color: #8a8a8a;
}
body.p-home #contact .cf select option {
  background: #fff;
  color: #111;
}
body.p-home #contact .cf-status {
  color: #0b6b36;
}

/* ===== home: programs section ===== */
body.p-home #programs .progs {
  gap: 28px;
  margin-top: 48px;
}
body.p-home #programs .prog {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  padding: 14px 14px 20px;
  overflow: hidden;
}
body.p-home #programs .prog .thumb {
  position: relative;
  overflow: hidden;
  flex: none;
}
body.p-home #programs .prog .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent 55%);
}
body.p-home #programs .pg-no {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--brand-red);
  color: #fff;
  font: 400 0.95rem/1 var(--display);
  letter-spacing: 0.06em;
}
body.p-home #programs .pg-kind {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  inset-inline-start: 14px;
  color: #fff;
  font: 700 0.72rem/1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  direction: ltr;
}
body.p-home #programs .prog h3 {
  margin: 18px 6px 0;
  font-size: 1.3rem;
  color: var(--on-light);
}
body.p-home #programs .prog .pg-desc {
  margin: 8px 6px 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--on-light-body);
}
body.p-home #programs .pg-info {
  margin: 16px 6px 0;
  padding: 0;
  
}
body.p-home #programs .pg-info div {
  padding: 12px 0;
  border-top: 1px solid var(--hl);
   direction: rtl;
}
body.p-home #programs .pg-info dt {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--red-ink);
}
body.p-home #programs .pg-info dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--on-light-body);
}
body.p-home #programs .prog .chips {
  margin: 0 6px;
  justify-content: flex-start;
}
body.p-home #programs .pg-link {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: white;
    width: 200px;
    height: 38px;
    padding-right: 12px;
    gap: 8px;
    margin: auto 6px 0px;
    background: red;
    border-radius: inherit;

  margin-right: auto;
  margin-left: auto;

}
body.p-home #programs .pg-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.p-home #programs .pg-link:hover {
  gap: 12px;
}

/* ===== home: icon set (filled 512-grid icons, colour via currentColor) ===== */
.ic {
  color: var(--brand-red);
}
body.p-home .gx .card .ic {
  width: 92px;
  height: 92px;
  padding: 14px;
  border-radius: 22px;
}
body.p-home #coaching .card .ic {
  width: 92px;
  height: 92px;
  padding: 14px;
  border-radius: 22px;
}
body.p-home .why li .ic {
  width: 78px;
  height: 78px;
  padding: 12px;
  border-color: var(--hl);
  background: #fff;
}
body.p-home .why li {
  border-top-color: var(--hl);
}
body.p-home .why li:last-child {
  border-bottom-color: var(--hl);
}
body.p-home #steps .sico svg,
body.p-home .steps.six .sico svg {
  width: 68px;
  height: 68px;
  color: #1f2a5a;
}
body.p-home #steps .step:hover .sico svg {
  color: #fff;
}

/* ===== Ahmed's journey: 8 stages, big faint numbers (4 x 2 grid) ===== */

/* remove the red top bar on story cards */

/* =====================================================================
   MFT methodology (#method): photo cards, label at the bottom
   Photo order: local assets/images/method/1..4.jpg first, hotlinked
   fallback second, dark gradient last (same convention as .progs).
   ===================================================================== */
body.p-home #method .pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  body.p-home #method .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  body.p-home #method .pillars {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
body.p-home #method .pillars > li {
  --shade: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    rgba(0, 0, 0, 0.1) 70%
  );
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 440px;
  padding: 22px 18px 24px;
  border: 0;
  border-radius: 6px;
  background:
    var(--shade),
    var(--photo-local) center/cover no-repeat,
    var(--photo-web) center/cover no-repeat,
    /* var(--photo-brand) var(--photo-pos, center) / cover no-repeat, */
    linear-gradient(160deg, #2a2a2a, #0a0a0a);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
  text-align: center;
  isolation: isolate;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}
body.p-home #method .pillars > li:nth-child(1) {
  --photo-local: none;
  --photo-pos: center 20%;
  --photo-web: url("https://images.unsplash.com/photo-1519311965067-36d3e5f33d39?auto=format&fit=crop&w=900&q=80");
}
body.p-home #method .pillars > li:nth-child(2) {
  --photo-local: none;
  --photo-pos: center 30%;
  --photo-web: url("https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=900&q=80");
}
body.p-home #method .pillars > li:nth-child(3) {
  --photo-local: none;
  --photo-pos: 70% center;
  --photo-web: url("https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?auto=format&fit=crop&w=900&q=80");
}
body.p-home #method .pillars > li:nth-child(4) {
  --photo-local: none;
  --photo-pos: center 25%;
  --photo-web: url("https://images.unsplash.com/photo-1634492859027-11de47469325?auto=format&fit=crop&w=900&q=80");
}
body.p-home #method .pillars > li:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(230, 43, 39, 0.3);
}
body.p-home #method .pn {
  display: block;
  margin: 0 0 8px;
  color: #ff6a66;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
body.p-home #method .pillars h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
body.p-home #method .pillars p {
  margin: 0;
  color: #e4e4e4;
  font-size: 0.95rem;
  line-height: 1.8;
}
body.p-home #method .pillars .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
body.p-home #method .pillars .chips li {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.5;
  backdrop-filter: blur(4px);
}
/* devices with hover: chips slide in when the card is hovered / focused */
@media (hover: hover) {
  body.p-home #method .pillars > li {
    min-height: 460px;
  }
  body.p-home #method .pillars .chips {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.5s,
      margin-top 0.5s,
      opacity 0.4s;
  }
  body.p-home #method .pillars > li:hover .chips,
  body.p-home #method .pillars > li:focus-within .chips {
    max-height: 260px;
    margin-top: 14px;
    opacity: 1;
  }
  body.p-home #method .pillars > li:hover {
    --shade: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.8) 60%,
      rgba(0, 0, 0, 0.35) 100%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  body.p-home #method .pillars > li,
  body.p-home #method .pillars .chips {
    transition: none;
  }
  body.p-home #method .pillars > li:hover {
    transform: none;
  }
}

/* =====================================================================
   Online Coaching (#coaching): staggered photo cards
   Photo order per card: local assets/images/coaching/1..6.jpg, then the
   hotlinked photo, then a project image, then a dark gradient.
   ===================================================================== */
.oc {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 110px) 0;
  color: #111;
  background: #ececec;
}
.oc .wrap {
  position: relative;
  padding-inline: clamp(16px, 4vw, 40px);
}
.oc-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.oc .ttl {
  color: #111;
}
.oc .ttl em {
  color: var(--brand-red);
}
.oc-head .ap {
  margin: 18px auto 0;
  color: #444;
  line-height: 2;
}
.oc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
@media (min-width: 700px) {
  .oc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .oc-card:nth-child(even) {
    margin-top: 34px;
  }
}
@media (min-width: 1040px) {
  .oc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  /* staircase, like the reference */
  .oc-card:nth-child(3n + 1) {
    margin-top: 0;
  }
  .oc-card:nth-child(3n + 2) {
    margin-top: 26px;
  }
  .oc-card:nth-child(3n) {
    margin-top: 52px;
  }
}
.oc-card {
  --shade: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.6) 42%,
    rgba(0, 0, 0, 0.12) 78%
  );
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  padding: 78px 20px 22px;
  border: 0;
  border-radius: 4px;
  background:
    var(--shade),
    var(--photo-local) center / cover no-repeat,
    var(--photo-web) center / cover no-repeat,
    var(--photo-brand) var(--photo-pos, center) / cover no-repeat,
    linear-gradient(160deg, #2a2a2a, #0a0a0a);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  text-align: right;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}
.oc-card:nth-child(1) {
  --photo-local: url(../assets/images/coaching/1.jpg);
  --photo-web: url("https://images.unsplash.com/photo-1587996597484-04743eeb56b4?auto=format&fit=crop&w=900&q=80");
  --photo-brand: none;
  --photo-pos: center 20%;
}
.oc-card:nth-child(2) {
  --photo-local: url(../assets/images/coaching/trrr.avif);
  --photo-web: url("https://images.unsplash.com/photo-1605296867724-fa87a8ef53fd?auto=format&fit=crop&w=900&q=80");
  --photo-brand: none;
  --photo-pos: center 30%;
}
.oc-card:nth-child(3) {
  --photo-local: url(../assets/images/coaching/3.jpg);
  --photo-web: url("https://images.unsplash.com/photo-1604480133435-25b86862d276?auto=format&fit=crop&w=900&q=80");
  --photo-brand: url(../assets/images/hero-bg.jpg);
  --photo-pos: 70% center;
}
.oc-card:nth-child(4) {
  --photo-local: url(../assets/images/coaching/4.jpg);
  --photo-web: url("https://images.unsplash.com/photo-1554344728-77cf90d9ed26?auto=format&fit=crop&w=900&q=80");
  --photo-brand: url(../assets/images/why.jpg);
  --photo-pos: center 25%;
}
.oc-card:nth-child(5) {
  --photo-local: url(../assets/images/coaching/5.jpg);
  --photo-web: url("https://images.unsplash.com/photo-1758922769578-68c5ba000d87?auto=format&fit=crop&w=900&q=80");
  --photo-brand: none;
  --photo-pos: center 20%;
}
.oc-card:nth-child(6) {
  --photo-local: url(../assets/images/coaching/6.jpg);
  --photo-web: url("https://images.unsplash.com/photo-1611672585731-fa10603fb9e0?auto=format&fit=crop&w=900&q=80");
  --photo-brand: url(../assets/images/hero-bg.jpg);
  --photo-pos: 30% center;
}
.oc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(230, 43, 39, 0.28);
}
/* icon + number sit in the top corners */
.oc-top {
  position: absolute;
  inset: 16px 18px auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.oc-n {
  font: 400 2.2rem/1 var(--display);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}
.oc-en {
  margin: 0 0 6px;
  color: #ff6a66;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  direction: ltr;
  text-align: right;
}
.oc-card h3 {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* small red arrow under the label */
.oc-desc {
  margin: 12px 0 0;
  color: #e6e6e6;
  font-size: 0.93rem;
  line-height: 1.85;
}
.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.oc-chips li {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.5;
  backdrop-filter: blur(4px);
}
/* desktop: description + chips reveal on hover / keyboard focus */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .oc-desc,
  .oc-chips {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.55s,
      margin-top 0.45s,
      opacity 0.4s;
  }
  .oc-card:hover .oc-desc,
  .oc-card:focus-within .oc-desc {
    max-height: 140px;
    margin-top: 12px;
    opacity: 1;
  }
  .oc-card:hover .oc-chips,
  .oc-card:focus-within .oc-chips {
    max-height: 220px;
    margin-top: 14px;
    opacity: 1;
  }
  .oc-card:hover {
    --shade: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.96) 0%,
      rgba(0, 0, 0, 0.82) 62%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }
}
.oc-btn {
  margin-top: 56px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .oc-card,
  .oc-desc,
  .oc-chips {
    transition: none;
  }
  .oc-card:hover {
    transform: none;
  }
}


/* =====================================================================
   Refined CTA pill ("Book a consultation") + social chips
   ===================================================================== */
.pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 14px;
  padding: 7px 23px 7px 17px;
  border: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.09em;
  background: linear-gradient(135deg, #ff3a30 0%, #e01414 55%, #b30d0d 100%);
  box-shadow:
    0 8px 24px rgba(239, 27, 27, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s,
    filter 0.35s;
    height: 50px;

        direction: rtl;
    font-size: 16px;
}
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.pill:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background: linear-gradient(135deg, #ff4a40 0%, #e81818 55%, #bb0e0e 100%);
  box-shadow:
    0 14px 34px rgba(239, 27, 27, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pill:hover::before {
  transform: translateX(120%);
}
.pill:active {
  transform: translateY(0) scale(0.98);
}
.pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.pill .dot {
  width: 40px;
  height: 40px;
  background: #fff;
  color: var(--red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.pill:hover .dot {
  background: #fff;
  color: #b30d0d;
  transform: rotate(45deg);
}

/* Socials: outlined circle icon + label, thin dividers */
.socials {
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.soc {
  position: relative;
  gap: 12px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #dbe6ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  transition:
    color 0.3s,
    transform 0.3s var(--ease);
}
.soc:first-child {
  padding-left: 0;
}
.soc + .soc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 28px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.28);
}
.soc .si {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s var(--ease);
}
.soc .c {
  display: none;
}
.soc:hover {
  transform: none;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}
.soc:hover .si {
  border-color: var(--red);
  background: var(--red);
  transform: translateY(-3px);
}
.soc:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
@media (max-width: 640px) {
  .pill {
    padding: 5px 5px 5px 16px;
    gap: 10px;
    font-size: 12px;
  }
  .pill .dot {
    width: 34px;
    height: 34px;
  }
  .soc {
    padding: 0 14px;
    font-size: 11px;
    gap: 8px;
  }
  .soc .si {
    width: 17px;
    height: 17px;
    padding: 9px;
  }
}
@media (max-width: 480px) {
  .soc-t {
    display: none;
  }
  .soc {
    padding: 0 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pill,
  .pill::before,
  .soc,
  .soc .si,
  .pill .dot {
    transition: none;
  }
}

/* ===== Results section (matches reference design) ===== */
.rs {
  --rs-accent: var(--red);
  --rs-card: rgba(255, 255, 255, 0.045);
  background: radial-gradient(120% 90% at 70% 0%, #1f2a30 0%, #151a1f 55%, #111519 100%);
  padding: clamp(56px, 7vw, 96px) var(--px);
  color: #fff;
}
.rs-wrap { max-width: 1100px; margin: 0 auto; }
.rs-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.rs-copy h2 {
  font-family: "Cairo", var(--body);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.25;
  margin: 0 0 18px;
  color: #fff;
  text-align: right;
}
.rs-hl {
  display: inline-block;
  color: var(--rs-accent);
  background: linear-gradient(transparent 88%, rgba(239, 27, 27, 0.55) 88%);
}
.rs-copy p {
  font-family: "Cairo", var(--body);
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  max-width: 46ch;
  text-align: right;
}
.rs-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  background: #0d1012;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.rs-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 0.5s ease;
}
.rs-media:hover img { transform: scale(1.04); }
.rs-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55));
}
.rs-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.rs-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px 22px;
  background: var(--rs-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}
.rs-num {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f1317;
  color: var(--rs-accent);
  font: 700 14px/34px "Cairo", var(--body);
  text-align: center;
}
.rs-card h3 {
  font-family: "Cairo", var(--body);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
  color: #fff;
}
.rs-card p {
  font-family: "Cairo", var(--body);
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
@media (max-width: 900px) {
  .rs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .rs-top { grid-template-columns: 1fr; }
  .rs-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-media img { transition: none; }
}

/* ===== Compare section ===== */
.cp {
  --cp-accent: var(--red);
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) var(--px);
  background: #101417;
  color: #fff;
}
.cp::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(239, 27, 27, 0.12), transparent);
  pointer-events: none;
}
.cp-wrap { position: relative; max-width: 1040px; margin: 0 auto; }
.cp-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.cp-head h2 {
  margin: 0;
  font: 800 clamp(32px, 4.6vw, 54px) / 1.25 "Cairo", var(--body);
  color: #fff;
}
.cp-hl {
  color: var(--cp-accent);
  background: linear-gradient(transparent 88%, rgba(239, 27, 27, 0.55) 88%);
}
.cp-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 22px 1.15fr;
  gap: 0;
  align-items: stretch;
}
.cp-card {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
}
.cp-card h3 {
  margin: 0 0 22px;
  font: 800 22px/1.3 "Cairo", var(--body);
}
.cp-card ul { list-style: none; margin: 0; padding: 0; }
.cp-card li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font: 600 15.5px/1.6 "Cairo", var(--body);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.cp-card li:first-child { border-top: 0; }
.cp-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.cp-ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp-old {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.cp-old h3 { color: rgba(255, 255, 255, 0.6); }
.cp-old li { color: rgba(255, 255, 255, 0.5); }
.cp-old .cp-ic { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.45); }
.cp-new {
  background: linear-gradient(160deg, #2b1316 0%, #1d1416 45%, #15161a 100%);
  border: 1.5px solid var(--cp-accent);
  box-shadow: 0 0 0 6px rgba(239, 27, 27, 0.07), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.cp-new h3 { color: var(--cp-accent); font-size: 26px; }
.cp-new li { color: #fff; border-color: rgba(239, 27, 27, 0.14); }
.cp-new .cp-ic { background: var(--cp-accent); color: #fff; }
.cp-vs {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #101417;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font: 800 13px/1 "Barlow Condensed", var(--body);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 760px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-vs { display: none; }
}

/* Online Coaching: Arabic reading order (card 01 starts on the right) */
.oc-grid {
  direction: rtl;
}
.oc-card {
  direction: ltr;
}

/* Online Coaching heading: keep the English title on one line */
.oc-head {
  max-width: 880px;
}
.oc-head .ttl {
  font-size: clamp(30px, 4.4vw, 52px);
}
.oc-head .ttl em {
  white-space: nowrap;
}

/* Results: extended copy */
.rs-copy h3 {
  font-family: "Cairo", var(--body);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.25;
  margin: 0 0 18px;
  color: #fff;
  text-align: right;
}
.rs-copy p {
  max-width: 52ch;
  margin: 0 0 12px;
}
.rs-copy .rs-lead {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.rs-sub {
  margin: 0 0 20px;
  font: 800 clamp(20px, 2.4vw, 26px) / 1.4 "Cairo", var(--body);
  color: #fff;
  text-align: right;
}
.rs-card h4 {
  font-family: "Cairo", var(--body);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 8px;
  color: #fff;
}
.rs-note {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 18px 24px;
  border-radius: 14px;
  border-right: 4px solid var(--rs-accent);
  background: rgba(255, 255, 255, 0.045);
  font: 700 16px/1.9 "Cairo", var(--body);
  color: #fff;
}

/* ===== White backgrounds: Compare + Results sections ===== */
.cp,
.rs {
  background: #fff;
  color: #14181c;
}
.cp::before { display: none; }

/* Compare */
.cp-head h2 { color: #14181c; }
.cp-old {
  background: #f4f5f6;
  border: 1px solid #e3e5e8;
}
.cp-old h3 { color: #687076; }
.cp-old li { color: #687076; border-color: #e3e5e8; }
.cp-old .cp-ic { background: #e6e8eb; color: #8a9097; }
.cp-new {
  background: #fff;
  border: 1.5px solid var(--cp-accent);
  box-shadow: 0 0 0 6px rgba(239, 27, 27, 0.06), 0 18px 44px rgba(20, 24, 28, 0.10);
}
.cp-new li { color: #14181c; border-color: rgba(239, 27, 27, 0.16); }
.cp-vs {
  background: #fff;
  border: 1px solid #d5d8dc;
  color: #4b5258;
}

/* Results */
.rs { --rs-card: #f6f7f8; }
.rs-copy h2,
.rs-copy h3,
.rs-sub,
.rs-card h3,
.rs-card h4,
.rs-copy .rs-lead { color: #14181c; }
.rs-copy p { color: #4b5258; }
.rs-card {
  background: var(--rs-card);
  border: 1px solid #e6e8eb;
}
.rs-card p { color: #5b6268; }
.rs-num { background: #fff; border: 1px solid #e6e8eb; }
.rs-note {
  background: #f6f7f8;
  color: #14181c;
}
.rs-media { box-shadow: 0 18px 50px rgba(20, 24, 28, 0.18); }

/* Compare: intro paragraph inside the MFT card */
.cp-note {
  margin: 0 0 18px;
  font: 500 15px/1.9 "Cairo", var(--body);
  color: #4b5258;
}

/* Compare: title + description items in the MFT card */
.cp-tx { display: flex; flex-direction: column; gap: 2px; }
.cp-tx b { font: 800 16.5px/1.5 "Cairo", var(--body); color: #14181c; }
.cp-tx small { font: 500 14px/1.7 "Cairo", var(--body); color: #5b6268; }

/* ===== Section headings: key phrase on its own line + balanced message ===== */
.ttl-k {
  display: block;
  margin-bottom: 10px;
  font-size: 0.6em;
  font-weight: 700;
  line-height: 1.4;
  opacity: 0.7;
}
.sec .ttl[lang="ar"],
.cp-head h2,
#articles .af-wrap h2 {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.sec .ttl[lang="ar"] { max-width: 24ch; line-height: 1.35; }
.sec .ttl[lang="ar"] em { display: inline; }
.cp-head h2 {
  max-width: 24ch;
  line-height: 1.35;
}
#articles .af-wrap h2 {
  max-width: 24ch;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.35;
  letter-spacing: 0;
}

/* ===== Section headings: single line (wraps only on narrow screens) ===== */
.ttl-k {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  opacity: 1;
}
.sec .ttl[lang="ar"],
.cp-head h2,
#articles .af-wrap h2 {
  max-width: 100%;
  font-size: clamp(1.45rem, 2.7vw, 2.3rem);
  line-height: 1.5;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .sec .ttl[lang="ar"],
  .cp-head h2,
  #articles .af-wrap h2 {
    white-space: nowrap;
  }
}

/* Articles filter: empty state */
.af-empty {
  margin: 8px 0 0;
  text-align: center;
  font: 600 1.05rem/1.8 "Cairo", sans-serif;
  color: #555;
}
.af-empty[hidden] { display: none; }

/* ===== Unified site footer (.ft) on inner pages too ===== */
body.pg .ft .ap { color: var(--on-dark-body); margin: 0 0 16px; text-align: right; }
body.pg .ft .slog {
  margin: 10px 0 0;
  font: 700 0.72rem var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ddd;
}
body.pg .ft .fbar { color: var(--on-dark-body); }
body.pg .ft ul, body.pg .ft li { list-style: none; }
.flogo {  width: 80px; height: 80px;  border-radius: 50%; }


/* ===== Contact side card: simple layout ===== */
body.p-home #contact .ct-side {
  display: grid;
  gap: 20px;
  padding: var(--ct-pad, clamp(22px, 3vw, 32px));
  border-radius: 20px;
  background: #fff;
  color: var(--on-light);
  border: 1px solid var(--line-l);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  overflow: visible;
}
body.p-home #contact .ct-side svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.p-home #contact .ct-side svg.fill { fill: currentColor; stroke: none; }

/* photo: full-bleed at the top of the card, as before */
body.p-home #contact .ct-side { --ct-pad: clamp(22px, 3vw, 32px); }
body.p-home #contact .ct-side .ct-photo {
  margin: calc(-1 * var(--ct-pad)) calc(-1 * var(--ct-pad)) 0;
  border-radius: 19px 19px 0 0;
  overflow: hidden;
}

/* main call to action */
body.p-home #contact .ct-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #0f8043; /* AA: كان #128c4a (4.3:1) */
  color: #fff;
  font: 700 1rem/1.4 "Cairo", sans-serif;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
body.p-home #contact .ct-cta:hover { background: #0b6d38; transform: translateY(-1px); }
body.p-home #contact .ct-cta:focus-visible { outline: 3px solid var(--on-light); outline-offset: 3px; }
body.p-home #contact .ct-cta svg { width: 24px; height: 24px; flex: none; }
body.p-home #contact .ct-cta span { flex: 1; }
body.p-home #contact .ct-cta em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0.92;
  white-space: nowrap;
}

/* other channels: plain divided rows */
body.p-home #contact .ct-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
body.p-home #contact .ct-links li + li { border-top: 1px solid var(--hl); }
body.p-home #contact .ct-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  color: var(--on-light);
  text-decoration: none;
  font: 600 0.98rem/1.5 "Cairo", sans-serif;
  transition: color 0.2s;
}
body.p-home #contact .ct-links a:hover { color: var(--red-ink); }
body.p-home #contact .ct-links a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; border-radius: 6px; }
body.p-home #contact .ct-links svg { width: 20px; height: 20px; flex: none; color: var(--red-ink); }
body.p-home #contact .ct-links span { flex: 1; }
body.p-home #contact .ct-links em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.88rem;
  color: #666;
}

/* what happens next */

@media (max-width: 480px) {
  body.p-home #contact .ct-links em { display: none; }
  body.p-home #contact .ct-cta em { display: none; }
}

/* ===== Doctor page: long-form sections ===== */
body.pg .dh-doc {
  max-width: 860px;
  margin: 8px auto 0;
  padding-inline: var(--pad);
}
body.pg .dh-s {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 30px 0;
  border-top: 1px solid var(--bd2);
}
body.pg .dh-s h2 {
  margin: 0 0 10px;
  font: 800 clamp(1.25rem, 2.4vw, 1.6rem)/1.4 "Cairo", sans-serif;
  color: #fff;
  text-align: start;
}
body.pg .dh-s p {
  margin: 0 0 14px;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 2;
  color: #cfcfd4;
}
body.pg .dh-s p:last-child { margin-bottom: 0; }
body.pg .dh-s strong { color: #fff; font-weight: 800; }
body.pg .dh-s:last-child {
  border-bottom: 1px solid var(--bd2);
}
@media (max-width: 560px) {
  body.pg .dh-s { gap: 14px; padding: 24px 0; }
}

/* ===== About page: "من نحن" section (light, photo + numbered list) ===== */
body.pg .ab-mft {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 110px) var(--pad);
  background: #fff;
  color: #14181c;
  border-bottom: 1px solid #ececec;
}
body.pg .ab-mft::before,
body.pg .ab-mft::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: #eceef0;
  border-radius: 12px;
}
/* faint dumbbell, top-left */
body.pg .ab-mft::before {
  top: 40px;
  left: 4%;
  width: 120px;
  height: 18px;
  box-shadow: -18px 0 0 -2px #eceef0, 18px 0 0 -2px #eceef0;
  transform: rotate(-30deg);
  opacity: 0.9;
}
body.pg .ab-mft::after { display: none; }
body.pg .ab-mft .ab-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  direction: ltr;
}
body.pg .ab-mft .ab-wrap > * { direction: rtl; }

/* photo with white frame, red bars and soft shadow */
body.pg .abm-photo {
  position: relative;
  margin: 0;
  padding: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  transform: perspective(900px) rotateY(6deg);
  max-width: 420px;
  justify-self: center;
}
body.pg .abm-photo::before,
body.pg .abm-photo::after {
  content: "";
  position: absolute;
  width: 6px;
  background: var(--rd);
}
body.pg .abm-photo::before { left: -22px; top: 0; height: 64%; }
body.pg .abm-photo::after { right: -22px; bottom: 0; height: 28%; }
body.pg .abm-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
}

/* text column */
body.pg .abm-lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--rd);
  font: 700 0.9rem "Cairo", sans-serif;
}
body.pg .abm-lbl::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--rd);
}
body.pg .abm-h {
  margin: 0 0 18px;
  font: 800 clamp(1.8rem, 3.6vw, 2.7rem)/1.35 "Cairo", sans-serif;
  color: #14181c;
  text-align: start;
}
body.pg .abm-h .r { color: var(--rd); }
body.pg .abm-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 22px;
  position: relative;
}
body.pg .abm-list li {
  position: relative;
  padding-inline-start: 34px;
}
body.pg .abm-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--rd);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
body.pg .abm-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 26px;
  bottom: -20px;
  width: 2px;
  background: #e3e5e8;
}
body.pg .abm-list b {
  display: block;
  font: 800 1.08rem/1.6 "Cairo", sans-serif;
  color: #14181c;
}
body.pg .abm-list p {
  margin: 2px 0 0;
  font: 400 0.95rem/1.85 "Cairo", sans-serif;
  color: #5b6268;
}
@media (max-width: 900px) {
  body.pg .ab-mft .ab-wrap { grid-template-columns: 1fr; }
  body.pg .abm-photo { max-width: 340px; transform: none; }
  body.pg .abm-photo::before { left: -14px; }
  body.pg .abm-photo::after { right: -14px; }
}

/* ===== About + Doctor: light backgrounds like the home page ===== */
body.p-about,
body.p-doctor {
  background: #fff;
  color: #14181c;
}
body.p-doctor main.dh {
  --bd2: rgba(0, 0, 0, 0.09);
  --panel: #fff;
  color: #14181c;
}

/* About: "ما نؤمن به" (light gray) and programs (white) */

/* Doctor: white reading area under the dark banner */
body.p-doctor .dh { background: #fff; }
body.p-doctor .dh-av {
  border-color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
body.p-doctor .dh h1,
body.p-doctor .dh .role { color: #14181c; }
body.p-doctor .dh-bio p { color: #3a4046; }
body.p-doctor .dh-s h2,
body.p-doctor .dh-s strong { color: #14181c; }
body.p-doctor .dh-s p { color: #4b5258; }
body.p-doctor .dh-s { border-top-color: #e6e8eb; }
body.p-doctor .dh-s:last-child { border-bottom-color: #e6e8eb; }

/* Keep the dark blocks (header, hero/banner, CTA, footer) with light text */
body.p-about > header,
body.p-doctor > header,
body.p-doctor .dh-banner,
body.p-about .ft,
body.p-doctor .ft {
  color: #fff;
}

/* Doctor: tagline box on the light background */
body.p-doctor .dh-bio .q {
  background: #fff4f4;
  border: 1px solid #f3cccc;
  color: var(--rd);
  padding: 10px 22px;
}

/* ===== Calculator: light background like the home page ===== */
body.p-calc {
  background: #fff;
  color: #14181c;
}
body.p-calc main.cl { background: #fff; }
body.p-calc .mft-calorie-calculator {
  --c-text: #14181c;
  --c-mute: #5b6268;
  --c-panel: #fff;
  --c-panel2: #f6f7f8;
  --c-line: rgba(0, 0, 0, 0.1);
  --c-line2: rgba(0, 0, 0, 0.18);
  --glass: #fff;
  --field: #f6f7f8;
  --field-line: rgba(0, 0, 0, 0.16);
  --c-err: #d93636;
}

/* Calculator: text, fields and cards that were hard-coded for dark */
body.p-calc .cl label,
body.p-calc .cl .fld,
body.p-calc .mft-calorie-calculator .mft-choice-option,
body.p-calc .mft-calorie-calculator .mft-choice-option + span,
body.p-calc .mft-calorie-calculator .mft-activity-option,
body.p-calc .mft-calorie-calculator .mft-method-note strong,
body.p-calc .mft-calorie-calculator .mft-guide-card h4,
body.p-calc .mft-calorie-calculator .mft-disclaimer h3 {
  color: #14181c;
}
body.p-calc .mft-calorie-calculator .mft-ico { color: #6b7279; }
body.p-calc .cl input[type="number"],
body.p-calc .cl select,
body.p-calc .mft-calorie-calculator .mft-select-wrap select {
  background: #f6f7f8;
  color: #14181c;
  border-color: rgba(0, 0, 0, 0.16);
}
body.p-calc .mft-calorie-calculator .mft-select-wrap select option {
  background: #fff;
  color: #14181c;
}
body.p-calc .mft-calorie-calculator .mft-result-label,
body.p-calc .mft-calorie-calculator .mft-macro-share,
body.p-calc .mft-calorie-calculator .mft-smart-guidance p,
body.p-calc .mft-calorie-calculator .mft-smart-guidance li,
body.p-calc .mft-calorie-calculator .mft-cta p {
  color: #4b5258;
}
body.p-calc .mft-calorie-calculator .mft-main-result {
  background:
    radial-gradient(70% 90% at 50% 0, rgba(229, 9, 20, 0.1), transparent 70%),
    #fff;
}
body.p-calc .mft-calorie-calculator .mft-main-result-value output { color: #14181c; }
body.p-calc .mft-calorie-calculator .mft-cta {
  background:
    radial-gradient(80% 120% at 50% 100%, rgba(229, 9, 20, 0.1), transparent 70%),
    #fff;
}
body.p-calc .mft-calorie-calculator .mft-cta h3,
body.p-calc .mft-calorie-calculator .mft-cta h2 { color: #14181c; }
body.p-calc .mft-calorie-calculator .mft-disclaimer {
  background: #f6f7f8;
  color: #4b5258;
}
body.p-calc .mft-calorie-calculator .mft-secondary-button {
  color: #14181c;
  border-color: rgba(0, 0, 0, 0.25);
}
body.p-calc .mft-calorie-calculator .mft-secondary-button:hover { border-color: #14181c; }

body.p-calc .mft-calorie-calculator .mft-calculator-intro,
body.p-calc .mft-calorie-calculator .mft-input-unit { color: #5b6268; }
body.p-calc .mft-calorie-calculator legend { color: #14181c; }

body.p-calc .mft-calorie-calculator .mft-choice-option span { color: #14181c; }
body.p-calc .mft-calorie-calculator .mft-choice-option:hover span { border-color: rgba(0, 0, 0, 0.4); }
body.p-calc .mft-calorie-calculator .mft-choice-option input:checked + span { color: #fff; }
body.p-calc .mft-calorie-calculator .mft-choice-option input:focus-visible + span { outline-color: #14181c; }

/* About: "ما نؤمن به" reuses the .ab-mft design on a light-gray band */
body.p-about .ab-mft.ab-bel { background: #f6f7f8; }
body.p-about .ab-bel .abm-list { margin-bottom: 0; }
body.p-about .ab-bel .abm-photo::before { top: auto; bottom: 0; height: 60%; }
body.p-about .ab-bel .abm-photo::after { bottom: auto; top: 0; height: 30%; }

/* about page: reuse homepage "About us" section styles */
:where(body.p-about) .lrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
:where(body.p-about) .lrow::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--brand-red);
}
:where(body.p-about) .sgrid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px){
:where(body.p-about) .sgrid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
:where(body.p-about) .stack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: 1.15fr 0.85fr;
  gap: 16px;
  aspect-ratio: 1/1.05;
}
:where(body.p-about) .stack div {
  background: #111 center/cover;
  border: 4px solid #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
:where(body.p-about) .s1 {
  grid-area: 1/1;
  background-image: none;
}
:where(body.p-about) .s2 {
  grid-area: 2/1;
  background-image: none;
}
:where(body.p-about) .s3 {
  grid-area: 1/2/3/3;
  background-image: none;
}
:where(body.p-about) .stack::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 28%;
  width: 2px;
  height: 70px;
  background: var(--brand-red);
  transform: skewX(-20deg);
}
:where(body.p-about) .ttl[lang="ar"] {
  font-family: "Cairo", var(--head);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}
:where(body.p-about) .lbl[lang="ar"] {
  letter-spacing: 0;
  text-transform: none;
  font-family: "Cairo", var(--body);
}
:where(body.p-about) .ap {
  max-width: 560px;
  margin: 0 0 16px;
  text-align: right;
}
:where(body.p-about) .light .ap {
  color: var(--on-light-body);
}
:where(body.p-about) .sec .ttl + .ap {
  margin-top: 22px;
}
:where(body.p-about) .sig {
  display: flex;
  flex-direction: column;
  margin: 22px 0 26px;
  text-align: right;
}
:where(body.p-about) .sig b {
  font:
    800 1.3rem "Cairo",
    sans-serif;
  color: var(--on-light);
}
:where(body.p-about) .sig span {
  font-size: 0.9rem;
  direction: ltr;
  text-align: right;
  color: var(--on-light-body);
}
/* about page: Arabic text in the homepage "About us" section uses Cairo like the homepage */
:where(body.p-about) #about [lang="ar"] {
  font-family: "Cairo", var(--body);
}

/* home page: reuse about page "ما نؤمن به" section styles */
body.p-home .ab-mft {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 110px) var(--pad);
  background: #fff;
  color: #14181c;
  border-bottom: 1px solid #ececec;
}
body.p-home .ab-mft::before,
body.p-home .ab-mft::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: #eceef0;
  border-radius: 12px;
}
/* faint dumbbell, top-left */
body.p-home .ab-mft::before {
  top: 40px;
  left: 4%;
  width: 120px;
  height: 18px;
  box-shadow: -18px 0 0 -2px #eceef0, 18px 0 0 -2px #eceef0;
  transform: rotate(-30deg);
  opacity: 0.9;
}
body.p-home .ab-mft::after { display: none; }
body.p-home .ab-mft .ab-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  direction: ltr;
}
body.p-home .ab-mft .ab-wrap > * { direction: rtl; }

/* photo with white frame, red bars and soft shadow */
body.p-home .abm-photo {
  position: relative;
  margin: 0;
  padding: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  transform: perspective(900px) rotateY(6deg);
  max-width: 420px;
  justify-self: center;
}
body.p-home .abm-photo::before,
body.p-home .abm-photo::after {
  content: "";
  position: absolute;
  width: 6px;
  background: var(--rd);
}
body.p-home .abm-photo::before { left: -22px; top: 0; height: 64%; }
body.p-home .abm-photo::after { right: -22px; bottom: 0; height: 28%; }
body.p-home .abm-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
}

/* text column */
body.p-home .abm-lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--rd);
  font: 700 0.9rem "Cairo", sans-serif;
}
body.p-home .abm-lbl::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--rd);
}
body.p-home .abm-h {
  margin: 0 0 18px;
  font: 800 clamp(1.8rem, 3.6vw, 2.7rem)/1.35 "Cairo", sans-serif;
  color: #14181c;
  text-align: start;
}
body.p-home .abm-h .r { color: var(--rd); }
body.p-home .abm-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 22px;
  position: relative;
}
body.p-home .abm-list li {
  position: relative;
  padding-inline-start: 34px;
}
body.p-home .abm-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--rd);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}
body.p-home .abm-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 26px;
  bottom: -20px;
  width: 2px;
  background: #e3e5e8;
}
body.p-home .abm-list b {
  display: block;
  font: 800 1.08rem/1.6 "Cairo", sans-serif;
  color: #14181c;
}
body.p-home .abm-list p {
  margin: 2px 0 0;
  font: 400 0.95rem/1.85 "Cairo", sans-serif;
  color: #5b6268;
}
@media (max-width: 900px) {
  body.p-home .ab-mft .ab-wrap { grid-template-columns: 1fr; }
  body.p-home .abm-photo { max-width: 340px; transform: none; }
  body.p-home .abm-photo::before { left: -14px; }
  body.p-home .abm-photo::after { right: -14px; }
}

/* About: "ما نؤمن به" reuses the .ab-mft design on a light-gray band */
body.p-home .ab-mft.ab-bel { background: #f6f7f8; }
body.p-home .ab-bel .abm-list { margin-bottom: 0; }
body.p-home .ab-bel .abm-photo::before { top: auto; bottom: 0; height: 60%; }
body.p-home .ab-bel .abm-photo::after { bottom: auto; top: 0; height: 30%; }

/* home page: "ما نؤمن به" spacing parity with about page (centered wrap + same line-height) */
body.p-home #why.ab-mft { line-height: 1.7; }
body.p-home #why .ab-wrap { margin: 0 auto; }

/* about page: doctor link inside the "من نحن" signature */
body.p-about .sig .ab-link {
  align-self: flex-start;
  color: #d11a1f !important; /* AA: كان #ff2b2b (3.2:1) — !important لأن القاعدة العامة تستخدمه */
  border-bottom-color: #d11a1f;
  font: 800 1.1rem "Cairo", sans-serif;
  margin-bottom: 4px;
}

/* home page: doctor link inside the "من نحن" signature */
body.p-home .sig .ab-link {
  align-self: flex-start;
  color: #d11a1f !important; /* AA: كان var(--rd) #ff2b2b (3.2:1) */
  font: 800 1.1rem "Cairo", sans-serif;
  border-bottom: 1px solid #d11a1f;
  margin-bottom: 4px;
  text-decoration: none;
}

/* home + about: remove decorative lines (slanted red line beside photos, faint dumbbell in "فلسفة MFT") */
body.p-home .stack::after,
body.p-about .stack::after,
body.p-home .ab-mft::before,
body.p-about .ab-mft::before {
  display: none;
}

/* remove decorative lines: faint dumbbell in "ما نؤمن به" + red diagonal line in "من نحن" (home + about) */
body.p-home #why.ab-mft::before,
body.p-about .ab-mft.ab-bel::before,
body.p-home #about .stack::after,
body.p-about #about .stack::after {
  display: none;
}

/* ===== Unified top nav (same look on every page) ===== */
.nav {
  color: #fff;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
}
.nav a {
  color: inherit;
}
/* one active-link style everywhere: single red underline, no extra border/shift */
.nav .links a[aria-current] {
  color: #fff;
  border-bottom: 0;
  padding-bottom: 8px;
  opacity: 1;
}
.nav .burger {
  color: #fff;
}
.nav .burger:focus-visible,
.nav .links a:focus-visible,
.nav .pill:focus-visible,
.nav .logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 8px;
}

/* ===== الناف بعد التمرير (.nav.sc): خلفية بيضاء ⇒ روابط داكنة =====
   ويشمل حالة القائمة المفتوحة (.open) لأنها صارت بيضاء أيضًا */
:is(.nav.sc, .nav.open) {
  color: #14181c;
}
:is(.nav.sc, .nav.open) a {
  color: inherit; /* الروابط ترث اللون الداكن */
}
:is(.nav.sc, .nav.open) .links a:hover,
:is(.nav.sc, .nav.open) .links a[aria-current] {
  color: #c8161d; /* أحمر أغمق من لون البراند ليحقق تباين 4.5:1 على الأبيض */
  opacity: 1;
}
:is(.nav.sc, .nav.open) .pill {
  color: #fff; /* نص زر الحجز يبقى أبيض على الأحمر */
}
:is(.nav.sc, .nav.open) .burger {
  color: #14181c;
}
:is(.nav.sc, .nav.open) .burger:focus-visible,
:is(.nav.sc, .nav.open) .links a:focus-visible,
:is(.nav.sc, .nav.open) .pill:focus-visible,
:is(.nav.sc, .nav.open) .logo:focus-visible {
  outline-color: #14181c;
}
@media (max-width: 1100px) {
  .nav.open .links {
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .nav.open .links a[aria-current] {
    color: var(--brand-red, #e11d1d);
    padding-bottom: 12px;
  }
}

/* ===== about: programs section (same as home) ===== */
body.p-about #programs .progs {
  gap: 28px;
  margin-top: 48px;
}
body.p-about #programs .prog {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  padding: 14px 14px 20px;
  overflow: hidden;
}
body.p-about #programs .prog .thumb {
  position: relative;
  overflow: hidden;
  flex: none;

}
body.p-about #programs .prog .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent 55%);
}
body.p-about #programs .pg-no {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--brand-red);
  color: #fff;
  font: 400 0.95rem/1 var(--display);
  letter-spacing: 0.06em;
}
body.p-about #programs .pg-kind {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  inset-inline-start: 14px;
  color: #fff;
  font: 700 0.72rem/1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  direction: ltr;
}
body.p-about #programs .prog h3 {
  margin: 18px 6px 0;
  font-size: 1.3rem;
  color: var(--on-light);
}
body.p-about #programs .prog .pg-desc {
  margin: 8px 6px 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--on-light-body);
}
body.p-about #programs .pg-info {
  margin: 16px 6px 0;
  padding: 0;
  
}
body.p-about #programs .pg-info div {
  padding: 12px 0;
  border-top: 1px solid var(--hl);
   direction: rtl;
}
body.p-about #programs .pg-info dt {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--red-ink);
}
body.p-about #programs .pg-info dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--on-light-body);
}
body.p-about #programs .prog .chips {
  margin: 0 6px;
  justify-content: flex-start;
}

body.p-about #programs .pg-link {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: white;
    width: 200px;
    height: 38px;
    padding-right: 12px;
    gap: 8px;
    margin: auto 6px 0px;
    background: red;
    border-radius: inherit;

  margin-right: auto;
  margin-left: auto;

}
body.p-about #programs .pg-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.p-about #programs .pg-link:hover {
  gap: 12px;
}


/* ===== about: programs section — light surface + cards identical to home ===== */
body.p-about #programs {
  --surface: #ececec;
  --hl: rgba(0, 0, 0, 0.1);
  background: var(--surface) !important;
  color: var(--on-light);
  border-top: 1px solid var(--hl);
  border-bottom: 0;
}
body.p-about #programs .ap {
  color: var(--on-light-body);
}
body.p-about #programs .ttl {
  color: var(--on-light);
}
body.p-about #programs .card.d {
  background: #fff;
  border: 1px solid var(--line-l);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
}
body.p-about #programs .card.d:hover {
  border-color: rgba(230, 43, 39, 0.6);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}
body.p-about #programs .card.d h3 {
  color: var(--on-light);
}
body.p-about #programs .card.d p {
  color: var(--on-light-body);
}
body.p-about #programs .chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.p-about #programs .chips li {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 0.85rem;
  color: #333;
}

/* about: programs heading/typography same as home */
body.p-about #programs [lang="ar"] {
  font-family: "Cairo", "Barlow", sans-serif;
}
body.p-about #programs .ttl[lang="ar"] {
  font-family: "Cairo", var(--head);
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}
body.p-about #programs h3[lang="ar"] {
  font-family: "Cairo", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
  line-height: 1.3;
}
body.p-about #programs .ctr2 {
  margin-inline: auto;
  text-align: center;
}
body.p-about #programs .ttl + .ap {
  margin-top: 22px;
}

/* ===== about / articles / calculator: header identical to transformations ===== */
body.p-about .phead,
body.p-articles .phead,
body.p-calc .phead {
  position: relative;
  z-index: 60;
  height: auto;
  padding: 176px clamp(20px, 5vw, 80px) 80px;
  text-align: center;
  color: #fff;
  border: 0;
  box-shadow: none;
  display: block;
  overflow: visible;
  background:
    linear-gradient(-26deg, rgb(0 0 0 / 17%), rgb(0 0 0 / 84%)), url(../assets/images/hero-bg.jpg) 70% 12% / cover;
}
/* calculator keeps its h1/intro for screen readers & SEO, hidden visually like transformations */
body.p-calc .phead > :not(nav) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== home: section background rhythm =====
   أبيض (W) ← رمادي (G) ← منقّط (D) بالتناوب، والأقسام ذات البطاقات البيضاء على G أو D فقط.
   لم يُغيَّر: الهيرو، الشريط الأحمر، مقالات (D أصلًا)، إنستجرام (G أصلًا)، "هل أنت مستعد لتحولك؟" (cta2)، الفوتر. */
body.p-home {
  --bg-w: #fff;
  --bg-g: #eef0f3;
  --bg-d: #f5f5f5 radial-gradient(circle, rgba(0, 0, 0, 0.09) 1px, transparent 1.3px) 0 0 / 22px 22px;
}
body.p-home :is(.stats, #coaching, #method, #results, #life) {
  background: var(--bg-w) !important;
}
body.p-home :is(#about, #compare, #steps, #testimonials, #faq, #contact) {
  background: var(--bg-g) !important;
}
body.p-home :is(#programs, #pricing) {
  background: var(--bg-d) !important;
}

/* ===== Footer v2: balanced columns (brand + 4 link columns of 6) ===== */
.ft .fg {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
  align-items: start;
}
.ft .fbrand { grid-column: 1 / -1; max-width: 420px; }
@media (min-width: 760px) {
  .ft .fg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
  .ft .fbrand { max-width: 520px; }
}
@media (min-width: 1000px) {
  .ft .fg { grid-template-columns: minmax(280px, 1.7fr) repeat(4, minmax(0, 1fr)); }
  .ft .fbrand { grid-column: auto; max-width: none; }
}
.ft .fcol h3 { margin: 0 0 18px; }
.ft .fcol ul { gap: 12px; }
.ft .fcol li { line-height: 1.4; }
.ft .fcol a { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 22px; }
.ft .fi {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
body .ft .fbrand .flogo { width: 80px; height: 80px; margin: 0 0 14px; }
body .ft .fbrand .ap { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.8; }
body .ft .fbrand .slog { margin: 0 0 16px; font-size: 0.66rem; letter-spacing: 0.11em; text-wrap: balance; }
.ft .fdoc { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--on-dark-body); }
.ft .fdoc b { display: block; color: #fff; font: 700 1rem/1.5 "Cairo", var(--body), sans-serif; }
.ft .fdoc span { display: block; }
.ft .fbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: 44px;
  font-size: 0.85rem;
}
.ft .fbar p { margin: 0; }

/* عنوان مخفي بصريًا (يبقى متاحًا لقارئات الشاشة ومحركات البحث) */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   MOBILE LAYER — @media (max-width: 640px)
   كل التعديلات أدناه داخل استعلام الجوال، فلا يتغير شيء على الشاشات الأعرض.
   الألوان والخطوط والتأثيرات والهوية البصرية كما هي، والتحسينات في:
   المقاسات، المسافات، أهداف اللمس، القائمة، وتوزيع الشبكات.

   0 Tokens        3 Hero            6 Typography       9 Footer
   1 Foundations   4 Touch targets   7 Grids & cards
   2 Navbar & menu 5 Section rhythm  8 Forms & calculator
   ===================================================================== */

/* عناصر مخفية خارج الجوال (يظهر الزر في الشريط وأيقونة ≡ فقط) */
.links .menu-cta-li,
.burger .ic-x {
  display: none;
}

@media (max-width: 640px) {
  /* ---------- 0 · Tokens ---------- */
  :root {
    --m-gutter: 20px;
    --m-sec-y: 52px; /* حشوة الأقسام العمودية (كانت 72px) */
    --m-tap: 44px; /* أقل مساحة لمس مريحة */
    --m-h2: clamp(1.6rem, 7vw, 1.85rem); /* أكبر من h3 داخل الأقسام (24–26px) فيصح التسلسل الهرمي */
  }

  /* ---------- 1 · Foundations ---------- */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); /* لا تختبئ العناوين تحت الشريط الثابت */
  }
  html,
  body {
    max-width: 100%;
    overflow-x: clip; /* شبكة أمان: لا تمرير أفقي أبدًا */
  }
  body {
    overflow-wrap: break-word; /* الكلمات الطويلة (روابط/إيميلات) لا تُخرج الصفحة عن عرضها */
  }
  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }
  video {
    height: auto;
  }
  h1,
  h2,
  h3,
  .ttl,
  .sub-ar {
    text-wrap: balance; /* أسطر عناوين متوازنة بلا كلمة يتيمة */
  }

  /* ---------- 2 · Navbar & mobile menu ---------- */
  .nav.sc {
    height: 64px; /* شريط أنحف عند التمرير = مساحة قراءة أكبر */
  }
  .nav.sc .logo img {
    width: 46px;
    height: 46px;
  }
  .nav > .pill {
    display: none; /* زر الحجز ينتقل إلى القائمة */
  }
  .nav .burger {
    margin-right: auto;
    width: var(--m-tap);
    height: var(--m-tap);
  }
  .nav.open .burger .ic-menu {
    display: none;
  }
  .nav.open .burger .ic-x {
    display: block;
  }
  html.nav-lock,
  html.nav-lock body {
    overflow: hidden; /* قفل تمرير الخلفية أثناء فتح القائمة */
  }
  .nav.open {
    background: #080808;
  }
  .nav.open .links {
    background: #080808; /* معتمة تمامًا: لا يظهر محتوى الصفحة خلف القائمة */
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%); /* لوحة بطول الشاشة المتبقي */
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--m-gutter) calc(20px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0;
    animation: m-menu-in 0.22s var(--ease) both;
  }
  .nav.open .links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav.open .links li:nth-last-child(2) {
    border-bottom: 0;
  }
  .nav.open .links a,
  .nav.open .links a[aria-current] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 0;
    font-size: 1.15rem;
    opacity: 1;
  }
  .nav.open .links a::before {
    display: none; /* بدل الخط التحتي: صفوف كاملة العرض */
  }
  .nav.open .links a:hover {
    transform: none;
  }
  .nav.open .links a[aria-current]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor; /* نقطة تدل على الصفحة الحالية */
  }
  /* زر الحجز داخل القائمة */
  .nav.open .links .menu-cta-li {
    display: block;
    margin-top: auto; /* يثبت أسفل اللوحة */
   
    border-bottom: 0;
  }
  .nav.open .links a.menu-cta {
    justify-content: space-between;
    box-sizing: border-box;
    height: 54px;
    padding-inline: 24px 6px;
    border-radius: 999px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0; /* التباعد يفكك اتصال الحروف العربية */
    text-transform: none;
    background: linear-gradient(135deg, #e0201a 0%, #d01212 55%, #b30d0d 100%);
    box-shadow:
      0 8px 24px rgba(239, 27, 27, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition:
      transform 0.3s var(--ease),
      filter 0.3s;
  }
  .nav.open .links a.menu-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }
  .nav.open .links a.menu-cta:active {
    transform: scale(0.98);
  }
  .nav.open .links a.menu-cta .dot {
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: transform 0.35s var(--ease);
  }
  .nav.open .links a.menu-cta:hover .dot {
    transform: rotate(45deg);
  }
  @keyframes m-menu-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ---------- 3 · Hero ---------- */
  .hero .inner {
    padding: 380px var(--m-gutter) 104px;
    /* 380px على الشاشات الطويلة كما كانت؛ وتتقلص تدريجيًا على القصيرة ليبقى الـ CTA فوق حافة الشاشة */
    padding-top: clamp(200px, calc(100vh - 420px), 380px);
    padding-top: clamp(200px, calc(100svh - 420px), 380px);
  }
  .hero .lead {
    margin-top: 20px;
  }
  .hero .ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin-top: 28px;
  }
  .hero .cta {
    flex: 1 1 auto;
    white-space: nowrap; /* لا التفاف داخل الزر: إن ضاق الصف ينزل الزر الثاني لسطر جديد */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 0;
    padding: 0 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition:
      transform 0.3s var(--ease),
      filter 0.3s;
  }
  .hero .cta::after {
    display: none; /* الخط التحتي يستبدله شكل الزر */
  }
  .hero .cta:not(.alt) {
    border-color: transparent;
    background: linear-gradient(135deg, #e0201a 0%, #d01212 55%, #b30d0d 100%);
    box-shadow: 0 8px 22px rgba(239, 27, 27, 0.38);
  }
  .hero .cta:active {
    transform: scale(0.98);
  }
  .hero .socials {
    bottom: 22px;
    gap: 0;
  }
  @media (max-height: 680px) {
    /* هواتف قصيرة (SE / 360×640): ضغط بسيط لإبقاء الزر ظاهرًا */
    .hero .lead {
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.5;
    }
    .hero .ctas {
      margin-top: 18px;
      gap: 10px;
    }
    .hero .cta {
      min-height: 46px;
    }
  }
  .soc {
    min-height: var(--m-tap);
    padding-inline: 12px;
  }
  .soc .si {
    width: 20px;
    height: 20px;
    padding: 11px; /* دائرة 44px */
  }

  /* ---------- 4 · Touch targets ---------- */
  .aw-bc a {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
  }
  .af-pager button {
    min-width: var(--m-tap);
    min-height: var(--m-tap);
  }
  .pg-link,
  #a-srclist a {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
  }
  .ab-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
  }

  /* ---------- 5 · Section rhythm ---------- */
  .sec,
  .oc,
  .cp,
  .rs,
  .artsec,
  .cta2 {
    padding-block: var(--m-sec-y);
  }
  .progs {
    gap: 20px;
    margin-top: 32px;
  }
  .plans {
    gap: 16px;
    margin-block: 32px;
  }
  .plan {
    padding: 28px 22px;
  }
  .ba-grid,
  .tgrid,
  .art-grid {
    gap: 20px;
  }
  .oc-grid {
    gap: 14px;
  }

  /* ---------- 6 · Typography ---------- */
  /* عناوين الأقسام القياسية (كانت 23.2px أصغر من عناوين البطاقات h3).
     عناوين العرض الكبيرة (Instagram / النتائج / التواصل / CTA) تبقى كما هي. */
  .sec .ttl[lang="ar"],
  .cp-head h2,
  #articles .af-wrap h2 {
    font-size: var(--m-h2);
    line-height: 1.4;
  }
  /* لا نص أصغر من 12px (الأيدي في المحددات لأن القواعد الأصلية بالـ id) */
  body .oc-en,
  body .kind,
  body.p-home #programs .pg-kind,
  body.p-about #programs .pg-kind,
  body #testimonials .ba-kind {
    font-size: 0.75rem;
  }

  /* ---------- 7 · Grids & cards (عمود واحد، بلا فيض) ---------- */
  .progs,
  .plans,
  .ba-grid,
  .tgrid,
  .art-grid,
  .oc-grid,
  .rs-grid,
  .cp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px; /* 168×2 + 28 كانت أعرض من الشاشة */
  }
  @media (max-width: 359px) {
    .steps {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---------- 8 · Forms & calculator ---------- */
  .cf select,
  .cf input {
    min-height: 52px;
  }
  #cform button[type="submit"] {
    min-height: 56px;
    font-size: 1.1rem;
  }
  #calc button[type="submit"] {
    min-height: 56px;
    padding-inline: 18px;
    gap: 10px;
    font-size: clamp(0.95rem, 4.4vw, 1.05rem); /* كان 20.8px فيلتف النص سطرين */
  }
  #calc button[type="submit"] span {
    white-space: nowrap;
  }

  /* ---------- 9 · Footer ---------- */
  .ft {
    padding: 48px var(--m-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .fg ul {
    gap: 0;
  }
  .ft .fcol a,
  .ft ul a {
    width: 100%;
    min-height: var(--m-tap); /* روابط الفوتر: صفوف قابلة للمس */
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .nav.open .links,
  .nav.open .links a.menu-cta,
  .nav.open .links a.menu-cta .dot,
  .hero .cta {
    animation: none;
    transition: none;
  }
}

/* ملاحظة صغيرة (إخلاء مسؤولية) — تأخذ لون النص من القسم الموجودة فيه فتصلح للخلفيات الفاتحة والداكنة */
.mft-note {
  max-width: 64ch;
  margin: 40px auto 0;
  font-size: 0.9rem;
  line-height: 1.9;
  text-align: center;
  color: inherit;
  opacity: 0.72;
}

/* =====================================================================
   Online Coaching — عرض الهاتف (≤ 699px: عمود واحد)
   الصورة تظهر كاملة في أعلى الكارت بلا نص، والنص يقع على لوحة داكنة تحتها،
   فيبقى مقروءًا فوق أي صورة (كان يقع فوق مناطق فاتحة: أكل/سماء/إضاءة زرقاء).
   ===================================================================== */
@media (max-width: 699px) {
  .oc-card {
    --shade: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0,
      rgba(0, 0, 0, 0.3) 96px,
      rgba(0, 0, 0, 0.92) 168px,
      rgba(0, 0, 0, 0.96) 100%
    );
    min-height: 0;
    padding: 156px 18px 22px;
  }
  .oc-desc {
    color: #f0f0f0;
    line-height: 1.8;
  }
}
/* شاشات اللمس: لا تأثير hover (كان يبقى «عالقًا» بعد اللمس: الكارت يرتفع بتوهج أحمر) */
@media (hover: none) {
  .oc-card:hover {
    transform: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  }
}

/* =====================================================================
   بطاقات قابلة للطيّ على الهاتف — التفاصيل مخفية وتظهر بالضغط
   (الكلاس .tg يضيفه main.js على الهاتف فقط؛ بدون JS يبقى كل المحتوى ظاهرًا)
   ===================================================================== */
.tg-btn {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-shadow: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tg-btn::after {
  content: ""; /* يمدّ منطقة الضغط على البطاقة كلها */
  position: absolute;
  inset: 0;
}
.tg-btn:focus-visible {
  outline: none;
}
.tg:has(.tg-btn:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: -5px;
}
/* علامة (+) أعلى يسار البطاقة، تتحول إلى (×) عند الفتح */
.tg::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: transform 0.35s ease;
}
.tg.open::after {
  transform: rotate(45deg);
}

@media (max-width: 699px) {
  /* بطاقات «المنهجية»: نفس معالجة بطاقات Online Coaching (صورة أعلى + لوحة داكنة للنص) */
  body.p-home #method .pillars > li.tg {
    --shade: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0,
      rgba(0, 0, 0, 0.3) 96px,
      rgba(0, 0, 0, 0.92) 168px,
      rgba(0, 0, 0, 0.96) 100%
    );
    min-height: 0;
    padding: 156px 18px 24px;
  }
  /* الحالة المطوية. المحددات أقوى من قواعد hover/focus-within الموجودة، فلا تفتح البطاقة إلا بـ .open */
  .oc-card.tg:not(.open) .oc-desc,
  .oc-card.tg:not(.open) .oc-chips,
  body.p-home #method .pillars > li.tg:not(.open) .chips {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 0.45s ease,
      margin-top 0.35s ease,
      opacity 0.25s ease,
      visibility 0s linear 0.45s;
  }
  .oc-card.tg.open .oc-desc,
  .oc-card.tg.open .oc-chips,
  body.p-home #method .pillars > li.tg.open .chips {
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 0.5s ease,
      margin-top 0.35s ease,
      opacity 0.35s ease 0.08s,
      visibility 0s;
  }
  .oc-card.tg.open .oc-desc {
    max-height: 320px;
    margin-top: 12px;
  }
  .oc-card.tg.open .oc-chips,
  body.p-home #method .pillars > li.tg.open .chips {
    max-height: 460px;
    margin-top: 14px;
  }
}
/* شاشات اللمس: لا تأثير hover «عالق» على بطاقات المنهجية */
@media (hover: none) {
  body.p-home #method .pillars > li:hover {
    transform: none;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tg::after,
  .oc-card.tg .oc-desc,
  .oc-card.tg .oc-chips,
  body.p-home #method .pillars > li.tg .chips {
    transition: none !important;
  }
}

/* =====================================================================
   قائمة الجوال (≤ 1100px): كارت أبيض عائم تحت الشريط
   عناصر عريضة بمسافات مريحة، الصفحة الحالية بلون البراند وخط تحتها بعرض الكارت،
   وزر الحجز حبّة في الأسفل. (الشريط نفسه يصير أبيض أثناء الفتح: قواعد :is(.nav.sc,.nav.open) أعلاه)
   ===================================================================== */
@keyframes m-menu-pop {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .nav.open {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  .nav.open .links {
    position: absolute;
    top: calc(100% + 10px);
    right: 20px;
    left: auto;
    width: min(400px, calc(100vw - 40px));
    height: auto;
    max-height: calc(100vh - 100% - 28px);
    max-height: calc(100dvh - 100% - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 22px 22px;
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow:
      0 22px 60px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(0, 0, 0, 0.05);
    transform-origin: top right;
    animation: m-menu-pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .nav.open .links li {
    border: 0;
    animation: none;
  }
  .nav.open .links a,
  .nav.open .links a[aria-current] {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 14px 0 12px;
    border-bottom: 3px solid transparent;
    color: #14181c;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
    opacity: 1;
  }
  .nav.open .links a::before {
    display: none;
  }
  .nav.open .links a[aria-current]::after {
    content: none; /* بدل النقطة القديمة: الخط تحت العنصر */
  }
  .nav.open .links a:hover {
    color: #c8161d;
    transform: none;
  }
  .nav.open .links a[aria-current] {
    color: #c8161d;
    border-bottom-color: var(--brand-red, #e62b27);
  }
}
@media (max-width: 640px) {
  .nav.open .links {
    left: 14px;
    right: 14px;
    width: auto;
  }
  /* زر الحجز: حبّة في أسفل الكارت */
  .nav.open .links .menu-cta-li {
    display: block;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
  }
  .nav.open .links a.menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: auto;
    min-width: 66%;
    height: 52px;
    padding: 0 22px 0 6px;
    border: 0;
    color: #fff;
    font-size: 1.02rem;
  }
  .nav.open .links a.menu-cta:hover {
    color: #fff;
  }
  .nav.open .links a.menu-cta .dot {
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav.open .links {
    animation: none;
  }
}

/* =====================================================================
   أزرار عائمة: واتساب (يسار) + سهم لأعلى الصفحة (يمين) — يضيفها main.js
   ===================================================================== */
.fab {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 50; /* أسفل الناف (60) */
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.3s ease,
    visibility 0.3s;
}
.fab svg {
  width: 30px;
  height: 30px;
}
.fab:focus-visible {
  outline: 3px solid #14181c;
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px #fff,
    0 8px 24px rgba(0, 0, 0, 0.28);
}
.fab-wa {
  left: calc(18px + env(safe-area-inset-left, 0px));
  background: #25d366;
}
.fab-wa svg {
color: white;
  fill: currentColor;
}
.fab-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
}
.fab-top {
  right: calc(18px + env(safe-area-inset-right, 0px));
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e0201a 0%, #d01212 55%, #b30d0d 100%);
  box-shadow: 0 8px 24px rgba(239, 27, 27, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
}
.fab-top svg {
  width: 24px;
  height: 24px;
}
.fab-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fab-top.show:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(239, 27, 27, 0.5);
}
/* قائمة الجوال المفتوحة، أو أثناء الكتابة في أي حقل (نموذج التواصل/الحاسبة): نخفي الأزرار حتى لا تغطي الحقول */
html.nav-lock .fab,
html.nav-lock .fab-top.show,
body:has(
    input:not([type="radio"]):not([type="checkbox"]):focus,
    select:focus,
    textarea:focus
  )
  .fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 640px) {
  .fab {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .fab-wa {
    left: calc(14px + env(safe-area-inset-left, 0px));
    width: 52px;
    height: 52px;
  }
  .fab-top {
    right: calc(14px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab {
    transition: none;
  }
}
@media print {
  .fab {
    display: none;
  }
}

/* ===== كارت الحجز (js/booking.js): لوحتان، هوية MFT + الفورم ===== */
html.bk-lock {
  overflow: hidden;
}
.bk {
  --bk-red: #e50914;
  --bk-ink: #0d0d10;
  --bk-mut: #5f6672;
  --bk-line: #d9dce2;
  border: 0;
  padding: 0;
  margin: auto;
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  background: transparent;
  color: var(--bk-ink);
  font-family: Cairo, Barlow, system-ui, sans-serif;
  overflow: visible;
}
.bk::backdrop {
  background: rgba(6, 6, 9, 0.78);
  backdrop-filter: blur(6px);
}
.bk[open] {
  animation: bk-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bk[open]::backdrop {
  animation: bk-fade 0.26s ease both;
}
@keyframes bk-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bk-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bk [hidden] {
  display: none !important;
}
.bk svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* البطاقة: الهوية يسارًا والفورم يمينًا (الاتجاه المادي ثابت، والنص داخلها RTL) */
.bk-card {
  position: relative;
  display: flex;
  direction: ltr;
  max-height: calc(100dvh - 32px);
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.bk-x {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.bk-x:hover {
  background: rgba(255, 255, 255, 0.22);
}
.bk-x svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ---- لوحة الهوية ---- */
.bk-side {
  position: relative;
  z-index: 2;
  flex: 0 0 41%;
  min-width: 0;
  color: #fff;
}
.bk-side::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -8px;
  background: linear-gradient(180deg, #ff2d2d, #b70d14);
}
.bk-sbg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 7, 9, 0.95) 0%, rgba(7, 7, 9, 0.8) 55%, rgba(7, 7, 9, 0.5) 100%),
    url("../assets/images/hero-bg.jpg") 78% 25% / cover no-repeat,
    #09090b;
}
.bk-sin {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 38px 26% 30px 44px;
}
.bk-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}
.bk-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font: italic 800 3rem/1 "Barlow Condensed", Anton, Impact, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.bk-logo b {
  font-weight: 800;
}
.bk-logo .r {
  color: var(--bk-red);
}
.bk .bk-pulse {
  width: 54px;
  height: 28px;
  stroke: var(--bk-red);
  stroke-width: 2.2;
  flex: none;
}
.bk-brand small {
  align-self: stretch;
  text-align: center;
  font: 500 0.66rem/1.4 Barlow, sans-serif;
  letter-spacing: 0.24em;
  white-space: nowrap;
  color: #e9e9ee;
}
.bk-hl {
  margin-top: 44px;
  font: 800 2.6rem/1.35 Cairo, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.bk-hl span {
  display: block;
  color: var(--bk-red);
  font: italic 800 3.5rem/1.05 "Barlow Condensed", Anton, Impact, sans-serif;
  text-align: right;
  white-space: nowrap;
}
.bk-lead {
  margin: 22px 0 0;
  max-width: 26em;
  color: #dcdce2;
  font-size: 1.04rem;
  line-height: 2;
}
.bk-feats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.bk-feats li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bk-fi {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 2px solid var(--bk-red);
  border-radius: 50%;
  color: var(--bk-red);
  background: rgba(229, 9, 20, 0.08);
}
.bk-fi svg {
  width: 26px;
  height: 26px;
}
.bk-feats b {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
}
.bk-feats small {
  display: block;
  margin-top: 2px;
  color: #cfcfd6;
  font-size: 0.92rem;
}
.bk-tag {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
}
.bk-tag svg {
  width: 100%;
  max-width: 280px;
  height: 30px;
  stroke: var(--bk-red);
  stroke-width: 1.6;
}
.bk-tag span {
  font: 500 0.72rem/1.4 Barlow, sans-serif;
  letter-spacing: 0.2em;
  white-space: nowrap;
  color: #e9e9ee;
}

/* ---- لوحة الفورم ---- */
.bk-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  direction: rtl;
  background: #fff;
}
.bk-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.bk-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 34px 8px 30px;
}
.bk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  color: #7b828e;
  font-size: 0.86rem;
  font-weight: 600;
}
.bk-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  direction: rtl; /* الخطوة 1 على اليمين (ترتيب عربي) */
}
.bk-bar i {
  display: block;
  width: 30px;
  height: 5px;
  border-radius: 5px;
  background: #e3e5ea;
}
.bk-bar i.on {
  width: 50px;
  background: var(--bk-red);
}
.bk-bar i.dot {
  width: 6px;
}
.bk .bk-title {
  margin: 0 0 4px;
  font: 800 2.05rem/1.35 Cairo, Barlow, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bk-ink);
}
.bk .bk-title:focus {
  outline: none;
}
.bk-sub {
  margin: 0 0 18px;
  color: var(--bk-mut);
  font-size: 1rem;
  line-height: 1.8;
}
.bk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}
.bk-full {
  grid-column: 1 / -1;
}
.bk-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bk-f label,
.bk-f legend {
  padding: 0;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bk-ink);
}
.bk-f legend {
  margin-bottom: 6px;
}
.bk-req {
  color: var(--bk-red);
  font-weight: 800;
}
/* مربع الإدخال: إطار + أيقونة (يسارًا للحقول النصية، يمينًا للقوائم) */
.bk-box {
  position: relative;
  display: block;
  border: 1.5px solid var(--bk-line);
  border-radius: 9px;
  background: #fbfbfc;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.bk-box:focus-within {
  border-color: var(--bk-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12);
}
.bk-f.bad .bk-box {
  border-color: #d4111b;
  background: #fff7f7;
}
.bk .bk-box > .bk-ic {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 21px;
  height: 21px;
  margin-top: -10.5px;
  color: #9aa1ac;
  pointer-events: none;
}
.bk .bk-sel > .bk-ic {
  left: auto;
  right: 14px;
}
.bk .bk-sel > .bk-chev {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  color: #6b7280;
  pointer-events: none;
}
.bk input.bk-in,
.bk select.bk-in,
.bk textarea.bk-in {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 16px 0 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bk-ink);
  font: 500 1rem/1.6 Cairo, Barlow, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  outline: none;
  appearance: none;
}
.bk select.bk-in {
  padding: 0 46px 0 38px;
  cursor: pointer;
}
.bk select.bk-in:invalid,
.bk select.bk-in:has(option[value=""]:checked) {
  color: #8a919c;
}
.bk textarea.bk-in {
  height: auto;
  min-height: 62px;
  padding: 11px 16px;
  resize: vertical;
}
.bk .bk-in::placeholder {
  color: #8a919c;
  font-weight: 400;
}
.bk-fe {
  color: #c8101a;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

/* بطاقات الباقات وطريقة الدفع */
.bk-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bk-pays {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bk-opt {
  position: relative;
  display: block;
  cursor: pointer;
}
.bk-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bk .bk-f label.bk-opt {
  font-weight: 500;
}
.bk-oc {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 16px;
  border: 1.5px solid var(--bk-line);
  border-radius: 9px;
  background: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}
.bk-pc {
  gap: 10px;
  padding: 10px 14px;
}
.bk .bk-oi {
  flex: none;
  width: 24px;
  height: 24px;
  color: #9aa1ac;
  transition: color 0.18s;
}
.bk-pt {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.bk-pt b {
  font: 800 0.92rem/1.3 Barlow, sans-serif;
  letter-spacing: 0.02em;
}
.bk-pt small {
  color: var(--bk-mut);
  font-size: 0.78rem;
  font-weight: 500;
}
.bk-pt em {
  font: normal 600 0.8rem/1.4 "Cairo", Barlow, sans-serif;
  color: #2b2f36;
}
.bk-rad {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid #c5c9d1;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.18s;
}
.bk-rad::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bk-red);
  transform: scale(0);
  transition: transform 0.18s;
}
.bk-opt input:checked + .bk-oc {
  border-color: var(--bk-red);
  background: #fffafa;
  box-shadow: 0 0 0 1px var(--bk-red) inset;
}
.bk-opt input:checked + .bk-oc .bk-rad {
  border-color: var(--bk-red);
}
.bk-opt input:checked + .bk-oc .bk-rad::after {
  transform: scale(1);
}
.bk-opt input:checked + .bk-oc .bk-oi {
  color: var(--bk-red);
}
.bk-opt input:focus-visible + .bk-oc {
  outline: 2px solid var(--bk-red);
  outline-offset: 3px;
}
.bk-f.bad .bk-oc {
  border-color: #e7a2a6;
}

/* الزر السفلي */
.bk-foot {
  padding: 12px 34px 18px 30px;
  background: #fff;
}
.bk-sum {
  margin: 0 0 10px;
  padding: 9px 14px;
  border: 1px solid #ffc9cd;
  border-radius: 10px;
  background: #fff1f2;
  color: #a50d16;
  font-weight: 700;
  font-size: 0.9rem;
}
.bk-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 10px 64px;
  border: 2px solid var(--bk-red);
  border-radius: 999px;
  background: #0b0b0e;
  color: #fff;
  font: 800 1.08rem Cairo, Barlow, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.15s;
}
.bk-submit:hover {
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.35);
}
.bk-submit:active {
  transform: translateY(1px);
}
.bk-submit:focus-visible,
.bk-x:focus-visible,
.bk-link:focus-visible {
  outline: 2px solid var(--bk-red);
  outline-offset: 3px;
}
.bk-go {
  position: absolute;
  top: 50%;
  left: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--bk-red);
  color: #fff;
}
.bk-go svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.bk-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 0 0;
  color: #6c7380;
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: center;
}
.bk-note svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 4px;
}

/* شاشة النجاح */
.bk-done {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  text-align: center;
}
.bk-done p {
  margin: 0 auto 14px;
  max-width: 440px;
  color: var(--bk-mut);
  line-height: 1.9;
}
.bk-done .bk-title {
  margin-bottom: 14px;
}
.bk-ok {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e8f7ee;
  color: #138a47;
}
.bk-ok svg {
  width: 38px;
  height: 38px;
  stroke-width: 2.4;
}
.bk-small {
  font-size: 0.9rem;
}
.bk-link {
  color: var(--bk-red);
  font-weight: 700;
  text-decoration: underline;
}
.bk-close {
  max-width: 320px;
  margin-top: 18px;
}

/* الشاشات المتوسطة والموبايل: الهوية تصير شريطًا علويًا مختصرًا */
@media (max-width: 960px) {
  .bk {
    width: 100%;
    margin: auto 0 0;
  }
  .bk-card {
    flex-direction: column;
    max-height: 95dvh;
    border-radius: 24px 24px 0 0;
  }
  .bk-side {
    flex: none;
  }
  .bk-side::before {
    display: none;
  }
  .bk-sbg {
    clip-path: none;
    background:
      linear-gradient(90deg, rgba(7, 7, 9, 0.92), rgba(7, 7, 9, 0.7)),
      url("../assets/images/hero-bg.jpg") 80% 25% / cover no-repeat,
      #09090b;
  }
  .bk-sin {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px 64px;
  }
  .bk-logo {
    font-size: 2.1rem;
  }
  .bk-pulse {
    width: 40px;
    height: 22px;
  }
  .bk-brand small {
    font-size: 0.56rem;
    letter-spacing: 0.26em;
  }
  .bk-hl,
  .bk-lead,
  .bk-feats,
  .bk-tag {
    display: none;
  }
  .bk-body {
    padding: 20px 22px 6px;
  }
  .bk .bk-title {
    font-size: 1.7rem;
  }
  .bk-foot {
    padding: 10px 22px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eceef2;
  }
}
@media (max-width: 640px) {
  .bk-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bk-plans {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .bk-oc {
    padding: 10px;
    gap: 6px;
    font-size: 0.88rem;
  }
  .bk-oc b {
    white-space: nowrap;
  }
  .bk-done {
    padding: 40px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bk[open],
  .bk[open]::backdrop {
    animation: none;
  }
}



/* ============================================================
   MFT Footer Styles (نفس ستايل J3 University)
   ضيفه في ملف الستايل الموجود عندك
   ============================================================ */

.ft {
  background: #0b0b0b
;
  color: #e9e9e9
;
  padding: 28px clamp(16px, 4vw, 48px) 16px;
  font-size: 14px;
  font-family: inherit;
  direction: rtl;
}

.ft .fg {
  direction:ltr;
  display: grid;
  grid-template-columns: auto 1fr auto;            /* لوجو | روابط | سوشيال */
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
}

/* البراند يسار */
.fbrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.fbrand:hover { color: inherit; }
.fbrand .flogo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
}
.fbrand .fbt b {
  display: block;
  font-size: 18px;
  letter-spacing: .04em;
  color: #fff;
}
.fbrand .fbt small {
  display: block;
  font-size: 10px;
  color: #9a9a9a
;
  letter-spacing: .14em;
  margin-top: 2px;
}

/* الروابط في النص */
.flinks {
  direction: rtl;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 26px);
  justify-content: center;
}
.flinks a {
  color: inherit;
  text-decoration: none;
  opacity: .9;
  transition: opacity .2s, color .2s;
  font-size: 14px;
}
.flinks a:hover { opacity: 1; color: #16a34a
; }

/* السوشيال يمين */
.fsoc {
  display: inline-flex;
  gap: 10px;
}
.fsoc a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  transition: background .2s, transform .2s;
}
.fsoc a:hover { background: #16a34a
; transform: translateY(-2px); }
.fsoc .fsc {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* فاصل بين الصف والشريط */
.fsep {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 4px 0 12px;
}

/* شريط الحقوق */
.ft .fbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #9a9a9a;
  
   margin-top: 0px;
}
.ft .fbar p { margin: 0; }
.ft .fbar a {
  color: #cfcfcf
;
  text-decoration: none;
  transition: color .2s;
}
.ft .fbar a:hover { color: #16a34a
; }

/* تجاوب: تحت 720px تتحول لعمود واحد */
@media (max-width: 720px) {
  .ft .fg {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 18px;
  }
  .fbrand { justify-content: center; }
  .fsoc { justify-content: center; }
  .ft .fbar { justify-content: center; text-align: center; }
}



/* ============================================================
   MFT Booking Card - CSS مقترح
   ضيفه في ملف الستايل عندك (أو استورد مft-booking.css)
   ============================================================ */

/* إخفاء/إظهار الصفحات */
.bk-step[hidden] { display: none !important; }

/* Progress dots (النقطتين في الـ header) */
.bk-bdot {
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .12);
  display: inline-block;
  transition: background .25s, box-shadow .25s;
}
.bk-bdot.on { background: var(--bk-accent, #16a34a); }
.bk-bdot.cur { box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

/* أزرار الفوتر (التالي / السابق / إرسال) */
.bk-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.bk-actions .bk-submit { flex: 1; }

/* حاوية الأيقونة داخل الأزرار */
.bk-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* سهم الـ SVG (path الأصلية مصممة للـ fill) */
.bk-arr {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform .2s;
}

/* ============================================================
   زرار "السابق" — تصميم أنضف مع hover ناعم
   ============================================================ */
.bk-back {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, .14);
  background: #fff;
  color: #333;
  padding: 12px 20px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s, color .2s;

    height: 35px;
}
.bk-back:hover {
  background: #f6f6f6;
  border-color: rgba(0, 0, 0, .24);
  color: var(--bk-accent, #16a34a);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.bk-back:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.bk-back:focus-visible {
  outline: 2px solid var(--bk-accent, #16a34a);
  outline-offset: 2px;
}

/* قلب السهم في زر "السابق" (scaleX سالب يعكسه أفقيًا) */
.bk-flip { transform: scaleX(-1); }

/* ============================================================
   أنيميشن السهم في الـ hover
   ============================================================ */
.bk-submit:hover .bk-arr { transform: translateX(-4px); }
.bk-back:hover .bk-arr { transform: translateX(4px); }
.bk-flip:hover .bk-arr { transform: translateX(4px) scaleX(-1); }

/* نص أحمر بلون الهوية (بديل style="color:red" المضمّن) */
.txt-red {
  color: var(--red);
}

/* =====================================================================
   أصناف مساعدة بديلة عن style="" المضمّنة (CSP بدون 'unsafe-inline').
   مُعلَّمة !important لتحافظ على أولوية التطبيق التي كانت للأنماط المضمّنة.
   لتغيير قيمة: عدّل هنا. لإضافة خلفية صورة جديدة: استخدم data-bg="رابط" في HTML.
   ===================================================================== */
.ba-x50 {
  --x: 50% !important;
}
.bg-dark-2 {
  background: var(--bg-dark-2) !important;
}
.cta2-lead {
  margin: 18px 0 6px; color: #ddd !important;
}
.gr135-1f2a3a-121212 {
  --g: linear-gradient(135deg, #1f2a3a, #121212) !important;
}
.gr135-2e2418-121212 {
  --g: linear-gradient(135deg, #2e2418, #121212) !important;
}
.gr135-3a1a2a-111 {
  --g: linear-gradient(135deg, #3a1a2a, #111) !important;
}
.gr135-3b2a1a-121212 {
  --g: linear-gradient(135deg, #3b2a1a, #121212) !important;
}
.gr135-4a1515-101010 {
  --g: linear-gradient(135deg, #4a1515, #101010) !important;
}
.gr135-5a1d14-141414 {
  --g: linear-gradient(135deg, #5a1d14, #141414) !important;
}
.gr145-101a14-000 {
  --g: linear-gradient(145deg, #101a14, #000) !important;
}
.gr145-14141f-000 {
  --g: linear-gradient(145deg, #14141f, #000) !important;
}
.gr145-181818-000 {
  --g: linear-gradient(145deg, #181818, #000) !important;
}
.gr145-1c1c1c-050505 {
  --g: linear-gradient(145deg, #1c1c1c, #050505) !important;
}
.gr145-241010-000 {
  --g: linear-gradient(145deg, #241010, #000) !important;
}
.gr145-2a0f0f-000 {
  --g: linear-gradient(145deg, #2a0f0f, #000) !important;
}
.gr145-2a1a10-050505 {
  --g: linear-gradient(145deg, #2a1a10, #050505) !important;
}
.gr145-3a1410-000 {
  --g: linear-gradient(145deg, #3a1410, #000) !important;
}
.ig-follow {
  margin: 20px 0 0 !important;
}
.is-hidden {
  display: none !important;
}
.list-reset {
  list-style: none; padding: 0 !important;
}
.mt-22 {
  margin-top: 22px !important;
}
.mt-36 {
  margin-top: 36px !important;
}
.mt-48 {
  margin-top: 48px !important;
}
.nf-text {
  margin: 0 0 28px; font-size: 1.1rem; line-height: 1.9 !important;
}
.sprite {
  position: absolute !important;
}
.w0 {
  width: 0% !important;
}



/* ============================================================
   MFT Booking Card – تحسينات الموبايل والتوحيد (يغلب ما قبله)
   ============================================================ */
.bk-pay-logo {
  width: 85px;
  height: 35px;
  object-fit: contain;
  flex-shrink: 0;
}
.bk-oc b { font-weight: 700; }
.bk-bdot.on { background: var(--bk-red); }
.bk-bdot.cur { box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.16); }
.bk-submit,
.bk-back { height: 46px; }
.bk-back { padding: 0 20px; border-radius: 999px; }
.bk-actions { gap: 10px; }
.bk-actions .bk-back { flex: 0 0 auto; }

@media (max-width: 960px) {
  .bk { max-height: 100dvh; }
  .bk-card { max-height: min(94dvh, 100dvh - 8px); }
  .bk-sin { padding: 10px 56px; min-height: 58px; }
  .bk-logo { font-size: 1.8rem; }
  .bk-x { top: 10px; left: 12px; width: 36px; height: 36px; }
}

@media (max-width: 640px) {
  .bk[open] { animation-name: bk-sheet; }
  @keyframes bk-sheet {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }

  .bk-card { border-radius: 22px 22px 0 0; }
  .bk-body {
    padding: 16px 16px 8px;
    scroll-padding: 16px 0 90px;
    -webkit-overflow-scrolling: touch;
  }
  .bk-top { margin-bottom: 8px; font-size: 0.8rem; }
  .bk .bk-title { font-size: 1.4rem; line-height: 1.4; }
  .bk-sub { margin-bottom: 14px; font-size: 0.9rem; line-height: 1.7; }

  /* الحقول: عمود واحد، مع إظهار (السن/الجنس) و(الوزن/الطول) جنب بعض */
  .bk-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .bk-grid > .bk-f { grid-column: 1 / -1; }
  .bk-grid > .bk-f[data-f="age"],
  .bk-grid > .bk-f[data-f="gender"],
  .bk-grid > .bk-f[data-f="weight"],
  .bk-grid > .bk-f[data-f="height"] { grid-column: auto; }

  .bk-f label, .bk-f legend { font-size: 0.88rem; line-height: 1.5; }

  /* 16px+ يمنع تكبير iOS التلقائي، و48px مساحة لمس مريحة */
  .bk input.bk-in,
  .bk select.bk-in,
  .bk textarea.bk-in { height: 48px; font-size: 16px; }
  .bk textarea.bk-in { height: auto; min-height: 64px; }
  .bk input.bk-in { padding: 0 14px 0 40px; }
  .bk select.bk-in { padding: 0 38px 0 30px; text-overflow: ellipsis; }
  .bk .bk-box > .bk-ic { left: 12px; width: 19px; height: 19px; margin-top: -9.5px; }
  .bk .bk-sel > .bk-ic { left: auto; right: 11px; }
  .bk .bk-sel > .bk-chev { left: 9px; width: 15px; height: 15px; margin-top: -7.5px; }

  /* الباقات: صف مضغوط لكل باقة (اسم + سعر + راديو) بدل كروت طويلة */
  .bk-plans { grid-template-columns: 1fr; gap: 8px; }
  .bk-pc { min-height: 56px; padding: 8px 12px; gap: 10px; }
  .bk-pt {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "n p" "s p";
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    text-align: right;
  }
  .bk-pt b { grid-area: n; font-size: 0.9rem; white-space: nowrap; }
  .bk-pt small { grid-area: s; font-size: 0.74rem; }
  .bk-pt em { grid-area: p; font-size: 0.86rem; white-space: nowrap; }
  .bk-rad { width: 20px; height: 20px; }

  /* طرق الدفع: كارتين متساويين، اللوجو فوق الاسم */
  .bk-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bk-pays .bk-oc {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 88px;
    padding: 10px 6px;
    text-align: center;
    font-size: 0.85rem;
  }
  .bk-pay-logo { width: 64px; height: 30px; }

  /* الفوتر ثابت أسفل الكارت */
  .bk-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .bk-submit { height: 48px; padding: 0 20px; font-size: 1rem; }
  .bk-back { height: 48px; padding: 0 18px; }
  .bk-note { margin-top: 8px; font-size: 0.74rem; line-height: 1.6; text-align: right; }
  .bk-sum { font-size: 0.82rem; padding: 8px 12px; }
  .bk-done { padding: 32px 18px; }
}

@media (max-width: 360px) {
  .bk-body { padding-inline: 12px; }
  .bk-foot { padding-inline: 12px; }
  .bk-pay-logo { width: 54px; height: 26px; }
}

/* زر السابق بألوان الهوية بدل الأخضر */
.bk .bk-back { color: #222; border-color: var(--bk-line); }
.bk .bk-back:hover { color: var(--bk-red); border-color: var(--bk-red); }
.bk .bk-back:focus-visible { outline-color: var(--bk-red); }

/* تنظيف الخطوط الجانبية: فاصل أحمر رفيع + سكرول نحيف */
.bk-side::before { right: -3px; }
.bk-body {
  scrollbar-width: thin;
  scrollbar-color: #d3d6dc transparent;
  scrollbar-gutter: auto;
}
.bk-body::-webkit-scrollbar { width: 6px; }
.bk-body::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.bk-body::-webkit-scrollbar-thumb { background: #d3d6dc; border-radius: 6px; }
.bk-body::-webkit-scrollbar-thumb:hover { background: #b6bac2; }
@media (max-width: 960px) {
  .bk-body::-webkit-scrollbar { width: 0; }
  .bk-body { scrollbar-width: none; }
}

/* ============================================================
   سكرول نحيف بدون أسهم في كل الموقع (بدل سكرول ويندوز الغامق)
   ============================================================ */
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }

/* داخل كارت الحجز (خلفية فاتحة) */
.bk .bk-body,
.bk .bk-body * { scrollbar-color: #d3d6dc transparent; }
.bk .bk-body::-webkit-scrollbar { width: 6px; }
.bk .bk-body::-webkit-scrollbar-thumb { background: #d3d6dc; }
.bk .bk-body::-webkit-scrollbar-thumb:hover { background: #b6bac2; }
@media (max-width: 960px) {
  .bk .bk-body { scrollbar-width: none; }
  .bk .bk-body::-webkit-scrollbar { width: 0; }
}

/* ============================================================
   ضبط أحجام الكارت على التليفون (باقات / دفع / رسالة / أزرار)
   ============================================================ */
@media (max-width: 640px) {
  /* الباقات */
  .bk-pc { min-height: 52px; padding: 7px 12px; }
  .bk .bk-oi { width: 22px; height: 22px; }
  .bk-pt b { font-size: 0.86rem; }
  .bk-pt small { font-size: 0.72rem; }
  .bk-pt em { font-size: 0.84rem; }
  .bk-rad { width: 19px; height: 19px; }

  /* طرق الدفع: لوجو أوضح وكارت أقل ارتفاعًا */
  .bk-pays { gap: 8px; }
  .bk-pays .bk-oc {
    min-height: 78px;
    gap: 5px;
    padding: 8px 6px;
    font-size: 0.84rem;
  }
  .bk-pays .bk-oc b { font-size: 0.84rem; font-weight: 700; }
  .bk-pay-logo { width: 76px; height: 34px; }

  /* الرسالة */
  .bk textarea.bk-in { min-height: 56px; font-size: 16px; resize: none; }

  /* التنبيه والأزرار والملاحظة */
  .bk-sum { font-size: 0.8rem; padding: 7px 12px; margin-bottom: 8px; }
  .bk-submit { height: 46px; font-size: 0.96rem; }
  .bk-back { height: 46px; font-size: 0.92rem; padding: 0 16px; }
  .bk-note { font-size: 0.72rem; line-height: 1.55; }
  .bk-f label, .bk-f legend { font-size: 0.86rem; }
}
@media (hover: none) {
  .bk .bk-back:hover {
    color: #222;
    border-color: var(--bk-line);
    transform: none;
    box-shadow: none;
    background: #fff;
  }
  .bk-submit:hover { box-shadow: none; }
}
@media (max-width: 360px) {
  .bk-pay-logo { width: 68px; height: 30px; }
  .bk-pt b { font-size: 0.82rem; }
}

/* ============================================================
   الفوتر: رابط سياسة الخصوصية
   ============================================================ */
.ft .fpriv {
  color: var(--on-dark-body);
  font: 700 0.9rem/1.5 "Cairo", var(--body), sans-serif;
  text-decoration: underline;
  text-decoration-color: rgba(230, 43, 39, 0.7);
  text-underline-offset: 5px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.ft .fpriv:hover { color: #fff; text-decoration-color: var(--brand-red); }

/* ============================================================
   صفحة الدكتور: شارات التخصص
   ============================================================ */
.dh-tags {
  list-style: none;
  margin: 16px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
}
.dh-tags li {
  padding: 7px 16px;
  border: 1px solid rgba(230, 43, 39, 0.45);
  border-radius: 999px;
  background: rgba(230, 43, 39, 0.07);
  color: #14181c;
  font: 700 0.92rem/1.4 "Cairo", var(--body), sans-serif;
}
@media (max-width: 640px) {
  .dh-tags { gap: 8px; padding-inline: 16px; }
  .dh-tags li { padding: 6px 13px; font-size: 0.84rem; }
}

/* ============================================================
   صفحة سياسة الخصوصية
   ============================================================ */
body.p-privacy {
  background: #f4f5f7;
  color: #14181c;
  font-family: "Cairo", var(--body), sans-serif;
}

/* ---- الهيرو ---- */
.pv-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 170px clamp(20px, 5vw, 80px) 110px;
  text-align: center;
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(230, 43, 39, 0.38), transparent 70%),
    radial-gradient(50% 80% at 5% 100%, rgba(230, 43, 39, 0.18), transparent 70%),
    #070707;
}
.pv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
}
.pv-hero-in { max-width: 820px; margin: 0 auto; }
.pv-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #ff6a66;
  font: 700 0.85rem/1.4 "Cairo", sans-serif;
  letter-spacing: 0.08em;
}
.pv-hero h1 {
  margin: 0 0 18px;
  color: #fff;
  font: 800 clamp(2.4rem, 6vw, 4rem)/1.2 "Cairo", sans-serif;
}
.pv-lead {
  max-width: 680px;
  margin: 0 auto 22px;
  color: #d3d3d3;
  font: 400 clamp(1rem, 2.2vw, 1.12rem)/1.95 "Cairo", sans-serif;
}
.pv-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(230, 43, 39, 0.16);
  border: 1px solid rgba(230, 43, 39, 0.4);
  color: #fff;
  font: 700 0.9rem/1.4 "Cairo", sans-serif;
}
.pv-date svg {
  width: 18px; height: 18px; fill: none; stroke: #ff6a66;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- المحتوى ---- */
.pv { padding: 0 clamp(16px, 5vw, 64px) clamp(56px, 8vw, 110px); }
.pv-hl {
  list-style: none;
  max-width: 1180px;
  margin: -56px auto 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 2;
}
.pv-hl li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}
.pv-hi {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(230, 43, 39, 0.1);
  color: var(--brand-red);
}
.pv-hi svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pv-hl b { display: block; font: 800 1rem/1.4 "Cairo", sans-serif; color: #14181c; }
.pv-hl p { margin: 2px 0 0; color: #5a6068; font: 400 0.88rem/1.6 "Cairo", sans-serif; }

.pv-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* ---- الفهرس ---- */
.pv-aside {
  position: sticky;
  top: 100px; /* أسفل الناف الثابت (76px عند التمرير) + مسافة */
  padding: 20px 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  max-height: calc(100dvh - 124px);
  overflow-y: auto;
}
.pv-aside-t { margin: 0 8px 12px; font: 800 0.95rem/1.4 "Cairo", sans-serif; color: #14181c; }
.pv-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pv-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #4b5258;
  font: 600 0.9rem/1.4 "Cairo", sans-serif;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.pv-toc a b {
  flex: none;
  min-width: 26px;
  color: #a2a8af;
  font: 800 0.78rem/1 "Cairo", sans-serif;
  font-variant-numeric: tabular-nums;
}
.pv-toc a:hover { background: #f1f2f4; color: #14181c; }
.pv-toc a[aria-current] { background: rgba(230, 43, 39, 0.09); color: var(--red-ink); }
.pv-toc a[aria-current] b { color: var(--brand-red); }
.pv-toc a:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

/* ---- الأقسام ---- */
.pv-art { min-width: 0; display: grid; gap: 18px; }
.pv-intro {
  margin: 0;
  padding: 18px 22px;
  border-radius: 16px;
  border-inline-start: 4px solid var(--brand-red);
  background: rgba(230, 43, 39, 0.06);
  color: #2b3036;
  font: 600 1rem/1.9 "Cairo", sans-serif;
}
.pv-s {
  scroll-margin-top: 100px; /* عشان عنوان القسم ما يختفيش تحت الناف عند الضغط على الفهرس */
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
}
.pv-sh { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pv-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: #0b0b0b;
  color: #fff;
  font: 800 0.95rem/1 "Cairo", sans-serif;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 0 var(--brand-red);
}
.pv-s h2 { margin: 0; color: #14181c; font: 800 clamp(1.2rem, 2.6vw, 1.5rem)/1.4 "Cairo", sans-serif; }
.pv-b { color: #3a4046; font: 400 1.02rem/2 "Cairo", sans-serif; }
.pv-b p { margin: 0 0 12px; }
.pv-b p:last-child { margin-bottom: 0; }
.pv-b strong { color: #14181c; font-weight: 800; }
.pv-b ul { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.pv-b li { position: relative; padding-inline-start: 26px; line-height: 1.85; }
.pv-b li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.78em;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--brand-red);
  transform: rotate(45deg);
}
.pv-sub { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: #f6f7f9; }
.pv-sub:last-child { margin-bottom: 0; }
.pv-sub h3 { margin: 0 0 8px; color: #14181c; font: 800 1.02rem/1.5 "Cairo", sans-serif; }
.pv-sub ul { margin-bottom: 0; }
.pv-note {
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff7e6;
  border: 1px solid #f3dca3;
  color: #6b4e0f;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ---- بطاقة التواصل ---- */
.pv-contact { background: #0b0b0b; border-color: #1f1f1f; color: #fff; }
.pv-contact h2 { color: #fff; }
.pv-contact .pv-n { background: var(--brand-red); box-shadow: none; }
.pv-contact .pv-b { color: #d3d3d3; }
.pv-dl { margin: 18px 0 22px; display: grid; gap: 10px; }
.pv-dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pv-dl dt { color: #a8a8a8; font-weight: 600; font-size: 0.92rem; }
.pv-dl dd { margin: 0; color: #fff; font-weight: 800; }
.pv-end { margin: 6px 0 0; text-align: center; color: #5a6068; font: 400 0.95rem/1.9 "Cairo", sans-serif; }

/* ---- موبايل / تابلت ---- */
@media (max-width: 960px) {
  .pv-hero { padding: 140px 20px 96px; }
  .pv-hl { grid-template-columns: 1fr; gap: 10px; margin: -44px auto 26px; }
  .pv-hl li { padding: 14px 16px; border-radius: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09); }
  .pv-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pv-aside {
    position: static;
    min-width: 0;
    max-width: none;
    max-height: none;
    padding: 0;
    margin-inline: calc(-1 * clamp(16px, 5vw, 64px)); /* الفهرس يلمس حافة الشاشة */
    background: transparent;
    border: 0;
    overflow: visible;
  }
  .pv-aside-t { display: none; }
  .pv-toc {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px clamp(16px, 5vw, 64px) 10px;
    scroll-padding-inline: clamp(16px, 5vw, 64px);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pv-toc li { flex: none; scroll-snap-align: center; }
  .pv-toc::-webkit-scrollbar { display: none; }
  .pv-toc a {
    flex: none;
    white-space: nowrap;
    min-height: 44px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 999px;
    font-size: 0.84rem;
  }
  .pv-toc a b { min-width: 0; }
  .pv-toc a[aria-current] { border-color: rgba(230, 43, 39, 0.5); }
  .pv-s { scroll-margin-top: 96px; }
}
@media (max-width: 640px) {
  .pv-hero { padding: 108px 18px 76px; }
  .pv-hero h1 { font-size: clamp(1.8rem, 8.5vw, 2.2rem); }
  .pv-eyebrow { margin-bottom: 12px; padding: 5px 14px; font-size: 0.78rem; }
  .pv-lead { font-size: 0.94rem; line-height: 1.85; margin-bottom: 18px; }
  .pv-date { padding: 7px 14px; font-size: 0.84rem; }
  .pv { padding-inline: 14px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); /* مساحة لزر واتساب العائم */ }
  .pv-aside { margin-inline: -14px; }
  .pv-toc { padding-inline: 14px; scroll-padding-inline: 14px; }
  .pv-hl { gap: 8px; margin: -40px auto 18px; }
  .pv-hl li { gap: 12px; padding: 12px 14px; border-radius: 14px; }
  .pv-hi { width: 40px; height: 40px; border-radius: 12px; }
  .pv-hi svg { width: 21px; height: 21px; }
  .pv-hl b { font-size: 0.95rem; }
  .pv-hl p { font-size: 0.83rem; line-height: 1.55; }
  .pv-art { gap: 12px; }
  .pv-intro { padding: 14px 16px; font-size: 0.93rem; line-height: 1.85; }
  .pv-s { padding: 18px 16px; border-radius: 18px; scroll-margin-top: 92px; }
  .pv-sh { gap: 12px; margin-bottom: 10px; }
  .pv-n { width: 36px; height: 36px; border-radius: 10px; font-size: 0.82rem; }
  .pv-s h2 { font-size: 1.08rem; line-height: 1.5; overflow-wrap: anywhere; }
  .pv-b { font-size: 0.95rem; line-height: 1.9; overflow-wrap: break-word; }
  .pv-b li { padding-inline-start: 22px; line-height: 1.8; }
  .pv-sub { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; }
  .pv-sub h3 { font-size: 0.98rem; }
  .pv-note { padding: 10px 14px; font-size: 0.9rem; line-height: 1.75; }
  .pv-contact .btn { width: 100%; justify-content: center; min-height: 52px; }
  .pv-dl > div { flex-direction: column; align-items: flex-start; }
  .pv-dl dd { align-self: stretch; text-align: right; overflow-wrap: anywhere; }
  .pv-end { font-size: 0.9rem; line-height: 1.85; }
}
@media (max-width: 360px) {
  .pv-hero { padding-inline: 14px; }
  .pv { padding-inline: 10px; }
  .pv-aside { margin-inline: -10px; }
  .pv-toc { padding-inline: 10px; scroll-padding-inline: 10px; }
  .pv-s { padding: 16px 13px; }
  .pv-sh { gap: 10px; }
  .pv-b { font-size: 0.92rem; }
}

/* ============================================================
   اسم العميل على كروت التحولات
   ============================================================ */
.tname,
.ba-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #fff;
  font: 800 1.12rem/1.3 "Cairo", var(--body), sans-serif;
  text-align: start;
  direction: rtl;
}
.tname::before,
.ba-name::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-red);
  transform: rotate(45deg);
}
.tinfo,
.ba-info { padding-top: 110px; }
@media (max-width: 640px) {
  .tname,
  .ba-name { margin-bottom: 8px; font-size: 1rem; }
  .tinfo,
  .ba-info { padding-top: 96px; }
}

/* صفحة الدكتور: الصورة تمر تحت الناف وليس فوقه.
   الهيدر لا يكوّن stacking context، فيبقى الناف (z-index:60) فوق كل المحتوى،
   والصورة فوق البانر فقط. */
.dh-banner { z-index: auto; }
.dh-av { z-index: 2; }

/* ============================================================
   قسم التواصل المبسّط (صفحة من نحن)
   ============================================================ */
.sec.dark.ctc {
  padding: inherit;
  background: linear-gradient(-157deg, rgb(5 5 6 / 54%), rgb(5 5 6 / 43%)), url(../assets/images/back1.jpg) center center / cover no-repeat, #07070700;
}
.ctc-wrap { max-width: 900px; margin: 0 auto; }
.ctc-head { text-align: center; margin-bottom: 18px; }
.ctc-head .ttl { margin-bottom: 10px; }
.ctc-p {
  max-width: 460px;
  margin: 0 auto;
  color: var(--on-dark-body);
  font: 400 1rem/1.8 "Cairo", var(--body), sans-serif;
}
.ctc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* الفورم: مصغّر */
.ctc-form {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(8, 8, 9, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ctc-form label {
  display: grid;
  gap: 6px;
  color: #fff;
  font: 700 0.88rem/1.4 "Cairo", var(--body), sans-serif;
}
.ctc-form .req { color: #ff5a55; }
.ctc-form input,
.ctc-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 14px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 400 16px/1.5 "Cairo", var(--body), sans-serif;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ctc-form textarea { height: auto; min-height: 64px; padding: 10px 14px; resize: none; }
.ctc-form ::placeholder { color: rgba(255, 255, 255, 0.42); }
.ctc-form input:focus,
.ctc-form textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  background: rgba(255, 255, 255, 0.09);
}
.ctc-form .btn { width: 100%; justify-content: center; margin-top: 2px; }
.ctc-form .cf-status {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(40, 180, 90, 0.14);
  color: #7ee2a0;
  font: 600 0.88rem/1.6 "Cairo", sans-serif;
}
.ctc-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font: 400 0.76rem/1.6 "Cairo", sans-serif;
  text-align: center;
}

/* قنوات التواصل: صفوف بسيطة */
.ctc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctc-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ctc-links a:hover,
.ctc-links a:focus-visible { border-color: var(--brand-red); background: rgba(230, 43, 39, 0.1); }
.ctc-links svg {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(230, 43, 39, 0.16);
  color: #ff6a66;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctc-links li:first-child svg { fill: currentColor; stroke: none; }
.ctc-links span { font: 700 0.95rem/1.4 "Cairo", sans-serif; }
.ctc-links em {
  margin-inline-start: auto;
  color: var(--on-dark-body);
  font: 400 0.82rem/1.4 var(--body);
  font-style: normal;
}

@media (max-width: 760px) {
  .ctc-grid { grid-template-columns: 1fr; }
  .ctc-form { padding: 16px; gap: 10px; }
  .ctc-head { margin-bottom: 14px; }
  .ctc-links a { padding: 10px 12px; }
  .ctc-links em { font-size: 0.78rem; }
}

/* كارت الحجز: إخفاء أسهم الزيادة/النقصان في حقول الأرقام (السن/الوزن/الطول) */
.bk input.bk-in[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.bk input.bk-in[type="number"]::-webkit-outer-spin-button,
.bk input.bk-in[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* الرئيسية: قسم "هل أنت مستعد لتحولك؟" بارتفاع 400px (على الشاشات الصغيرة بيتمدد لو المحتوى أطول) */
body.p-home .cta2 {
  height: 400px;
  padding-block: 24px;
  display: grid;
  align-items: center;
}
body.p-home .cta2 .ttl { margin-bottom: 8px; }
body.p-home .cta2 .btn { margin-top: 8px; }
@media (max-width: 640px) {
  body.p-home .cta2 { height: auto; min-height: 400px; padding-block: 44px; }
}

/* الناف: الروابط في سطر واحد (بعد تغيير "تواصل" إلى "تواصل معنا") */
.nav .links a { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1360px) {
  .nav .links { gap: clamp(10px, 1.3vw, 18px); }
  .nav .links a { font-size: 14.5px; }
  .nav > .pill { white-space: nowrap; }
}

/* ===== home: programs — "board" layout (white page, cutout coach, photo grid) ===== */
body.p-home #programs.sp {
  padding: clamp(40px, 6vw, 88px) clamp(14px, 4vw, 48px);
}
body.p-home #programs .sp-head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}
body.p-home #programs .sp-ttl {
  margin: 0;
  font: 800 clamp(1.9rem, 3.6vw, 2.9rem) / 1.3 "Cairo", sans-serif;
  color: var(--on-light);
}
body.p-home #programs .sp-ttl em {
  font-style: normal;
  color: var(--red-ink);
}
body.p-home #programs .sp-intro {
  margin: 14px auto 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--on-light-body);
}
body.p-home #programs .sp-board {
  --sp-red: #e62b27;
  --sp-ink: #0d0d0d;
  --sp-body: #4a4a4a;
  position: relative;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
  max-width: 1200px;
  margin: 0 auto;
  color: var(--sp-ink);
}
body.p-home #programs .sp-side {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
}
body.p-home #programs .sp-stick {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(760px, calc(100vh - 116px));
}
body.p-home #programs .sp-stick::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% -4% 0 -4%;
  background: radial-gradient(ellipse at 45% 55%, #f0f1f3 0%, rgba(240, 241, 243, 0) 68%);
  pointer-events: none;
}
body.p-home #programs .sp-coach {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  object-position: 50% 100%;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent);


}
body.p-home #programs .sp-list {
  grid-column: 2 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 40px);
  align-content: start;
  direction: rtl;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.p-home #programs .sp-item {
  min-width: 0;
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  text-align: start;
}
body.p-home #programs .sp-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
body.p-home #programs .sp-body .pg-link {
  align-self: flex-start;
  margin-top: auto !important;
}
body.p-home #programs .sp-body .pg-info + .pg-link {
  margin-top: auto !important;
}
body.p-home #programs .sp-i3,
body.p-home #programs .sp-i6 { grid-column: 1 / -1; }
body.p-home #programs .sp-i6 { margin-bottom: 0; }

body.p-home #programs .sp-tile {
  position: relative;
  aspect-ratio: 1 / 1.05;
}
body.p-home #programs .sp-ph {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}
body.p-home #programs .sp-i3 .sp-tile,
body.p-home #programs .sp-i6 .sp-tile {
  aspect-ratio: 16 / 6.6;
}
body.p-home #programs .sp-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.p-home #programs .sp-item:hover .sp-ph img {
  transform: scale(1.045);
}
body.p-home #programs .sp-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 45%);
  pointer-events: none;
}
body.p-home #programs .sp-kind {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 10px;
  direction: ltr;
  font: 700 0.72rem/1 var(--body);
  letter-spacing: 0.1em;
  color: #fff;
}
body.p-home #programs .sp-chev {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 0;
  transform: translateY(50%);
  line-height: 0;
  pointer-events: none;
}
body.p-home #programs .sp-chev svg {
  display: block;
  width: 52px;
  height: 18px;
  fill: #e62b27;
}
body.p-home #programs .sp-chev .c2 { opacity: 0.55; }
body.p-home #programs .sp-chev .c3 { opacity: 0.3; }
body.p-home #programs .sp-body {
  padding-top: 22px;
}
body.p-home #programs .sp-body h3 {
  margin: 0;
  font: 800 clamp(1.15rem, 1.7vw, 1.45rem) / 1.35 "Cairo", sans-serif;
  color: var(--sp-ink);
}
body.p-home #programs .sp-body .pg-desc {
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--sp-body);
}
body.p-home #programs .sp-body .pg-info {
  margin: 14px 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
body.p-home #programs .sp-body .pg-info div {
  padding: 9px 12px;
  background: #f5f5f6;
  border-inline-start: 3px solid var(--sp-red);
}
body.p-home #programs .sp-body .pg-info dt {
  margin: 0 0 2px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--red-ink, #c81f1b);
}
body.p-home #programs .sp-body .pg-info dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--sp-body);
}
body.p-home #programs .sp-body .pg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 12px 0 0;
  padding: 8px 16px;
  border: 2px solid #c81f1b;
  border-radius: 0;
  background: transparent;
  color: #c81f1b;
  font: 800 0.9rem/1.2 "Cairo", sans-serif;
  transition: background 0.2s, color 0.2s;
}
body.p-home #programs .sp-body .pg-link:hover,
body.p-home #programs .sp-body .pg-link:focus-visible {
  background: #c81f1b;
  color: #fff;
}
body.p-home #programs .sp-body .pg-link:focus-visible {
  outline: 3px solid #0d0d0d;
  outline-offset: 2px;
}
body.p-home #programs .sp-body .pg-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1);
}
/* wide tiles: info sits in two columns under the photo */
body.p-home #programs .sp-i3 .pg-info,
body.p-home #programs .sp-i6 .pg-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

@media (max-width: 899px) {
  body.p-home #programs .sp-board {
    display: block;
  }
  body.p-home #programs .sp-side {
    margin-bottom: 22px;
  }
  body.p-home #programs .sp-stick {
    position: relative;
    top: auto;
    min-height: 0;
  }
  body.p-home #programs .sp-coach {
    width: 62%;
    max-width: 300px;
    margin: 0 auto;
  }
  body.p-home #programs .sp-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
  body.p-home #programs .sp-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.p-home #programs .sp-i3,
  body.p-home #programs .sp-i6 {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 599px) {
  body.p-home #programs .sp-list {
    display: block;
  }
  body.p-home #programs .sp-tile,
  body.p-home #programs .sp-i3 .sp-tile,
  body.p-home #programs .sp-i6 .sp-tile {
    aspect-ratio: 4 / 3;
  }
  body.p-home #programs .sp-i3 .pg-info,
  body.p-home #programs .sp-i6 .pg-info {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.p-home #programs .sp-body .pg-link,
  body.p-home #programs .sp-ph img { transition: none; }
  body.p-home #programs .sp-item:hover .sp-ph img { transform: none; }
}

/* ===== home: programs — refinement (clean, light, no board background) ===== */
body.p-home #programs .sp-item {
  margin-bottom: clamp(30px, 3.6vw, 56px);
}
body.p-home #programs .sp-i6 {
  margin-bottom: 0;
}
body.p-home #programs .sp-ph {
  box-shadow: 0 26px 48px -28px rgba(0, 0, 0, 0.6);
}
body.p-home #programs .sp-ph::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent 42%);
}
body.p-home #programs .sp-kind {
  left: 16px;
  bottom: 14px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.p-home #programs .sp-chev {
  right: 18px;
}
body.p-home #programs .sp-body {
  padding-top: 28px;
}
body.p-home #programs .sp-body h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.35;
}
body.p-home #programs .sp-body .pg-desc {
  margin-top: 8px;
  font-size: 1rem;
}
body.p-home #programs .sp-body .pg-info {
  margin: 18px 0 20px;
  gap: 10px;
}
body.p-home #programs .sp-body .pg-info div {
  padding: 12px 16px;
  background: #fff;
  border-inline-start: 3px solid var(--sp-red);
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.45);
}
body.p-home #programs .sp-body .pg-link {
  padding: 11px 22px;
  border: 0;
  background: #c81f1b;
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 14px 26px -14px rgba(200, 31, 27, 0.7);
  transition: background 0.2s, gap 0.2s, box-shadow 0.2s;
}
body.p-home #programs .sp-body .pg-link:hover,
body.p-home #programs .sp-body .pg-link:focus-visible {
  background: #a51814;
  gap: 12px;
}
body.p-home #programs .sp-stick::before {
  inset: 4% -10% 0 -10%;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(230, 43, 39, 0.16), rgba(230, 43, 39, 0) 62%),
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
}
@media (max-width: 899px) {
  body.p-home #programs .sp-body {
    padding-top: 24px;
  }
}

/* ===== home: programs CTA — same look as the header "احجز مكانك الآن" pill ===== */
body.p-home #programs .sp-body .pg-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  direction: rtl;
  width: auto;
  height: auto;
  padding: 5px 23px 5px 17px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3a30 0%, #e01414 55%, #b30d0d 100%);
  color: #fff;
  font: 700 16px/1.7 var(--body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 8px 24px rgba(239, 27, 27, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.3s;
}
body.p-home #programs .sp-body .pg-link:hover,
body.p-home #programs .sp-body .pg-link:focus-visible {
  gap: 14px;
  background: linear-gradient(135deg, #ff3a30 0%, #e01414 55%, #b30d0d 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(239, 27, 27, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
body.p-home #programs .sp-body .pg-link .dot {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #ef1b1b;
  transition: transform 0.4s var(--ease);
}
body.p-home #programs .sp-body .pg-link:hover .dot,
body.p-home #programs .sp-body .pg-link:focus-visible .dot {
  transform: rotate(45deg);
}
body.p-home #programs .sp-body .pg-link .dot svg {
  width: 18px;
  height: 18px;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.p-home #programs .sp-body .pg-link,
  body.p-home #programs .sp-body .pg-link .dot { transition: none; }
  body.p-home #programs .sp-body .pg-link:hover,
  body.p-home #programs .sp-body .pg-link:focus-visible { transform: none; }
  body.p-home #programs .sp-body .pg-link:hover .dot,
  body.p-home #programs .sp-body .pg-link:focus-visible .dot { transform: none; }
}

/* ===== home: programs — poster look (red slab behind coach, rounded photos, lighter text) ===== */
/* coach standing on a red slab */
body.p-home #programs .sp-stick::before {
  inset: auto 4% 0 4%;
  height: 40%;
  background: linear-gradient(200deg, #ff3a30 0%, #e01414 55%, #a30c0c 127%);
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: none;
}

body.p-home #programs .sp-coach {
  -webkit-mask-image: none;
  mask-image: none;
  width: 110%;
  max-width: none;
  max-height: calc(100vh - 80px);
  height: auto;
  margin: 0 auto;
  object-position: 50% 100%;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));

  transform: scale(1.1);
  transform-origin: center bottom;
          margin-top: 20px;
}



body.p-home #programs .sp-stick {
  justify-content: flex-end;
}

/* photos */
body.p-home #programs .sp-ph {
  border-radius: 14px;
}
body.p-home #programs .sp-tile {
  transition: transform 0.45s var(--ease);
}
body.p-home #programs .sp-item:hover .sp-tile {
  transform: translateY(-5px);
}
body.p-home #programs .sp-no {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 16px;
  direction: ltr;
  font: 400 2.6rem/1 var(--display);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
}
body.p-home #programs .sp-kind {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* text: lighter, no boxes */
body.p-home #programs .sp-body h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}
body.p-home #programs .sp-body .pg-info {
  margin: 16px 0 22px;
  gap: 0;
}
body.p-home #programs .sp-body .pg-info div {
  padding: 11px 0;
  background: none;
  box-shadow: none;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
body.p-home #programs .sp-body .pg-info dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 3px;
  font-size: 0.82rem;
  color: #c81f1b;
}
body.p-home #programs .sp-body .pg-info dt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e62b27;
}
body.p-home #programs .sp-body .pg-info dd {
  padding-inline-start: 15px;
  font-size: 0.93rem;
}

/* wide programs: photo beside text */
@media (min-width: 900px) {
  body.p-home #programs .sp-i3,
  body.p-home #programs .sp-i6 {
    flex-direction: row;
    align-items: center;
    gap: clamp(22px, 2.6vw, 38px);
  }
  body.p-home #programs .sp-i6 {
    flex-direction: row-reverse;
  }
  body.p-home #programs .sp-i3 .sp-tile,
  body.p-home #programs .sp-i6 .sp-tile {
    flex: 0 0 52%;
    aspect-ratio: 4 / 3.3;
  }
  body.p-home #programs .sp-i3 .sp-body,
  body.p-home #programs .sp-i6 .sp-body {
    padding-top: 0;
  }
  body.p-home #programs .sp-i3 .pg-info,
  body.p-home #programs .sp-i6 .pg-info {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 899px) {
  body.p-home #programs .sp-coach {
    width: 72%;
    max-width: 300px;
    max-height: none;
  }
  body.p-home #programs .sp-stick::before {
    inset: auto 8% 0 8%;
    height: 40%;
  }
  body.p-home #programs .sp-side {
    margin-bottom: 34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.p-home #programs .sp-tile { transition: none; }
  body.p-home #programs .sp-item:hover .sp-tile { transform: none; }
}

/* photo 05 has a black bar on its left edge — crop it out, and keep numbers readable on bright photos */
body.p-home #programs .sp-i5 .sp-ph img {
  transform: scale(1.24);
  transform-origin: 100% 40%;
}
body.p-home #programs .sp-i5:hover .sp-ph img {
  transform: scale(1.29);
}
body.p-home #programs .sp-no {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  body.p-home #programs .sp-i5:hover .sp-ph img { transform: scale(1.24); }
}

/* photos fill their frame instead of stretching it (keeps the wide tiles at their set ratio) */
body.p-home #programs .sp-ph img {
  position: absolute;
  inset: 0;
}

/* ===== hero CTAs — phone: full-width stacked pills (primary = header-pill look, secondary = glass) ===== */
.hero .cta .dot {
  display: none; /* الدائرة للموبايل فقط */
}
@media (max-width: 640px) {
  .hero .inner {
    padding-top: clamp(150px, calc(100vh - 488px), 312px);
    padding-top: clamp(150px, calc(100svh - 488px), 312px);
  }
  .hero .ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 340px;
    margin-top: 26px;
  }
  .hero .cta {
    position: relative;
    flex: none;
    width: 100%;
    min-height: 56px;
    padding: 0 60px;
    border-radius: 999px;
    font-family: "Cairo", var(--body);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    color: #fff;
  }
  .hero .cta .dot {
    position: absolute;
    top: 50%;
    left: 8px;
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    color: #ef1b1b;
    place-items: center;
    transition: transform 0.35s var(--ease);
  }
  .hero .cta .dot svg {
    width: 18px;
    height: 18px;
  }
  /* الرئيسي: نفس شكل زر الهيدر */
  .hero .cta:not(.alt) {
    border: 0;
    background: linear-gradient(135deg, #ff3a30 0%, #e01414 55%, #b30d0d 100%);
    box-shadow:
      0 10px 28px rgba(239, 27, 27, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  /* الثانوي: زجاجي هادئ */
  .hero .cta.alt {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .hero .cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
  @media (max-height: 680px) {
    .hero .ctas {
      gap: 8px;
      margin-top: 16px;
    }
    .hero .cta {
      min-height: 48px;
    }
    .hero .cta .dot {
      width: 34px;
      height: 34px;
    }
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .hero .cta .dot { transition: none; }
}

/* ===== hero sub-headline — rotates through 3 sentences (CSS only, no JS) ===== */
.hero .sub-rot {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
}
.hero .sub-rot > span {
  grid-area: 1 / 1; /* الجمل الثلاث فوق بعض في نفس المكان؛ الارتفاع = أطول جملة فلا يقفز ما تحتها */
  opacity: 0;
  animation: subRot 10.5s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both;
}
.hero .sub-rot > span:nth-child(1) { animation-delay: -0.42s; } /* الأولى ظاهرة من أول لحظة */
.hero .sub-rot > span:nth-child(2) { animation-delay: 3.08s; }
.hero .sub-rot > span:nth-child(3) { animation-delay: 6.58s; }
@keyframes subRot {
  0%   { opacity: 0; transform: translateY(14px); }
  4%   { opacity: 1; transform: none; }
  29%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .sub-rot > span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero .sub-rot > span:not(:first-child) {
    display: none; /* بدون حركة: الجملة الأولى فقط */
  }
}