/* ==========================================================
   Seet (صيت) — homepage build (layout + motion pattern study)
   rem is scaled to the viewport: 1rem = 1px at 1920 wide
   ========================================================== */
:root {
  /* Seet brand palette */
  --color-dark: #240046;
  --color-violet: #621dcd;
  --color-lavender: #e5e1ff;
  --color-gold: #fdb112;
  --color-magenta: #dd055b;
  --color-magenta-light: #ffd9e7;
  --color-orange: #fd4504;
  --color-ink: #191823;
  --color-white: #f8f8f8;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-accent: var(--font-display);
  --font-body: "Poppins", "Fatimah Arabic", system-ui, sans-serif;
  --font-arabic: "Fatimah Arabic", "Poppins", sans-serif;
  --radius-card: 37rem;
  --radius-pill: 999rem;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@font-face { font-family: "Poppins"; src: url("../assets/fonts/Poppins-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/Poppins-SemiBold.woff") format("woff"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Fatimah Arabic"; src: url("../assets/fonts/FatimahArabic-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fatimah Arabic"; src: url("../assets/fonts/FatimahArabic-Bold.woff") format("woff"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Fatimah Arabic"; src: url("../assets/fonts/FatimahArabic-Heavy.woff") format("woff"); font-weight: 800 900; font-display: swap; }

html { font-size: calc(100vw / 1920); background: var(--color-dark); }
@media (max-width: 767px) { html { font-size: calc(100vw / 390); } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-dark); color: var(--color-white);
  font-family: var(--font-body); font-size: 22rem; line-height: 1.35;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (max-width: 767px) { body { font-size: 15rem; } }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }
.hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.additional-font { font-family: var(--font-accent); font-weight: 400; letter-spacing: 0; font-size: .9em; }
.container { width: 100%; max-width: 1840rem; margin: 0 auto; padding: 0 40rem; position: relative; }
@media (max-width: 767px) { .container { padding: 0 16rem; } }

@media (pointer: fine) { html.has-cursor, html.has-cursor * { cursor: none !important; } }

/* ---------- menu roll (hover text roll) ---------- */
.menu-roll { display: inline-block; overflow: hidden; vertical-align: top; height: 1.3em; line-height: 1.3em; }
.menu-roll-stack { display: flex; flex-direction: column; transition: transform 500ms var(--ease-out); }
.menu-roll-line { display: block; height: 1.3em; }
a:hover .menu-roll-stack, button:hover .menu-roll-stack { transform: translateY(-50%); }

/* ---------- bubble buttons ---------- */
.btn-bubble { position: relative; overflow: hidden; isolation: isolate; }
.btn-bubble__circle {
  position: absolute; left: var(--bx, 50%); top: var(--by, 50%); width: 10rem; height: 10rem;
  border-radius: 50%; background: var(--bubble, var(--color-dark)); transform: translate(-50%, -50%) scale(0);
  transition: transform 600ms var(--ease-out); z-index: -1; pointer-events: none;
}
.btn-bubble.is-hover .btn-bubble__circle { transform: translate(-50%, -50%) scale(var(--bs, 60)); }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 30rem; pointer-events: none; }
.header_inner { display: flex; justify-content: space-between; align-items: center; }
.header_nav, .header_cta { pointer-events: auto; }
html:not(.is-ready) .header_nav, html:not(.is-ready) .header_cta { opacity: 0; scale: .5; }
.header_nav, .header_cta { transition: scale 450ms var(--ease-out) 200ms, opacity 450ms var(--ease-out) 200ms; }
.header_nav { position: relative; width: 560rem; height: 54rem; display: flex; align-items: center; padding: 0 60rem 0 22rem; gap: 36rem; }
.header_bg { position: absolute; inset: 0; z-index: -1; }
.header_bg svg { width: 100%; height: 100%; backdrop-filter: blur(12px); }
.header_logo { display: block; width: 92rem; height: 38rem; color: var(--color-white); fill: currentColor; }
.header_logo svg { width: 100%; height: 100%; display: block; }
.header_links { display: flex; gap: 30rem; font-size: 19rem; text-transform: lowercase; }
.header_menu-button { display: none; width: 30rem; height: 20rem; margin-left: auto; position: relative; }
.header_menu-button i { position: absolute; left: 0; right: 0; height: 2rem; background: currentColor; border-radius: 2rem; }
.header_menu-button i:nth-child(1) { top: 0 } .header_menu-button i:nth-child(2), .header_menu-button i:nth-child(3) { top: 9rem } .header_menu-button i:nth-child(4) { bottom: 0 }
.button-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 54rem; padding: 0 30rem;
  border-radius: var(--radius-pill); background: var(--color-gold); color: var(--color-dark);
  font-weight: 600; font-size: 19rem; text-transform: lowercase; --bubble: var(--color-magenta); transition: color .4s;
}
.button-pill.is-hover { color: var(--color-white); }
@media (max-width: 767px) {
  .header { padding-top: 14rem; }
  .header_nav { width: 230rem; height: 44rem; padding: 0 34rem 0 16rem; }
  .header_links { display: none; }
  .header_menu-button { display: block; }
  .header_logo { width: 68rem; height: 28rem; }
  .button-pill { height: 44rem; font-size: 14rem; padding: 0 18rem; }
}

/* ---------- hero ---------- */
.section_hero { position: relative; min-height: 100vh; min-height: var(--vhx, 100vh); display: flex; align-items: center; overflow: hidden; padding: 120rem 0 140rem; }
.hero_title {
  position: relative; text-align: center; font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700;
  font-size: 158rem; line-height: 1; letter-spacing: -.01em; color: var(--color-white); max-width: 1500rem; margin: 0 auto;
}
.hero_title .t-line { display: block; }
.hero_title .t-a, .hero_title .t-b { display: inline-block; position: relative; z-index: 1; }
.hero_title .t-b { font-family: var(--font-accent); font-weight: 400; letter-spacing: 0; color: var(--color-gold); font-size: .9em; }
.hero_title .t-b.pink { color: var(--color-magenta); }
.hero_title .over-line { position: relative; z-index: 5; display: inline-block; }
.hero_line-wrapper { position: absolute; inset: -4% -8% -2% -8%; z-index: 3; pointer-events: none; }
.hero_line { width: 100%; height: 100%; overflow: visible; }
.hero_line .draw-path { fill: none; stroke: var(--color-magenta); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.hero_line .pen { fill: var(--color-gold); }
.hero_line-circle { position: absolute; width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; border-radius: 50%; background: var(--color-gold); border: 5rem solid var(--color-dark); transform: scale(0); }
.hero_decoration { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.hero_dec { position: absolute; display: grid; place-items: center; pointer-events: auto; }
.hero_dec > * { grid-area: 1 / 1; }
.hero_dec-shape svg { width: 100%; height: 100%; display: block; }
.dec-label-text { position: relative; z-index: 1; text-align: center; font-weight: 600; font-size: 19rem; line-height: 1.1; color: var(--color-dark); padding: 0 10rem; }
.dec-label-text.white { color: var(--color-white); }
.dec-num { display: block; font-family: var(--font-arabic); font-weight: 900; font-size: 40rem; line-height: 1.1; }
.hero_dec { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 80%; }
.hero_dec > * { grid-area: auto; }
.hero_dec-el { width: 100%; }
.hero_dec-el svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero_dec .dec-label-text { margin-top: -18rem; background: var(--color-white); color: var(--color-dark); border-radius: var(--radius-pill); padding: 10rem 20rem; font-size: 16rem; white-space: nowrap; box-shadow: 0 10rem 30rem rgba(0,0,0,.25); }
.hero_dec .dec-num { display: inline; font-size: 22rem; margin-right: 8rem; }
.hero_dec.is-palm { top: 12%; left: 7%; width: 150rem; } .hero_dec.is-palm .hero_dec-el { fill: var(--color-gold); }
.hero_dec.is-swords { top: 15%; right: 9%; width: 190rem; } .hero_dec.is-swords .hero_dec-el { fill: var(--color-lavender); }
.hero_dec.is-falcon { bottom: 11%; left: 13%; width: 150rem; } .hero_dec.is-falcon .hero_dec-el { fill: var(--color-magenta); }
.hero_dec.is-camel { bottom: 13%; right: 15%; width: 140rem; } .hero_dec.is-camel .hero_dec-el { fill: var(--color-orange); }
.hero_dec.is-oud { top: 44%; right: 3%; width: 100rem; } .hero_dec.is-oud .hero_dec-el { fill: var(--color-gold); }
.hero_dec.is-dallah { bottom: 3%; left: 45%; width: 140rem; } .hero_dec.is-dallah .hero_dec-el { fill: var(--color-lavender); }
.hero_adaptive { display: none; }
@media (max-width: 767px) {
  .section_hero { padding: 110rem 0 90rem; }
  .hero_title { display: none; }
  .hero_adaptive { display: block; position: relative; z-index: 2; text-align: center; font-family: var(--font-display); letter-spacing: -0.035em; font-size: 58rem; line-height: 1; }
  .hero_adaptive .hero_a-line { display: block; }
  .hero_adaptive .additional-font { font-family: var(--font-accent); font-weight: 400; letter-spacing: 0; color: var(--color-gold); font-size: .9em; }
  .hero_line-wrapper { display: none; }
  .dec-label-text { font-size: 11rem; } .dec-num { font-size: 20rem; }
  .hero_dec .dec-label-text { font-size: 9rem; padding: 5rem 9rem; margin-top: -8rem; } .hero_dec .dec-num { font-size: 12rem; margin-right: 4rem; }
  .hero_dec.is-palm { top: 11%; left: 4%; width: 64rem; }
  .hero_dec.is-swords { top: 12%; right: 5%; width: 80rem; }
  .hero_dec.is-falcon { bottom: 9%; left: 7%; width: 66rem; }
  .hero_dec.is-camel { bottom: 12%; right: 7%; width: 62rem; }
  .hero_dec.is-oud { top: 36%; right: 2%; width: 42rem; }
  .hero_dec.is-dallah { bottom: 2%; left: 42%; width: 60rem; }
}

.hero_wave { position: relative; z-index: 2; margin-bottom: -2px; line-height: 0; }
.hero_wave svg, .bg-wave svg { width: 100%; height: auto; display: block; }

/* ---------- about (sticky, tiles fly into sentence) ---------- */
.about_wrapper { position: relative; height: 420vh; background: var(--color-lavender); }
.section_about { position: sticky; top: 0; height: 100vh; overflow: hidden; color: var(--color-dark); }
.about_base { padding-top: 110rem; text-align: center; }
.subtitle { font-size: 22rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 26rem; }
.about_title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 104rem; line-height: 1.02; }
.about_title span { display: block; }
.about_title .additional-font { color: var(--color-magenta); }
.about_desc { display: flex; justify-content: center; gap: 120rem; margin-top: 50rem; text-align: left; font-size: 24rem; }
.about_desc-lead { font-weight: 700; max-width: 380rem; }
.about_desc-stats { max-width: 520rem; }
.about_tiles { position: absolute; left: 0; right: 0; bottom: 70rem; display: flex; justify-content: center; gap: 40rem; }
.about_tile { position: relative; width: 250rem; height: 250rem; perspective: 900rem; will-change: transform; }
.about_tile.is-wide { width: 272rem; }
.tile-icon { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tile-icon svg { width: 100%; height: 100%; display: block; }
.tile-icon.b { transform: rotateY(180deg); }
.about_final { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.about_sentence { font-family: var(--font-display); letter-spacing: -0.035em; font-size: 86rem; line-height: 1.25; text-align: center; }
.as-line { display: block; white-space: nowrap; }
.as-word { display: inline-block; opacity: 0; transform: translateY(40rem); }
.as-word .additional-font { color: var(--color-magenta); }
.as-slot { display: inline-block; width: 124rem; height: 112rem; vertical-align: -14rem; margin: 0 14rem; }
.as-slot.is-wide { width: 135rem; }
@media (max-width: 767px) {
  .about_base { padding-top: 90rem; }
  .about_title { font-size: 32rem; }
  .about_desc { flex-direction: column; gap: 12rem; font-size: 15rem; padding: 0 10rem; margin-top: 24rem; }
  .about_tiles { gap: 8rem; bottom: 60rem; }
  .about_tile, .about_tile.is-wide { width: 62rem; height: 62rem; }
  .about_sentence { font-size: 23rem; }
  .as-slot, .as-slot.is-wide { width: 36rem; height: 34rem; margin: 0 4rem; vertical-align: -5rem; }
}

/* ---------- trust ---------- */
.section_trust { position: relative; background: var(--color-lavender); color: var(--color-dark); padding: 120rem 0 200rem; overflow: hidden; }
.trust_wrapper { display: grid; grid-template-columns: 1fr 640rem; align-items: center; gap: 40rem; }
.trust_title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 124rem; line-height: 1.02; }
.highlighted-text { display: inline; color: var(--color-dark); border-radius: 30rem; padding: 0 20rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.trust_icon { width: 640rem; aspect-ratio: 1; }
.trust_icon svg { width: 100%; height: 100%; overflow: visible; }
.trust_button, .cta-button {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10rem; margin-top: 40rem;
  font-family: var(--font-display); letter-spacing: -0.035em; font-size: 96rem; line-height: 1; text-transform: uppercase; color: var(--color-dark);
}
.arrow-icon { height: .8em; width: .8em; fill: currentColor; flex: none; transition: width 500ms var(--ease-out), opacity 400ms; }
[data-button-arrow] .arrow-icon:first-child { width: 0; opacity: 0; }
[data-button-arrow]:hover .arrow-icon:first-child { width: .8em; opacity: 1; }
[data-button-arrow]:hover .arrow-icon:last-child { width: 0; opacity: 0; }
@media (max-width: 767px) {
  .trust_wrapper { grid-template-columns: 1fr; }
  .trust_title { font-size: 40rem; }
  .trust_icon { width: 260rem; justify-self: center; }
  .trust_button, .cta-button { font-size: 30rem; }
}

/* ---------- services ---------- */
.section_services { position: relative; background: var(--color-dark); padding-bottom: 180rem; }
.bg-wave { position: relative; top: -1px; line-height: 0; transform: translateY(-97%); position: absolute; left: 0; right: 0; }
.services_title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 96rem; line-height: 1.05; text-align: center; padding: 80rem 0 90rem; }
.services_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30rem; perspective: 2000rem; }
.services_card {
  position: relative; height: 800rem; border-radius: var(--radius-card); padding: 78rem 50rem;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
  transform-style: preserve-3d;
}
.services_card.green { background: var(--color-gold); color: #240046; }
.services_card.orange { background: var(--color-orange); color: #fff2ea; }
.services_card.pink { background: transparent; }
.services_card-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 78rem 50rem; border-radius: var(--radius-card); background: var(--color-magenta); color: var(--color-magenta-light); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.services_card-back { position: absolute; inset: 0; border-radius: var(--radius-card); background: var(--color-magenta); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(180deg); display: grid; place-items: center; }
.services_card-back span { font-family: var(--font-arabic); font-weight: 900; font-size: 160rem; color: var(--color-magenta-light); }
.services_card-title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 58rem; line-height: 1; text-transform: uppercase; }
.services_card-text { font-size: 24rem; max-width: 440rem; }
.services_card-icon { width: 230rem; height: 230rem; transition: transform 1.2s var(--ease-out); }
.services_card-icon { fill: currentColor; }
.services_card:hover .services_card-icon { transform: rotate(-8deg) scale(1.1); }
.services_card-icon svg { width: 100%; height: 100%; }
.services_card-button { display: inline-flex; align-items: center; height: 72rem; padding: 0 40rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 22rem; transition: color .4s; }
.services_card-button.green { background: #240046; color: var(--color-gold); --bubble: var(--color-white); }
.services_card-button.pink { background: var(--color-white); color: var(--color-magenta); --bubble: var(--color-dark); }
.services_card-button.orange { background: var(--color-dark); color: var(--color-orange); --bubble: var(--color-white); }
.services_card-button.is-hover.green, .services_card-button.is-hover.orange { color: var(--color-dark); }
.services_card-button.is-hover.pink { color: var(--color-white); }
@media (max-width: 767px) {
  .services_title { font-size: 30rem; padding: 50rem 0 30rem; }
  .services_list { grid-template-columns: 1fr; gap: 14rem; }
  .services_card, .services_card-face { height: 440rem; padding: 40rem 24rem; }
  .services_card-title { font-size: 30rem; } .services_card-text { font-size: 15rem; }
  .services_card-icon { width: 100rem; height: 100rem; }
  .services_card-button { height: 48rem; font-size: 15rem; padding: 0 24rem; }
}

/* ---------- work: Seet dossier files (tabs switch projects) ---------- */
.section_cases { position: relative; background: var(--color-ink); padding: 150rem 0 150rem; overflow: hidden; --paper: #f3f0e8; --paper-line: #dcd8cf; --marker: #f5e3a3; --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.cases_star { position: absolute; left: 50%; top: 46%; width: 1120rem; height: 1300rem; margin: -650rem 0 0 -560rem; }
.cases_star svg { width: 100%; height: 100%; opacity: .16; }
.dossier { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.dossier_stage { position: relative; width: 1560rem; height: 860rem; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sheet { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.sheet.is-active { visibility: visible; pointer-events: auto; }

/* folder page */
.sheet_back { position: absolute; right: 150rem; top: 70rem; width: 860rem; height: 770rem; background: #2c2b33; border-radius: 18rem; rotate: 1.2deg; }
.sheet_page {
  position: absolute; right: 158rem; top: 40rem; width: 860rem; height: 770rem; border-radius: 18rem;
  background: var(--paper); color: var(--color-ink); padding: 110rem 90rem 60rem 150rem; box-shadow: 0 30rem 60rem rgba(0,0,0,.35);
  font-family: var(--font-arabic);
}
.sheet_page::after, .cover_folder::after, .sheet_polaroid::after, .cover_note::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); mix-blend-mode: multiply; pointer-events: none; }
.num-tag { position: absolute; top: 34rem; left: 44rem; background: var(--color-orange); color: var(--color-dark); font-family: var(--font-display); font-weight: 700; font-size: 30rem; letter-spacing: -0.02em; padding: 6rem 18rem; border-radius: 10rem; rotate: -3deg; box-shadow: 0 6rem 0 rgba(0,0,0,.15); }
.sheet_title { position: relative; display: inline-block; font-family: var(--font-arabic); font-weight: 900; font-size: 88rem; line-height: 1.3; padding: 0 26rem; margin-bottom: 36rem; white-space: nowrap; }
.sheet_title .marker { position: absolute; inset: 22% -10rem 8% -10rem; background: var(--marker); border-radius: 8rem 30rem 10rem 40rem; clip-path: polygon(1% 12%, 6% 2%, 40% 6%, 72% 0, 99% 8%, 97% 50%, 100% 92%, 60% 97%, 30% 100%, 3% 94%, 0 55%); }
.sheet_title-text { position: relative; }
.sheet_rows { display: flex; flex-direction: column; }
.sheet_row { display: grid; grid-template-columns: 48rem 150rem 1fr; align-items: center; gap: 22rem; padding: 20rem 0; border-bottom: 2rem solid var(--paper-line); }
.sheet_row:last-child { border-bottom: 0; }
.row-icon { width: 40rem; height: 40rem; color: var(--color-ink); }
.row-label { font-weight: 700; font-size: 24rem; padding-left: 22rem; border-left: 2rem solid var(--paper-line); }
.row-value { font-size: 30rem; }
.stamp { position: absolute; left: 70rem; bottom: 60rem; display: grid; place-items: center; width: 230rem; height: 130rem; border: 6rem solid var(--color-magenta); border-radius: 50%; box-shadow: inset 0 0 0 6rem var(--paper), inset 0 0 0 9rem var(--color-magenta); color: var(--color-magenta); rotate: -12deg; opacity: .88; mix-blend-mode: multiply; }
.stamp span { font-family: var(--font-arabic); font-weight: 900; font-size: 58rem; line-height: 1; }

/* polaroid */
.sheet_polaroid-shadow { position: absolute; left: 70rem; top: 90rem; width: 600rem; height: 740rem; background: #2c2b33; rotate: -1deg; border-radius: 6rem; }
.sheet_polaroid { position: absolute; left: 100rem; top: 60rem; width: 600rem; height: 740rem; margin: 0; background: var(--paper); padding: 36rem 34rem 110rem; rotate: -2deg; box-shadow: 0 30rem 60rem rgba(0,0,0,.4); transition: transform 500ms var(--ease-out); z-index: 2; }
.sheet_photo { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; }
.tape { position: absolute; z-index: 3; top: -34rem; left: 50%; width: 200rem; height: 62rem; margin-left: -100rem; background: rgba(221,5,91,.88); rotate: -2deg; transform-origin: 0 50%; clip-path: polygon(2% 8%, 0 22%, 3% 38%, 0 55%, 2% 72%, 0 90%, 98% 94%, 100% 78%, 97% 62%, 100% 44%, 98% 26%, 100% 6%); }

/* tabs */
.dossier_tabs { position: absolute; right: 30rem; top: 70rem; display: flex; flex-direction: column; gap: 8rem; z-index: 0; }
.dossier_tab { position: relative; width: 136rem; height: 136rem; padding-left: 20rem; border-radius: 0 24rem 24rem 0; font-family: var(--font-arabic); font-weight: 700; font-size: 22rem; color: var(--color-white); display: grid; place-items: center; box-shadow: 0 10rem 20rem rgba(0,0,0,.3); transition: translate 400ms var(--ease-spring), filter .3s; translate: -10rem 0; }
.dossier_tab:first-child { height: 220rem; }
.dossier_tab span { writing-mode: vertical-rl; }
.dossier_tab:hover { translate: 4rem 0; }
.dossier_tab.is-active { translate: 16rem 0; filter: brightness(1.08); }
.dossier_tab.is-active::after { content: ""; position: absolute; left: 30rem; top: 50%; width: 8rem; height: 8rem; margin-top: -4rem; border-radius: 50%; background: currentColor; }
.dossier_tab.is-violet { background: var(--color-violet); } .dossier_tab.is-magenta { background: var(--color-magenta); } .dossier_tab.is-orange { background: var(--color-orange); }
.dossier_tab.is-gold { background: var(--marker); color: var(--color-ink); } .dossier_tab.is-lavender { background: var(--color-lavender); color: var(--color-dark); }

/* cover (brief style) */
.cover_intro { position: absolute; left: 20rem; top: 60rem; width: 620rem; }
.cover_sticker { display: inline-block; font-family: var(--font-arabic); font-weight: 900; font-size: 130rem; line-height: 1.1; color: var(--color-white); -webkit-text-stroke: 14rem var(--color-ink); paint-order: stroke fill; rotate: -6deg; filter: drop-shadow(0 0 0 #fff) drop-shadow(6rem 6rem 0 var(--color-magenta)); }
.cover_lead { font-size: 30rem; font-weight: 600; color: var(--color-lavender); margin-top: 26rem; max-width: 460rem; line-height: 1.25; }
.cover_lead .additional-font { color: var(--color-gold); }
.cover_teasers { position: relative; height: 380rem; margin-top: 40rem; }
.teaser { position: absolute; width: 230rem; height: 280rem; background: var(--paper); padding: 16rem 16rem 50rem; box-shadow: 0 20rem 40rem rgba(0,0,0,.4); transition: transform 500ms var(--ease-spring); }
.teaser-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.teaser.t1 { left: 0; top: 40rem; rotate: -9deg; } .teaser.t2 { left: 180rem; top: 0; rotate: 4deg; z-index: 1; } .teaser.t3 { left: 360rem; top: 60rem; rotate: -3deg; }
.teaser:hover { transform: translateY(-24rem) scale(1.05); z-index: 3; }
.cover_grid { position: absolute; right: 460rem; top: 110rem; width: 640rem; height: 760rem; rotate: -4deg;
  background-color: #efece4; background-image: linear-gradient(#d9dde8 1.5rem, transparent 1.5rem), linear-gradient(90deg, #d9dde8 1.5rem, transparent 1.5rem); background-size: 44rem 44rem; box-shadow: 0 20rem 50rem rgba(0,0,0,.35); }
.cover_grid::before { content: ""; position: absolute; left: 18rem; top: 30rem; bottom: 30rem; width: 26rem; background: radial-gradient(circle, var(--color-ink) 9rem, transparent 10rem) 0 0 / 26rem 44rem repeat-y; }
.cover_folder { position: absolute; right: 158rem; top: 30rem; width: 640rem; height: 800rem; border-radius: 16rem; background: var(--color-violet); box-shadow: 0 30rem 60rem rgba(0,0,0,.4); }
.cover_note { position: absolute; left: 26rem; top: 22rem; width: 280rem; height: 260rem; background: #f7e38e; border-radius: 6rem; rotate: -3deg; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 10rem 20rem rgba(0,0,0,.2); z-index: 2; }
.cover_note p { font-family: var(--font-arabic); font-weight: 700; font-size: 38rem; line-height: 1.35; color: var(--color-orange); rotate: -4deg; }
.cover_scribble { width: 170rem; height: 26rem; margin-top: 6rem; }
.cover_clip { position: absolute; top: -90rem; left: 50%; width: 120rem; height: 150rem; margin-left: -80rem; z-index: 3; }
.cover_label { position: absolute; left: 50rem; right: 50rem; top: 330rem; height: 350rem; background: #f7f7f7; border-radius: 26rem; color: var(--color-violet); font-family: var(--font-arabic); padding: 0 50rem; }
.cover_label-top { height: 70rem; border-bottom: 2rem solid #cfcfd6; margin: 0 -50rem 34rem; position: relative; }
.cover_label-top::before { content: ""; position: absolute; left: 150rem; top: 0; bottom: 0; width: 2rem; background: #cfcfd6; }
.cover_label .num-tag { top: 12rem; left: 16rem; font-size: 30rem; }
.cover_label p { font-weight: 700; font-size: 36rem; line-height: 1.6; }
.cover_label .cover_year { position: absolute; left: 0; right: 0; bottom: 26rem; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 22rem; }
.cover_palm { position: absolute; left: 30rem; bottom: 30rem; width: 56rem; height: auto; fill: var(--color-dark); }

.cases_controls { position: relative; z-index: 3; display: flex; align-items: center; gap: 24rem; margin-top: 30rem; }
.cases_arrow { width: 64rem; height: 64rem; border-radius: 50%; background: var(--color-lavender); display: grid; place-items: center; transition: background .3s, transform .3s var(--ease-spring); }
.cases_arrow:hover { background: var(--color-gold); transform: scale(1.08); }
.cases_arrow svg { width: 60%; height: 60%; fill: var(--color-dark); }
.cases_status { min-width: 240rem; text-align: center; font-family: var(--font-arabic); font-weight: 700; font-size: 24rem; color: var(--color-lavender); }

@media (max-width: 767px) {
  .section_cases { padding: 70rem 0 80rem; }
  .dossier_stage { width: 358rem; height: 760rem; }
  .dossier_tabs { right: auto; left: 0; top: 0; flex-direction: row-reverse; gap: 4rem; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .dossier_tab, .dossier_tab:first-child { width: auto; height: 38rem; padding: 0 12rem; border-radius: 12rem 12rem 0 0; font-size: 11rem; translate: 0 6rem; white-space: nowrap; flex: none; }
  .dossier_tab span { writing-mode: horizontal-tb; }
  .dossier_tab:hover { translate: 0 3rem; } .dossier_tab.is-active { translate: 0 0; } .dossier_tab.is-active::after { display: none; }
  .sheet_back { right: 0; top: 280rem; width: 100%; height: 470rem; }
  .sheet_page { right: 0; top: 262rem; width: 100%; height: 490rem; padding: 58rem 20rem 24rem; }
  .num-tag { top: 14rem; left: 14rem; font-size: 16rem; padding: 3rem 10rem; }
  .sheet_title { font-size: 38rem; padding: 0 12rem; margin-bottom: 10rem; }
  .sheet_row { grid-template-columns: 22rem 70rem 1fr; gap: 8rem; padding: 10rem 0; }
  .row-icon { width: 20rem; height: 20rem; } .row-label { font-size: 12rem; padding-left: 8rem; } .row-value { font-size: 14rem; }
  .stamp { width: 110rem; height: 64rem; left: 18rem; bottom: 18rem; border-width: 3rem; box-shadow: inset 0 0 0 3rem var(--paper), inset 0 0 0 5rem var(--color-magenta); } .stamp span { font-size: 28rem; }
  .sheet_polaroid-shadow { display: none; }
  .sheet_polaroid { left: 50%; margin-left: -120rem; top: 56rem; width: 240rem; height: 230rem; padding: 12rem 12rem 36rem; }
  .tape { width: 100rem; height: 30rem; margin-left: -50rem; top: -16rem; }
  .cover_intro { left: 0; top: 56rem; width: 100%; text-align: center; }
  .cover_sticker { font-size: 60rem; -webkit-text-stroke-width: 7rem; } .cover_lead { font-size: 14rem; margin: 8rem auto 0; max-width: 260rem; }
  .cover_teasers, .cover_grid { display: none; }
  .cover_folder { right: 0; top: 230rem; width: 100%; height: 520rem; }
  .cover_note { width: 150rem; height: 140rem; left: 14rem; top: 14rem; } .cover_note p { font-size: 20rem; } .cover_scribble { width: 90rem; }
  .cover_clip { width: 60rem; height: 75rem; top: -44rem; margin-left: -40rem; }
  .cover_label { left: 18rem; right: 18rem; top: 190rem; height: 240rem; padding: 0 22rem; }
  .cover_label-top { height: 46rem; margin: 0 -22rem 16rem; } .cover_label-top::before { left: 90rem; }
  .cover_label .num-tag { top: 8rem; left: 10rem; font-size: 16rem; } .cover_label p { font-size: 18rem; } .cover_label .cover_year { font-size: 13rem; bottom: 14rem; }
  .cover_palm { width: 30rem; left: 16rem; bottom: 16rem; }
  .cases_arrow { width: 44rem; height: 44rem; } .cases_status { font-size: 15rem; min-width: 150rem; }
}
.img-alinma-1 { background-image: url("../assets/images/asset-bg-00.jpg"); }
.img-alinma-2 { background-image: url("../assets/images/asset-bg-01.jpg"); }
.img-seet-paper { background-image: url("../assets/images/asset-bg-02.jpg"); }

/* ---------- view all: two halves, arrows pointing out ---------- */
.section_view-all { display: grid; grid-template-columns: 1fr 1fr; height: 760rem; overflow: hidden; background: var(--color-ink); }
.view-all_part { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34rem; overflow: hidden; }
.part-bg { position: absolute; inset: 0; }
.part-bg.left { background: var(--color-lavender); transform-origin: 50% 100%; }
.part-bg.right { background: var(--color-magenta); transform-origin: 50% 0; }
.view-all_arrow { position: relative; z-index: 2; display: flex; align-items: center; color: var(--color-dark); will-change: transform; }
.view-all_arrow .triangle, .view-all_arrow .square, .view-all_arrow-text { transition: translate 600ms var(--ease-spring), background .35s, color .35s, border-color .35s; }
.view-all_arrow .triangle { width: 0; height: 0; border-top: 110rem solid transparent; border-bottom: 110rem solid transparent; }
.view-all_arrow.left .triangle { border-right: 120rem solid var(--color-dark); }
.view-all_arrow.right .triangle { border-left: 120rem solid var(--color-dark); order: 3; }
.view-all_arrow-text { background: var(--color-dark); color: var(--color-lavender); height: 130rem; display: flex; align-items: center; padding: 0 44rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; font-size: 50rem; text-transform: uppercase; white-space: nowrap; }
.view-all_arrow.right .view-all_arrow-text { color: var(--color-magenta-light); }
.view-all_arrow-text .additional-font { color: var(--color-gold); }
.view-all_arrow .square { width: 60rem; height: 130rem; background: var(--color-dark); }
.view-all_arrow.left .square { order: 3; margin-left: 14rem; }
.view-all_arrow.right .square { order: -1; margin-right: 14rem; }
/* hover: the head shoots out, the tail snaps in, body flips to gold */
.view-all_arrow.left:hover .triangle { translate: -26rem 0; }
.view-all_arrow.left:hover .square { translate: -14rem 0; }
.view-all_arrow.right:hover .triangle { translate: 26rem 0; }
.view-all_arrow.right:hover .square { translate: 14rem 0; }
.view-all_arrow:hover .view-all_arrow-text { background: var(--color-gold); color: var(--color-dark); }
.view-all_arrow:hover .view-all_arrow-text .additional-font { color: var(--color-magenta); }
.view-all_arrow.left:hover .triangle { border-right-color: var(--color-gold); }
.view-all_arrow.right:hover .triangle { border-left-color: var(--color-gold); }
.view-all_arrow:hover .square { background: var(--color-gold); }
.view-all_note { position: relative; z-index: 2; font-family: var(--font-arabic); font-weight: 700; font-size: 34rem; color: var(--color-dark); }
.view-all_part.right .view-all_note { color: var(--color-white); }
.view-all_star { position: absolute; z-index: 1; right: 90rem; top: 70rem; width: 150rem; height: 174rem; }
.view-all_star svg { width: 100%; height: 100%; fill: var(--color-gold); }
@media (max-width: 767px) {
  .section_view-all { grid-template-columns: 1fr; height: auto; }
  .view-all_part { height: 230rem; gap: 14rem; }
  .view-all_arrow .triangle { border-top-width: 40rem; border-bottom-width: 40rem; }
  .view-all_arrow.left .triangle { border-right-width: 44rem; } .view-all_arrow.right .triangle { border-left-width: 44rem; }
  .view-all_arrow-text { height: 50rem; font-size: 20rem; padding: 0 14rem; }
  .view-all_arrow .square { width: 20rem; height: 50rem; }
  .view-all_note { font-size: 16rem; }
  .view-all_star { width: 44rem; height: 52rem; right: 18rem; top: 18rem; }
}

/* ---------- services: draggable deck of flip cards ---------- */
.section_svc { position: relative; background: var(--color-dark); color: var(--color-white); padding: 160rem 0 150rem; overflow: hidden; }
.svc_head { display: grid; justify-items: start; }
.svc_kicker { font-family: var(--font-arabic); font-weight: 700; font-size: 26rem; color: var(--color-gold); }
.svc_heading { font-family: var(--font-arabic); font-weight: 900; font-size: 190rem; line-height: 1.05; color: var(--color-lavender); -webkit-text-stroke: 0; text-shadow: 8rem 8rem 0 var(--color-violet); }
.svc_sub { font-size: 30rem; font-weight: 600; color: var(--color-lavender); opacity: .85; margin-top: 10rem; }
.svc_sub .additional-font { color: var(--color-gold); }
.svc_tags { margin: 60rem 0 70rem; overflow: hidden; border-block: 2rem solid rgba(229,225,255,.15); padding: 18rem 0; }
.svc_tags-inner { display: flex; gap: 18rem; width: max-content; animation: svc-tags 30s linear infinite; }
@keyframes svc-tags { to { transform: translateX(50%); } }
.svc_tag { flex: none; font-family: var(--font-arabic); font-weight: 700; font-size: 28rem; padding: 10rem 26rem; border-radius: var(--radius-pill); border: 2rem solid var(--color-lavender); color: var(--color-lavender); }
.svc_tag.en { font-family: var(--font-display); font-size: 20rem; border-color: var(--color-gold); color: var(--color-gold); text-transform: uppercase; letter-spacing: .06em; }
.svc_viewport { position: relative; padding: 30rem 0 50rem; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.svc_track { display: flex; gap: 36rem; padding-inline: 80rem; width: max-content; will-change: transform; perspective: 2200rem; }
.svc_card { position: relative; flex: none; width: 480rem; height: 660rem; perspective: 1600rem; outline: none; }
.svc_inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms var(--ease-spring); }
.svc_card.is-flipped .svc_inner { transform: rotateY(180deg); }
.svc_face { position: absolute; inset: 0; border-radius: 34rem; padding: 36rem 38rem; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 30rem 60rem rgba(0,0,0,.35); }
.svc_back { transform: rotateY(180deg); }
.svc_face::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); mix-blend-mode: multiply; pointer-events: none; }
.svc_card.is-violet .svc_face { background: var(--color-violet); color: var(--color-lavender); --el: var(--color-gold); --chip: rgba(229,225,255,.16); }
.svc_card.is-magenta .svc_face { background: var(--color-magenta); color: var(--color-white); --el: var(--color-dark); --chip: rgba(255,255,255,.18); }
.svc_card.is-orange .svc_face { background: var(--color-orange); color: var(--color-dark); --el: var(--color-dark); --chip: rgba(36,0,70,.12); }
.svc_card.is-gold .svc_face { background: var(--color-gold); color: var(--color-dark); --el: var(--color-violet); --chip: rgba(36,0,70,.12); }
.svc_card.is-lavender .svc_face { background: var(--color-lavender); color: var(--color-dark); --el: var(--color-magenta); --chip: rgba(98,29,205,.12); }
.svc_top { display: flex; justify-content: space-between; align-items: center; }
.svc_num { font-family: var(--font-display); font-weight: 700; font-size: 34rem; letter-spacing: -0.03em; }
.svc_en { font-family: var(--font-display); font-weight: 600; font-size: 15rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.svc_el { width: 240rem; height: 240rem; margin: 30rem auto 0; fill: var(--el); display: block; transition: transform 700ms var(--ease-spring); }
.svc_card:hover .svc_el { transform: translateY(-10rem) rotate(-6deg) scale(1.06); }
.svc_bottom { margin-top: auto; }
.svc_title { font-family: var(--font-arabic); font-weight: 900; font-size: 60rem; line-height: 1.15; }
.svc_lead { font-family: var(--font-arabic); font-size: 26rem; line-height: 1.45; margin-top: 8rem; }
.svc_hint { display: inline-block; margin-top: 18rem; font-family: var(--font-arabic); font-weight: 700; font-size: 18rem; padding: 6rem 16rem; border-radius: var(--radius-pill); background: var(--chip); }
.svc_desc { font-family: var(--font-arabic); font-size: 28rem; line-height: 1.5; margin-top: 40rem; }
.svc_list { margin-top: 26rem; display: flex; flex-direction: column; gap: 10rem; }
.svc_list li { font-family: var(--font-arabic); font-weight: 700; font-size: 24rem; padding: 10rem 18rem; border-radius: 14rem; background: var(--chip); display: flex; align-items: center; gap: 12rem; }
.svc_list li::before { content: ""; width: 12rem; height: 12rem; background: currentColor; transform: rotate(45deg); border-radius: 2rem; flex: none; }
.svc_actions { margin-top: auto; display: flex; gap: 12rem; }
.svc_btn { height: 62rem; padding: 0 28rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; font-family: var(--font-arabic); font-weight: 700; font-size: 22rem; transition: color .4s; }
.svc_btn.is-main { background: var(--color-dark); color: var(--color-gold); --bubble: var(--color-gold); }
.svc_btn.is-main.is-hover { color: var(--color-dark); }
.svc_card.is-violet .svc_btn.is-main { background: var(--color-gold); color: var(--color-dark); --bubble: var(--color-white); }
.svc_btn.is-ghost { border: 2rem solid currentColor; }
.svc_controls { display: flex; align-items: center; gap: 30rem; margin-top: 10rem; }
.svc_swipe { font-family: var(--font-arabic); font-weight: 700; font-size: 20rem; color: var(--color-gold); white-space: nowrap; }
.svc_progress { flex: 1; height: 6rem; border-radius: 6rem; background: rgba(229,225,255,.15); overflow: hidden; }
.svc_progress-bar { display: block; height: 100%; width: 20%; background: var(--color-gold); border-radius: 6rem; margin-inline-start: 0; transform-origin: right; }
.svc_count { font-family: var(--font-display); font-weight: 700; font-size: 22rem; color: var(--color-lavender); direction: ltr; }
.svc_arrows { display: flex; gap: 12rem; }
@media (max-width: 767px) {
  .section_svc { padding: 80rem 0 70rem; }
  .svc_kicker { font-size: 15rem; } .svc_heading { font-size: 72rem; text-shadow: 4rem 4rem 0 var(--color-violet); } .svc_sub { font-size: 15rem; }
  .svc_tags { margin: 26rem 0 20rem; padding: 10rem 0; } .svc_tag { font-size: 15rem; padding: 6rem 14rem; } .svc_tag.en { font-size: 11rem; }
  .svc_track { gap: 14rem; padding-inline: 16rem; }
  .svc_card { width: 290rem; height: 460rem; }
  .svc_face { padding: 22rem; border-radius: 24rem; }
  .svc_num { font-size: 22rem; } .svc_en { font-size: 10rem; }
  .svc_el { width: 150rem; height: 150rem; margin-top: 14rem; }
  .svc_title { font-size: 36rem; } .svc_lead { font-size: 15rem; } .svc_hint { font-size: 12rem; }
  .svc_desc { font-size: 16rem; margin-top: 20rem; } .svc_list { gap: 6rem; margin-top: 14rem; } .svc_list li { font-size: 14rem; padding: 7rem 12rem; }
  .svc_btn { height: 42rem; font-size: 14rem; padding: 0 16rem; }
  .svc_controls { gap: 12rem; flex-wrap: wrap; } .svc_swipe { font-size: 12rem; width: 100%; } .svc_count { font-size: 14rem; }
}

/* ---------- feedback ---------- */
.section_feedback { position: relative; background: var(--color-lavender); color: var(--color-dark); padding: 60rem 0 200rem; text-align: center; }
.feedback_title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 112rem; line-height: 1.02; }
.feedback_title .additional-font { color: var(--color-magenta); }
.feedback_text { font-size: 28rem; margin-top: 24rem; }
.feedback_form { display: flex; flex-direction: column; align-items: center; }
.feedback_list { display: flex; justify-content: center; gap: 50rem; margin-top: 70rem; }
.feedback_option { display: block; position: relative; width: 260rem; border-radius: 40rem; padding: 26rem; transition: transform 500ms var(--ease-spring), background .3s; }
.feedback_option:hover { transform: translateY(-14rem) rotate(-3deg); }
.feedback_input:checked + .feedback_option { background: var(--color-white); transform: scale(1.06); }
.feedback_option svg { width: 100%; height: auto; display: block; }
.feedback_option-label { display: block; margin-top: 14rem; font-weight: 600; font-size: 20rem; }
.feedback_check { position: absolute; top: 18rem; right: 18rem; width: 40rem; height: 40rem; border-radius: 50%; border: 3rem solid var(--color-dark); background: var(--color-lavender); }
.feedback_input:checked + .feedback_option .feedback_check { background: var(--color-gold); box-shadow: inset 0 0 0 7rem var(--color-lavender); }
.section_feedback .cta-button { justify-self: center; align-self: center; }
@media (max-width: 767px) {
  .feedback_title { font-size: 36rem; } .feedback_text { font-size: 15rem; }
  .feedback_list { gap: 6rem; margin-top: 30rem; }
  .feedback_option { width: 112rem; padding: 10rem; border-radius: 20rem; }
  .feedback_option-label { font-size: 11rem; } .feedback_check { width: 20rem; height: 20rem; top: 8rem; right: 8rem; }
}

/* ---------- footer ---------- */
.footer { background: var(--color-dark); padding-bottom: 150rem; }
.marquee { background: var(--color-lavender); color: var(--color-violet); overflow: hidden; padding: 20rem 0; }
.marquee_inner { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee_block { display: flex; align-items: center; gap: 40rem; padding-right: 40rem; }
.marquee_text { font-family: var(--font-display); letter-spacing: -0.035em; font-size: 110rem; line-height: 1.2; text-transform: uppercase; }
.marquee_text.ar { font-family: var(--font-arabic); font-weight: 900; font-size: 110rem; letter-spacing: 0; }
.marquee_icon { width: 90rem; height: 90rem; fill: var(--color-magenta); animation: spin 8s linear infinite; flex: none; }
.marquee_icon.el { width: 100rem; height: 110rem; fill: var(--color-violet); animation: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.footer_wrapper { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60rem; padding-top: 110rem; }
.footer_logo { display: flex; flex-direction: column; align-items: flex-start; gap: 22rem; margin-bottom: 70rem; fill: var(--color-white); }
.footer_logo-mark { width: 420rem; height: auto; }
.footer_logo-tag { width: 340rem; height: auto; fill: var(--color-gold); }
.footer_title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 84rem; line-height: 1.02; color: var(--color-gold); }
.footer_sitemap { margin-top: 60rem; font-size: 18rem; text-transform: uppercase; letter-spacing: .12em; opacity: .6; }
.footer_nav { display: flex; flex-wrap: wrap; gap: 14rem 40rem; margin-top: 20rem; font-size: 30rem; font-weight: 600; }
.footer_email { font-family: var(--font-display); letter-spacing: -0.035em; font-size: 52rem; line-height: 1.1; display: inline-block; border-bottom: 4rem solid var(--color-magenta); }
.footer_socials { display: flex; gap: 16rem; margin-top: 40rem; }
.social-link { display: grid; place-items: center; width: 74rem; height: 74rem; border-radius: 50%; background: var(--color-lavender); color: var(--color-dark); font-weight: 700; font-size: 20rem; --bubble: var(--color-gold); }
.social-link svg { width: 48%; height: 48%; position: relative; z-index: 1; fill: currentColor; display: block; transition: transform 0.2s var(--ease-spring); }
.social-link:hover svg { transform: scale(1.15); }
.footer_meta { display: flex; justify-content: space-between; gap: 20rem; margin-top: 90rem; font-size: 17rem; opacity: .7; }
@media (max-width: 767px) {
  .marquee_text { font-size: 40rem; } .marquee_text.ar { font-size: 40rem; } .marquee_icon, .marquee_icon.el { width: 34rem; height: 34rem; }
  .footer_wrapper { grid-template-columns: 1fr; padding-top: 50rem; }
  .footer_title { font-size: 34rem; } .footer_logo-mark { width: 200rem; } .footer_logo-tag { width: 170rem; } .footer_logo { margin-bottom: 36rem; } .footer_nav { font-size: 18rem; } .footer_email { font-size: 30rem; }
  .social-link { width: 46rem; height: 46rem; font-size: 13rem; }
  .footer_meta { flex-direction: column; font-size: 12rem; margin-top: 40rem; }
  .footer { padding-bottom: 100rem; }
}

/* ---------- bottom fixed menu ---------- */
.bottom-menu { position: fixed; left: 50%; bottom: 26rem; z-index: 60; transform: translate(-50%, 180%); transition: transform 700ms var(--ease-spring); }
.bottom-menu.is-visible { transform: translate(-50%, 0); }
.bottom-menu_wrap { display: flex; align-items: center; gap: 22rem; background: rgba(229,225,255,.16); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-pill); padding: 8rem 8rem 8rem 30rem; font-size: 19rem; }
.bottom-menu_button { display: inline-flex; gap: 6rem; align-items: center; white-space: nowrap; }
.bottom-menu_button .common-text { opacity: .65; }
.bottom-menu_button .bold-text { font-weight: 700; }
.bottom-menu_divider { width: 1px; height: 26rem; background: rgba(255,255,255,.25); }
.bottom-menu .button-pill { height: 54rem; }
.bottom-menu_wrap > :last-child { margin-right: 22rem; }
@media (max-width: 767px) { .bottom-menu_wrap { font-size: 13rem; gap: 10rem; padding: 5rem 5rem 5rem 14rem; } .bottom-menu .button-pill { height: 38rem; font-size: 13rem; padding: 0 14rem; } .bottom-menu_wrap > :last-child { margin-right: 12rem; } }

/* ---------- menu modal ---------- */
.menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.menu.is-open { visibility: visible; }
/* the reveal circles are screen-sized layers opened with clip-path (a 300vmax layer per circle ran iPhone Safari out of memory and crashed the page) */
.menu_circles { position: absolute; inset: 0; overflow: hidden; }
.menu_circle { position: absolute; inset: 0; --r: 0px; -webkit-clip-path: circle(var(--r) at 50% calc(100% + 10vmax)); clip-path: circle(var(--r) at 50% calc(100% + 10vmax)); }
.menu_circle.white { background: var(--color-white); } .menu_circle.pink { background: var(--color-magenta); } .menu_circle.lime { background: var(--color-gold); } .menu_circle.blue { background: var(--color-violet); }
.menu_content { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.menu_list { text-align: center; }
.menu_link { display: inline-block; font-family: var(--font-display); letter-spacing: -0.035em; font-size: 82rem; line-height: 1.15; text-transform: uppercase; color: var(--color-white); padding: 0 30rem; border-radius: var(--radius-pill); --bubble: var(--color-gold); transition: color .4s; }
.menu_link.is-hover { color: var(--color-dark); }
.menu_close { display: inline-flex; align-items: center; gap: 4rem; margin-top: 40rem; font-weight: 700; font-size: 26rem; color: var(--color-white); text-transform: uppercase; }
.menu_close svg { width: 60rem; height: 60rem; fill: currentColor; transition: width .4s, opacity .4s; }
.menu_badge { position: absolute; width: 250rem; height: 250rem; }
.menu_badge.left { left: 8%; top: 18%; } .menu_badge.right { right: 8%; bottom: 16%; }
.menu_badge svg { width: 100%; height: 100%; }
.menu_badge-label { font-family: var(--font-body); font-weight: 700; font-size: 26px; letter-spacing: 3px; text-transform: uppercase; }
.menu_badge-ring { transform-box: view-box; transform-origin: 148px 148px; animation: spin 12s linear infinite; }
.badge-arrow-stack { transition: transform 600ms var(--ease-out); }
.menu_badge:hover .badge-arrow-stack { transform: translate(104px, -104px); }
.menu_badge.right:hover .badge-arrow-stack { transform: translate(104px, 104px); }
@media (max-width: 767px) { .menu_link { font-size: 36rem; } .menu_badge { width: 100rem; height: 100rem; } .menu_badge.left { top: 8%; } .menu_badge.right { bottom: 8%; } }

/* ---------- discuss modal ---------- */
.discuss { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; visibility: hidden; }
.discuss.is-open { visibility: visible; }
.discuss_backdrop { position: absolute; inset: 0; background: rgba(36,0,70,.7); backdrop-filter: blur(6px); opacity: 0; }
.discuss_card { position: relative; width: 1500rem; max-width: calc(100vw - 32px); }
.discuss_layer { position: absolute; inset: 0; border-radius: 60rem; transform: scale(.6); opacity: 0; }
.discuss_layer.white { background: var(--color-white); rotate: -3deg; }
.discuss_layer.lime { background: var(--color-gold); rotate: 2deg; }
.discuss_layer.pink { background: var(--color-magenta); }
.discuss_inner { position: relative; padding: 70rem 80rem 60rem; opacity: 0; }
.discuss_close { position: absolute; top: 30rem; right: 30rem; width: 62rem; height: 62rem; border-radius: 50%; background: var(--color-dark); display: grid; place-items: center; }
.discuss_close svg { width: 60%; }
.discuss_title { font-family: var(--font-display); letter-spacing: -0.035em; font-weight: 700; font-size: 90rem; line-height: 1.05; color: var(--color-dark); }
.discuss_title .additional-font { color: var(--color-white); }
.discuss_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rem; margin-top: 40rem; }
.discuss_grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto auto; gap: 20rem; margin-top: 20rem; }
.discuss_input { width: 100%; height: 76rem; border: 0; border-radius: 22rem; background: var(--color-white); color: var(--color-dark); padding: 0 26rem; font-size: 22rem; outline: none; }
.discuss_input:focus { box-shadow: 0 0 0 4rem var(--color-dark); }
.discuss_textarea { grid-row: 1 / 4; height: 100%; min-height: 250rem; padding-top: 22rem; resize: none; }
.discuss_dd { position: relative; }
.discuss_dd-btn { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.discuss_dd-btn.is-placeholder { color: rgba(36,0,70,.5); }
.discuss_dd-btn svg { width: 18rem; transition: transform .3s; }
.discuss_dd.is-open .discuss_dd-btn svg { transform: rotate(180deg); }
.discuss_dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8rem); background: var(--color-white); color: var(--color-dark); border-radius: 22rem; padding: 8rem; z-index: 5; opacity: 0; transform: translateY(-10rem); pointer-events: none; transition: opacity .25s, transform .25s; }
.discuss_dd.is-open .discuss_dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.discuss_dd-opt { padding: 14rem 18rem; border-radius: 14rem; font-size: 20rem; cursor: pointer; }
.discuss_dd-opt:hover { background: var(--color-lavender); }
.discuss_submit { height: 76rem; border-radius: 22rem; background: var(--color-dark); color: var(--color-gold); font-weight: 700; font-size: 24rem; text-transform: lowercase; --bubble: var(--color-gold); transition: color .4s; }
.discuss_submit.is-hover { color: var(--color-dark); }
.discuss_note { margin-top: 18rem; font-weight: 600; color: var(--color-dark); min-height: 1.3em; }
@media (max-width: 767px) {
  .discuss_inner { padding: 36rem 18rem 24rem; }
  .discuss_title { font-size: 34rem; }
  .discuss_row, .discuss_grid { grid-template-columns: 1fr; gap: 8rem; margin-top: 14rem; }
  .discuss_textarea { grid-row: auto; min-height: 100rem; }
  .discuss_input, .discuss_submit { height: 46rem; font-size: 14rem; border-radius: 14rem; }
  .discuss_close { width: 40rem; height: 40rem; top: 14rem; right: 14rem; }
  .discuss_dd-opt { font-size: 14rem; }
}

/* ---------- custom cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; display: none; }
html.has-cursor .cursor { display: block; }
.cursor_state { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 4rem; opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: opacity .2s, transform .3s var(--ease-spring); }
.cursor_state svg { width: 34rem; height: 40rem; }
.cursor_label { margin-top: 26rem; padding: 6rem 14rem; border-radius: var(--radius-pill); font-size: 16rem; font-weight: 700; }
.cursor[data-state="default"] .cursor_state.default, .cursor[data-state="pointer"] .cursor_state.pointer, .cursor[data-state="drag"] .cursor_state.drag { opacity: 1; transform: scale(1); }
.cursor_state.default .cursor_label { background: var(--color-gold); color: var(--color-dark); }
.cursor_state.pointer .cursor_label { background: var(--color-magenta); color: var(--color-white); }
.cursor_state.drag .cursor_label { background: var(--color-violet); color: var(--color-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- no-motion fallback (reduced motion or scripts unavailable) ---------- */
html.no-motion .about_wrapper { height: auto; }
html.no-motion .section_about { position: relative; height: auto; padding-bottom: 120rem; }
html.no-motion .about_final { display: none; }
html.no-motion .about_tiles { position: relative; bottom: auto; margin-top: 70rem; }
html.no-motion .tile-icon.b { display: none; }
html.no-motion .pen-wrapper { display: none; }
/* display weight for Poppins */
.trust_button, .cta-button, .view-all_arrow-text, .marquee_text, .menu_link, .cases_counter, .placeholder-img, .cases_spine p, .services_card-title { font-weight: 700; }
@media (max-width: 767px) {
  .hero_dec.is-palm .dec-label-text, .hero_dec.is-falcon .dec-label-text { transform: translateX(28%); }
  .hero_dec.is-oud .dec-label-text, .hero_dec.is-camel .dec-label-text, .hero_dec.is-swords .dec-label-text { transform: translateX(-30%); }
}

/* hero logotype label */
.hero_dec .dec-logo { height: 26rem; width: auto; fill: var(--color-dark); margin-right: 10rem; vertical-align: -6rem; }
.hero_dec .dec-label-text { display: inline-flex; align-items: center; }
@media (max-width: 767px) { .hero_dec .dec-logo { height: 13rem; margin-right: 5rem; vertical-align: -3rem; } }

/* trust emblem */
.trust_icon { perspective: 1400rem; }
.trust_tilt { width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.trust_icon svg { overflow: visible; }
.trust_winds path { stroke-dasharray: 600; stroke-dashoffset: 600; }
.highlighted-text { background: linear-gradient(var(--color-gold), var(--color-gold)) no-repeat 0 0 / var(--hl, 100%) 100%; }
html:not(.no-motion) .highlighted-text { --hl: 0%; }
/* dossier refinements */
.sheet_page::after, .sheet_polaroid::after, .cover_note::after { opacity: .45; }
.cover_folder > * { z-index: 1; }
.cover_folder::after { z-index: 0; }
.sheet_page { padding: 110rem 90rem 60rem 110rem; }
.sheet_title { font-size: 78rem; }
.sheet_polaroid { left: 80rem; top: 70rem; width: 530rem; height: 680rem; padding: 32rem 30rem 100rem; }
.sheet_polaroid-shadow { left: 56rem; top: 96rem; width: 530rem; height: 680rem; }
.stamp { left: 110rem; bottom: 50rem; }
.cover_intro { z-index: 2; width: 460rem; }
.cover_lead { max-width: 420rem; }
.cover_grid { right: 420rem; }
@media (max-width: 767px) {
  .sheet_page { padding: 58rem 20rem 24rem; } .sheet_title { font-size: 38rem; }
  .sheet_polaroid { left: 50%; margin-left: -120rem; top: 56rem; width: 240rem; height: 230rem; padding: 12rem 12rem 36rem; }
  .stamp { left: 18rem; bottom: 18rem; }
  .cover_intro { width: 100%; } .cover_lead { max-width: 260rem; }
  .dossier_stage { height: 700rem; } .sheet_back { height: 410rem; } .sheet_page { height: 430rem; } .cover_folder { height: 460rem; }
}
@media (min-width: 768px) {
  .sheet_page { padding-top: 96rem; }
  .sheet_row { padding: 16rem 0; }
  .sheet_title { margin-bottom: 22rem; }
  .stamp { left: 86rem; bottom: 26rem; width: 200rem; height: 112rem; } .stamp span { font-size: 50rem; }
}

/* ---------- view all: 3D extruded arrows + door panels ---------- */
.view-all_part { perspective: 1600rem; perspective-origin: 50% 45%; }
.part-bg.left { transform-origin: 0 50%; }
.part-bg.right { transform-origin: 100% 50%; }
.view-all_arrow { transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-22deg); }
.view-all_arrow.right { transform: rotateX(12deg) rotateY(22deg); }
.arrow-face { position: relative; display: flex; align-items: center; transform-style: preserve-3d; }
.arrow-face.is-depth { position: absolute; left: 0; top: 0; pointer-events: none; }
.arrow-face.is-depth .view-all_arrow-text { color: transparent !important; background: #12002a; }
.arrow-face.is-depth .view-all_arrow-text .additional-font { color: transparent !important; }
.arrow-face.is-depth .square { background: #12002a; }
.view-all_arrow.left .arrow-face.is-depth .triangle { border-right-color: #12002a; }
.view-all_arrow.right .arrow-face.is-depth .triangle { border-left-color: #12002a; }
.view-all_arrow:hover .arrow-face.is-depth .view-all_arrow-text, .view-all_arrow:hover .arrow-face.is-depth .square { background: #b87a00; }
.view-all_arrow.left:hover .arrow-face.is-depth .triangle { border-right-color: #b87a00; }
.view-all_arrow.right:hover .arrow-face.is-depth .triangle { border-left-color: #b87a00; }
.arrow-face.is-front .view-all_arrow-text { box-shadow: inset 0 6rem 0 rgba(255,255,255,.12), inset 0 -6rem 0 rgba(0,0,0,.18); }
.view-all_shadow { position: absolute; z-index: 1; left: 50%; top: 50%; width: 620rem; height: 70rem; margin: 90rem 0 0 -310rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,0,40,.45), transparent); pointer-events: none; }
.view-all_star svg { filter: drop-shadow(3rem 3rem 0 #b87a00) drop-shadow(3rem 3rem 0 #9a6500) drop-shadow(3rem 3rem 0 #7d5200) drop-shadow(0 20rem 18rem rgba(0,0,0,.35)); }
.view-all_note { text-shadow: 2rem 2rem 0 rgba(0,0,0,.12); }
@media (max-width: 767px) { .view-all_shadow { width: 300rem; height: 30rem; margin: 36rem 0 0 -150rem; } }
.view-all_shadow { margin-top: 110rem; }
.view-all_note { margin-top: 50rem; }
@media (max-width: 767px) { .view-all_shadow { margin-top: 40rem; } .view-all_note { margin-top: 16rem; } }
/* view all: brand colours — lavender left with violet arrow, violet right with lavender arrow */
.part-bg.left { background: #e5e1ff; }
.part-bg.right { background: #621dcd; }
.view-all_arrow.left .arrow-face.is-front .view-all_arrow-text, .view-all_arrow.left .arrow-face.is-front .square { background: #621dcd; color: #e5e1ff; }
.view-all_arrow.left .arrow-face.is-front .triangle { border-right-color: #621dcd; }
.view-all_arrow.left .arrow-face.is-depth .view-all_arrow-text, .view-all_arrow.left .arrow-face.is-depth .square { background: #3a0c82; }
.view-all_arrow.left .arrow-face.is-depth .triangle { border-right-color: #3a0c82; }
.view-all_arrow.right .arrow-face.is-front .view-all_arrow-text, .view-all_arrow.right .arrow-face.is-front .square { background: #e5e1ff; color: #621dcd; }
.view-all_arrow.right .arrow-face.is-front .triangle { border-left-color: #e5e1ff; }
.view-all_arrow.right .arrow-face.is-depth .view-all_arrow-text, .view-all_arrow.right .arrow-face.is-depth .square { background: #a99ee6; }
.view-all_arrow.right .arrow-face.is-depth .triangle { border-left-color: #a99ee6; }
.view-all_part.left .view-all_note { color: #621dcd; }
.view-all_part.right .view-all_note { color: #e5e1ff; }
.view-all_part.left .view-all_shadow { background: radial-gradient(closest-side, rgba(98,29,205,.35), transparent); }
.view-all_part.right .view-all_shadow { background: radial-gradient(closest-side, rgba(20,0,50,.5), transparent); }
/* hover stays gold on both */
.view-all_arrow:hover .arrow-face.is-front .view-all_arrow-text, .view-all_arrow:hover .arrow-face.is-front .square { background: var(--color-gold) !important; color: var(--color-dark) !important; }
.view-all_arrow.left:hover .arrow-face.is-front .triangle { border-right-color: var(--color-gold) !important; }
.view-all_arrow.right:hover .arrow-face.is-front .triangle { border-left-color: var(--color-gold) !important; }
.view-all_arrow:hover .arrow-face.is-depth .view-all_arrow-text, .view-all_arrow:hover .arrow-face.is-depth .square { background: #b87a00 !important; }
.view-all_arrow.left:hover .arrow-face.is-depth .triangle { border-right-color: #b87a00 !important; }
.view-all_arrow.right:hover .arrow-face.is-depth .triangle { border-left-color: #b87a00 !important; }

/* ---------- services: fanned hand of cards, hover flips (desktop) ---------- */
.on-touch { display: none; }
@media (hover: none), (max-width: 767px) { .on-hover { display: none; } .on-touch { display: inline; } }
@media (min-width: 768px) and (hover: hover) {
  .svc_viewport { cursor: default; padding: 90rem 0 120rem; }
  .svc_track { width: 100%; justify-content: center; padding: 0; gap: 0; transform: none !important; }
  .svc_card {
    --step: 300rem; --fr: 0deg; --fy: 0rem; --push: 0rem; --lift: 0rem; --sc: 1;
    width: 420rem; height: 600rem; margin-inline-start: -110rem; flex: none;
    transform: translate(var(--push), calc(var(--fy) + var(--lift))) rotate(var(--fr)) scale(var(--sc));
    transform-origin: 50% 120%;
    transition: transform 700ms var(--ease-spring), opacity 600ms var(--ease-out), filter .4s;
    transition-delay: calc(var(--i) * 70ms);
    animation: svc-bob 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.8s);
    z-index: calc(10 - var(--i));
  }
  .svc_card:first-child { margin-inline-start: 0; }
  .svc_card:nth-child(1) { --fr: 9deg;  --fy: 46rem; }
  .svc_card:nth-child(2) { --fr: 4.5deg; --fy: 12rem; }
  .svc_card:nth-child(3) { --fr: 0deg;  --fy: 0rem; }
  .svc_card:nth-child(4) { --fr: -4.5deg; --fy: 12rem; }
  .svc_card:nth-child(5) { --fr: -9deg; --fy: 46rem; }
  /* before the section is seen: all cards gathered in one stack in the middle */
  .svc_track:not(.is-dealt) .svc_card { --push: calc((var(--i) - 2) * var(--step)); --fr: calc((var(--i) - 2) * 2deg); --fy: 160rem; opacity: 0; }
  .svc_track.is-dealt .svc_card { opacity: 1; }
  /* hover: card lifts, straightens, flips; neighbours step aside */
  .svc_track.is-dealt .svc_card.is-hot { --fr: 0deg; --lift: -70rem; --sc: 1.06; z-index: 20; animation-play-state: paused; transition-delay: 0ms; }
  .svc_track.is-dealt .svc_card.is-before { --push: 90rem; transition-delay: 0ms; }
  .svc_track.is-dealt .svc_card.is-after { --push: -90rem; transition-delay: 0ms; }
  .svc_track.has-hot .svc_card:not(.is-hot) { filter: brightness(.82) saturate(.9); }
  .svc_card.is-hot .svc_inner { transform: rotateY(180deg); }
  .svc_inner { transition: transform 800ms var(--ease-spring); }
  .svc_face { box-shadow: 0 30rem 60rem rgba(0,0,0,.45), 0 0 0 3rem rgba(36,0,70,.35); }
  .svc_face::before { content: ""; position: absolute; inset: -40%; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); translate: -60% 0; transition: translate 900ms var(--ease-out); }
  .svc_card.is-hot .svc_face::before { translate: 60% 0; }
  .svc_controls .svc_progress, .svc_controls .svc_count, .svc_controls .svc_arrows { display: none; }
  .svc_controls { justify-content: center; }
}
@keyframes svc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14rem; } }
@media (max-width: 767px) {
  .svc_card { margin-inline-start: -40rem; transition: transform 500ms var(--ease-spring); }
  .svc_card:first-child { margin-inline-start: 0; }
  .svc_card:nth-child(odd) { transform: rotate(2deg); } .svc_card:nth-child(even) { transform: rotate(-2deg) translateY(10rem); }
  .svc_card.is-flipped { z-index: 5; transform: translateY(-10rem); }
  .svc_track { gap: 0; }
}
@media (min-width: 768px) and (hover: hover) {
  /* compact hand so all five cards sit in one screen */
  .svc_viewport { padding: 90rem 0 80rem; }
  .svc_card { width: 290rem; height: 430rem; margin-inline-start: -78rem; --step: 200rem; will-change: transform; }
  .svc_card:first-child { margin-inline-start: 0; }
  .svc_track.is-dealt .svc_card.is-before { --push: 52rem; }
  .svc_track.is-dealt .svc_card.is-after { --push: -52rem; }
  .svc_face { padding: 26rem 28rem; border-radius: 26rem; }
  .svc_num { font-size: 26rem; } .svc_en { font-size: 12rem; }
  .svc_title { font-size: 40rem; } .svc_lead { font-size: 19rem; } .svc_hint { font-size: 14rem; margin-top: 12rem; }
  .svc_desc { font-size: 19rem; margin-top: 18rem; } .svc_list { margin-top: 16rem; gap: 7rem; } .svc_list li { font-size: 16rem; padding: 6rem 12rem; border-radius: 11rem; }
  .svc_back .svc_list { margin-top: 20rem; }
  .svc_btn { height: 46rem; font-size: 17rem; padding: 0 20rem; }
  .svc_el { width: 160rem; height: 160rem; margin-top: 20rem; }
}
@media (min-width: 768px) and (hover: hover) { .svc_card { z-index: calc(var(--i) + 1); } }

/* ---------- feedback: living faces ---------- */
.feedback_option { cursor: pointer; }
.face { overflow: visible; }
.face .f-body, .face .f-eye, .face .f-mouth, .face .f-brows, .face .f-drop, .face .f-eyes-alt, .face .f-blush, .face .f-sparks, .face .f-mouth-g, .face .f-tongue, .face .f-lid { transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-spring), opacity 300ms; }
.face .f-body { transform-box: view-box; transform-origin: 100px 190px; }
.face .m-b, .face .f-eyes-alt, .face .f-drop { opacity: 0; }
.face .f-eye { animation: blink 5s infinite; }
.feedback_list li:nth-child(2) .f-eye { animation-delay: -1.7s; } .feedback_list li:nth-child(3) .f-eye { animation-delay: -3.3s; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
/* disappointed: slumps, brows droop, frown deepens, a sweat drop rolls */
.feedback_option:hover .is-sad .f-body, .feedback_input:checked + .feedback_option .is-sad .f-body { transform: rotate(-7deg) translateY(8px); }
.feedback_option:hover .is-sad .m-a { opacity: 0; } .feedback_option:hover .is-sad .m-b { opacity: 1; }
.feedback_option:hover .is-sad .f-brows { transform: translateY(5px); }
.feedback_option:hover .is-sad .f-lid { transform: translateY(4px) scaleY(1.6); }
.feedback_option:hover .is-sad .f-drop { opacity: 1; animation: drop 1.6s ease-in infinite; }
@keyframes drop { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
/* happy: bounces, eyes turn to smiles, blush pops, grin opens */
.feedback_option:hover .is-happy .f-body { animation: bounce 700ms var(--ease-spring) infinite alternate; }
@keyframes bounce { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-14px) scale(1.03, .97); } }
.feedback_option:hover .is-happy .f-eyes { opacity: 0; } .feedback_option:hover .is-happy .f-eyes-alt { opacity: 1; }
.feedback_option:hover .is-happy .f-blush { transform: scale(1.35); opacity: .9; }
.feedback_option:hover .is-happy .m-a { opacity: 0; } .feedback_option:hover .is-happy .m-b { opacity: 1; }
.is-happy .f-eyes { transition: opacity .2s; }
/* excited: wiggles, mouth opens wider, sparkles spin out */
.feedback_option:hover .is-excited .f-body { animation: wiggle 420ms ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.04); } }
.feedback_option:hover .is-excited .f-mouth-g { transform: scale(1.12, 1.25); }
.feedback_option:hover .is-excited .f-tongue { transform: translateY(-4px); }
.face .f-sparks rect { transform-box: fill-box; transform-origin: center; }
.is-excited .f-sparks { opacity: 0; }
.feedback_option:hover .is-excited .f-sparks { opacity: 1; animation: sparks 900ms ease-in-out infinite alternate; }
@keyframes sparks { from { transform: scale(.7) rotate(0deg); } to { transform: scale(1.15) rotate(20deg); } }
/* check badge: ring fills gold, tick draws itself */
.feedback_check { border: 0 !important; background: none !important; box-shadow: none !important; width: 46rem; height: 46rem; }
.feedback_check svg { width: 100%; height: 100%; overflow: visible; }
.chk-ring { fill: var(--color-lavender); stroke: var(--color-dark); stroke-width: 3; transition: fill .35s, transform .5s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
.chk-mark { fill: none; stroke: var(--color-dark); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 450ms var(--ease-out) 120ms; }
.feedback_input:checked + .feedback_option .chk-ring { fill: var(--color-gold); transform: scale(1.12); }
.feedback_input:checked + .feedback_option .chk-mark { stroke-dashoffset: 0; }
.feedback_option:hover .chk-ring { transform: scale(1.08); }
.feedback_input:checked + .feedback_option { box-shadow: 0 0 0 4rem var(--color-dark), 0 20rem 40rem rgba(36,0,70,.2); }
.feedback_list li { position: relative; }
.mood-burst { position: absolute; left: 50%; top: 40%; width: 18rem; height: 18rem; border-radius: 3rem; pointer-events: none; z-index: 5; }
@media (max-width: 767px) { .feedback_check { width: 24rem; height: 24rem; } .mood-burst { width: 9rem; height: 9rem; } }
@media (prefers-reduced-motion: reduce) { .face * { animation: none !important; } }
/* footer tape: brand elements only, alternating colours, gentle sway */
.marquee_icon.el { width: auto; height: 110rem; aspect-ratio: auto; animation: el-sway 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.marquee_block .marquee_icon.el:nth-of-type(odd) { fill: var(--color-magenta); }
.marquee_block .marquee_icon.el:nth-of-type(even) { fill: var(--color-violet); animation-delay: -1.2s; }
@keyframes el-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@media (max-width: 767px) { .marquee_icon.el { height: 40rem; } }
.marquee_icon.el { height: 130rem; } @media (max-width: 767px) { .marquee_icon.el { height: 44rem; } }
/* footer tape: full Seet palette */
.marquee_block .marquee_icon.el:nth-of-type(1) { fill: #240046; }
.marquee_block .marquee_icon.el:nth-of-type(2) { fill: #fd4504; }
.marquee_block .marquee_icon.el:nth-of-type(3) { fill: #621dcd; }
.marquee_block .marquee_icon.el:nth-of-type(4) { fill: #dd055b; }
.marquee_block .marquee_icon.el:nth-of-type(5) { fill: #191823; }
.marquee_block .marquee_icon.el:nth-of-type(6) { fill: #fdb112; filter: drop-shadow(3rem 3rem 0 #240046); }
.marquee_block .marquee_text:nth-of-type(odd) { color: #240046; }
.marquee_block .marquee_text:nth-of-type(even) { color: #621dcd; }
.marquee_icon.el { height: 95rem; } @media (max-width: 767px) { .marquee_icon.el { height: 32rem; } }
.marquee_block .marquee_text, .marquee_block .marquee_text:nth-of-type(odd), .marquee_block .marquee_text:nth-of-type(even) { color: #240046; }
/* feedback: orange instead of pink, clearer cards + labels */
.feedback_title .additional-font { color: var(--color-orange); }
.feedback_list { gap: 34rem; margin-top: 60rem; align-items: stretch; }
.feedback_option { width: 280rem; height: 100%; padding: 30rem 28rem 26rem; border-radius: 36rem; background: rgba(255,255,255,.55); border: 3rem solid transparent; display: flex; flex-direction: column; align-items: center; }
.feedback_option svg.face { width: 190rem; height: 190rem; }
.feedback_option-label { margin-top: 22rem; display: inline-block; padding: 10rem 20rem; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-lavender); font-weight: 700; font-size: 20rem; line-height: 1.2; white-space: nowrap; }
.feedback_input:checked + .feedback_option { background: var(--color-white); box-shadow: 0 0 0 4rem var(--color-dark), 0 24rem 50rem rgba(36,0,70,.2); transform: translateY(-10rem); }
.feedback_input:checked + .feedback_option .feedback_option-label { background: var(--color-orange); color: var(--color-white); }
.feedback_check { top: 16rem; right: 16rem; }
.section_feedback .cta-button { margin-top: 80rem; }
.section_feedback { padding-bottom: 240rem; }
@media (max-width: 767px) {
  .feedback_list { gap: 8rem; margin-top: 26rem; width: 100%; justify-content: center; }
  .feedback_list li { flex: 1; max-width: 118rem; }
  .feedback_option { width: 100%; padding: 12rem 8rem 12rem; border-radius: 18rem; }
  .feedback_option svg.face { width: 78rem; height: 78rem; }
  .feedback_option-label { margin-top: 10rem; font-size: 11rem; padding: 6rem 9rem; white-space: normal; text-align: center; }
  .feedback_check { top: 6rem; right: 6rem; }
  .section_feedback .cta-button { margin-top: 36rem; }
  .section_feedback { padding-bottom: 130rem; }
}
.bottom-menu_wrap { background: rgba(36,0,70,.88); border-color: rgba(229,225,255,.18); box-shadow: 0 16rem 40rem rgba(20,0,40,.3); color: var(--color-lavender); }
.footer_logo { align-items: center; width: max-content; } .footer_logo-tag { fill: var(--color-white); }
/* services: the pink card's slow hero flip */
.services_card.pink { transform-style: preserve-3d; }
.services_flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.services_card-back { flex-direction: column; gap: 40rem; overflow: hidden; }
.services_card-back .back-logo { width: 300rem; height: auto; fill: var(--color-magenta-light); }
.services_card-back .back-palm { position: absolute; right: -40rem; bottom: -30rem; width: 220rem; height: auto; fill: rgba(255,255,255,.14); }
.services_glow { position: absolute; left: 8%; right: 8%; bottom: -30rem; height: 80rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(221,5,91,.75), transparent); filter: blur(12rem); opacity: 0; pointer-events: none; }
.services_card-face { overflow: hidden; }
.services_sheen { position: absolute; inset: -30% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%); transform: translateX(-70%); pointer-events: none; z-index: 2; }
/* accent letters sized to sit level with the bold letters */
.additional-font, .hero_title .t-b, .hero_adaptive .additional-font { font-size: 1.15em; line-height: 0; }
/* coloured letters: same font as the words around them, colour only */
.additional-font, .hero_title .t-b, .hero_adaptive .additional-font { font-family: inherit; font-weight: inherit; font-style: normal; font-size: 1em; letter-spacing: inherit; line-height: inherit; }

/* ===== round 6 ===== */
/* 1. hero: single logo badge overlapping the first line */
.hero_title { position: relative; }
.section_hero .container { position: relative; }
.hero_badge { position: absolute; z-index: 8; top: -20rem; left: 60%; display: inline-flex; align-items: center; gap: 14rem; padding: 16rem 30rem 16rem 24rem; border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-dark); font-weight: 700; font-size: 24rem; white-space: nowrap; rotate: -7deg; box-shadow: 0 16rem 40rem rgba(0,0,0,.35); animation: badge-in 900ms var(--ease-spring) 1.1s both, badge-float 4s ease-in-out 2s infinite; }
.hero_badge-logo { height: 40rem; width: auto; fill: var(--color-dark); }
@keyframes badge-in { from { scale: 0; rotate: -40deg; opacity: 0; } to { scale: 1; rotate: -7deg; opacity: 1; } }
@keyframes badge-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10rem; } }
@media (max-width: 767px) { .hero_badge { top: -26rem; left: auto; right: 2%; font-size: 12rem; gap: 7rem; padding: 8rem 14rem 8rem 12rem; } .hero_badge-logo { height: 20rem; } }

/* 2. about tiles: finjan frame, same size for all */
.about_tile, .about_tile.is-wide { width: 250rem; }
@media (max-width: 767px) { .about_tile, .about_tile.is-wide { width: 62rem; } }
.tile-icon svg { filter: drop-shadow(0 10rem 14rem rgba(36,0,70,.18)); }

/* 3. pink card back: faint palm only */
.services_card-back .back-palm { position: static; width: 58%; fill: rgba(255,255,255,.16); }

/* 4. work title styled like خدماتنا */
.cover_sticker { color: var(--color-lavender); -webkit-text-stroke: 0; paint-order: normal; rotate: 0deg; filter: none; text-shadow: 8rem 8rem 0 var(--color-violet); }
@media (max-width: 767px) { .cover_sticker { text-shadow: 4rem 4rem 0 var(--color-violet); } }

/* 5. feedback placeholder icons */
.face.is-ph .f-body { transform-box: view-box; transform-origin: 100px 100px; transition: transform 500ms var(--ease-spring); }
.feedback_option:hover .face.is-ph .f-body { transform: scale(1.06) rotate(-5deg); }
.face.is-ph .ph-icon { transform-box: view-box; transform-origin: 100px 100px; transition: transform 600ms var(--ease-spring); }
.feedback_option:hover .face.is-ph .ph-icon { transform: scale(1.12); }
.feedback_input:checked + .feedback_option .chk-ring { fill: var(--color-violet); }
.chk-mark { stroke: var(--color-lavender); }
.feedback_input:checked + .feedback_option .chk-mark { stroke: var(--color-white); }

/* 6. more primary purple, less yellow (dark purple areas untouched) */
.button-pill { background: var(--color-violet); color: var(--color-white); --bubble: var(--color-magenta); }
.button-pill.is-hover { color: var(--color-white); }
.hero_title .t-b, .hero_adaptive .additional-font { color: #9d6bff; }
.hero_title .t-b.pink { color: var(--color-magenta); }
.hero_line .pen { fill: var(--color-lavender); }
.hero_line-circle { background: var(--color-violet); }
.hero_dec.is-oud .hero_dec-el { fill: var(--color-violet); }
.highlighted-text { background-image: linear-gradient(var(--color-violet), var(--color-violet)); color: var(--color-white); }
.services_card.green { background: var(--color-violet); color: var(--color-lavender); }
.services_card-button.green { background: var(--color-lavender); color: var(--color-violet); --bubble: var(--color-white); }
.services_card-button.is-hover.green { color: var(--color-violet); }
.svc_kicker { color: #b39bff; }
.svc_sub .additional-font, .cover_lead .additional-font, .view-all_arrow-text .additional-font { color: #b39bff; }
.svc_card.is-violet .svc_face { --el: var(--color-lavender); }
.svc_card.is-violet .svc_btn.is-main { background: var(--color-lavender); color: var(--color-violet); }
.svc_btn.is-main { color: var(--color-lavender); --bubble: var(--color-violet); }
.cases_arrow:hover { background: var(--color-violet); } .cases_arrow:hover svg { fill: var(--color-white); }
.footer_title { color: var(--color-lavender); }
.cursor_state.default .cursor_label { background: var(--color-violet); color: var(--color-white); }
.discuss_submit { color: var(--color-lavender); }
@media (max-width: 767px) { .hero_adaptive { font-weight: 700; letter-spacing: -0.035em; } }

/* ===== round 7 ===== */
/* 2. أعمالنا in yellow */
/* 5. footer tape: smaller content */
.marquee_text { font-size: 76rem; } .marquee_text.ar { font-size: 76rem; } .marquee_icon.el { height: 66rem; }
.marquee { padding: 14rem 0; }
@media (max-width: 767px) { .marquee_text, .marquee_text.ar { font-size: 28rem; } .marquee_icon.el { height: 24rem; } }
/* hero copy in Arabic (Fatimah) */
.hero_title[lang="ar"], .hero_adaptive[lang="ar"] { font-family: var(--font-arabic); font-weight: 900; letter-spacing: 0; }
.hero_title[lang="ar"] { font-size: 190rem; line-height: 1.22; max-width: 1400rem; }
.hero_title[lang="ar"] .t-b, .hero_adaptive[lang="ar"] .additional-font { font-family: var(--font-arabic); font-weight: 900; }
.hero_adaptive[lang="ar"] .additional-font.pink { color: var(--color-magenta); }
@media (max-width: 767px) { .hero_adaptive[lang="ar"] { font-size: 62rem; line-height: 1.3; } }
/* hero colour swap + smaller size */
.hero_title .t-b.primary, .hero_adaptive .additional-font.primary { color: #621DCD; }
.hero_title .t-b.pink, .hero_adaptive .additional-font.pink { color: var(--color-magenta); }
.hero_title[lang="ar"] { font-size: 160rem; }
@media (max-width: 767px) { .hero_adaptive[lang="ar"] { font-size: 54rem; } }
/* ===== statement section (replaces about) ===== */
.section_statement { position: relative; background: var(--color-lavender); color: var(--color-dark); padding: 220rem 0 240rem; overflow: hidden; }
.statement { font-family: var(--font-arabic); font-weight: 900; font-size: 96rem; line-height: 1.5; text-align: center; max-width: 1640rem; margin: 0 auto; letter-spacing: 0; }
.st-line { display: block; }
.st-w { display: inline-block; opacity: var(--o, 1); transition: opacity .25s linear; }
.st-hl.pink { color: var(--color-magenta); }
.st-hl.violet { color: var(--color-violet); }
.st-ic { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin: 0 .12em; transform: rotate(var(--r)) scale(var(--s, 1)); transition: transform .5s var(--ease-spring); }
.st-ic svg { width: 100%; height: 100%; fill: var(--c); display: block; overflow: visible; }
.st-ic:hover { --s: 1.18; }
html.st-js .st-w { --o: .16; }
html.st-js .st-ic { --s: 0; }
html.st-js .st-ic.is-on { --s: 1; }
html.st-js .st-ic.is-on:hover { --s: 1.18; }
@media (max-width: 767px) {
  .section_statement { padding: 90rem 0 100rem; }
  .statement { font-size: 30rem; line-height: 1.6; }
  .st-line { display: inline; }
  .st-line::after { content: " "; }
}
.st-ic { width: 1.3em; height: 1.3em; vertical-align: -0.3em; margin: 0 .1em; }
.statement { max-width: 1780rem; }
@media (max-width: 767px) { .st-line:nth-child(5) { display: block; margin-top: .35em; } .st-line:nth-child(5)::after { content: none; } }
.st-g { white-space: nowrap; } .st-g .st-ic { margin-inline-end: .06em; }
/* statement: smaller + right aligned */
.statement { font-size: 74rem; line-height: 1.55; text-align: right; max-width: 1500rem; margin: 0 0 0 auto; }
@media (max-width: 767px) { .statement { font-size: 25rem; max-width: none; } }
/* statement: photo background */
.section_statement { background: #240046 url("../assets/images/asset-bg-03.jpg") center / cover no-repeat; color: var(--color-white); min-height: 100vh; display: flex; align-items: center; isolation: isolate; }
.section_statement::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(270deg, rgba(36,0,70,.92) 0%, rgba(36,0,70,.82) 45%, rgba(36,0,70,.55) 100%); }
.section_statement .container { width: 100%; }
.section_statement .st-w { text-shadow: 0 2rem 18rem rgba(10,0,25,.35); }
.st-hl.pink { color: #ff4d8d; }
.st-hl.violet { color: #b98cff; }
@media (max-width: 767px) {
  .section_statement { background-image: url("../assets/images/asset-bg-04.jpg"); min-height: auto; }
  .section_statement::before { background: rgba(36,0,70,.84); }
}
.st-hl.pink { color: #DD055B; }
.st-hl.violet { color: #621DCD; }
/* statement: body smaller, closing lines keep size + separated */
.statement .st-line:nth-child(-n+4) { font-size: 60rem; }
.statement .st-line:nth-child(5) { margin-top: 70rem; }
@media (max-width: 767px) {
  .statement .st-line:nth-child(-n+4) { font-size: 21rem; }
  .statement .st-line:nth-child(5) { margin-top: 26rem; }
  .statement .st-line:nth-child(6) { display: block; }
}
.statement { max-width: 1780rem; } .statement .st-line { text-wrap: pretty; }
/* services heading badge (same motion as the hero badge, triggered on scroll) */
.svc_heading-wrap { position: relative; display: inline-block; }
.svc_badge { top: -34rem; left: -60rem; right: auto; font-family: var(--font-arabic); font-weight: 700; font-size: 28rem; animation: none; opacity: 0; scale: 0; }
.svc_badge.is-in { animation: badge-in 900ms var(--ease-spring) .2s both, badge-float 4s ease-in-out 1.1s infinite; }
html.no-motion .svc_badge { opacity: 1; scale: 1; }
@media (max-width: 767px) { .svc_badge { top: -30rem; left: -10rem; font-size: 13rem; } }
.svc_head { padding-top: 40rem; }
/* services back: list only */
.svc_back .svc_list { margin-top: 34rem; }
.svc_back .svc_list li:first-child { font-size: 1.08em; background: rgba(255,255,255,.18); }
/* works title: two lines */
.cover_sticker { font-size: 100rem; line-height: 1.15; }
.cover_sticker span { display: block; }
@media (max-width: 767px) { .cover_sticker { font-size: 46rem; } }

/* ===== partners (replaces trust copy; falcon emblem kept) ===== */
.section_trust .trust_wrapper { direction: rtl; grid-template-columns: 1fr 600rem; gap: 80rem; }
.section_trust .trust_icon { direction: ltr; width: 600rem; }
.partners_title { font-family: var(--font-arabic); font-weight: 900; font-size: 150rem; line-height: 1.1; color: var(--color-dark); text-shadow: 7rem 7rem 0 var(--color-violet); margin-bottom: 70rem; }
.partners_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26rem 22rem; }
.partner { position: relative; height: 150rem; border-radius: 26rem; background: rgba(255,255,255,.55); border: 2rem solid rgba(98,29,205,.12); display: grid; place-items: center; padding: 26rem 30rem; transition: transform .4s var(--ease-spring), background-color .3s, box-shadow .3s; opacity: 0; transform: translateY(30rem); }
.partners.is-in .partner { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--k) * 45ms), transform .7s var(--ease-spring) calc(var(--k) * 45ms), background-color .3s, box-shadow .3s; }
.partner_logo { display: block; width: 100%; height: 100%; background: var(--color-dark); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background-color .3s; }
.partner:hover { background: var(--color-violet); transform: translateY(-8rem) rotate(-2deg); box-shadow: 0 18rem 40rem rgba(98,29,205,.3); }
.partner:hover .partner_logo { background: var(--color-white); }
html.no-motion .partner { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .section_trust .trust_wrapper { grid-template-columns: 1fr; gap: 30rem; }
  .section_trust .trust_icon { width: 240rem; order: -1; }
  .partners_title { font-size: 54rem; text-shadow: 3rem 3rem 0 var(--color-violet); margin-bottom: 26rem; text-align: center; }
  .partners_grid { grid-template-columns: repeat(3, 1fr); gap: 10rem; }
  .partner { height: 74rem; border-radius: 14rem; padding: 12rem 12rem; }
}
.lg-01 { --m: url("../assets/images/asset-bg-05.png"); }
.lg-02 { --m: url("../assets/images/asset-bg-06.png"); }
.lg-03 { --m: url("../assets/images/asset-bg-07.png"); }
.lg-04 { --m: url("../assets/images/asset-bg-08.png"); }
.lg-05 { --m: url("../assets/images/asset-bg-09.png"); }
.lg-06 { --m: url("../assets/images/asset-bg-10.png"); }
.lg-07 { --m: url("../assets/images/asset-bg-11.png"); }
.lg-08 { --m: url("../assets/images/asset-bg-12.png"); }
.lg-09 { --m: url("../assets/images/asset-bg-13.png"); }
.lg-10 { --m: url("../assets/images/asset-bg-14.png"); }
.lg-11 { --m: url("../assets/images/asset-bg-15.png"); }
.lg-12 { --m: url("../assets/images/asset-bg-16.png"); }
.lg-13 { --m: url("../assets/images/asset-bg-17.png"); }
.lg-14 { --m: url("../assets/images/asset-bg-18.png"); }
.lg-15 { --m: url("../assets/images/asset-bg-19.png"); }
.lg-16 { --m: url("../assets/images/asset-bg-20.png"); }
.lg-17 { --m: url("../assets/images/asset-bg-21.png"); }
.lg-18 { --m: url("../assets/images/asset-bg-22.png"); }
.lg-19 { --m: url("../assets/images/asset-bg-23.png"); }
.partners_title { color: var(--color-violet); text-shadow: 7rem 7rem 0 var(--color-dark); }
@media (max-width: 767px) { .partners_title { text-shadow: 3rem 3rem 0 var(--color-dark); } }
/* ===== footer CTA ===== */
.footer_cta { display: block; font-family: var(--font-arabic); font-weight: 900; font-size: 92rem; line-height: 1.5; color: var(--color-lavender); text-align: center; margin: 10rem auto 80rem; }
.cta_line { display: block; }
.cta_roll { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: top; }
.cta_stack { display: flex; flex-direction: column; transition: transform 600ms var(--ease-out); }
.cta_item { display: flex; align-items: center; justify-content: center; gap: .22em; height: 1.5em; white-space: nowrap; color: var(--color-gold); }
.cta_icon { width: .95em; height: .95em; fill: var(--color-gold); flex: none; }
.footer_cta:hover .cta_icon { animation: cta-wobble .6s ease; }
@keyframes cta-wobble { 0%,100% { rotate: 0deg; } 30% { rotate: -12deg; } 65% { rotate: 8deg; } }
@media (max-width: 767px) { .footer_cta { font-size: 34rem; margin-bottom: 40rem; } }
.footer_cta { font-size: 80rem; text-align: right; width: max-content; max-width: 100%; margin-inline: 0; }
.cta_line { white-space: nowrap; }
.cta_item { justify-content: flex-start; }
@media (max-width: 767px) { .footer_cta { font-size: 30rem; } }
/* ===== footer CTA: slot machine ===== */
.footer_cta { font-size: 80rem; width: 100%; max-width: none; text-align: right; margin: 10rem 0 90rem; }
.cta_line { color: var(--color-lavender); line-height: 1.4; margin-bottom: 26rem; }
.slot { position: relative; display: inline-flex; align-items: center; direction: rtl; padding-left: 110rem; }
.slot_frame { position: relative; padding: 30rem; border-radius: 34rem; background: var(--color-violet); box-shadow: inset 0 0 0 6rem #7b3bf0, inset 0 -10rem 0 rgba(36,0,70,.35), 0 26rem 60rem rgba(0,0,0,.35); }
.slot_bulbs { position: absolute; inset: 13rem; pointer-events: none; }
.slot_bulbs i { position: absolute; width: 16rem; height: 16rem; margin: -8rem 0 0 -8rem; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 10rem 3rem rgba(253,177,18,.75); animation: bulb 1.4s ease-in-out infinite; animation-delay: calc(var(--b) * -0.18s); }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: none; } }
.slot.is-spinning .slot_bulbs i { animation: bulb-chase .45s linear infinite; animation-delay: calc(var(--b) * -0.03s); }
@keyframes bulb-chase { 0%, 100% { opacity: 1; background: #fff; } 50% { opacity: .2; } }
.slot.is-win .slot_bulbs i { animation: bulb-win .25s steps(2) 6; }
@keyframes bulb-win { 50% { opacity: .15; } }
.slot_window { position: relative; width: 640rem; height: 1.5em; overflow: hidden; border-radius: 20rem; background: var(--color-lavender); box-shadow: inset 0 0 0 5rem var(--color-dark), inset 0 22rem 26rem -12rem rgba(36,0,70,.45), inset 0 -22rem 26rem -12rem rgba(36,0,70,.45); cursor: pointer; }
.slot_window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%); pointer-events: none; }
.slot_strip { transition: transform 1.55s cubic-bezier(.12,.7,.18,1.04); will-change: transform; }
.slot.is-spinning .slot_strip { filter: blur(3rem); }
.slot_item { height: 1.5em; display: flex; align-items: center; justify-content: center; gap: .28em; color: var(--color-dark); font-weight: 900; white-space: nowrap; }
.slot_icon { width: .9em; height: .9em; flex: none; }
.slot_icon.is-camel { fill: var(--color-orange); }
.slot_icon.is-cup { fill: var(--color-violet); }
.slot.is-win .slot_item .slot_icon { animation: slot-pop .6s var(--ease-spring); }
@keyframes slot-pop { 0% { scale: .4; rotate: -20deg; } 100% { scale: 1; rotate: 0deg; } }
/* lever */
.slot_lever { position: absolute; left: 0; top: 50%; width: 110rem; height: 230rem; translate: 0 -78%; background: none; border: 0; padding: 0; cursor: pointer; }
.slot_hub { position: absolute; right: 0; bottom: 0; width: 52rem; height: 70rem; border-radius: 0 16rem 16rem 0; background: linear-gradient(90deg, #c98a05, var(--color-gold) 55%, #ffd466); transform: scaleX(-1); }
.slot_arm { position: absolute; left: 22rem; bottom: 30rem; width: 18rem; height: 170rem; border-radius: 9rem; background: linear-gradient(90deg, #c98a05, #ffd466 50%, #c98a05); transform-origin: 50% 100%; }
.slot_arm::after { content: ""; position: absolute; left: 0; bottom: -4rem; width: 70rem; height: 18rem; border-radius: 9rem; background: linear-gradient(180deg, #ffd466, #c98a05); }
.slot_knob { position: absolute; left: 50%; top: -34rem; width: 64rem; height: 64rem; margin-left: -32rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6fa3, var(--color-magenta) 55%, #9e0340); box-shadow: 0 8rem 16rem rgba(0,0,0,.35); transition: scale .25s var(--ease-spring); }
.slot_lever:hover .slot_knob { scale: 1.12; }
.slot_lever:focus-visible { outline: 3rem solid var(--color-gold); outline-offset: 6rem; border-radius: 12rem; }
.slot_lever.is-pulled .slot_arm { animation: lever-pull .75s cubic-bezier(.3,.7,.3,1); }
@keyframes lever-pull { 0% { transform: scaleY(1); } 30% { transform: scaleY(-.8); } 55% { transform: scaleY(-.8); } 100% { transform: scaleY(1); } }
@media (max-width: 767px) {
  .footer_cta { font-size: 30rem; margin-bottom: 44rem; }
  .cta_line { margin-bottom: 12rem; }
  .slot { padding-left: 50rem; }
  .slot_frame { padding: 14rem; border-radius: 16rem; }
  .slot_bulbs { inset: 6rem; } .slot_bulbs i { width: 7rem; height: 7rem; margin: -3.5rem 0 0 -3.5rem; }
  .slot_window { width: 220rem; border-radius: 10rem; }
  .slot_lever { width: 50rem; height: 100rem; }
  .slot_hub { width: 24rem; height: 32rem; }
  .slot_arm { left: 10rem; bottom: 14rem; width: 8rem; height: 76rem; }
  .slot_arm::after { width: 32rem; height: 8rem; }
  .slot_knob { width: 28rem; height: 28rem; margin-left: -14rem; top: -15rem; }
}
@media (max-width: 767px) { .slot_window { width: 262rem; } .slot_item { font-size: 27rem; } .slot_window, .slot_item { height: 44rem; } }
/* ===== footer layout v2: logo right, game left, contacts small under game, legal centred at the bottom ===== */
.footer_wrapper.f2 { grid-template-columns: 1fr auto; align-items: start; gap: 80rem; }
.f_right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.f_right .footer_logo { margin-bottom: 60rem; }
.f_right .footer_sitemap { margin-top: 0; }
.f_right .footer_nav { justify-content: flex-end; }
.f_left { justify-self: start; }
.f_left .footer_cta { width: max-content; margin: 0; }
.f_contact { display: flex; align-items: center; gap: 90rem; margin-top: 80rem; font-size: 17rem; color: rgba(229,225,255,.72); }
.f_item { display: flex; align-items: center; gap: 12rem; }
.f_label { font-family: var(--font-arabic); font-weight: 700; color: var(--color-gold); }
.f_val { font-family: var(--font-display); letter-spacing: .06em; }
a.f_item:hover .f_val { color: var(--color-white); }
.f_socials { display: flex; gap: 8rem; }
.f_socials .social-link { width: 36rem; height: 36rem; font-size: 11rem; }
.footer_bottom { display: flex; justify-content: center; align-items: center; gap: 14rem; margin-top: 110rem; padding-top: 30rem; border-top: 1px solid rgba(229,225,255,.12); font-size: 15rem; opacity: .7; text-align: center; }
@media (max-width: 767px) {
  .footer_wrapper.f2 { grid-template-columns: 1fr; gap: 40rem; }
  .f_right { order: -1; align-items: center; text-align: center; }
  .f_right .footer_logo { margin-bottom: 26rem; }
  .f_right .footer_nav { justify-content: center; }
  .f_left { justify-self: center; }
  .f_left .footer_cta { width: auto; }
  .f_contact { flex-wrap: wrap; justify-content: center; gap: 16rem 30rem; margin-top: 36rem; font-size: 12rem; }
  .f_socials .social-link { width: 30rem; height: 30rem; font-size: 10rem; }
  .footer_bottom { flex-direction: column; gap: 4rem; margin-top: 40rem; font-size: 11rem; }
  .fb_dot { display: none; }
}
/* footer: explore row aligned with contact row, bigger contacts */
.footer_wrapper.f2 { grid-template-rows: auto auto; row-gap: 0; }
.f_left, .f_right { display: contents; }
.f2 .footer_cta { grid-column: 1; grid-row: 1; justify-self: start; }
.f2 .f_contact { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; margin-top: 70rem; font-size: 24rem; }
.f2 .footer_logo { grid-column: 2; grid-row: 1; justify-self: end; margin-bottom: 0; }
.f2 .f_nav { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; text-align: right; }
.f2 .f_nav .footer_nav { justify-content: flex-end; }
.f_socials .social-link { width: 50rem; height: 50rem; font-size: 15rem; }
.f_socials { gap: 12rem; }
@media (max-width: 767px) {
  .footer_wrapper.f2 { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 30rem; }
  .f2 .footer_logo { grid-column: 1; grid-row: 1; justify-self: center; }
  .f2 .f_nav { grid-column: 1; grid-row: 2; justify-self: center; text-align: center; }
  .f2 .f_nav .footer_nav { justify-content: center; }
  .f2 .footer_cta { grid-column: 1; grid-row: 3; justify-self: center; }
  .f2 .f_contact { grid-column: 1; grid-row: 4; justify-self: center; margin-top: 10rem; font-size: 15rem; }
  .f_socials .social-link { width: 36rem; height: 36rem; font-size: 11rem; }
}
/* ===== location section: نذيع الصيت وسط زحام أنس بن مالك ===== */
.section_zeham { position: relative; background: var(--color-dark); color: var(--color-white); padding: 170rem 0 200rem; overflow: hidden; }
.zeham_title { font-family: var(--font-arabic); font-weight: 900; font-size: 118rem; line-height: 1.2; color: var(--color-lavender); text-shadow: 7rem 7rem 0 var(--color-violet); text-align: right; max-width: 1500rem; margin: 0 0 90rem auto; }
.zeham_gold { color: var(--color-gold); }
.zeham_card { position: relative; rotate: -1.2deg; transition: rotate .6s var(--ease-out); }
.zeham_card:hover { rotate: 0deg; }
.zeham_map { position: relative; aspect-ratio: 1000 / 562; border-radius: 30rem; overflow: hidden; background: var(--color-violet); box-shadow: 0 40rem 90rem rgba(0,0,0,.45); isolation: isolate; }
.zeham_map::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section_zeham { --roads: url("../assets/images/asset-bg-24.png"); }
.zeham_roads { position: absolute; inset: 0; background: rgba(229,225,255,.42); -webkit-mask: var(--roads) center / 100% 100% no-repeat; mask: var(--roads) center / 100% 100% no-repeat; }
.zeham_svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zeham_anas-glow { fill: none; stroke: var(--color-gold); stroke-width: 34; opacity: .22; filter: blur(6px); }
.zeham_anas { fill: none; stroke: var(--color-gold); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.section_zeham.is-in .zeham_anas { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(.6,0,.2,1) .2s; }
.zeham_cars { opacity: 0; transition: opacity .6s 1.8s; }
.section_zeham.is-in .zeham_cars { opacity: 1; }
.zm_el > g { transform-box: fill-box; }
.zm_el { opacity: 0; transform: translateY(14px) scale(.6); transform-box: fill-box; transform-origin: center; }
.section_zeham.is-in .zm_el { opacity: 1; transform: none; transition: opacity .5s calc(900ms + var(--d)), transform .8s var(--ease-spring) calc(900ms + var(--d)); }
.zeham_pin { opacity: 0; }
.zeham_pin .zp_drop { fill: var(--color-white); stroke: var(--color-dark); stroke-width: 3; }
.zp_pulse { fill: none; stroke: var(--color-white); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: zp-pulse 2.4s ease-out infinite; }
.zp_pulse.is-2 { animation-delay: 1.2s; }
@keyframes zp-pulse { 0% { scale: .3; opacity: .9; } 100% { scale: 3.2; opacity: 0; } }
.section_zeham.is-in .zeham_pin { opacity: 1; animation: pin-drop .9s var(--ease-spring) 1.5s both; }
@keyframes pin-drop { 0% { opacity: 0; translate: 0 -60px; } 100% { opacity: 1; translate: 0 0; } }
.zeham_label { position: absolute; left: 42.2%; top: 51.4%; translate: -50% calc(-100% - 64rem); padding: 12rem 26rem; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-white); font-family: var(--font-arabic); font-weight: 700; font-size: 26rem; white-space: nowrap; box-shadow: 0 12rem 30rem rgba(0,0,0,.35); opacity: 0; }
.zeham_label::after { content: ""; position: absolute; left: 50%; bottom: -9rem; width: 18rem; height: 18rem; margin-left: -9rem; background: inherit; rotate: 45deg; border-radius: 3rem; z-index: -1; }
.section_zeham.is-in .zeham_label { opacity: 1; transition: opacity .5s 2.2s, translate .7s var(--ease-spring) 2.2s; }
/* play bar */
.zeham_player { position: absolute; left: 40rem; bottom: 40rem; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "art meta meta play" "art bar bar play"; align-items: center; column-gap: 20rem; row-gap: 10rem; width: 640rem; padding: 18rem 22rem; border-radius: 28rem; background: rgba(36,0,70,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(229,225,255,.14); box-shadow: 0 24rem 50rem rgba(0,0,0,.4); rotate: 1.2deg; }
.zp_art { grid-area: art; width: 104rem; height: 104rem; border-radius: 16rem; background: #333 url("../assets/images/asset-bg-25.png") center / cover; image-rendering: pixelated; box-shadow: 0 0 0 3rem var(--color-gold); }
.zp_meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; gap: 2rem; }
.zp_title { font-family: var(--font-arabic); font-weight: 900; font-size: 34rem; line-height: 1.2; color: var(--color-white); }
.zp_year { font-family: var(--font-arabic); font-weight: 700; font-size: 22rem; color: var(--color-gold); margin-inline-start: 8rem; }
.zp_artist { font-family: var(--font-arabic); font-size: 20rem; color: rgba(229,225,255,.7); }
.zp_oud { position: absolute; left: 150rem; top: -52rem; width: 44rem; height: 80rem; fill: var(--color-magenta); rotate: -14deg; filter: drop-shadow(0 6rem 10rem rgba(0,0,0,.35)); }
.zeham_player.is-playing .zp_oud { animation: oud-sway 1.1s ease-in-out infinite alternate; }
@keyframes oud-sway { from { rotate: -20deg; } to { rotate: -6deg; } }
.zp_eq { position: absolute; left: 204rem; top: -30rem; display: flex; align-items: flex-end; gap: 4rem; height: 30rem; opacity: 0; transition: opacity .3s; }
.zp_eq i { width: 5rem; height: 30%; border-radius: 3rem; background: var(--color-gold); }
.zeham_player.is-playing .zp_eq { opacity: 1; }
.zeham_player.is-playing .zp_eq i { animation: eq .8s ease-in-out infinite alternate; }
.zp_eq i:nth-child(2) { animation-delay: -.3s !important; } .zp_eq i:nth-child(3) { animation-delay: -.55s !important; } .zp_eq i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
.zp_bar { grid-area: bar; display: flex; align-items: center; gap: 12rem; }
.zp_time { font-family: var(--font-display); font-size: 14rem; color: rgba(229,225,255,.7); min-width: 40rem; text-align: center; }
.zp_track { position: relative; flex: 1; height: 8rem; border-radius: 8rem; background: rgba(229,225,255,.2); cursor: pointer; }
.zp_fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--color-gold); }
.zp_fill::after { content: ""; position: absolute; right: -8rem; top: 50%; width: 16rem; height: 16rem; margin-top: -8rem; border-radius: 50%; background: var(--color-white); }
.zp_play { grid-area: play; width: 84rem; height: 84rem; border-radius: 50%; border: 0; background: var(--color-gold); color: var(--color-dark); display: grid; place-items: center; cursor: pointer; transition: scale .3s var(--ease-spring); }
.zp_play:hover { scale: 1.08; }
.zp_play svg { width: 40rem; height: 40rem; fill: currentColor; }
.zp_play .i-pause, .zeham_player.is-playing .zp_play .i-play { display: none; }
.zeham_player.is-playing .zp_play .i-pause { display: block; }
.zp_screen { position: absolute; left: 0; bottom: calc(100% + 16px); width: 356px; height: 200px; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 20px 40px rgba(0,0,0,.45); opacity: 0; pointer-events: none; translate: 0 12px; transition: opacity .35s, translate .35s var(--ease-spring); }
.zeham_player.is-open .zp_screen { opacity: 1; pointer-events: auto; translate: 0 0; }
.zp_screen iframe, #zp-yt { width: 100%; height: 100%; border: 0; display: block; }
.zp_fallback { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--font-arabic); font-weight: 700; font-size: 16px; color: var(--color-gold); background: var(--color-dark); }
.zeham_player.is-failed .zp_fallback { display: grid; }
html.no-motion .zeham_anas { stroke-dashoffset: 0; } html.no-motion .zm_el, html.no-motion .zeham_pin, html.no-motion .zeham_label, html.no-motion .zeham_cars { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .section_zeham { padding: 80rem 0 90rem; }
  .zeham_title { font-size: 40rem; text-shadow: 3rem 3rem 0 var(--color-violet); margin-bottom: 30rem; }
  .zeham_card { rotate: 0deg; }
  .zeham_map { aspect-ratio: 4 / 5; border-radius: 18rem; }
  .zeham_roads, .zeham_svg { left: 50%; right: auto; width: calc(100% * 1000 / 562 * 5 / 4); height: 100%; translate: -42.2% 0; }
  .zeham_svg { inset: 0 auto; }
  .zeham_label { left: 50%; top: 51.4%; font-size: 14rem; padding: 7rem 14rem; translate: -50% calc(-100% - 40rem); }
  .zeham_player { position: relative; left: auto; bottom: auto; width: auto; margin-top: 18rem; rotate: 0deg; padding: 12rem 14rem; column-gap: 12rem; border-radius: 18rem; }
  .zp_art { width: 60rem; height: 60rem; border-radius: 10rem; }
  .zp_title { font-size: 20rem; } .zp_year { font-size: 13rem; } .zp_artist { font-size: 12rem; }
  .zp_play { width: 50rem; height: 50rem; } .zp_play svg { width: 24rem; height: 24rem; }
  .zp_oud { left: 80rem; top: -30rem; width: 24rem; height: 44rem; }
  .zp_eq { left: 110rem; top: -18rem; height: 18rem; } .zp_eq i { width: 3rem; }
  .zp_time { font-size: 10rem; min-width: 28rem; }
  .zp_screen { width: 100%; height: 200px; }
}
.zeham_title span { display: block; } .zeham_title { max-width: none; }
@media (max-width: 767px) { .zeham_svg { top: 0; bottom: auto; left: 50%; right: auto; } }
/* ===== location v2: map + small song card ===== */
.zeham_card { rotate: 0deg; display: grid; grid-template-columns: 1fr 460rem; gap: 36rem; align-items: stretch; direction: rtl; }
.zeham_card:hover { rotate: 0deg; }
.zeham_map { direction: ltr; }
.zeham_logo { filter: drop-shadow(0 4px 8px rgba(36,0,70,.55)); }
.zp_pulse { stroke-width: 3; }
.zeham_badge { left: 42.2%; top: 51.4%; right: auto; translate: -50% -210%; font-family: var(--font-arabic); font-size: 26rem; animation: none; opacity: 0; scale: 0; }
.section_zeham.is-in .zeham_badge { animation: badge-in 900ms var(--ease-spring) 2s both, badge-float 4s ease-in-out 2.9s infinite; }
html.no-motion .zeham_badge { opacity: 1; scale: 1; }
/* song card */
.zeham_song { position: relative; display: flex; flex-direction: column; padding: 44rem 40rem 40rem; border-radius: 30rem; background: var(--color-lavender); color: var(--color-dark); overflow: hidden; box-shadow: 0 40rem 90rem rgba(0,0,0,.45); }
.zs_air { font-family: var(--font-display); font-weight: 700; font-size: 22rem; letter-spacing: .14em; text-align: left; }
.zs_deco { position: absolute; left: -26rem; top: 170rem; width: 110rem; height: 196rem; fill: var(--color-violet); opacity: .12; rotate: -18deg; }
.zs_disc-wrap { position: relative; width: 300rem; aspect-ratio: 1; margin: 30rem auto 0; }
.zs_disc-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(98,29,205,.25); translate: 34rem 34rem; }
.zs_disc { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #240046 0 7rem, #33105e 7rem 10rem); box-shadow: inset 0 0 0 4rem #180030; animation: disc-spin 3.2s linear infinite; animation-play-state: paused; }
.zeham_song.is-playing .zs_disc { animation-play-state: running; }
@keyframes disc-spin { to { rotate: 360deg; } }
.zs_label { width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--color-orange); box-shadow: 0 0 0 6rem var(--color-gold); display: grid; place-items: center; overflow: hidden; }
.zs_label span { font-family: var(--font-arabic); font-weight: 900; font-size: 17rem; color: var(--color-dark); white-space: nowrap; }
.zs_title { font-family: var(--font-arabic); font-weight: 900; font-size: 64rem; line-height: 1.15; margin-top: auto; padding-top: 26rem; text-align: right; }
.zs_artist { font-family: var(--font-arabic); font-weight: 700; font-size: 22rem; margin-top: 6rem; text-align: right; opacity: .85; }
.zs_controls { display: flex; align-items: center; gap: 18rem; margin-top: 34rem; }
.zs_play { flex: none; width: 84rem; height: 84rem; border-radius: 50%; border: 0; background: var(--color-dark); color: var(--color-white); display: grid; place-items: center; cursor: pointer; transition: scale .3s var(--ease-spring); }
.zs_play:hover { scale: 1.07; }
.zs_play svg { width: 38rem; height: 38rem; fill: currentColor; }
.zs_play .i-pause, .zeham_song.is-playing .zs_play .i-play { display: none; }
.zeham_song.is-playing .zs_play .i-pause { display: block; }
.zs_track { position: relative; flex: 1; height: 10rem; border-radius: 10rem; background: rgba(98,29,205,.25); cursor: pointer; }
.zs_fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--color-violet); }
.zs_time { font-family: var(--font-display); font-weight: 700; font-size: 18rem; min-width: 60rem; text-align: right; }
.zs_screen { position: absolute; left: 50%; top: 96rem; width: 300px; height: 200px; margin-left: -150px; border-radius: 14px; overflow: hidden; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 3; }
.zeham_song.is-yt.is-playing .zs_screen, .zeham_song.is-failed .zs_screen { opacity: 1; pointer-events: auto; }
.zs_screen iframe, .zs_screen #zp-yt { width: 100%; height: 100%; border: 0; display: block; }
.zs_fallback { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--font-arabic); font-weight: 700; font-size: 16px; color: var(--color-gold); background: var(--color-dark); }
.zeham_song.is-failed .zs_fallback { display: grid; }
@media (max-width: 767px) {
  .zeham_card { grid-template-columns: 1fr; gap: 18rem; }
  .zeham_badge { font-size: 13rem; padding: 7rem 14rem; translate: -50% -190%; }
  .zeham_song { padding: 22rem 20rem 22rem; border-radius: 18rem; }
  .zs_air { font-size: 12rem; }
  .zs_disc-wrap { width: 170rem; margin-top: 16rem; } .zs_disc-wrap::before { translate: 18rem 18rem; }
  .zs_label span { font-size: 10rem; }
  .zs_title { font-size: 36rem; padding-top: 14rem; } .zs_artist { font-size: 13rem; }
  .zs_controls { margin-top: 18rem; gap: 10rem; } .zs_play { width: 50rem; height: 50rem; } .zs_play svg { width: 22rem; height: 22rem; }
  .zs_time { font-size: 12rem; min-width: 40rem; }
  .zs_screen { top: 40rem; }
  .zs_deco { width: 60rem; height: 106rem; top: 60rem; }
}
.zeham_badge-pos { position: absolute; left: 42.2%; top: 51.4%; width: 0; height: 0; }
.zeham_badge { position: absolute; left: auto; right: auto; top: auto; bottom: 70rem; translate: none; transform: translateX(-50%); }
@media (max-width: 767px) { .zeham_badge-pos { left: 50%; } .zeham_badge { bottom: 40rem; translate: none; } }
/* location intro copy */
.zeham_head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 80rem; margin-bottom: 90rem; direction: rtl; }
.zeham_head .zeham_title { margin: 0; }
.zeham_intro { max-width: 760rem; justify-self: end; text-align: right; font-family: var(--font-arabic); font-size: 26rem; line-height: 1.75; color: rgba(229,225,255,.85); }
.zeham_intro p + p { margin-top: 12rem; }
.zi_lead { font-weight: 900; font-size: 30rem; color: var(--color-white); }
.zi_in { font-weight: 700; color: var(--color-lavender); }
.zi_hl { color: var(--color-white); font-weight: 700; }
.zi_gold { color: var(--color-gold); font-weight: 900; }
@media (max-width: 767px) {
  .zeham_head { grid-template-columns: 1fr; gap: 18rem; margin-bottom: 30rem; }
  .zeham_intro { justify-self: stretch; font-size: 15rem; line-height: 1.7; }
  .zi_lead { font-size: 16rem; }
}
/* ===== song card v3: small spinning record top-left, synced lyrics, oud play button ===== */
.zeham_card { grid-template-columns: 1fr 540rem; }
.zeham_song { padding: 36rem 36rem 32rem; gap: 0; }
.zs_air, .zs_deco, .zs_disc-wrap, .zs_screen { display: none !important; }
.zs_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20rem; }
.zs_meta { text-align: right; padding-top: 10rem; }
.zs_title { font-size: 54rem; margin: 0; padding: 0; }
.zs_artist { font-size: 20rem; margin-top: 4rem; }
.zs_player { position: relative; flex: none; width: 170rem; height: 150rem; direction: ltr; }
.zs_disc { position: absolute; left: 0; top: 0; width: 150rem; height: 150rem; border-radius: 50%; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #240046 0 5rem, #3a1470 5rem 7rem); box-shadow: inset 0 0 0 3rem #180030, 10rem 12rem 0 rgba(98,29,205,.25); animation: disc-spin 2.4s linear infinite; animation-play-state: paused; }
.zs_disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 12%, rgba(255,255,255,.18) 16%, transparent 22% 62%, rgba(255,255,255,.12) 66%, transparent 72%); }
.zs_label { width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #240046 0 7%, var(--color-orange) 8%); box-shadow: 0 0 0 4rem var(--color-gold); }
.zeham_song.is-playing .zs_disc { animation-play-state: running; }
.zs_arm { position: absolute; right: 0; top: -4rem; width: 14rem; height: 110rem; transform-origin: 50% 8rem; rotate: -8deg; transition: rotate .7s var(--ease-spring); }
.zs_arm::before { content: ""; position: absolute; left: 50%; top: 0; width: 18rem; height: 18rem; margin-left: -9rem; border-radius: 50%; background: var(--color-dark); }
.zs_arm i { position: absolute; left: 50%; top: 8rem; width: 5rem; height: 96rem; margin-left: -2.5rem; border-radius: 3rem; background: var(--color-dark); }
.zs_arm i::after { content: ""; position: absolute; left: -6rem; bottom: -8rem; width: 17rem; height: 22rem; border-radius: 4rem; background: var(--color-gold); }
.zeham_song.is-playing .zs_arm { rotate: 22deg; }
/* lyrics */
.zs_lyrics { position: relative; flex: 1; min-height: 260rem; margin-top: 26rem; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.zs_lines { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10rem; transition: transform .6s var(--ease-out); }
.zs_line { max-width: 100%; font-family: var(--font-arabic); font-weight: 900; font-size: 30rem; line-height: 1.35; padding: 6rem 16rem; border-radius: 14rem; color: var(--color-dark); opacity: .38; cursor: pointer; transition: opacity .35s, background-color .35s, color .35s, scale .45s var(--ease-spring); transform-origin: right center; }
.zs_line.is-past { opacity: .22; }
.zs_line.is-active { opacity: 1; background: var(--hl); color: var(--hl-ink, #F8F8F8); scale: 1.04; }
.zs_line:hover { opacity: .8; }
.zs_controls { margin-top: 22rem; }
.zs_play svg { width: 40rem; height: 40rem; fill: currentColor; }
.zs_play .i-oud { width: 26rem; height: 46rem; fill: var(--color-gold); rotate: -12deg; }
.zs_play .i-pause, .zeham_song.is-playing .zs_play .i-oud { display: none; }
.zeham_song.is-playing .zs_play .i-pause { display: block; }
@media (max-width: 767px) {
  .zeham_card { grid-template-columns: 1fr; }
  .zeham_song { padding: 18rem 18rem 18rem; }
  .zs_title { font-size: 30rem; } .zs_artist { font-size: 12rem; }
  .zs_player { width: 96rem; height: 84rem; }
  .zs_disc { width: 84rem; height: 84rem; }
  .zs_arm { height: 62rem; width: 8rem; } .zs_arm i { height: 54rem; width: 3rem; margin-left: -1.5rem; } .zs_arm::before { width: 10rem; height: 10rem; margin-left: -5rem; }
  .zs_arm i::after { width: 9rem; height: 12rem; left: -3rem; bottom: -5rem; }
  .zs_lyrics { min-height: 150rem; margin-top: 14rem; }
  .zs_line { font-size: 17rem; padding: 4rem 10rem; border-radius: 9rem; }
  .zs_play .i-oud { width: 15rem; height: 27rem; }
}
/* map: clean line streets */
.section_zeham { --roads: none; }
.zeham_streets path { fill: none; stroke: var(--color-lavender); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.zs_minor { stroke-width: 1.6px; stroke-opacity: .5; }
.zs_major { stroke-width: 4px; stroke-opacity: .72; }
@media (max-width: 767px) { .zs_minor { stroke-width: 1px; } .zs_major { stroke-width: 2.5px; } }
.zeham_streets path { stroke-linecap: butt; stroke-linejoin: miter; }
.header_links[lang="ar"] { font-family: var(--font-arabic); font-weight: 700; font-size: 1.08em; }
.header_links[lang="ar"] a, .header_links[lang="ar"] .menu-roll-line { white-space: nowrap; } .header_links[lang="ar"] .menu-roll { height: 1.5em; } .header_links[lang="ar"] .menu-roll-line { height: 1.5em; line-height: 1.5em; }
/* header bar: rounded pill (no arrow tip) */
.header_bg svg { display: none; }
.header_bg { border-radius: 999rem; background: rgba(211,197,246,.12); border: 1px solid rgba(211,197,246,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header_nav { padding-right: 26rem; width: auto; }
@media (max-width: 767px) { .header_nav { padding-right: 16rem; } }
/* footer without explore: logo spans both rows */
.f2 .footer_logo { grid-row: 1 / span 2; align-self: start; }
.cursor_label[lang="ar"] { font-family: var(--font-arabic); font-size: 18rem; }
/* services: clicked card moves to the centre */
@media (min-width: 768px) and (hover: hover) {
  .svc_track.is-dealt .svc_card.is-pinned { --fr: 0deg; --lift: -40rem; --sc: 1.12; z-index: 40 !important; animation: none; transition-delay: 0ms; transition-duration: 800ms; }
  .svc_card.is-pinned .svc_inner { transform: rotateY(180deg); }
  .svc_card.is-pinned .svc_face { box-shadow: 0 50rem 90rem rgba(0,0,0,.5); }
  .svc_track.has-pinned .svc_card:not(.is-pinned) { filter: brightness(.6) saturate(.8); }
}
/* ===== statement: cup tiles flip then fly into the text (scroll-driven, sticky) ===== */
html.st-tiles-on .st_wrap { height: 380vh; position: relative; }
html.st-tiles-on .section_statement { position: sticky; top: 0; height: 100vh; min-height: 0; }
.st_tiles { display: none; }
html.st-tiles-on .st_tiles { display: flex; position: absolute; left: 0; right: 0; bottom: 60rem; justify-content: center; gap: 22rem; z-index: 3; pointer-events: none; direction: ltr; }
.st_tile { position: relative; width: 150rem; height: 112rem; perspective: 900rem; will-change: transform; }
.st_tile-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--flip, 0deg)); }
.st_face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.st_face.b { transform: rotateY(180deg); }
.st_cup { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c); opacity: var(--cup, 1); filter: drop-shadow(0 10rem 16rem rgba(0,0,0,.35)); }
.st_face > svg:not(.st_cup) { position: relative; height: 58%; width: auto; fill: #240046; }
.st_face.b > svg:not(.st_cup) { fill: color-mix(in srgb, #240046 calc(var(--cup, 1) * 100%), var(--c)); }
html.st-tiles-on .st-ic { --s: 1; opacity: 0; transition: opacity .15s; }
html.st-tiles-on .st-ic.is-on { opacity: 1; }
@media (max-width: 767px) {
  html.st-tiles-on .st_wrap { height: 320vh; }
  html.st-tiles-on .section_statement { padding: 70rem 0; display: flex; align-items: center; }
  html.st-tiles-on .st_tiles { gap: 5rem; bottom: 34rem; }
  .st_tile { width: 38rem; height: 28rem; }
}
html.st-tiles-on .st_tiles { bottom: 150rem; }
@media (max-width: 767px) { html.st-tiles-on .st_tiles { bottom: 120rem; flex-wrap: wrap; padding: 0 40rem; gap: 10rem 12rem; } .st_tile { width: 52rem; height: 39rem; } }
.statement .st-line:nth-child(-n+4) { font-size: 52rem; }
@media (max-width: 767px) { .statement .st-line:nth-child(-n+4) { font-size: 18.5rem; } }
/* ===== statement on brand violet (no photo) ===== */
.section_statement { background: #621DCD !important; background-image: none !important; }
.section_statement::before, .section_statement::after { display: none !important; }
.section_statement .st-w { text-shadow: none; }
.st-hl.violet { color: #240046; }
.statement .st-line:nth-child(-n+4) { font-size: 46rem; }
@media (max-width: 767px) { .statement .st-line:nth-child(-n+4) { font-size: 16.5rem; } }
.st_tile.is-dark .st_face > svg:not(.st_cup) { fill: #E5E1FF; }
/* ===== services: badge sits under the heading ===== */
.svc_badge.is-under { position: relative; top: auto; left: auto; right: auto; display: inline-flex; margin-top: 26rem; rotate: -4deg; }
@media (max-width: 767px) { .svc_badge.is-under { margin-top: 12rem; left: auto; top: auto; } }
/* ===== dossier: portfolio link tab + placeholder photos ===== */
.dossier_tab.is-link { text-decoration: none; }
.tab_open { display: inline-block; font-style: normal; font-size: .9em; margin-top: 8rem; transition: translate .3s var(--ease-spring); }
.dossier_tab.is-link:hover .tab_open { translate: 3rem -3rem; }
.sheet_photo.ph { display: grid; place-content: center; text-align: center; gap: 8rem; font-family: var(--font-arabic); }
.sheet_photo.ph span { font-weight: 900; font-size: 46rem; line-height: 1.1; }
.sheet_photo.ph small { font-weight: 700; font-size: 18rem; opacity: .75; }
.ph-orange { background: var(--color-orange); color: var(--color-white); }
.ph-gold { background: var(--color-gold); color: var(--color-dark); }
.ph-lav { background: var(--color-lavender); color: var(--color-violet); }
@media (max-width: 767px) { .sheet_photo.ph span { font-size: 24rem; } .sheet_photo.ph small { font-size: 11rem; } }
/* ===== dossier tabs: slimmer, equal, same height as the file ===== */
@media (min-width: 768px) {
  .dossier_tabs { top: 40rem; height: 770rem; gap: 8rem; }
  .dossier_tab, .dossier_tab:first-child { width: 92rem; height: auto; flex: 1; padding-left: 14rem; font-size: 20rem; border-radius: 0 20rem 20rem 0; }
  .dossier_tab.is-active { translate: 12rem 0; }
  .dossier_tab.is-active::after { left: 18rem; width: 7rem; height: 7rem; }
}
/* ===== "ملف الأعمال" sheet: mini folder that opens the profile PDF ===== */
.img-profile { display: block; background-image: url("../assets/images/asset-bg-26.jpg"); background-size: cover; background-position: center; }
.profile_lead { font-size: 26rem; line-height: 1.6; max-width: 560rem; margin-top: -6rem; }
.mini_folder { position: relative; display: block; width: 300rem; height: 220rem; margin-top: 50rem; text-decoration: none; color: var(--color-white); }
.mf_back { position: absolute; inset: 0; border-radius: 14rem; background: #4a14a3; }
.mf_back::before { content: ""; position: absolute; top: -24rem; right: 0; width: 120rem; height: 40rem; border-radius: 12rem 12rem 0 0; background: #4a14a3; }
.mf_paper { position: absolute; left: 22rem; right: 22rem; top: -8rem; height: 150rem; border-radius: 8rem; background: var(--paper, #f4efe6); box-shadow: 0 4rem 10rem rgba(0,0,0,.2); transition: translate .45s var(--ease-spring), rotate .45s var(--ease-spring); }
.mf_front { position: absolute; left: 0; right: 0; bottom: 0; height: 170rem; border-radius: 14rem; background: var(--color-violet); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 20rem 24rem; transform-origin: 50% 100%; transition: transform .45s var(--ease-spring); box-shadow: 0 -2rem 0 rgba(255,255,255,.12) inset, 0 20rem 40rem rgba(0,0,0,.25); }
.mf_name { font-weight: 900; font-size: 30rem; }
.mf_meta { font-family: var(--font-display); font-weight: 700; font-size: 14rem; opacity: .75; letter-spacing: .06em; }
.mini_folder:hover .mf_paper { translate: 0 -46rem; rotate: -3deg; }
.mini_folder:hover .mf_front { transform: perspective(700rem) rotateX(-24deg); }
@media (max-width: 767px) {
  .profile_lead { font-size: 14rem; max-width: none; }
  .mini_folder { width: 170rem; height: 124rem; margin-top: 26rem; }
  .mf_back::before { width: 64rem; height: 22rem; top: -14rem; }
  .mf_paper { height: 84rem; left: 12rem; right: 12rem; }
  .mf_front { height: 96rem; padding: 10rem 12rem; } .mf_name { font-size: 16rem; } .mf_meta { font-size: 9rem; }
}
.svc_sub-ar { display: block; margin-top: 18rem; font-family: var(--font-arabic); font-weight: 900; font-size: 56rem; line-height: 1.2; color: #621DCD; text-align: right; }
@media (max-width: 767px) { .svc_sub-ar { font-size: 22rem; margin-top: 8rem; } }
.ph-mag { background: var(--color-magenta); color: var(--color-white); }
.zeham_gold, .zi_gold { color: var(--color-magenta); }
/* palette fixes */
.slot_icon.is-camel { fill: var(--color-magenta); }
.section_cases { --marker: #FDB112; }
.cover_note { background: #FDB112; }
/* ===== partners: full-width rectangle, compact ===== */
.section_trust { padding: 110rem 0 120rem; }
.section_trust .trust_wrapper { display: block; }
.partners_title { text-align: center; margin-bottom: 50rem; font-size: 120rem; }
.partners_grid { grid-template-columns: repeat(5, 1fr); gap: 18rem; }
.partner { height: 130rem; }
.partner.is-next { background: var(--color-violet); border-color: transparent; padding: 0; }
.partner.is-next a { display: grid; place-items: center; width: 100%; height: 100%; color: var(--color-white); text-decoration: none; font-family: var(--font-arabic); font-weight: 900; font-size: 28rem; }
.partner.is-next:hover { background: var(--color-magenta); }
@media (max-width: 767px) {
  .section_trust { padding: 60rem 0 60rem; }
  .partners_title { font-size: 48rem; margin-bottom: 22rem; }
  .partners_grid { grid-template-columns: repeat(4, 1fr); gap: 8rem; }
  .partner { height: 60rem; padding: 8rem; }
  .partner.is-next a { font-size: 11rem; text-align: center; line-height: 1.2; }
}
/* ===== map: pin with logo, no pulses ===== */
.zeham_pin .zp_drop { fill: #F8F8F8; stroke: #240046; stroke-width: 3; filter: drop-shadow(0 6px 8px rgba(36,0,70,.45)); }
.zeham_badge { bottom: 76rem; }
@media (max-width: 767px) { .zeham_badge { bottom: 44rem; } }
.zeham_badge { bottom: 104rem; } @media (max-width: 767px) { .zeham_badge { bottom: 58rem; } }
.zeham_badge { bottom: 132rem; } @media (max-width: 767px) { .zeham_badge { bottom: 72rem; } }
/* statement tiles centred vertically */
html.st-tiles-on .st_tiles { top: 50%; bottom: auto; margin-top: -56rem; }
@media (max-width: 767px) { html.st-tiles-on .st_tiles { margin-top: -45rem; } }
/* partners heading with palm + swords */
.partners_head { display: flex; align-items: center; justify-content: center; gap: 40rem; margin-bottom: 50rem; }
.partners_head .partners_title { margin-bottom: 0; }
.p_ic { height: 130rem; width: auto; flex: none; animation: p-sway 3.6s ease-in-out infinite alternate; }
.p_ic.is-palm { fill: var(--color-gold); rotate: 6deg; }
.p_ic.is-swords { fill: var(--color-magenta); rotate: -6deg; animation-delay: -1.8s; }
@keyframes p-sway { from { translate: 0 0; } to { translate: 0 -10rem; } }
@media (max-width: 767px) { .partners_head { gap: 12rem; margin-bottom: 22rem; } .p_ic { height: 46rem; } }
/* partners: small pink palm/swords repeated both sides */
.p_side { display: flex; align-items: center; gap: 22rem; }
.p_ic { height: 58rem; fill: var(--color-magenta) !important; rotate: 0deg !important; }
.p_ic.is-palm { height: 66rem; }
.p_side .p_ic:nth-child(2) { animation-delay: -1.2s; } .p_side .p_ic:nth-child(3) { animation-delay: -2.4s; }
@media (max-width: 767px) { .p_side { gap: 5rem; } .p_ic { height: 18rem; } .p_ic.is-palm { height: 21rem; } }
/* statement tiles: bigger; violet cups outlined so they read on the violet background */
.st_tile { width: 200rem; height: 150rem; }
html.st-tiles-on .st_tiles { gap: 26rem; margin-top: -75rem; }
.st_tile.is-violet .st_cup { stroke: #E5E1FF; stroke-width: 4; paint-order: stroke; }
.st_tile.is-violet .st_face > svg:not(.st_cup) { fill: #E5E1FF; }
@media (max-width: 767px) { .st_tile { width: 64rem; height: 48rem; } html.st-tiles-on .st_tiles { margin-top: -55rem; gap: 10rem 12rem; } .st_tile.is-violet .st_cup { stroke-width: 6; } }
@media (max-width: 767px) { .partners_title { font-size: 34rem; white-space: nowrap; } .p_ic { height: 14rem; } .p_ic.is-palm { height: 17rem; } .p_side { gap: 4rem; } .partners_head { gap: 8rem; } }
.p_ic { height: 84rem; } .p_ic.is-palm { height: 96rem; }
.partners_head { gap: 36rem; }
@media (max-width: 767px) { .p_ic { height: 28rem; } .p_ic.is-palm { height: 32rem; } .partners_head { gap: 10rem; } }
.bottom-menu_wrap[lang="ar"] { font-family: var(--font-arabic); padding: 8rem 30rem 8rem 8rem; }
.bottom-menu_wrap[lang="ar"] .button-pill { font-family: var(--font-arabic); font-weight: 700; text-transform: none; letter-spacing: 0; }
.bottom-menu_wrap[lang="ar"] .common-text { margin-inline-end: 6rem; }
.bottom-menu_wrap[lang="ar"] .menu-roll, .bottom-menu_wrap[lang="ar"] .menu-roll-line { height: 1.5em; line-height: 1.5em; }
@media (max-width: 767px) { .bottom-menu_wrap[lang="ar"] { padding: 6rem 16rem 6rem 6rem; } }
.bottom-menu_wrap[lang="ar"] .button-pill, .bottom-menu_wrap[lang="ar"] .bottom-menu_button { white-space: nowrap; } @media (max-width: 767px) { .bottom-menu_wrap[lang="ar"] { gap: 10rem; } }
/* Arabic menu + form */
.menu_list[lang="ar"] .menu_link { font-family: var(--font-arabic); font-weight: 900; letter-spacing: 0; text-transform: none; }
.menu_close span[lang="ar"], .menu_badge-label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.discuss_inner[lang="ar"], .discuss_inner[lang="ar"] .discuss_input, .discuss_inner[lang="ar"] .discuss_submit, .discuss_inner[lang="ar"] .discuss_dd-opt { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.discuss_inner[lang="ar"] .discuss_title { font-family: var(--font-arabic); font-weight: 900; letter-spacing: 0; }
.discuss_inner[lang="ar"] .discuss_input { text-align: right; }
.discuss_inner[lang="ar"] .discuss_dd-btn { flex-direction: row; }
.discuss_inner[lang="ar"] .discuss_title { padding-inline-start: 70rem; } @media (max-width: 767px) { .discuss_inner[lang="ar"] .discuss_title { padding-inline-start: 44rem; } }
.discuss_row { grid-template-columns: repeat(2, 1fr); } @media (max-width: 767px) { .discuss_row { grid-template-columns: 1fr; } }
/* 1) statement: shorter scroll */
html.st-tiles-on .st_wrap { height: 250vh; }
@media (max-width: 767px) { html.st-tiles-on .st_wrap { height: 220vh; } }
/* 2) HQ label without frame */
.zeham_badge { background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--color-white); font-weight: 900; font-size: 30rem; text-shadow: 0 3rem 10rem rgba(36,0,70,.7); rotate: 0deg; white-space: nowrap; }
.zeham_badge .hero_badge-logo { display: none; }
@media (max-width: 767px) { .zeham_badge { font-size: 15rem; } }
/* 3) marquee on brand violet; violet icons → lavender */
.marquee { background: #621DCD; }
.marquee_block .marquee_icon.el:nth-of-type(3) { fill: #E5E1FF; }
.zeham_badge { color: #240046 !important; text-shadow: 0 0 12rem rgba(229,225,255,.55), 0 2rem 4rem rgba(229,225,255,.35) !important; }
.zeham_badge { text-shadow: none !important; }
/* HQ label lavender */
.zeham_badge { color: #E5E1FF !important; }
/* statement: tight section, pinned in the middle of the screen */
html.st-tiles-on .st_wrap { background: #621DCD; height: calc(var(--st-h, 700px) + 130vh); }
html.st-tiles-on .section_statement { height: auto; min-height: 0; padding: 70rem 0 !important; top: var(--st-top, 0px); display: block; }
.section_statement { padding: 90rem 0 !important; min-height: 0 !important; }
html.st-tiles-on .st_tiles { top: 50%; }
@media (max-width: 767px) { html.st-tiles-on .section_statement { padding: 40rem 0 !important; } html.st-tiles-on .st_wrap { height: calc(var(--st-h, 600px) + 110vh); } }
/* statement: no pinning, compact */
html.st-tiles-on .st_wrap { height: auto !important; background: #621DCD; }
html.st-tiles-on .section_statement { position: relative !important; top: auto !important; }
.partner.is-next a { font-size: 44rem; }
@media (max-width: 767px) { .partner.is-next a { font-size: 18rem; } }
/* curved dividers (same curve as under the hero) */
.sec_wave { position: relative; z-index: 2; line-height: 0; margin: -1px 0 -2px; }
.sec_wave svg { display: block; width: 100%; height: 160rem; }
.sec_wave.w-cases { background: var(--color-dark); }
.sec_wave.w-trust { background: var(--color-ink); }
@media (max-width: 767px) { .sec_wave svg { height: 60rem; } }
.sec_wave.w-zeham { background: var(--color-lavender); } .section_zeham { padding-top: 110rem; } @media (max-width: 767px) { .section_zeham { padding-top: 50rem; } }
.partner.is-next a { font-size: 38rem; white-space: nowrap; } @media (max-width: 767px) { .partner.is-next a { font-size: 13rem; } }
.marquee_block .marquee_icon.el { filter: none !important; }
.hero_line-circle { display: none !important; }
.hero_line-wrapper { z-index: 0; } .hero_title .t-line, .hero_title .t-a, .hero_title .t-b { position: relative; z-index: 2; }
.hero_line .draw-path { stroke-width: 13; }

/* === batch: cursor labels off, hero الصيت lavender, partners 6-col, singer portrait, marquee lavender === */
.cursor_label { display: none !important; }
.hero_title .t-b.primary, .hero_adaptive .additional-font.primary { color: #E5E1FF; }
.partners_grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 767px) { .partners_grid { grid-template-columns: repeat(3, 1fr); } }
.zs_portrait { flex: 1; min-height: 300rem; margin-top: 20rem; background: url("../assets/images/asset-bg-27.png") center bottom / contain no-repeat; }
@media (max-width: 767px) { .zs_portrait { min-height: 200rem; } }
.marquee { background: #E5E1FF !important; }
.marquee_block .marquee_icon.el:nth-of-type(3) { fill: #621DCD; }

.hero_title .t-b.primary, .hero_adaptive .additional-font.primary { color: #FDB112; }
/* seam fix: no hairline around the curve before the map section */
.sec_wave.w-zeham { margin: -3px 0 -6px; padding-bottom: 6px; background: linear-gradient(to bottom, #E5E1FF calc(100% - 8px), #240046 calc(100% - 8px)); }
.sec_wave svg { transform: translateZ(0); }
.section_zeham { position: relative; z-index: 1; }
.section_trust { margin-bottom: 0; }
.marquee_block .marquee_text, .marquee_block .marquee_text:nth-of-type(odd), .marquee_block .marquee_text:nth-of-type(even) { color: #621DCD !important; }
.hero_title .t-b.primary, .hero_adaptive .additional-font.primary { color: #F8F8F8 !important; }
.st-hl.violet { color: #DD055B !important; }

/* ===== hero circular CTA (rotating text ring) ===== */
.hero_cta { position: absolute; z-index: 9; left: 4%; top: -120rem; width: 190rem; height: 190rem; display: block; border-radius: 50%; text-decoration: none; }
.hero_cta-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: cta-spin 14s linear infinite; overflow: visible; }
.hero_cta-ring text { font-family: var(--font-arabic); font-weight: 900; font-size: 19px; fill: #240046; letter-spacing: .5px; }
.hero_cta-core { position: absolute; inset: 30%; border-radius: 50%; background: #240046; display: grid; place-items: center; transition: transform .5s var(--ease-spring), background-color .3s; }
.hero_cta-core svg { width: 52%; height: 52%; fill: #FDB112; }
.hero_cta:hover .hero_cta-ring { animation-duration: 5s; }
.hero_cta:hover .hero_cta-core { transform: scale(1.12) rotate(-10deg); background: #DD055B; }
@keyframes cta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero_cta-ring { animation: none; } }
@media (max-width: 767px) { .hero_cta { width: 92rem; height: 92rem; left: 2%; top: -150rem; } }
/* ===== join us modal (Typeform) ===== */
.join { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
.join.is-open { visibility: visible; opacity: 1; transition: opacity .35s; }
.join_backdrop { position: absolute; inset: 0; background: rgba(36,0,70,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.join_card { position: relative; width: min(1100rem, 92vw); height: min(760rem, 82vh); border-radius: 30rem; background: #621DCD; padding: 14rem; box-shadow: 14rem 14rem 0 #FDB112, 0 40rem 90rem rgba(0,0,0,.5); transform: translateY(30px) scale(.97); transition: transform .5s var(--ease-spring); }
.join.is-open .join_card { transform: none; }
.join_frame { width: 100%; height: 100%; border: 0; border-radius: 20rem; background: #fff; display: block; }
.join_close { position: absolute; top: -18rem; left: -18rem; z-index: 2; width: 54rem; height: 54rem; min-width: 40px; min-height: 40px; border-radius: 50%; border: 0; background: #240046; display: grid; place-items: center; cursor: pointer; }
.join_close svg { width: 60%; height: 60%; }
.join_fallback { position: absolute; bottom: -44px; left: 0; right: 0; text-align: center; font-family: var(--font-arabic); font-weight: 700; font-size: 15px; color: #E5E1FF; }
@media (max-width: 767px) { .join_card { width: 94vw; height: 78vh; border-radius: 18rem; padding: 8rem; box-shadow: 6rem 6rem 0 #FDB112; } .join_close { top: -14px; left: -6px; } }
.hero_cta { left: 17%; top: -160rem; width: 175rem; height: 175rem; }
.hero_cta-ring text { letter-spacing: 0; font-size: 21px; }
@media (max-width: 767px) { .hero_cta { width: 92rem; height: 92rem; left: 2%; top: -150rem; } }

/* CTA ring: hollow, yellow text, palm in the middle */
.hero_cta-ring text { fill: #FDB112; }
.hero_cta-core { inset: 27%; background: none !important; }
.hero_cta-core svg { width: 82%; height: 82%; fill: #FDB112; }
.hero_cta:hover .hero_cta-core { background: none; }
.hero_cta:hover .hero_cta-core svg { fill: #DD055B; }
.hero_cta-ring text { font-size: 25.6px; }
.hero_cta-ring text { font-size: 25.3px; }
.hero_cta { left: 5%; top: -150rem; width: 210rem; height: 210rem; } @media (max-width: 767px) { .hero_cta { width: 96rem; height: 96rem; left: 3%; top: -175rem; } }
/* CTA hover: same speed, turns fuchsia */
.hero_cta:hover .hero_cta-ring { animation-duration: 14s; }
.hero_cta:hover .hero_cta-core { transform: none; }
.hero_cta-ring text, .hero_cta-core svg { transition: fill .35s; }
.hero_cta:hover .hero_cta-ring text, .hero_cta:hover .hero_cta-core svg { fill: #DD055B; }

/* bottom bar: join as a pill like the other CTA */
.join-pill { background: #FDB112 !important; color: #240046 !important; border: 0; cursor: pointer; font-family: var(--font-arabic); font-weight: 700; }
.join-pill { --bubble: #F8F8F8; }
/* ===== Sayyat section ===== */
.section_sayyat { position: relative; background: #240046; color: var(--color-white); padding: 140rem 0 160rem; overflow: hidden; }
.sy_grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 60rem; }
.sy_copy { text-align: right; font-family: var(--font-arabic); font-size: 28rem; line-height: 1.8; color: rgba(229,225,255,.85); }
.sy_copy p + p { margin-top: 10rem; }
.sy_title { font-weight: 900; font-size: 130rem; line-height: 1.15; color: var(--color-lavender); text-shadow: 7rem 7rem 0 var(--color-violet); margin-bottom: 40rem; }
.sy_name { color: #FDB112; }
.sy_lead { font-weight: 900; font-size: 34rem; color: var(--color-white); }
.sy_btn { display: inline-flex; margin-top: 46rem; font-family: var(--font-arabic); font-weight: 700; font-size: 26rem; padding: 18rem 46rem; }
.sy_art { position: relative; display: grid; place-items: center; min-height: 760rem; }
.sy_glow { position: absolute; width: 620rem; height: 620rem; border-radius: 50%; background: radial-gradient(circle, rgba(98,29,205,.85), rgba(98,29,205,0) 68%); }
.sy_bot { position: relative; height: 760rem; width: auto; filter: drop-shadow(0 30rem 40rem rgba(0,0,0,.45)); animation: sy-float 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sy-float { 0%,100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -16rem; rotate: 1.5deg; } }
.sy_bubble { position: absolute; z-index: 2; top: 40rem; left: 6%; padding: 14rem 26rem; border-radius: 26rem 26rem 26rem 4rem; background: #F8F8F8; color: #240046; font-family: var(--font-arabic); font-weight: 900; font-size: 26rem; box-shadow: 6rem 6rem 0 #DD055B; animation: sy-bub 4.5s ease-in-out infinite; }
@keyframes sy-bub { 0%,100% { translate: 0 0; } 50% { translate: 0 -10rem; } }
@media (prefers-reduced-motion: reduce) { .sy_bot, .sy_bubble { animation: none; } }
@media (max-width: 767px) {
  .section_sayyat { padding: 70rem 0 80rem; }
  .sy_grid { grid-template-columns: 1fr; gap: 10rem; }
  .sy_art { order: -1; min-height: 360rem; }
  .sy_glow { width: 300rem; height: 300rem; }
  .sy_bot { height: 360rem; }
  .sy_bubble { font-size: 14rem; padding: 8rem 14rem; top: 10rem; left: 4%; }
  .sy_title { font-size: 48rem; text-shadow: 3rem 3rem 0 var(--color-violet); margin-bottom: 18rem; }
  .sy_copy { font-size: 16rem; } .sy_lead { font-size: 18rem; }
  .sy_btn { font-size: 16rem; padding: 12rem 26rem; margin-top: 24rem; }
}

/* Sayyat on lavender, photo blended into the background */
.sec_wave.w-sayyat { background: #240046; margin: -1px 0 -3px; }
.section_sayyat { background: #E5E1FF; color: #240046; }
.sy_copy { color: rgba(36,0,70,.8); }
.sy_title { color: #621DCD; text-shadow: 7rem 7rem 0 #240046; }
.sy_name { color: #DD055B; }
.sy_lead { color: #240046; }
.sy_glow { display: none; }
.sy_bot { filter: none; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 70%, transparent 100%); }
.sy_bubble { box-shadow: 6rem 6rem 0 #DD055B; background: #fff; }
@media (max-width: 767px) { .sy_title { text-shadow: 3rem 3rem 0 #240046; } }
/* join pill fuchsia */
.join-pill { background: #DD055B !important; color: #F8F8F8 !important; }
.sy_bot { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }

/* Sayyat back to dark; photo framed in a lavender card */
.section_sayyat { background: #240046; color: var(--color-white); }
.sec_wave.w-sayyat { background: #240046; }
.sec_wave.w-sayyat svg { height: 120rem; }
.sy_copy { color: rgba(229,225,255,.85); }
.sy_title { color: var(--color-lavender); text-shadow: 7rem 7rem 0 #621DCD; }
.sy_name { color: #FDB112; }
.sy_lead { color: #F8F8F8; font-size: 32rem; line-height: 1.7; }
.sy_bot { height: 700rem; border-radius: 40rem; box-shadow: 14rem 14rem 0 #621DCD, 0 40rem 80rem rgba(0,0,0,.45); animation: none; }
.sy_art { min-height: 0; }
.sy_bubble { top: 10rem; left: 4%; }
@media (max-width: 767px) { .sy_bot { height: 380rem; border-radius: 22rem; box-shadow: 7rem 7rem 0 #621DCD; } .sy_title { text-shadow: 3rem 3rem 0 #621DCD; } .sy_lead { font-size: 17rem; } .sec_wave.w-sayyat svg { height: 50rem; } }

/* Sayyat v3: violet section, cut-out character, slow welcoming gesture */
.section_sayyat { background: #621DCD; }
.sec_wave.w-sayyat svg path { stroke: #E5E1FF; }
.sy_title { color: #E5E1FF; text-shadow: 7rem 7rem 0 #240046; }
.sy_name { color: #FDB112; }
.sy_copy { color: rgba(248,248,248,.88); }
.sy_btn { background: #FDB112 !important; color: #240046 !important; --bubble: #240046; }
.sy_btn.is-hover { color: #FDB112 !important; }
.sy_figure { position: relative; display: block; height: 760rem; aspect-ratio: 562 / 1200; }
.sy_pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26rem 30rem rgba(36,0,70,.45)); }
.sy_pose.is-wave { opacity: 0; animation: sy-greet 9s ease-in-out infinite; }
.sy_pose.is-idle { animation: sy-greet-idle 9s ease-in-out infinite; }
@keyframes sy-greet { 0%, 18% { opacity: 0; } 30%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes sy-greet-idle { 0%, 18% { opacity: 1; } 30%, 78% { opacity: 0; } 90%, 100% { opacity: 1; } }
.sy_bubble { opacity: 0; animation: sy-bub-in 9s ease-in-out infinite; }
@keyframes sy-bub-in { 0%, 26% { opacity: 0; translate: 0 10rem; } 34%, 76% { opacity: 1; translate: 0 0; } 86%, 100% { opacity: 0; translate: 0 10rem; } }
@media (prefers-reduced-motion: reduce) { .sy_pose.is-wave { animation: none; opacity: 1; } .sy_pose.is-idle { animation: none; opacity: 0; } .sy_bubble { animation: none; opacity: 1; } }
@media (max-width: 767px) { .sy_figure { height: 400rem; } .sy_title { text-shadow: 3rem 3rem 0 #240046; } }
/* join pill hover: lavender instead of white */
.join-pill { --bubble: #E5E1FF !important; }
.join-pill.is-hover { color: #240046 !important; }
.sec_wave.w-sayyat svg { height: 160rem; } @media (max-width: 767px) { .sec_wave.w-sayyat svg { height: 60rem; } }

/* Sayyat static + seam + tighter spacing */
.sy_pose, .sy_bubble { animation: none !important; opacity: 1 !important; translate: none !important; }
.sy_figure { aspect-ratio: 300 / 640; height: 640rem; }
.section_sayyat { padding: 50rem 0 70rem; }
.sec_wave.w-sayyat { margin: -3px 0 -6px; padding-bottom: 6px; background: linear-gradient(to bottom, #240046 calc(100% - 8px), #621DCD calc(100% - 8px)); }
.section_sayyat { position: relative; z-index: 1; }
@media (max-width: 767px) { .section_sayyat { padding: 20rem 0 40rem; } .sy_figure { height: 360rem; } }
.sec_wave.w-sayyat svg path { stroke: none !important; }
/* Sayyat button: dark base, yellow on hover */
.sy_btn { background: #240046 !important; color: #FDB112 !important; --bubble: #FDB112 !important; }
.sy_btn.is-hover { color: #240046 !important; }
/* Sayyat: original image as supplied */
.sy_figure { aspect-ratio: 1024 / 1536; height: 680rem; }
.sy_pose.is-main { object-fit: cover; border-radius: 30rem; filter: none; box-shadow: 0 30rem 60rem rgba(36,0,70,.45); }
@media (max-width: 767px) { .sy_figure { height: 420rem; } .sy_pose.is-main { border-radius: 18rem; } }
/* Sayyat: lavender card behind the photo; bubble closer to him */
.sy_back { position: absolute; inset: 0; border-radius: 30rem; background: #E5E1FF; transform: translate(-26rem, 26rem) rotate(-4deg); }
.sy_pose.is-main { z-index: 1; }
.sy_bubble { left: 13%; top: 30rem; z-index: 3; }
@media (max-width: 767px) { .sy_back { border-radius: 18rem; transform: translate(-12rem, 12rem) rotate(-4deg); } .sy_bubble { left: 16%; top: 14rem; } }
.sy_pose.is-main { background: #621DCD; }
/* join pill: lavender base, fuchsia on hover */
.join-pill { background: #E5E1FF !important; color: #240046 !important; --bubble: #DD055B !important; }
.join-pill.is-hover { color: #F8F8F8 !important; }
@media (min-width: 768px) { .f2 .footer_logo-mark { width: 560rem; } .f2 .footer_logo-tag { width: 455rem; } .f2 .footer_logo { gap: 26rem; } }

/* CTA ring as images (Safari renders Arabic on SVG textPath incorrectly) */
span.hero_cta-ring { position: absolute; inset: -3.125%; display: block; animation: cta-spin 14s linear infinite; }
span.hero_cta-ring img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s; }
span.hero_cta-ring .ring-p { opacity: 0; }
.hero_cta:hover span.hero_cta-ring .ring-p { opacity: 1; }
.hero_cta:hover span.hero_cta-ring .ring-y { opacity: 0; }
span.hero_cta-ring { width: 106.25%; height: 106.25%; left: -3.125%; top: -3.125%; right: auto; bottom: auto; }
/* ===== discuss form v2: contact preference ===== */
.discuss_pref { margin-top: 20rem; display: flex; flex-wrap: wrap; align-items: center; gap: 14rem 22rem; }
.discuss_pref-q { margin: 0; font-family: var(--font-arabic); font-weight: 900; font-size: 26rem; color: var(--color-dark); }
.discuss_pref-opts { display: flex; gap: 12rem; }
.discuss_chip { position: relative; cursor: pointer; }
.discuss_chip input { position: absolute; opacity: 0; pointer-events: none; }
.discuss_chip span { display: inline-flex; align-items: center; gap: 10rem; height: 56rem; padding: 0 26rem; border-radius: 999rem; background: var(--color-white); color: var(--color-dark); font-family: var(--font-arabic); font-weight: 700; font-size: 21rem; border: 3rem solid transparent; transition: background .3s, color .3s, border-color .3s; }
.discuss_chip span::before { content: ""; width: 16rem; height: 16rem; border-radius: 50%; border: 3rem solid rgba(36,0,70,.35); transition: inherit; }
.discuss_chip:hover span { border-color: var(--color-dark); }
.discuss_chip input:checked + span { background: var(--color-dark); color: var(--color-lavender); border-color: var(--color-dark); }
.discuss_chip input:checked + span::before { background: var(--color-gold); border-color: var(--color-gold); }
.discuss_chip input:focus-visible + span { outline: 3rem solid var(--color-dark); outline-offset: 3rem; }
.discuss_pref-field { flex-basis: 100%; animation: prefIn .4s cubic-bezier(.215,.61,.355,1); }
.discuss_pref-field[hidden] { display: none; }
.discuss_pref-field .discuss_input { text-align: right; }
@keyframes prefIn { from { opacity: 0; transform: translateY(-8rem); } }
@media (max-width: 767px) {
  .discuss_pref { margin-top: 12rem; gap: 8rem; }
  .discuss_pref-q { font-size: 15rem; flex-basis: 100%; }
  .discuss_pref-opts { gap: 8rem; }
  .discuss_chip span { height: 40rem; padding: 0 14rem; font-size: 13rem; gap: 6rem; border-width: 2rem; }
  .discuss_chip span::before { width: 11rem; height: 11rem; border-width: 2rem; }
}
.discuss_inner[lang="ar"] .discuss_pref-field .discuss_input { font-family: var(--font-display); }
/* multi-select «وش تحتاج؟» */
.discuss_dd.is-multi .discuss_dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.discuss_dd.is-multi .discuss_dd-btn svg { flex: none; margin-inline-start: 12rem; }
.discuss_dd.is-multi .discuss_dd-opt { display: flex; align-items: center; gap: 12rem; }
.discuss_dd.is-multi .discuss_dd-opt::before { content: ""; flex: none; width: 22rem; height: 22rem; border-radius: 7rem; border: 3rem solid rgba(36,0,70,.35); background: center / 70% no-repeat; transition: background-color .2s, border-color .2s; }
.discuss_dd.is-multi .discuss_dd-opt.is-sel::before { background-color: var(--color-violet); border-color: var(--color-violet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23FDB112' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.discuss_dd.is-multi .discuss_dd-opt.is-sel { color: var(--color-violet); font-weight: 700; }
@media (max-width: 767px) { .discuss_dd.is-multi .discuss_dd-opt::before { width: 16rem; height: 16rem; border-radius: 5rem; border-width: 2rem; } }
/* bottom bar: two pills, even spacing */
.bottom-menu_wrap[lang="ar"] { padding: 8rem; gap: 16rem; }
.bottom-menu_wrap[lang="ar"] > :last-child { margin: 0; }
@media (max-width: 767px) { .bottom-menu_wrap[lang="ar"] { padding: 5rem; gap: 8rem; } }
/* ===== works B: scroll-driven horizontal section with pinning ===== */
.section_hw { position: relative; background: var(--color-ink); color: var(--color-white); font-family: var(--font-arabic); }
.hw_pin { position: relative; }
.hw_sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 46rem; }
.hw_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40rem; width: 100%; }
.hw_heading { margin: 0; font-weight: 900; font-size: 88rem; line-height: 1.1; text-shadow: 5rem 5rem 0 var(--color-violet); }
.hw_heading span { color: var(--color-magenta); }
.hw_meter { display: flex; align-items: center; gap: 16rem; direction: ltr; font-family: var(--font-display); font-weight: 700; font-size: 22rem; color: var(--color-lavender); padding-bottom: 14rem; }
.hw_bar { width: 220rem; height: 6rem; border-radius: 9rem; background: rgba(229,225,255,.18); overflow: hidden; }
.hw_fill { display: block; height: 100%; background: linear-gradient(90deg, var(--color-violet), var(--color-magenta)); transform-origin: left; transform: scaleX(.04); }
.hw_track { display: flex; gap: 48rem; padding: 0 calc((100vw - 1260rem) / 2); width: max-content; will-change: transform; }
.hw_card { --d: 0; flex: none; width: 1260rem; height: 640rem; display: grid; grid-template-columns: 1.25fr 1fr; border-radius: 36rem; overflow: hidden; background: var(--color-lavender); color: var(--color-dark); box-shadow: 0 30rem 60rem rgba(0,0,0,.35); transform: scale(calc(1 - var(--d) * .08)); transition: box-shadow .4s; }
.hw_media { position: relative; overflow: hidden; background: var(--color-dark); }
.hw_media-in { position: absolute; inset: 0; transform: scale(1.18); will-change: transform; }
.hw_media-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw_ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18rem; }
.hw_ph svg { width: 34%; height: 40%; fill: currentColor; }
.hw_ph small { font-family: var(--font-arabic); font-weight: 700; font-size: 22rem; opacity: .8; }
.hw_ph.c-violet { background: var(--color-violet); color: var(--color-gold); }
.hw_ph.c-mag { background: var(--color-magenta); color: var(--color-lavender); }
.hw_ph.c-gold { background: var(--color-gold); color: var(--color-dark); }
.hw_ph.c-lav { background: #cfc7ff; color: var(--color-violet); }
.hw_ph.c-orange { background: var(--color-orange); color: var(--color-lavender); }
.hw_body { position: relative; padding: 64rem 58rem 52rem; display: flex; flex-direction: column; text-align: right; }
.hw_body > * { transition: opacity .6s, transform .7s cubic-bezier(.215,.61,.355,1); opacity: calc(1 - var(--d) * .9); transform: translateX(calc(var(--d) * 40rem)); }
.hw_num { font-family: var(--font-display); font-weight: 700; font-size: 26rem; color: var(--color-magenta); direction: ltr; text-align: right; }
.hw_client { margin: 22rem 0 0; font-weight: 700; font-size: 30rem; color: var(--color-violet); }
.hw_title { margin: 6rem 0 0; font-weight: 900; font-size: 72rem; line-height: 1.1; }
.hw_desc { margin: 26rem 0 0; font-size: 26rem; line-height: 1.65; color: rgba(36,0,70,.78); max-width: 30em; }
.hw_tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10rem; }
.hw_tags li { padding: 8rem 20rem; border-radius: 99rem; background: var(--color-violet); color: var(--color-white); font-weight: 700; font-size: 18rem; }
.hw_year { position: absolute; top: 60rem; left: 58rem; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22rem; color: rgba(36,0,70,.45); }
/* secondary works ticker */
.hw_more { padding: 40rem 0 130rem; }
.hw_more-title { margin: 0 auto 28rem; font-weight: 900; font-size: 40rem; color: var(--color-lavender); }
.hw_marquee { overflow: hidden; direction: ltr; }
.hw_marquee-in { list-style: none; margin: 0; padding: 0; display: flex; gap: 26rem; width: max-content; animation: hwTicker 38s linear infinite; }
.hw_marquee:hover .hw_marquee-in { animation-play-state: paused; }
@keyframes hwTicker { to { transform: translateX(-50%); } }
.hw_mini { flex: none; width: 320rem; }
.hw_mini-img { height: 210rem; border-radius: 24rem; overflow: hidden; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.hw_mini-img svg { width: 30%; height: 44%; }
.hw_mini:hover .hw_mini-img { transform: translateY(-8rem) rotate(-1.5deg); }
.hw_mini p { margin: 14rem 0 0; font-weight: 700; font-size: 24rem; color: var(--color-lavender); text-align: right; direction: rtl; }
@media (max-width: 767px) {
  .hw_sticky { gap: 22rem; }
  .hw_head { flex-direction: column; align-items: flex-start; gap: 12rem; }
  .hw_heading { font-size: 36rem; text-shadow: 3rem 3rem 0 var(--color-violet); }
  .hw_meter { font-size: 13rem; gap: 10rem; padding: 0; } .hw_bar { width: 120rem; height: 4rem; }
  .hw_track { gap: 14rem; padding: 0 22rem; }
  .hw_card { width: 346rem; height: min(560rem, 68svh); grid-template-columns: 1fr; grid-template-rows: 44% 1fr; border-radius: 22rem; }
  .hw_body { padding: 20rem 20rem 18rem; }
  .hw_num { font-size: 14rem; } .hw_year { top: 22rem; left: 20rem; font-size: 13rem; }
  .hw_client { margin-top: 6rem; font-size: 16rem; } .hw_title { font-size: 30rem; }
  .hw_desc { margin-top: 10rem; font-size: 14rem; line-height: 1.6; }
  .hw_tags { gap: 6rem; } .hw_tags li { font-size: 11rem; padding: 5rem 11rem; }
  .hw_ph small { font-size: 13rem; }
  .hw_more { padding: 20rem 0 70rem; } .hw_more-title { font-size: 22rem; margin-bottom: 14rem; padding: 0 16rem; }
  .hw_mini { width: 170rem; } .hw_mini-img { height: 112rem; border-radius: 14rem; } .hw_mini p { font-size: 14rem; margin-top: 8rem; }
  .hw_marquee-in { gap: 12rem; }
}
@media (prefers-reduced-motion: reduce) { .hw_marquee-in { animation-duration: 120s; } }
.hw_sticky { direction: ltr; align-items: flex-start; }
.hw_head { direction: rtl; align-self: stretch; }
.hw_more { padding-top: 10rem; } @media (max-width: 767px) { .hw_more { padding-top: 4rem; } }
.hw_marquee:hover .hw_marquee-in { animation-play-state: running; }
/* content v1 */
.hw_top { display: flex; align-items: center; gap: 16rem; margin: 0; }
.hw_top .hw_client { margin: 0; }
.hw_slogan { margin: 26rem 0 0; font-weight: 900; font-size: 34rem; color: var(--color-magenta); }
.hw_title { font-size: 58rem; margin-top: 10rem; }
.hw_desc { max-width: none; }
.hw_desc-p { margin: 0 0 12rem; }
.hw_body { justify-content: center; }
@media (max-width: 767px) { .hw_slogan { font-size: 17rem; margin-top: 8rem; } .hw_title { font-size: 24rem; margin-top: 4rem; } .hw_desc-p { margin-bottom: 6rem; } .hw_top { gap: 10rem; } .hw_body { justify-content: flex-start; } }
.hw_top .hw_num, .hw_top .hw_client { color: var(--color-magenta); }
.hw_slogan { color: var(--color-violet); }
.hw_media-in img, .zz_media-in img { object-position: center 35%; }
/* chaizer: show the logo at the top */
.hw_media-in img[alt^="شايزر"] { object-position: center 0% !important; }
.hw_media-in:has(img[alt^="شايزر"]) { transform-origin: 50% 0%; }
/* campaign lettering used as slogan */
.slogan-typo { display: inline-block; vertical-align: middle; aspect-ratio: 918 / 696; height: 2.6em; background-color: currentColor; -webkit-mask: url("../assets/images/asset-bg-28.png") center / contain no-repeat; mask: url("../assets/images/asset-bg-28.png") center / contain no-repeat; }
/* keep the top of every KV (logos) visible, and make long cards fit */
.hw_media-in { transform-origin: 50% 0%; }
.hw_media-in img { object-position: center 0% !important; }
.hw_title { font-size: 50rem; }
.hw_desc { font-size: 23rem; line-height: 1.6; }
.hw_slogan { margin-top: 18rem; }
.hw_body { padding-top: 48rem; padding-bottom: 40rem; }
@media (max-width: 767px) { .hw_title { font-size: 22rem; } .hw_desc { font-size: 13rem; } .hw_body { padding: 16rem 18rem 14rem; } }
.hw_mini-img.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* three images side by side inside one media frame */
.media-trio { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; align-items: center; padding: 6%; background: linear-gradient(135deg, #2a0c55, var(--color-dark)); }
.media-trio .trio_item { margin: 0; aspect-ratio: 3 / 4; border-radius: 14rem; overflow: hidden; box-shadow: 0 16rem 30rem rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.media-trio .trio_item:nth-child(2) { transform: translateY(-6%); }
.media-trio .trio_item:hover { transform: translateY(-9%) rotate(-1.5deg); }
.media-trio img { width: 100%; height: 100%; object-fit: cover; object-position: center top !important; display: block; }
.hw_media-in:has(.media-trio), .zz_media-in:has(.media-trio) { transform: none !important; inset: 0; }
@media (max-width: 767px) { .media-trio .trio_item { border-radius: 8rem; } .media-trio { gap: 4%; padding: 5%; } }
/* bigger, overlapping cards — hovered one comes to the front */
.media-trio { display: flex; justify-content: center; align-items: center; gap: 0; padding: 4% 3%; }
.media-trio .trio_item { flex: none; width: 41%; margin-inline: -4.5%; position: relative; transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; }
.media-trio .trio_item:nth-child(1) { transform: rotate(4deg) translateY(4%); z-index: 1; }
.media-trio .trio_item:nth-child(2) { transform: translateY(-3%); z-index: 2; }
.media-trio .trio_item:nth-child(3) { transform: rotate(-4deg) translateY(4%); z-index: 1; }
.media-trio .trio_item:hover { z-index: 5; transform: translateY(-6%) scale(1.06); box-shadow: 0 24rem 44rem rgba(0,0,0,.5); }
/* ticker v2: name on the image, dark tint that lifts on hover */
.hw_mini-img { position: relative; }
.hw_mini-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25,24,35,.35) 0%, rgba(25,24,35,.72) 100%); transition: opacity .45s ease; pointer-events: none; }
.hw_mini:hover .hw_mini-img::after { opacity: 0; }
.hw_mini-img img { filter: saturate(.85); transition: filter .45s ease, transform .6s cubic-bezier(.215,.61,.355,1); }
.hw_mini:hover .hw_mini-img img { filter: none; transform: scale(1.05); }
.hw_mini .hw_mini-name { position: absolute; z-index: 2; right: 14rem; bottom: 14rem; margin: 0; padding: 6rem 16rem; border-radius: 99rem; font-family: var(--font-arabic); font-weight: 900; font-size: 30rem; line-height: 1.3; color: var(--color-white); text-align: right; direction: rtl; transition: background .35s, color .35s; }
.hw_mini:hover .hw_mini-name { background: var(--color-lavender); color: var(--color-violet); }
@media (max-width: 767px) { .hw_mini .hw_mini-name { font-size: 16rem; right: 8rem; bottom: 8rem; padding: 3rem 10rem; } }
/* ticker v3: lavender name → violet on hover, no chip, box grows (no tilt) */
.hw_mini .hw_mini-name, .hw_mini:hover .hw_mini-name { background: none; padding: 0; color: var(--color-lavender); }
.hw_mini .hw_mini-name { right: 18rem; bottom: 14rem; text-shadow: 0 2rem 12rem rgba(0,0,0,.45); }
.hw_mini:hover .hw_mini-name { color: var(--color-violet); text-shadow: 0 0 14rem rgba(255,255,255,.75); }
.hw_mini-img { transition: transform .5s cubic-bezier(.215,.61,.355,1); }
.hw_mini:hover .hw_mini-img { transform: scale(1.07); rotate: 0deg; }
.hw_mini:hover .hw_mini-img img { transform: none; }
.hw_mini:hover { position: relative; z-index: 2; }
.hw_marquee { padding-block: 16rem; }
@media (max-width: 767px) { .hw_mini .hw_mini-name { right: 10rem; bottom: 8rem; } .hw_marquee { padding-block: 8rem; } }
.hw_mini:hover .hw_mini-name { text-shadow: none; }
/* ===== v2 after manager notes: auto-moving main works ===== */
.section_hw.is-auto { padding: 140rem 0 0; overflow: hidden; }
.section_hw.is-auto .hw_head { margin-bottom: 60rem; }
.hw_loop { overflow: hidden; direction: ltr; padding: 30rem 0 50rem; }
.hw_loop-in { display: flex; gap: 48rem; width: max-content; animation: hwLoop 70s linear infinite; }
@keyframes hwLoop { to { transform: translateX(-50%); } }
.section_hw.is-auto .hw_card { transform: none; --d: 0; }
.section_hw.is-auto .hw_body > * { opacity: 1; transform: none; }
.section_hw.is-auto .hw_media-in { transform: none !important; }
.hw_logo { display: block; height: 64rem; width: auto; max-width: 260rem; object-fit: contain; object-position: right center; margin: 0 0 30rem auto; }
.hw_client { margin: 0 0 24rem; font-weight: 900; font-size: 36rem; color: var(--color-violet); }
.section_hw.is-auto .hw_title { margin-top: 0; }
.hw_media { position: relative; }
.hw_media::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(180deg, transparent, rgba(25,24,35,.82)); pointer-events: none; z-index: 1; }
.hw_stroke { position: absolute; z-index: 2; right: 34rem; bottom: 26rem; left: 34rem; margin: 0; text-align: right; direction: rtl; font-family: var(--font-arabic); font-weight: 900; font-size: 70rem; line-height: 1.1; color: transparent; -webkit-text-stroke: 2.5rem var(--color-lavender); paint-order: stroke; }
.slogan-typo-o { display: inline-block; height: 150rem; aspect-ratio: 918 / 696; background-color: var(--color-lavender); -webkit-mask: url("../assets/images/asset-bg-29.png") center / contain no-repeat; mask: url("../assets/images/asset-bg-29.png") center / contain no-repeat; }
/* secondary: logos centred on the card */
.hw_mini-logo { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; max-width: 62%; max-height: 46%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4rem 14rem rgba(0,0,0,.45)); transition: scale .45s ease; }
.hw_mini-img.has-img .hw_mini-logo { width: auto !important; height: auto !important; }
.hw_mini-logo.is-text { margin: 0; max-width: 80%; font-family: var(--font-arabic); font-weight: 900; font-size: 40rem; color: var(--color-lavender); text-align: center; white-space: nowrap; }
.hw_mini-img::after { background: rgba(25,24,35,.62); }
.hw_mini:hover .hw_mini-img::after { opacity: .25; }
.hw_mini-img > svg { opacity: .25; }
@media (max-width: 767px) {
  .section_hw.is-auto { padding-top: 60rem; } .section_hw.is-auto .hw_head { margin-bottom: 20rem; }
  .hw_loop { padding: 14rem 0 24rem; } .hw_loop-in { gap: 14rem; animation-duration: 45s; }
  .hw_logo { height: 32rem; max-width: 130rem; margin-bottom: 12rem; } .hw_client { font-size: 18rem; margin-bottom: 10rem; }
  .hw_stroke { font-size: 30rem; right: 14rem; bottom: 12rem; -webkit-text-stroke-width: 1.2rem; } .slogan-typo-o { height: 70rem; }
  .hw_mini-logo.is-text { font-size: 20rem; }
}
@media (prefers-reduced-motion: reduce) { .hw_loop-in { animation-duration: 200s; } }
@media (max-width: 767px) { .section_hw.is-auto .hw_card { height: 520rem; grid-template-rows: 54% 1fr; } }
/* slogan as a sticker (like the profile): dark fill + thick white outline, tilted */
.hw_media::after { display: none; }
.hw_stroke.is-sticker { left: 26rem; right: auto; bottom: 30rem; text-align: left; -webkit-text-stroke: 0; color: inherit; rotate: -9deg; transform-origin: left bottom; filter: drop-shadow(0 8rem 14rem rgba(0,0,0,.35)); }
.hw_sticker { position: relative; display: inline-block; font-family: var(--font-arabic); font-weight: 900; font-size: 58rem; line-height: 1.15; color: var(--color-dark); white-space: nowrap; }
.hw_sticker::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: #fff; -webkit-text-stroke: 16rem #fff; }
.hw_sticker-img { display: block; height: 170rem; width: auto; }
@media (max-width: 767px) {
  .hw_stroke.is-sticker { left: 12rem; bottom: 14rem; }
  .hw_sticker { font-size: 24rem; } .hw_sticker::before { -webkit-text-stroke-width: 7rem; }
  .hw_sticker-img { height: 74rem; }
}
/* sticker sits on the seam between image and text box */
.section_hw.is-auto .hw_card { position: relative; }
.section_hw.is-auto .hw_stroke.is-sticker { position: absolute; z-index: 3; right: auto; left: calc(44.4% - 150rem); bottom: 44rem; transform-origin: 50% 50%; rotate: -8deg; }
.hw_media-in img[alt^="الإنماء باي"] ~ * { }
@media (max-width: 767px) {
  .section_hw.is-auto .hw_stroke.is-sticker { left: 14rem; bottom: auto; top: calc(54% - 30rem); }
}
.hw_mini-logo[alt="ام بدر"] { max-height: 66%; filter: drop-shadow(0 4rem 14rem rgba(0,0,0,.35)); }
/* logo top-left of the text box; sticker moved right, off the copy */
.section_hw.is-auto .hw_body { position: relative; }
.section_hw.is-auto .hw_logo, .section_hw.is-auto .hw_client { position: absolute; top: 40rem; left: 44rem; margin: 0; object-position: left top; }
.section_hw.is-auto .hw_stroke.is-sticker { left: calc(44.4% - 40rem); }
@media (max-width: 767px) {
  .section_hw.is-auto .hw_logo, .section_hw.is-auto .hw_client { top: 16rem; left: 16rem; }
  .section_hw.is-auto .hw_body { padding-top: 44rem; }
  .section_hw.is-auto .hw_stroke.is-sticker { left: 14rem; }
}
@media (max-width: 767px) { .section_hw.is-auto .hw_stroke.is-sticker { left: auto; right: 14rem; } .section_hw.is-auto .hw_body { padding-top: 54rem; } }
.hw_sticker { color: var(--color-magenta); }

/* rounded white outline (text-shadow ring instead of sharp text-stroke) */
.hw_sticker::before { -webkit-text-stroke: 0; color: #fff; text-shadow: 8.00rem 0.00rem 0 #fff, 7.73rem 2.07rem 0 #fff, 6.93rem 4.00rem 0 #fff, 5.66rem 5.66rem 0 #fff, 4.00rem 6.93rem 0 #fff, 2.07rem 7.73rem 0 #fff, 0.00rem 8.00rem 0 #fff, -2.07rem 7.73rem 0 #fff, -4.00rem 6.93rem 0 #fff, -5.66rem 5.66rem 0 #fff, -6.93rem 4.00rem 0 #fff, -7.73rem 2.07rem 0 #fff, -8.00rem 0.00rem 0 #fff, -7.73rem -2.07rem 0 #fff, -6.93rem -4.00rem 0 #fff, -5.66rem -5.66rem 0 #fff, -4.00rem -6.93rem 0 #fff, -2.07rem -7.73rem 0 #fff, -0.00rem -8.00rem 0 #fff, 2.07rem -7.73rem 0 #fff, 4.00rem -6.93rem 0 #fff, 5.66rem -5.66rem 0 #fff, 6.93rem -4.00rem 0 #fff, 7.73rem -2.07rem 0 #fff, 4.00rem 0.00rem 0 #fff, 3.70rem 1.53rem 0 #fff, 2.83rem 2.83rem 0 #fff, 1.53rem 3.70rem 0 #fff, 0.00rem 4.00rem 0 #fff, -1.53rem 3.70rem 0 #fff, -2.83rem 2.83rem 0 #fff, -3.70rem 1.53rem 0 #fff, -4.00rem 0.00rem 0 #fff, -3.70rem -1.53rem 0 #fff, -2.83rem -2.83rem 0 #fff, -1.53rem -3.70rem 0 #fff, -0.00rem -4.00rem 0 #fff, 1.53rem -3.70rem 0 #fff, 2.83rem -2.83rem 0 #fff, 3.70rem -1.53rem 0 #fff; }
@media (max-width: 767px) { .hw_sticker::before { -webkit-text-stroke: 0; text-shadow: 3.40rem 0.00rem 0 #fff, 3.23rem 1.05rem 0 #fff, 2.75rem 2.00rem 0 #fff, 2.00rem 2.75rem 0 #fff, 1.05rem 3.23rem 0 #fff, 0.00rem 3.40rem 0 #fff, -1.05rem 3.23rem 0 #fff, -2.00rem 2.75rem 0 #fff, -2.75rem 2.00rem 0 #fff, -3.23rem 1.05rem 0 #fff, -3.40rem 0.00rem 0 #fff, -3.23rem -1.05rem 0 #fff, -2.75rem -2.00rem 0 #fff, -2.00rem -2.75rem 0 #fff, -1.05rem -3.23rem 0 #fff, -0.00rem -3.40rem 0 #fff, 1.05rem -3.23rem 0 #fff, 2.00rem -2.75rem 0 #fff, 2.75rem -2.00rem 0 #fff, 3.23rem -1.05rem 0 #fff, 1.70rem 0.00rem 0 #fff, 1.47rem 0.85rem 0 #fff, 0.85rem 1.47rem 0 #fff, 0.00rem 1.70rem 0 #fff, -0.85rem 1.47rem 0 #fff, -1.47rem 0.85rem 0 #fff, -1.70rem 0.00rem 0 #fff, -1.47rem -0.85rem 0 #fff, -0.85rem -1.47rem 0 #fff, -0.00rem -1.70rem 0 #fff, 0.85rem -1.47rem 0 #fff, 1.47rem -0.85rem 0 #fff; } }

/* outline drawn directly on the text (no pseudo-element / z-index) — works in every browser */
.hw_sticker::before { content: none !important; display: none !important; }
.hw_sticker { -webkit-text-stroke: 0; text-shadow: 8.00rem 0.00rem 0 #fff, 7.73rem 2.07rem 0 #fff, 6.93rem 4.00rem 0 #fff, 5.66rem 5.66rem 0 #fff, 4.00rem 6.93rem 0 #fff, 2.07rem 7.73rem 0 #fff, 0.00rem 8.00rem 0 #fff, -2.07rem 7.73rem 0 #fff, -4.00rem 6.93rem 0 #fff, -5.66rem 5.66rem 0 #fff, -6.93rem 4.00rem 0 #fff, -7.73rem 2.07rem 0 #fff, -8.00rem 0.00rem 0 #fff, -7.73rem -2.07rem 0 #fff, -6.93rem -4.00rem 0 #fff, -5.66rem -5.66rem 0 #fff, -4.00rem -6.93rem 0 #fff, -2.07rem -7.73rem 0 #fff, -0.00rem -8.00rem 0 #fff, 2.07rem -7.73rem 0 #fff, 4.00rem -6.93rem 0 #fff, 5.66rem -5.66rem 0 #fff, 6.93rem -4.00rem 0 #fff, 7.73rem -2.07rem 0 #fff, 4.00rem 0.00rem 0 #fff, 3.70rem 1.53rem 0 #fff, 2.83rem 2.83rem 0 #fff, 1.53rem 3.70rem 0 #fff, 0.00rem 4.00rem 0 #fff, -1.53rem 3.70rem 0 #fff, -2.83rem 2.83rem 0 #fff, -3.70rem 1.53rem 0 #fff, -4.00rem 0.00rem 0 #fff, -3.70rem -1.53rem 0 #fff, -2.83rem -2.83rem 0 #fff, -1.53rem -3.70rem 0 #fff, -0.00rem -4.00rem 0 #fff, 1.53rem -3.70rem 0 #fff, 2.83rem -2.83rem 0 #fff, 3.70rem -1.53rem 0 #fff; }
@media (max-width: 767px) { .hw_sticker { text-shadow: 3.40rem 0.00rem 0 #fff, 3.23rem 1.05rem 0 #fff, 2.75rem 2.00rem 0 #fff, 2.00rem 2.75rem 0 #fff, 1.05rem 3.23rem 0 #fff, 0.00rem 3.40rem 0 #fff, -1.05rem 3.23rem 0 #fff, -2.00rem 2.75rem 0 #fff, -2.75rem 2.00rem 0 #fff, -3.23rem 1.05rem 0 #fff, -3.40rem 0.00rem 0 #fff, -3.23rem -1.05rem 0 #fff, -2.75rem -2.00rem 0 #fff, -2.00rem -2.75rem 0 #fff, -1.05rem -3.23rem 0 #fff, -0.00rem -3.40rem 0 #fff, 1.05rem -3.23rem 0 #fff, 2.00rem -2.75rem 0 #fff, 2.75rem -2.00rem 0 #fff, 3.23rem -1.05rem 0 #fff, 1.70rem 0.00rem 0 #fff, 1.47rem 0.85rem 0 #fff, 0.85rem 1.47rem 0 #fff, 0.00rem 1.70rem 0 #fff, -0.85rem 1.47rem 0 #fff, -1.47rem 0.85rem 0 #fff, -1.70rem 0.00rem 0 #fff, -1.47rem -0.85rem 0 #fff, -0.85rem -1.47rem 0 #fff, -0.00rem -1.70rem 0 #fff, 0.85rem -1.47rem 0 #fff, 1.47rem -0.85rem 0 #fff; } }
/* stickers are images now (same look in every browser) */
.hw_sticker-img.is-text { height: 76rem; width: auto; max-width: none; }
/* Safari: keep the sticker above the image layer */
.section_hw.is-auto .hw_media { z-index: 1; isolation: isolate; }
.section_hw.is-auto .hw_media-in { will-change: auto; }
.section_hw.is-auto .hw_stroke.is-sticker { z-index: 10; transform: translateZ(1px); -webkit-transform: translateZ(1px); }
.section_hw.is-auto .hw_card { transform-style: flat; isolation: isolate; }
@media (max-width: 767px) { .hw_sticker-img.is-text { height: 32rem; } }
/* ===== Chaizer: layered duo with soft energy glow ===== */
.media-duo { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(120% 90% at 85% 15%, rgba(125,194,66,.35), transparent 55%),
  radial-gradient(90% 80% at 10% 100%, rgba(98,29,205,.55), transparent 60%),
  linear-gradient(160deg, #1b1430, #240046); }
.media-duo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px); background-size: 6rem 6rem; }
.duo_glow { position: absolute; width: 60%; aspect-ratio: 1; left: 30%; top: 15%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(125,194,66,.55), transparent); filter: blur(30rem); animation: duoPulse 4.5s ease-in-out infinite; }
@keyframes duoPulse { 50% { transform: scale(1.15); opacity: .6; } }
.duo_card { position: absolute; margin: 0; overflow: hidden; border-radius: 22rem; box-shadow: 0 30rem 60rem rgba(0,0,0,.45);
  transition: transform .7s cubic-bezier(.34,1.56,.64,1), z-index 0s .2s, box-shadow .5s; }
.duo_card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo_card.is-photo { width: 44%; aspect-ratio: 1; right: 7%; top: 10%; transform: rotate(5deg); z-index: 1; border: 8rem solid #fff; }
.duo_card.is-photo img { object-position: center 12%; }
.duo_card.is-type { width: 62%; aspect-ratio: 726 / 502; left: 6%; top: 24%; transform: rotate(-4deg); z-index: 2; border: 8rem solid #fff; animation: duoFloat 6s ease-in-out infinite; }
@keyframes duoFloat { 50% { translate: 0 -10rem; } }
.duo_card.is-photo { animation: duoFloat 6s ease-in-out -3s infinite; }
.media-duo:hover .duo_card.is-photo { z-index: 3; transform: rotate(1deg) scale(1.08); box-shadow: 0 40rem 80rem rgba(0,0,0,.55); }
.media-duo:hover .duo_card.is-type { transform: rotate(-6deg) scale(.96); }
@media (max-width: 767px) {
  .duo_card { border-radius: 12rem; } .duo_card.is-photo, .duo_card.is-type { border-width: 4rem; }
  .duo_card.is-type { top: 20%; }
}
/* Chaizer duo v2: each card lifts on its own hover, cleaner motion */
.media-duo:hover .duo_card.is-photo, .media-duo:hover .duo_card.is-type { transform: none; box-shadow: 0 30rem 60rem rgba(0,0,0,.45); }
.duo_card { transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), translate .55s cubic-bezier(.22,1,.36,1); cursor: pointer; }
.duo_card.is-type { transform: rotate(-4deg); animation: none; }
.duo_card.is-photo { transform: rotate(5deg); animation: none; }
.media-duo .duo_card.is-type:hover { z-index: 5; transform: rotate(-1.5deg) scale(1.06); translate: 0 -8rem; box-shadow: 0 44rem 80rem rgba(0,0,0,.55); }
.media-duo .duo_card.is-photo:hover { z-index: 5; transform: rotate(1.5deg) scale(1.08); translate: 0 -8rem; box-shadow: 0 44rem 80rem rgba(0,0,0,.55); }
.duo_glow { animation-duration: 6s; }
.zeham_intro .zi_hl { white-space: nowrap; }
/* seamless loop: spacing as margin so -50% is exact */
.hw_loop-in { gap: 0; }
.hw_loop-in > .hw_card { margin-right: 48rem; }
@media (max-width: 767px) { .hw_loop-in > .hw_card { margin-right: 14rem; } }


/* footer on phones: logo + slot machine side by side, smaller (mirrors the desktop layout: logo on the right) */
@media (max-width: 767px) {
  .footer_wrapper.f2 { grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12rem; row-gap: 26rem; align-items: center; }
  .f2 .footer_cta { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; width: auto; font-size: 17rem; }
  .f2 .footer_logo { grid-column: 2; grid-row: 1; justify-self: end; gap: 8rem; margin: 0; }
  .f2 .footer_logo-mark { width: 112rem; } .f2 .footer_logo-tag { width: 100rem; }
  .f2 .f_nav { grid-column: 1 / -1; grid-row: 2; }
  .f2 .f_contact { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .f2 .cta_line { font-size: 17rem; margin-bottom: 8rem; line-height: 1.3; }
  .f2 .slot { padding-left: 28rem; }
  .f2 .slot_frame { padding: 8rem; border-radius: 10rem; box-shadow: inset 0 0 0 3rem #7b3bf0, inset 0 -5rem 0 rgba(36,0,70,.35), 0 12rem 28rem rgba(0,0,0,.35); }
  .f2 .slot_bulbs { inset: 3rem; } .f2 .slot_bulbs i { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; box-shadow: 0 0 5rem 1rem rgba(253,177,18,.7); }
  .f2 .slot_window { width: 138rem; height: 30rem; border-radius: 6rem; box-shadow: inset 0 0 0 3rem var(--color-dark), inset 0 8rem 10rem -5rem rgba(36,0,70,.45); }
  .f2 .slot_item { height: 30rem; font-size: 18rem; }
  .f2 .slot_lever { width: 28rem; height: 56rem; }
  .f2 .slot_hub { width: 13rem; height: 18rem; border-radius: 0 6rem 6rem 0; }
  .f2 .slot_arm { left: 6rem; bottom: 8rem; width: 5rem; height: 42rem; border-radius: 3rem; }
  .f2 .slot_arm::after { width: 18rem; height: 5rem; border-radius: 3rem; bottom: -2rem; }
  .f2 .slot_knob { width: 16rem; height: 16rem; margin-left: -8rem; top: -9rem; }
}

/* services on phones: small cards so 3+ show at once; a tapped card flips, grows and centres so it stays readable */
@media (max-width: 767px) {
  .svc_viewport { padding: 112rem 0 120rem; }
  .svc_track { padding-inline: 14rem; }
  .svc_card { width: 128rem; height: 206rem; margin-inline-start: -10rem; }
  .svc_card:first-child { margin-inline-start: 0; }
  .svc_face { padding: 11rem; border-radius: 14rem; }
  .svc_num { font-size: 14rem; } .svc_en { font-size: 6.5rem; letter-spacing: .08em; max-width: 72%; white-space: normal; line-height: 1.3; }
  .svc_el { width: 70rem; height: 70rem; margin-top: 10rem; }
  .svc_title { font-size: 19rem; line-height: 1.2; } .svc_lead { font-size: 9rem; } .svc_hint { font-size: 8rem; margin-top: 6rem; padding: 3rem 8rem; }
  .svc_desc { font-size: 10rem; margin-top: 8rem; } .svc_list { gap: 3rem; margin-top: 8rem; } .svc_list li { font-size: 8.5rem; padding: 3rem 6rem; border-radius: 6rem; gap: 5rem; }
  .svc_list li::before { width: 5rem; height: 5rem; }
  .svc_back .svc_list { margin-top: 8rem; }
  .svc_btn { height: 22rem; font-size: 8rem; padding: 0 8rem; }
  .svc_card.is-flipped { z-index: 9; transform: translateX(var(--shift, 0px)) scale(1.95); }
  /* all list items the same size (the first one was 1.08em of the big inherited size) */
  .svc_back .svc_list li:first-child { font-size: 8.5rem; }
  /* keep the front icon from showing through the back (Safari) and make the flip lighter */
  .svc_el, .svc_face > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .svc_card.is-flipped .svc_front .svc_el { opacity: 0; }
  .svc_card, .svc_inner { will-change: transform; }
}

/* Safari (iPhone and Mac) ignores backface-visibility and crawls when a blend mode sits inside a flipping 3D card,
   so the front icon showed through the back and the flip lagged. On every screen:
   - drop the noise's mix-blend-mode (the grain is black at low alpha, so a normal blend looks the same)
   - show exactly one face at a time, swapping at the middle of the flip (the spring ease passes 90° at ~13% ≈ .1s) */
.svc_face::after { mix-blend-mode: normal; }
.svc_front { opacity: 1; transition: opacity 0s linear .1s; }
.svc_back { opacity: 0; transition: opacity 0s linear .1s; }
.svc_card.is-flipped .svc_front { opacity: 0; }
.svc_card.is-flipped .svc_back { opacity: 1; }
/* desktop flips on hover (is-hot) and click (is-pinned) too */
@media (min-width: 768px) and (hover: hover) {
  .svc_card.is-hot .svc_front, .svc_card.is-pinned .svc_front { opacity: 0; }
  .svc_card.is-hot .svc_back, .svc_card.is-pinned .svc_back { opacity: 1; }
}

/* card 05: English label reads left-to-right, left-aligned */
.svc_card:nth-child(5) .svc_en { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* works loop: still drifts on its own, but drag / swipe / trackpad / arrows move it either way (driven by js, not a CSS animation) */
.hw_loop { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.hw_loop.is-dragging { cursor: grabbing; }
.hw_loop img { -webkit-user-drag: none; }
.hw_loop-in { animation: none; will-change: transform; }
.hw_arrows { display: flex; gap: 12rem; flex: none; }
@media (max-width: 767px) {
  .hw_head { flex-direction: row; align-items: center; }
  .hw_arrows { gap: 8rem; }
}

/* ===== Sayyat section ===== */
.section_sayyat { position: relative; background: #240046; color: var(--color-white); padding: 140rem 0 160rem; overflow: hidden; }
.sy_grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 60rem; }
.sy_copy { text-align: right; font-family: var(--font-arabic); font-size: 28rem; line-height: 1.8; color: rgba(229,225,255,.85); }
.sy_copy p + p { margin-top: 10rem; }
.sy_title { font-weight: 900; font-size: 130rem; line-height: 1.15; color: var(--color-lavender); text-shadow: 7rem 7rem 0 var(--color-violet); margin-bottom: 40rem; }
.sy_name { color: #FDB112; }
.sy_lead { font-weight: 900; font-size: 34rem; color: var(--color-white); }
.sy_btn { display: inline-flex; margin-top: 46rem; font-family: var(--font-arabic); font-weight: 700; font-size: 26rem; padding: 18rem 46rem; }
.sy_art { position: relative; display: grid; place-items: center; min-height: 760rem; }
.sy_glow { position: absolute; width: 620rem; height: 620rem; border-radius: 50%; background: radial-gradient(circle, rgba(98,29,205,.85), rgba(98,29,205,0) 68%); }
.sy_bot { position: relative; height: 760rem; width: auto; filter: drop-shadow(0 30rem 40rem rgba(0,0,0,.45)); animation: sy-float 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sy-float { 0%,100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -16rem; rotate: 1.5deg; } }
.sy_bubble { position: absolute; z-index: 2; top: 40rem; left: 6%; padding: 14rem 26rem; border-radius: 26rem 26rem 26rem 4rem; background: #F8F8F8; color: #240046; font-family: var(--font-arabic); font-weight: 900; font-size: 26rem; box-shadow: 6rem 6rem 0 #DD055B; animation: sy-bub 4.5s ease-in-out infinite; }
@keyframes sy-bub { 0%,100% { translate: 0 0; } 50% { translate: 0 -10rem; } }
@media (prefers-reduced-motion: reduce) { .sy_bot, .sy_bubble { animation: none; } }
@media (max-width: 767px) {
  .section_sayyat { padding: 70rem 0 80rem; }
  .sy_grid { grid-template-columns: 1fr; gap: 10rem; }
  .sy_art { order: -1; min-height: 360rem; }
  .sy_glow { width: 300rem; height: 300rem; }
  .sy_bot { height: 360rem; }
  .sy_bubble { font-size: 14rem; padding: 8rem 14rem; top: 10rem; left: 4%; }
  .sy_title { font-size: 48rem; text-shadow: 3rem 3rem 0 var(--color-violet); margin-bottom: 18rem; }
  .sy_copy { font-size: 16rem; } .sy_lead { font-size: 18rem; }
  .sy_btn { font-size: 16rem; padding: 12rem 26rem; margin-top: 24rem; }
}

/* Sayyat on lavender, photo blended into the background */
.sec_wave.w-sayyat { background: #240046; margin: -1px 0 -3px; }
.section_sayyat { background: #E5E1FF; color: #240046; }
.sy_copy { color: rgba(36,0,70,.8); }
.sy_title { color: #621DCD; text-shadow: 7rem 7rem 0 #240046; }
.sy_name { color: #DD055B; }
.sy_lead { color: #240046; }
.sy_glow { display: none; }
.sy_bot { filter: none; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 70%, transparent 100%); }
.sy_bubble { box-shadow: 6rem 6rem 0 #DD055B; background: #fff; }
@media (max-width: 767px) { .sy_title { text-shadow: 3rem 3rem 0 #240046; } }
.sy_bot { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }

/* Sayyat back to dark; photo framed in a lavender card */
.section_sayyat { background: #240046; color: var(--color-white); }
.sec_wave.w-sayyat { background: #240046; }
.sec_wave.w-sayyat svg { height: 120rem; }
.sy_copy { color: rgba(229,225,255,.85); }
.sy_title { color: var(--color-lavender); text-shadow: 7rem 7rem 0 #621DCD; }
.sy_name { color: #FDB112; }
.sy_lead { color: #F8F8F8; font-size: 32rem; line-height: 1.7; }
.sy_bot { height: 700rem; border-radius: 40rem; box-shadow: 14rem 14rem 0 #621DCD, 0 40rem 80rem rgba(0,0,0,.45); animation: none; }
.sy_art { min-height: 0; }
.sy_bubble { top: 10rem; left: 4%; }
@media (max-width: 767px) { .sy_bot { height: 380rem; border-radius: 22rem; box-shadow: 7rem 7rem 0 #621DCD; } .sy_title { text-shadow: 3rem 3rem 0 #621DCD; } .sy_lead { font-size: 17rem; } .sec_wave.w-sayyat svg { height: 50rem; } }

/* Sayyat v3: violet section, cut-out character, slow welcoming gesture */
.section_sayyat { background: #621DCD; }
.sec_wave.w-sayyat svg path { stroke: #E5E1FF; }
.sy_title { color: #E5E1FF; text-shadow: 7rem 7rem 0 #240046; }
.sy_name { color: #FDB112; }
.sy_copy { color: rgba(248,248,248,.88); }
.sy_btn { background: #FDB112 !important; color: #240046 !important; --bubble: #240046; }
.sy_btn.is-hover { color: #FDB112 !important; }
.sy_figure { position: relative; display: block; height: 760rem; aspect-ratio: 562 / 1200; }
.sy_pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26rem 30rem rgba(36,0,70,.45)); }
.sy_pose.is-wave { opacity: 0; animation: sy-greet 9s ease-in-out infinite; }
.sy_pose.is-idle { animation: sy-greet-idle 9s ease-in-out infinite; }
@keyframes sy-greet { 0%, 18% { opacity: 0; } 30%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes sy-greet-idle { 0%, 18% { opacity: 1; } 30%, 78% { opacity: 0; } 90%, 100% { opacity: 1; } }
.sy_bubble { opacity: 0; animation: sy-bub-in 9s ease-in-out infinite; }
@keyframes sy-bub-in { 0%, 26% { opacity: 0; translate: 0 10rem; } 34%, 76% { opacity: 1; translate: 0 0; } 86%, 100% { opacity: 0; translate: 0 10rem; } }
@media (prefers-reduced-motion: reduce) { .sy_pose.is-wave { animation: none; opacity: 1; } .sy_pose.is-idle { animation: none; opacity: 0; } .sy_bubble { animation: none; opacity: 1; } }
@media (max-width: 767px) { .sy_figure { height: 400rem; } .sy_title { text-shadow: 3rem 3rem 0 #240046; } }
.sec_wave.w-sayyat svg { height: 160rem; } @media (max-width: 767px) { .sec_wave.w-sayyat svg { height: 60rem; } }

/* Sayyat static + seam + tighter spacing */
.sy_pose, .sy_bubble { animation: none !important; opacity: 1 !important; translate: none !important; }
.sy_figure { aspect-ratio: 300 / 640; height: 640rem; }
.section_sayyat { padding: 50rem 0 70rem; }
.sec_wave.w-sayyat { margin: -3px 0 -6px; padding-bottom: 6px; background: linear-gradient(to bottom, #240046 calc(100% - 8px), #621DCD calc(100% - 8px)); }
.section_sayyat { position: relative; z-index: 1; }
@media (max-width: 767px) { .section_sayyat { padding: 20rem 0 40rem; } .sy_figure { height: 360rem; } }
.sec_wave.w-sayyat svg path { stroke: none !important; }
/* Sayyat button: dark base, yellow on hover */
.sy_btn { background: #240046 !important; color: #FDB112 !important; --bubble: #FDB112 !important; }
.sy_btn.is-hover { color: #240046 !important; }
/* Sayyat: original image as supplied */
.sy_figure { aspect-ratio: 1024 / 1536; height: 680rem; }
.sy_pose.is-main { object-fit: cover; border-radius: 30rem; filter: none; box-shadow: 0 30rem 60rem rgba(36,0,70,.45); }
@media (max-width: 767px) { .sy_figure { height: 420rem; } .sy_pose.is-main { border-radius: 18rem; } }
/* Sayyat: lavender card behind the photo; bubble closer to him */
.sy_back { position: absolute; inset: 0; border-radius: 30rem; background: #E5E1FF; transform: translate(-26rem, 26rem) rotate(-4deg); }
.sy_pose.is-main { z-index: 1; }
.sy_bubble { left: 13%; top: 30rem; z-index: 3; }
@media (max-width: 767px) { .sy_back { border-radius: 18rem; transform: translate(-12rem, 12rem) rotate(-4deg); } .sy_bubble { left: 16%; top: 14rem; } }
.sy_pose.is-main { background: #621DCD; }