{"id":4738,"date":"2025-11-26T09:37:10","date_gmt":"2025-11-26T09:37:10","guid":{"rendered":"https:\/\/personage.sa\/?page_id=4738"},"modified":"2026-10-01T21:12:45","modified_gmt":"2026-10-01T18:12:45","slug":"about","status":"publish","type":"page","link":"http:\/\/personage.sa\/ar\/about\/","title":{"rendered":"About"},"content":{"rendered":"<p><!-- ========================================================\n     PERSONAGE \u2014 ABOUT LANDING\n     ENGLISH\n     ======================================================== --><\/p>\n<section\n  class=\"personage-about-hero\"\n  lang=\"en\"\n  aria-label=\"Our Story\"\n><\/p>\n<p>  <!-- BACKGROUND IMAGE --><\/p>\n<p>  <img decoding=\"async\"\n    class=\"personage-about-hero__image\"\n    src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Landing-Desktop.webp\"\n    alt=\"\"\n    fetchpriority=\"high\"\n  ><\/p>\n<p>  <!-- DARK IMAGE TREATMENT --><\/p>\n<div\n    class=\"personage-about-hero__overlay\"\n    aria-hidden=\"true\"\n  ><\/div>\n<p>  <!-- TITLE --><\/p>\n<h1 class=\"personage-about-hero__title\">\n<p>    <span><br \/>\n      OUR<br \/>\n    <\/span><\/p>\n<p>    <span><br \/>\n      STORY<br \/>\n    <\/span><\/p>\n<\/h1>\n<\/section>\n<style>\n\/* ==========================================================\n   PERSONAGE \u2014 ABOUT HERO\n   ========================================================== *\/<\/p>\n<p>.personage-about-hero,\n.personage-about-hero * {\n  box-sizing:\n    border-box;\n}<\/p>\n<p>\/* ==========================================================\n   ROOT\n   ========================================================== *\/<\/p>\n<p>.personage-about-hero {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100vh;<\/p>\n<p>  height:\n    100svh;<\/p>\n<p>  min-height:\n    650px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    #111;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   BACKGROUND\n   ========================================================== *\/<\/p>\n<p>.personage-about-hero__image {\n  position:\n    absolute;<\/p>\n<p>  inset:\n    0;<\/p>\n<p>  display:\n    block;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  object-fit:\n    cover;<\/p>\n<p>  object-position:\n    center center;<\/p>\n<p>  user-select:\n    none;<\/p>\n<p>  pointer-events:\n    none;\n}<\/p>\n<p>\/* ==========================================================\n   OVERLAY\n   ========================================================== *\/<\/p>\n<p>.personage-about-hero__overlay {\n  position:\n    absolute;<\/p>\n<p>  inset:\n    0;<\/p>\n<p>  z-index:\n    1;<\/p>\n<p>  pointer-events:\n    none;<\/p>\n<p>  background:\n    linear-gradient(\n      to top,\n      rgba(0,0,0,.33) 0%,\n      rgba(0,0,0,.16) 35%,\n      rgba(0,0,0,.08) 100%\n    );\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-about-hero__title {\n  position:\n    absolute;<\/p>\n<p>  left:\n    34px;<\/p>\n<p>  bottom:\n    49px;<\/p>\n<p>  z-index:\n    2;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    clamp(\n      92px,\n      8.2vw,\n      126px\n    );<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    .79;<\/p>\n<p>  letter-spacing:\n    -.065em;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  pointer-events:\n    none;\n}<\/p>\n<p>.personage-about-hero__title span {\n  display:\n    block;\n}<\/p>\n<p>\/* ==========================================================\n   TABLET\n   ========================================================== *\/<\/p>\n<p>@media\n(max-width:1024px)\nand\n(min-width:769px) {<\/p>\n<p>  .personage-about-hero__title {\n    left:\n      30px;<\/p>\n<p>    bottom:\n      40px;<\/p>\n<p>    font-size:\n      clamp(\n        82px,\n        10vw,\n        108px\n      );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:768px) {<\/p>\n<p>  .personage-about-hero {\n    height:\n      100svh;<\/p>\n<p>    min-height:\n      580px;\n  }<\/p>\n<p>  .personage-about-hero__image {\n    object-position:\n      center center;\n  }<\/p>\n<p>  .personage-about-hero__overlay {\n    background:\n      linear-gradient(\n        to top,\n        rgba(0,0,0,.38) 0%,\n        rgba(0,0,0,.14) 42%,\n        rgba(0,0,0,.05) 100%\n      );\n  }<\/p>\n<p>  .personage-about-hero__title {\n    left:\n      28px;<\/p>\n<p>    bottom:\n      46px;<\/p>\n<p>    font-size:\n      clamp(\n        68px,\n        20vw,\n        88px\n      );<\/p>\n<p>    line-height:\n      .81;<\/p>\n<p>    letter-spacing:\n      -.06em;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:370px) {<\/p>\n<p>  .personage-about-hero__title {\n    left:\n      24px;<\/p>\n<p>    bottom:\n      38px;<\/p>\n<p>    font-size:\n      64px;\n  }<\/p>\n<p>}\n<\/style>\n<p><!-- ========================================================\n     PERSONAGE \u2014 MISSION \/ VISION \/ CREATIVE DIRECTION\n     ENGLISH\n     DESKTOP HOVER + MOBILE CLICK\n     ======================================================== --><\/p>\n<section\n  class=\"personage-pillars\"\n  lang=\"en\"\n><\/p>\n<div class=\"personage-pillars__grid\">\n<p>    <!-- ====================================================\n         MISSION\n         ==================================================== --><\/p>\n<article\n      class=\"personage-pillar\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-expanded=\"false\"\n    ><\/p>\n<p>      <img decoding=\"async\"\n        class=\"personage-pillar__image\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Mission.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<div\n        class=\"personage-pillar__shade\"\n        aria-hidden=\"true\"\n      ><\/div>\n<div class=\"personage-pillar__panel\">\n<div class=\"personage-pillar__heading\">\n<p>          <span><br \/>\n            MISSION<br \/>\n          <\/span><\/p>\n<p>          <img decoding=\"async\"\n            class=\"personage-pillar__arrow\"\n            src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Right-Chevron-White.svg\"\n            alt=\"\"\n          ><\/p><\/div>\n<div class=\"personage-pillar__body\">\n<p>\n            WE CREATE DIGITAL EXPERIENCES THAT MOVE WITH INTENTION,<br \/>\n            SHAPED BY RESEARCH, GUIDED BY CREATIVITY, AND BUILT TO<br \/>\n            WORK SEAMLESSLY IN THE REAL WORLD.\n          <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>    <!-- ====================================================\n         VISION\n         ==================================================== --><\/p>\n<article\n      class=\"personage-pillar\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-expanded=\"false\"\n    ><\/p>\n<p>      <img decoding=\"async\"\n        class=\"personage-pillar__image\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Vision.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<div\n        class=\"personage-pillar__shade\"\n        aria-hidden=\"true\"\n      ><\/div>\n<div class=\"personage-pillar__panel\">\n<div class=\"personage-pillar__heading\">\n<p>          <span><br \/>\n            VISION<br \/>\n          <\/span><\/p>\n<p>          <img decoding=\"async\"\n            class=\"personage-pillar__arrow\"\n            src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Right-Chevron-White.svg\"\n            alt=\"\"\n          ><\/p><\/div>\n<div class=\"personage-pillar__body\">\n<p>\n            WE IMAGINE A FUTURE WHERE BRANDS COMMUNICATE WITH<br \/>\n            CLARITY, TECHNOLOGY FEELS HUMAN, AND EVERY INTERACTION<br \/>\n            CARRIES PURPOSE AND MEANING.\n          <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>    <!-- ====================================================\n         CREATIVE DIRECTION\n         ==================================================== --><\/p>\n<article\n      class=\"personage-pillar\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-expanded=\"false\"\n    ><\/p>\n<p>      <img decoding=\"async\"\n        class=\"personage-pillar__image\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Direction.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<div\n        class=\"personage-pillar__shade\"\n        aria-hidden=\"true\"\n      ><\/div>\n<div class=\"personage-pillar__panel\">\n<div class=\"personage-pillar__heading\">\n<p>          <span><br \/>\n            CREATIVE DIRECTION<br \/>\n          <\/span><\/p>\n<p>          <img decoding=\"async\"\n            class=\"personage-pillar__arrow\"\n            src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Right-Chevron-White.svg\"\n            alt=\"\"\n          ><\/p><\/div>\n<div class=\"personage-pillar__body\">\n<p>\n            WE SHAPE DISTINCT CREATIVE SYSTEMS THAT CONNECT IMAGE,<br \/>\n            CULTURE, AND COMMUNICATION \u2014 BUILDING IDENTITIES THAT<br \/>\n            FEEL RELEVANT, INTENTIONAL, AND BUILT TO EVOLVE.\n          <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/article><\/div>\n<\/section>\n<style>\n\/* ==========================================================\n   PERSONAGE \u2014 PILLARS\n   ========================================================== *\/<\/p>\n<p>.personage-pillars,\n.personage-pillars * {\n  box-sizing:\n    border-box;\n}<\/p>\n<p>\/* ==========================================================\n   SECTION\n   ========================================================== *\/<\/p>\n<p>.personage-pillars {\n  --desktop-padding:\n    40px;<\/p>\n<p>  --desktop-gap:\n    8px;<\/p>\n<p>  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100vh;<\/p>\n<p>  height:\n    100svh;<\/p>\n<p>  min-height:\n    650px;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    var(--desktop-padding);<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   GRID\n   ========================================================== *\/<\/p>\n<p>.personage-pillars__grid {\n  display:\n    grid;<\/p>\n<p>  grid-template-columns:\n    repeat(\n      3,\n      minmax(0,1fr)\n    );<\/p>\n<p>  gap:\n    var(--desktop-gap);<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;\n}<\/p>\n<p>\/* ==========================================================\n   CARD\n   ========================================================== *\/<\/p>\n<p>.personage-pillar {\n  position:\n    relative;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  min-width:\n    0;<\/p>\n<p>  margin:\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  overflow:\n    hidden;<\/p>\n<p>  background:\n    #111;<\/p>\n<p>  cursor:\n    pointer;<\/p>\n<p>  outline:\n    none;<\/p>\n<p>  isolation:\n    isolate;<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;\n}<\/p>\n<p>\/* ==========================================================\n   IMAGE\n   ========================================================== *\/<\/p>\n<p>.personage-pillar__image {\n  position:\n    absolute;<\/p>\n<p>  inset:\n    0;<\/p>\n<p>  z-index:\n    0;<\/p>\n<p>  display:\n    block;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  height:\n    100%;<\/p>\n<p>  object-fit:\n    cover;<\/p>\n<p>  object-position:\n    center center;<\/p>\n<p>  transform:\n    scale(1.001);<\/p>\n<p>  transition:\n    transform .7s\n    cubic-bezier(.16,1,.3,1);\n}<\/p>\n<p>\/* ==========================================================\n   GRADIENT\n   ========================================================== *\/<\/p>\n<p>.personage-pillar__shade {\n  position:\n    absolute;<\/p>\n<p>  inset:\n    0;<\/p>\n<p>  z-index:\n    1;<\/p>\n<p>  pointer-events:\n    none;<\/p>\n<p>  background:\n    linear-gradient(\n      to top,\n      rgba(0,0,0,.46) 0%,\n      rgba(0,0,0,.12) 28%,\n      rgba(0,0,0,0) 55%\n    );<\/p>\n<p>  transition:\n    opacity .45s ease;\n}<\/p>\n<p>\/* ==========================================================\n   INFORMATION PANEL<\/p>\n<p>   CLOSED:\n   Only heading area remains visible.<\/p>\n<p>   OPEN:\n   Black panel expands upward.\n   ========================================================== *\/<\/p>\n<p>.personage-pillar__panel {\n  position:\n    absolute;<\/p>\n<p>  left:\n    10px;<\/p>\n<p>  right:\n    10px;<\/p>\n<p>  bottom:\n    8px;<\/p>\n<p>  z-index:\n    3;<\/p>\n<p>  padding:\n    22px\n    20px\n    20px;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  background:\n    rgba(0,0,0,0);<\/p>\n<p>  transition:\n    background-color .45s ease,\n    padding .45s cubic-bezier(.16,1,.3,1);\n}<\/p>\n<p>\/* ==========================================================\n   HEADING\n   ========================================================== *\/<\/p>\n<p>.personage-pillar__heading {\n  position:\n    relative;<\/p>\n<p>  display:\n    flex;<\/p>\n<p>  width:\n    100%;<\/p>\n<p>  align-items:\n    center;<\/p>\n<p>  justify-content:\n    space-between;<\/p>\n<p>  gap:\n    18px;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  font-size:\n    20px;<\/p>\n<p>  font-weight:\n    900;<\/p>\n<p>  line-height:\n    1;<\/p>\n<p>  letter-spacing:\n    -.025em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>.personage-pillar__heading span {\n  display:\n    block;<\/p>\n<p>  min-width:\n    0;\n}<\/p>\n<p>\/* ==========================================================\n   CHEVRON\n   ========================================================== *\/<\/p>\n<p>.personage-pillar__arrow {\n  flex:\n    0 0 auto;<\/p>\n<p>  display:\n    block;<\/p>\n<p>  width:\n    13px;<\/p>\n<p>  height:\n    13px;<\/p>\n<p>  object-fit:\n    contain;<\/p>\n<p>  transition:\n    transform .4s\n    cubic-bezier(.16,1,.3,1);\n}<\/p>\n<p>\/* ==========================================================\n   BODY\n   ========================================================== *\/<\/p>\n<p>.personage-pillar__body {\n  display:\n    grid;<\/p>\n<p>  grid-template-rows:\n    0fr;<\/p>\n<p>  opacity:\n    0;<\/p>\n<p>  transform:\n    translateY(14px);<\/p>\n<p>  transition:\n    grid-template-rows .45s\n      cubic-bezier(.16,1,.3,1),\n    opacity .3s ease,\n    transform .45s\n      cubic-bezier(.16,1,.3,1);\n}<\/p>\n<p>.personage-pillar__body > * {\n  min-height:\n    0;<\/p>\n<p>  overflow:\n    hidden;\n}<\/p>\n<p>.personage-pillar__body p {\n  max-width:\n    420px;<\/p>\n<p>  margin:\n    19px\n    0\n    0;<\/p>\n<p>  padding:\n    0;<\/p>\n<p>  color:\n    #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    14px;<\/p>\n<p>  font-weight:\n    300;<\/p>\n<p>  line-height:\n    16px;<\/p>\n<p>  letter-spacing:\n    -.01em;<\/p>\n<p>  text-transform:\n    uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   DESKTOP HOVER \/ KEYBOARD\n   ========================================================== *\/<\/p>\n<p>@media (hover:hover) and (pointer:fine) {<\/p>\n<p>  .personage-pillar:hover\n  .personage-pillar__panel,<\/p>\n<p>  .personage-pillar:focus-visible\n  .personage-pillar__panel {\n    padding:\n      27px\n      20px\n      29px;<\/p>\n<p>    background:\n      #000;\n  }<\/p>\n<p>  .personage-pillar:hover\n  .personage-pillar__body,<\/p>\n<p>  .personage-pillar:focus-visible\n  .personage-pillar__body {\n    grid-template-rows:\n      1fr;<\/p>\n<p>    opacity:\n      1;<\/p>\n<p>    transform:\n      translateY(0);\n  }<\/p>\n<p>  .personage-pillar:hover\n  .personage-pillar__arrow,<\/p>\n<p>  .personage-pillar:focus-visible\n  .personage-pillar__arrow {\n    transform:\n      rotate(90deg);\n  }<\/p>\n<p>  .personage-pillar:hover\n  .personage-pillar__image,<\/p>\n<p>  .personage-pillar:focus-visible\n  .personage-pillar__image {\n    transform:\n      scale(1.025);\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   JS OPEN STATE\n   ========================================================== *\/<\/p>\n<p>.personage-pillar.is-open\n.personage-pillar__panel {\n  padding:\n    27px\n    20px\n    29px;<\/p>\n<p>  background:\n    #000;\n}<\/p>\n<p>.personage-pillar.is-open\n.personage-pillar__body {\n  grid-template-rows:\n    1fr;<\/p>\n<p>  opacity:\n    1;<\/p>\n<p>  transform:\n    translateY(0);\n}<\/p>\n<p>.personage-pillar.is-open\n.personage-pillar__arrow {\n  transform:\n    rotate(90deg);\n}<\/p>\n<p>.personage-pillar.is-open\n.personage-pillar__image {\n  transform:\n    scale(1.025);\n}<\/p>\n<p>\/* ==========================================================\n   TABLET\n   ========================================================== *\/<\/p>\n<p>@media\n(max-width:1050px)\nand\n(min-width:769px) {<\/p>\n<p>  .personage-pillars {\n    --desktop-padding:\n      30px;\n  }<\/p>\n<p>  .personage-pillar__panel {\n    left:\n      8px;<\/p>\n<p>    right:\n      8px;\n  }<\/p>\n<p>  .personage-pillar__heading {\n    font-size:\n      17px;\n  }<\/p>\n<p>  .personage-pillar__body p {\n    font-size:\n      12px;<\/p>\n<p>    line-height:\n      14px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE<\/p>\n<p>   REQUIREMENTS:\n   - STACKED\n   - EACH CARD = 60SVH\n   - OUTER PADDING = 30PX\n   - GAP BETWEEN CARDS = SAME 30PX\n   - CLICK TO OPEN\n   ========================================================== *\/<\/p>\n<p>@media (max-width:768px) {<\/p>\n<p>  .personage-pillars {\n    --mobile-pad:\n      30px;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;<\/p>\n<p>    min-height:\n      0;<\/p>\n<p>    padding:\n      var(--mobile-pad);<\/p>\n<p>    overflow:\n      visible;\n  }<\/p>\n<p>  .personage-pillars__grid {\n    display:\n      grid;<\/p>\n<p>    grid-template-columns:\n      1fr;<\/p>\n<p>    gap:\n      var(--mobile-pad);<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    height:\n      auto;\n  }<\/p>\n<p>  .personage-pillar {\n    width:\n      100%;<\/p>\n<p>    height:\n      60vh;<\/p>\n<p>    height:\n      60svh;<\/p>\n<p>    min-height:\n      430px;<\/p>\n<p>    max-height:\n      650px;\n  }<\/p>\n<p>  .personage-pillar__panel {\n    left:\n      8px;<\/p>\n<p>    right:\n      8px;<\/p>\n<p>    bottom:\n      8px;<\/p>\n<p>    padding:\n      20px\n      20px\n      19px;\n  }<\/p>\n<p>  .personage-pillar__heading {\n    font-size:\n      18px;<\/p>\n<p>    line-height:\n      1;\n  }<\/p>\n<p>  .personage-pillar__arrow {\n    width:\n      12px;<\/p>\n<p>    height:\n      12px;\n  }<\/p>\n<p>  .personage-pillar__body p {\n    max-width:\n      none;<\/p>\n<p>    margin-top:\n      18px;<\/p>\n<p>    font-size:\n      13px;<\/p>\n<p>    line-height:\n      15px;\n  }<\/p>\n<p>  .personage-pillar.is-open\n  .personage-pillar__panel {\n    padding:\n      24px\n      20px\n      25px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:370px) {<\/p>\n<p>  .personage-pillars {\n    --mobile-pad:\n      24px;\n  }<\/p>\n<p>  .personage-pillar {\n    min-height:\n      400px;\n  }<\/p>\n<p>  .personage-pillar__heading {\n    font-size:\n      16px;\n  }<\/p>\n<p>  .personage-pillar__body p {\n    font-size:\n      12px;<\/p>\n<p>    line-height:\n      14px;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .personage-pillar__image,\n  .personage-pillar__panel,\n  .personage-pillar__body,\n  .personage-pillar__arrow {\n    transition:\n      none !important;\n  }<\/p>\n<p>}\n<\/style>\n<p><script>\n(function () {<\/p>\n<p>  \"use strict\";<\/p>\n<p>  const section =\n    document.querySelector(\n      \".personage-pillars\"\n    );<\/p>\n<p>  if (!section) {\n    return;\n  }<\/p>\n<p>  const cards =\n    Array.from(\n      section.querySelectorAll(\n        \".personage-pillar\"\n      )\n    );<\/p>\n<p>  const mobileQuery =\n    window.matchMedia(\n      \"(max-width: 768px)\"\n    );<\/p>\n<p>  \/* ========================================================\n     CLOSE ALL EXCEPT OPTIONAL TARGET\n     ======================================================== *\/<\/p>\n<p>  function closeOthers(\n    exceptCard = null\n  ) {<\/p>\n<p>    cards.forEach(\n      card => {<\/p>\n<p>        if (\n          card === exceptCard\n        ) {<\/p>\n<p>          return;<\/p>\n<p>        }<\/p>\n<p>        card.classList.remove(\n          \"is-open\"\n        );<\/p>\n<p>        card.setAttribute(\n          \"aria-expanded\",\n          \"false\"\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     TOGGLE\n     ======================================================== *\/<\/p>\n<p>  function toggleCard(\n    card\n  ) {<\/p>\n<p>    if (\n      !mobileQuery.matches\n    ) {<\/p>\n<p>      return;<\/p>\n<p>    }<\/p>\n<p>    const opening =\n      !card.classList.contains(\n        \"is-open\"\n      );<\/p>\n<p>    closeOthers(\n      opening\n        ?\n        card\n        :\n        null\n    );<\/p>\n<p>    card.classList.toggle(\n      \"is-open\",\n      opening\n    );<\/p>\n<p>    card.setAttribute(\n      \"aria-expanded\",\n      opening\n        ?\n        \"true\"\n        :\n        \"false\"\n    );<\/p>\n<p>  }<\/p>\n<p>  \/* ========================================================\n     EVENTS\n     ======================================================== *\/<\/p>\n<p>  cards.forEach(\n    card => {<\/p>\n<p>      card.addEventListener(\n        \"click\",\n        () => {<\/p>\n<p>          toggleCard(\n            card\n          );<\/p>\n<p>        }\n      );<\/p>\n<p>      card.addEventListener(\n        \"keydown\",\n        event => {<\/p>\n<p>          if (\n            event.key !== \"Enter\"\n            &&\n            event.key !== \" \"\n          ) {<\/p>\n<p>            return;<\/p>\n<p>          }<\/p>\n<p>          if (\n            !mobileQuery.matches\n          ) {<\/p>\n<p>            return;<\/p>\n<p>          }<\/p>\n<p>          event.preventDefault();<\/p>\n<p>          toggleCard(\n            card\n          );<\/p>\n<p>        }\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  \/* ========================================================\n     RESET WHEN RETURNING TO DESKTOP\n     ======================================================== *\/<\/p>\n<p>  function syncMode() {<\/p>\n<p>    if (\n      !mobileQuery.matches\n    ) {<\/p>\n<p>      closeOthers();<\/p>\n<p>    }<\/p>\n<p>  }<\/p>\n<p>  if (\n    typeof mobileQuery.addEventListener\n    ===\n    \"function\"\n  ) {<\/p>\n<p>    mobileQuery.addEventListener(\n      \"change\",\n      syncMode\n    );<\/p>\n<p>  }<\/p>\n<p>  else {<\/p>\n<p>    mobileQuery.addListener(\n      syncMode\n    );<\/p>\n<p>  }<\/p>\n<p>})();\n<\/script><br \/>\n<!-- ========================================================\n     PERSONAGE \u2014 HISTORY TIMELINE\n     ENGLISH\n\n     - FULL SECTION SWIPE \/ DRAG\n     - NATIVE SCROLL SNAP\n     - DESKTOP EDGE HOVER CONTROLS\n     - WHITE SQUARE \/ BLACK CHEVRON\n     ======================================================== --><\/p>\n<section\n  class=\"pn-history\"\n  lang=\"en\"\n><\/p>\n<div\n    class=\"pn-history__backgrounds\"\n    aria-hidden=\"true\"\n  ><\/p>\n<div\n      class=\"pn-history__bg is-active\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/2nd.webp');\"\n    ><\/div>\n<div\n      class=\"pn-history__bg\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/econdd.webp');\"\n    ><\/div>\n<div\n      class=\"pn-history__bg\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/third.webp');\"\n    ><\/div>\n<div\n      class=\"pn-history__bg\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/fourth.webp');\"\n    ><\/div>\n<div\n      class=\"pn-history__bg\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Computer.webp');\"\n    ><\/div>\n<div\n      class=\"pn-history__bg\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/Pre-Last.webp');\"\n    ><\/div>\n<div\n      class=\"pn-history__bg\"\n      style=\"background-image:url('https:\/\/personage.sa\/wp-content\/uploads\/2025\/11\/ast.webp');\"\n    ><\/div>\n<\/p><\/div>\n<div\n    class=\"pn-history__shade\"\n    aria-hidden=\"true\"\n  ><\/div>\n<div class=\"pn-history__viewport\">\n<div class=\"pn-history__track\">\n<article\n        class=\"pn-history__item is-active\"\n        data-index=\"0\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2018\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            FOUNDATION<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            PERSONAGE BEGAN AS A BOUTIQUE FASHION HOUSE DEFINED BY<br \/>\n            QUALITY, CURATION, AND A DISTINCT SAUDI AESTHETIC.<br \/>\n            EARLY COLLECTIONS SET THE TONE FOR A MODERN<br \/>\n            INTERPRETATION OF TRADITION.\n          <\/p>\n<\/p><\/div>\n<\/article>\n<article\n        class=\"pn-history__item\"\n        data-index=\"1\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2020\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            BRAND EMERGENCE<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            THE BRAND EXPANDED ITS RETAIL STRUCTURE AND GAINED<br \/>\n            REGIONAL ATTENTION THROUGH SIGNATURE PIECES AND LIMITED<br \/>\n            COLLECTIONS THAT RESONATED WITH A GROWING AUDIENCE.\n          <\/p>\n<\/p><\/div>\n<\/article>\n<article\n        class=\"pn-history__item\"\n        data-index=\"2\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2022\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            CREATIVE EVOLUTION<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            PERSONAGE INVESTED IN DESIGN, PRODUCTION, AND CREATIVE<br \/>\n            DEVELOPMENT, INTRODUCING BOLDER SILHOUETTES AND REFINING<br \/>\n            ITS ARTISTIC IDENTITY ACROSS COLLECTIONS.\n          <\/p>\n<\/p><\/div>\n<\/article>\n<article\n        class=\"pn-history__item\"\n        data-index=\"3\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2023\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            RETAIL EXPANSION<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            NEW STORES ALLOWED FOR A MORE IMMERSIVE RETAIL<br \/>\n            EXPERIENCE, COMBINING CURATED JOURNEYS WITH A DISTINCT<br \/>\n            LUXURY ATMOSPHERE THAT ATTRACTED A SOPHISTICATED<br \/>\n            CLIENTELE.\n          <\/p>\n<\/p><\/div>\n<\/article>\n<article\n        class=\"pn-history__item\"\n        data-index=\"4\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2025\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            DIGITAL ADVANCEMENT<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            A COMPLETE DIGITAL TRANSFORMATION INTRODUCED A MODERN<br \/>\n            E-COMMERCE PLATFORM AND INTEGRATED SYSTEMS THAT<br \/>\n            SEAMLESSLY CONNECTED PHYSICAL RETAIL WITH ONLINE<br \/>\n            EXPERIENCE.\n          <\/p>\n<\/p><\/div>\n<\/article>\n<article\n        class=\"pn-history__item is-future\"\n        data-index=\"5\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2027\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            FUTURE STRATEGY<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            SUSTAINABILITY INITIATIVES, RESPONSIBLE PRODUCTION,<br \/>\n            AND TRACEABLE MATERIALS DEFINE THE NEXT PHASE OF THE<br \/>\n            BRAND\u2019S DEVELOPMENT AND LONG-TERM VALUES.\n          <\/p>\n<\/p><\/div>\n<\/article>\n<article\n        class=\"pn-history__item is-future\"\n        data-index=\"6\"\n      ><\/p>\n<div class=\"pn-history__item-inner\">\n<div class=\"pn-history__year\">\n            2030\n          <\/div>\n<div class=\"pn-history__line\"><\/div>\n<h3 class=\"pn-history__title\">\n            GLOBAL AMBITION<br \/>\n          <\/h3>\n<p class=\"pn-history__text\">\n            AS PERSONAGE APPROACHES ITS SECOND DECADE, THE BRAND<br \/>\n            PREPARES FOR INTERNATIONAL EXPANSION WITH A REFINED<br \/>\n            CREATIVE VISION AND FLAGSHIP PLANS BEYOND THE REGION.\n          <\/p>\n<\/p><\/div>\n<\/article><\/div>\n<\/p><\/div>\n<p>  <!-- PREVIOUS --><\/p>\n<p>  <button\n    class=\"pn-history__edge pn-history__edge--prev\"\n    type=\"button\"\n    aria-label=\"Previous milestone\"\n  ><\/p>\n<p>    <span class=\"pn-history__edge-square\"><\/p>\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Right-Chevron-White.svg\"\n        alt=\"\"\n      ><\/p>\n<p>    <\/span><\/p>\n<p>  <\/button><\/p>\n<p>  <!-- NEXT --><\/p>\n<p>  <button\n    class=\"pn-history__edge pn-history__edge--next\"\n    type=\"button\"\n    aria-label=\"Next milestone\"\n  ><\/p>\n<p>    <span class=\"pn-history__edge-square\"><\/p>\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/06\/Right-Chevron-White.svg\"\n        alt=\"\"\n      ><\/p>\n<p>    <\/span><\/p>\n<p>  <\/button><\/p>\n<\/section>\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/<\/p>\n<p>.pn-history,\n.pn-history * {\n  box-sizing: border-box;\n}<\/p>\n<p>\/* ==========================================================\n   ROOT\n   ========================================================== *\/<\/p>\n<p>.pn-history {\n  position: relative;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 100vh;\n  height: 100svh;<\/p>\n<p>  min-height: 650px;<\/p>\n<p>  margin: 0;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  background: #111;<\/p>\n<p>  color: #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  isolation: isolate;\n}<\/p>\n<p>\/* ==========================================================\n   BACKGROUNDS\n   ========================================================== *\/<\/p>\n<p>.pn-history__backgrounds {\n  position: absolute;<\/p>\n<p>  inset: 0;<\/p>\n<p>  z-index: 0;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  pointer-events: none;\n}<\/p>\n<p>.pn-history__bg {\n  position: absolute;<\/p>\n<p>  inset: -2%;<\/p>\n<p>  opacity: 0;<\/p>\n<p>  background-size: cover;<\/p>\n<p>  background-position: center;<\/p>\n<p>  background-repeat: no-repeat;<\/p>\n<p>  transform: scale(1.025);<\/p>\n<p>  transition:\n    opacity .6s ease,\n    transform 1.1s cubic-bezier(.16,1,.3,1);<\/p>\n<p>  will-change:\n    opacity,\n    transform;\n}<\/p>\n<p>.pn-history__bg.is-active {\n  opacity: 1;<\/p>\n<p>  transform: scale(1);\n}<\/p>\n<p>\/* ==========================================================\n   OVERLAY\n   ========================================================== *\/<\/p>\n<p>.pn-history__shade {\n  position: absolute;<\/p>\n<p>  inset: 0;<\/p>\n<p>  z-index: 1;<\/p>\n<p>  background:\n    rgba(0,0,0,.5);<\/p>\n<p>  pointer-events: none;\n}<\/p>\n<p>\/* ==========================================================\n   FULL-SCREEN SCROLLER\n   ========================================================== *\/<\/p>\n<p>.pn-history__viewport {\n  position: absolute;<\/p>\n<p>  inset: 0;<\/p>\n<p>  z-index: 3;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 100%;<\/p>\n<p>  overflow-x: auto;<\/p>\n<p>  overflow-y: hidden;<\/p>\n<p>  scroll-snap-type:\n    x mandatory;<\/p>\n<p>  scroll-behavior:\n    smooth;<\/p>\n<p>  overscroll-behavior-x:\n    contain;<\/p>\n<p>  scrollbar-width:\n    none;<\/p>\n<p>  -ms-overflow-style:\n    none;<\/p>\n<p>  -webkit-overflow-scrolling:\n    touch;<\/p>\n<p>  touch-action:\n    pan-x pan-y;<\/p>\n<p>  cursor: grab;\n}<\/p>\n<p>.pn-history__viewport:active {\n  cursor: grabbing;\n}<\/p>\n<p>.pn-history__viewport::-webkit-scrollbar {\n  display: none;\n}<\/p>\n<p>\/* ==========================================================\n   TRACK\n   ========================================================== *\/<\/p>\n<p>.pn-history__track {\n  display: flex;<\/p>\n<p>  width: 100%;<\/p>\n<p>  min-width: 100%;<\/p>\n<p>  height: 100%;<\/p>\n<p>  align-items: stretch;<\/p>\n<p>  direction: ltr;\n}<\/p>\n<p>\/* ==========================================================\n   ITEM\n   ========================================================== *\/<\/p>\n<p>.pn-history__item {\n  position: relative;<\/p>\n<p>  display: flex;<\/p>\n<p>  flex:\n    0 0 calc(100vw \/ 3);<\/p>\n<p>  width:\n    calc(100vw \/ 3);<\/p>\n<p>  min-width: 0;<\/p>\n<p>  height: 100%;<\/p>\n<p>  align-items: center;<\/p>\n<p>  padding:\n    0 35px;<\/p>\n<p>  scroll-snap-align:\n    start;<\/p>\n<p>  scroll-snap-stop:\n    always;<\/p>\n<p>  opacity: .46;<\/p>\n<p>  text-align: left;<\/p>\n<p>  cursor: grab;<\/p>\n<p>  transition:\n    opacity .3s ease;\n}<\/p>\n<p>.pn-history__item.is-active {\n  opacity: 1;\n}<\/p>\n<p>.pn-history__item-inner {\n  width: 100%;\n}<\/p>\n<p>\/* ==========================================================\n   YEAR\n   ========================================================== *\/<\/p>\n<p>.pn-history__year {\n  margin:\n    0 0 8px;<\/p>\n<p>  color: #fff;<\/p>\n<p>  font-size: 18px;<\/p>\n<p>  font-weight: 900;<\/p>\n<p>  line-height: 1;<\/p>\n<p>  text-align: left;\n}<\/p>\n<p>\/* ==========================================================\n   LINE\n   ========================================================== *\/<\/p>\n<p>.pn-history__line {\n  width: 2px;<\/p>\n<p>  height: 30px;<\/p>\n<p>  background: #fff;\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.pn-history__title {\n  margin:\n    8px 0 0;<\/p>\n<p>  padding: 0;<\/p>\n<p>  color: #fff;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size: 18px;<\/p>\n<p>  font-weight: 900;<\/p>\n<p>  line-height: 1;<\/p>\n<p>  text-align: left;<\/p>\n<p>  text-transform: uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   TEXT\n   ========================================================== *\/<\/p>\n<p>.pn-history__text {\n  max-width: 500px;<\/p>\n<p>  margin:\n    10px 0 0;<\/p>\n<p>  color: #fff;<\/p>\n<p>  font-size: 14px;<\/p>\n<p>  font-weight: 300;<\/p>\n<p>  line-height: 1.55;<\/p>\n<p>  text-align: left;<\/p>\n<p>  text-transform: uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   DESKTOP EDGE HOVER AREA\n   ========================================================== *\/<\/p>\n<p>.pn-history__edge {\n  position: absolute;<\/p>\n<p>  top: 0;<\/p>\n<p>  bottom: 0;<\/p>\n<p>  z-index: 10;<\/p>\n<p>  display: flex;<\/p>\n<p>  width: 100px;<\/p>\n<p>  align-items: center;<\/p>\n<p>  margin: 0;<\/p>\n<p>  padding: 0;<\/p>\n<p>  border: 0;<\/p>\n<p>  outline: 0;<\/p>\n<p>  background: transparent;<\/p>\n<p>  appearance: none;<\/p>\n<p>  cursor: pointer;<\/p>\n<p>  -webkit-tap-highlight-color:\n    transparent;\n}<\/p>\n<p>.pn-history__edge--prev {\n  left: 0;<\/p>\n<p>  justify-content:\n    flex-start;<\/p>\n<p>  padding-left:\n    22px;\n}<\/p>\n<p>.pn-history__edge--next {\n  right: 0;<\/p>\n<p>  justify-content:\n    flex-end;<\/p>\n<p>  padding-right:\n    22px;\n}<\/p>\n<p>\/* ==========================================================\n   WHITE SQUARE CONTROL<\/p>\n<p>   Black chevron.\n   No radius.\n   ========================================================== *\/<\/p>\n<p>.pn-history__edge-square {\n  display: flex;<\/p>\n<p>  width: 44px;<\/p>\n<p>  height: 44px;<\/p>\n<p>  flex:\n    0 0 44px;<\/p>\n<p>  align-items: center;<\/p>\n<p>  justify-content: center;<\/p>\n<p>  background: #fff;<\/p>\n<p>  border-radius: 0;<\/p>\n<p>  opacity: 0;<\/p>\n<p>  transform:\n    scale(.92);<\/p>\n<p>  transition:\n    opacity .22s ease,\n    transform .32s cubic-bezier(.16,1,.3,1);<\/p>\n<p>  pointer-events: none;\n}<\/p>\n<p>.pn-history__edge-square img {\n  display: block;<\/p>\n<p>  width: 12px;<\/p>\n<p>  height: 12px;<\/p>\n<p>  \/*\n   White SVG -> pure black.\n  *\/<\/p>\n<p>  filter:\n    brightness(0);<\/p>\n<p>  pointer-events: none;\n}<\/p>\n<p>\/* PREVIOUS POINTS LEFT *\/<\/p>\n<p>.pn-history__edge--prev\n.pn-history__edge-square {\n  transform:\n    translateX(-8px)\n    scale(.92);\n}<\/p>\n<p>.pn-history__edge--prev\n.pn-history__edge-square img {\n  transform:\n    scaleX(-1);\n}<\/p>\n<p>\/* NEXT POINTS RIGHT *\/<\/p>\n<p>.pn-history__edge--next\n.pn-history__edge-square {\n  transform:\n    translateX(8px)\n    scale(.92);\n}<\/p>\n<p>\/* ==========================================================\n   EDGE HOVER\n   ========================================================== *\/<\/p>\n<p>@media (hover:hover) and (pointer:fine) {<\/p>\n<p>  .pn-history__edge:hover\n  .pn-history__edge-square,<\/p>\n<p>  .pn-history__edge:focus-visible\n  .pn-history__edge-square {\n    opacity: 1;<\/p>\n<p>    transform:\n      translateX(0)\n      scale(1);\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:768px) {<\/p>\n<p>  .pn-history {\n    min-height: 580px;\n  }<\/p>\n<p>  .pn-history__item {\n    flex:\n      0 0 100vw;<\/p>\n<p>    width:\n      100vw;<\/p>\n<p>    padding:\n      0 23px;\n  }<\/p>\n<p>  .pn-history__year,\n  .pn-history__title {\n    font-size: 18px;\n  }<\/p>\n<p>  .pn-history__text {\n    max-width:\n      calc(100vw - 46px);<\/p>\n<p>    font-size: 13px;<\/p>\n<p>    line-height: 1.5;\n  }<\/p>\n<p>  .pn-history__edge {\n    display: none;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .pn-history__viewport {\n    scroll-behavior: auto;\n  }<\/p>\n<p>  .pn-history__bg,\n  .pn-history__edge-square {\n    transition:\n      none !important;\n  }<\/p>\n<p>}\n<\/style>\n<p><script>\n(function () {<\/p>\n<p>  \"use strict\";<\/p>\n<p>  const section =\n    document.querySelector(\n      \".pn-history\"\n    );<\/p>\n<p>  if (!section) return;<\/p>\n<p>  const viewport =\n    section.querySelector(\n      \".pn-history__viewport\"\n    );<\/p>\n<p>  const items =\n    Array.from(\n      section.querySelectorAll(\n        \".pn-history__item\"\n      )\n    );<\/p>\n<p>  const backgrounds =\n    Array.from(\n      section.querySelectorAll(\n        \".pn-history__bg\"\n      )\n    );<\/p>\n<p>  const prev =\n    section.querySelector(\n      \".pn-history__edge--prev\"\n    );<\/p>\n<p>  const next =\n    section.querySelector(\n      \".pn-history__edge--next\"\n    );<\/p>\n<p>  if (\n    !viewport ||\n    !items.length\n  ) return;<\/p>\n<p>  let activeIndex = 0;<\/p>\n<p>  let visibleItems =\n    section.getBoundingClientRect().width <= 768\n      ? 1\n      : 3;\n\n  let scrollRAF = null;\n\n  let scrollEndTimer = null;\n\n  let pointerDown = false;\n\n  let pointerMoved = false;\n\n  let pointerStartX = 0;\n\n  let pointerStartScroll = 0;\n\n  let lastWidth =\n    Math.round(\n      section.getBoundingClientRect().width\n    );\n\n\n  function itemWidth() {\n\n    return viewport.clientWidth \/\n      visibleItems;\n\n  }\n\n\n  function maximumIndex() {\n\n    return Math.max(\n      0,\n      items.length - visibleItems\n    );\n\n  }\n\n\n  function clampIndex(index) {\n\n    return Math.max(\n      0,\n      Math.min(\n        maximumIndex(),\n        index\n      )\n    );\n\n  }\n\n\n  function forceActive(index) {\n\n    activeIndex =\n      clampIndex(index);\n\n\n    items.forEach(\n      (item, itemIndex) => {<\/p>\n<p>        item.classList.toggle(\n          \"is-active\",\n          itemIndex === activeIndex\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>    backgrounds.forEach(\n      (background, backgroundIndex) => {<\/p>\n<p>        background.classList.toggle(\n          \"is-active\",\n          backgroundIndex === activeIndex\n        );<\/p>\n<p>      }\n    );<\/p>\n<p>  }<\/p>\n<p>  function scrollToIndex(\n    index,\n    behavior = \"smooth\"\n  ) {<\/p>\n<p>    const target =\n      clampIndex(index);<\/p>\n<p>    viewport.scrollTo({<\/p>\n<p>      left:\n        target * itemWidth(),<\/p>\n<p>      behavior<\/p>\n<p>    });<\/p>\n<p>    forceActive(target);<\/p>\n<p>  }<\/p>\n<p>  function updateFromScroll() {<\/p>\n<p>    const width =\n      Math.max(\n        1,\n        itemWidth()\n      );<\/p>\n<p>    const index =\n      clampIndex(\n        Math.round(\n          viewport.scrollLeft \/\n          width\n        )\n      );<\/p>\n<p>    forceActive(index);<\/p>\n<p>  }<\/p>\n<p>  viewport.addEventListener(\n    \"scroll\",\n    () => {<\/p>\n<p>      if (scrollRAF) {<\/p>\n<p>        cancelAnimationFrame(\n          scrollRAF\n        );<\/p>\n<p>      }<\/p>\n<p>      scrollRAF =\n        requestAnimationFrame(\n          updateFromScroll\n        );<\/p>\n<p>      clearTimeout(\n        scrollEndTimer\n      );<\/p>\n<p>      scrollEndTimer =\n        setTimeout(\n          () => {<\/p>\n<p>            scrollToIndex(\n              activeIndex,\n              \"smooth\"\n            );<\/p>\n<p>          },\n          110\n        );<\/p>\n<p>    },\n    {\n      passive: true\n    }\n  );<\/p>\n<p>  prev?.addEventListener(\n    \"click\",\n    () => {<\/p>\n<p>      const target =\n        activeIndex <= 0\n          ? maximumIndex()\n          : activeIndex - 1;\n\n\n      scrollToIndex(target);\n\n    }\n  );\n\n\n  next?.addEventListener(\n    \"click\",\n    () => {<\/p>\n<p>      const target =\n        activeIndex >= maximumIndex()\n          ? 0\n          : activeIndex + 1;<\/p>\n<p>      scrollToIndex(target);<\/p>\n<p>    }\n  );<\/p>\n<p>  viewport.addEventListener(\n    \"pointerdown\",\n    event => {<\/p>\n<p>      if (\n        event.pointerType === \"touch\"\n      ) return;<\/p>\n<p>      pointerDown = true;<\/p>\n<p>      pointerMoved = false;<\/p>\n<p>      pointerStartX =\n        event.clientX;<\/p>\n<p>      pointerStartScroll =\n        viewport.scrollLeft;<\/p>\n<p>      viewport.setPointerCapture?.(\n        event.pointerId\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  viewport.addEventListener(\n    \"pointermove\",\n    event => {<\/p>\n<p>      if (\n        !pointerDown ||\n        event.pointerType === \"touch\"\n      ) return;<\/p>\n<p>      const deltaX =\n        event.clientX -\n        pointerStartX;<\/p>\n<p>      if (\n        Math.abs(deltaX) > 3\n      ) {<\/p>\n<p>        pointerMoved = true;<\/p>\n<p>      }<\/p>\n<p>      viewport.scrollLeft =\n        pointerStartScroll -\n        deltaX;<\/p>\n<p>    }\n  );<\/p>\n<p>  function endPointer(event) {<\/p>\n<p>    if (!pointerDown) return;<\/p>\n<p>    pointerDown = false;<\/p>\n<p>    viewport.releasePointerCapture?.(\n      event.pointerId\n    );<\/p>\n<p>    updateFromScroll();<\/p>\n<p>    scrollToIndex(\n      activeIndex,\n      \"smooth\"\n    );<\/p>\n<p>  }<\/p>\n<p>  viewport.addEventListener(\n    \"pointerup\",\n    endPointer\n  );<\/p>\n<p>  viewport.addEventListener(\n    \"pointercancel\",\n    endPointer\n  );<\/p>\n<p>  items.forEach(\n    (item, index) => {<\/p>\n<p>      item.addEventListener(\n        \"click\",\n        () => {<\/p>\n<p>          if (pointerMoved) {<\/p>\n<p>            pointerMoved = false;<\/p>\n<p>            return;<\/p>\n<p>          }<\/p>\n<p>          scrollToIndex(index);<\/p>\n<p>        }\n      );<\/p>\n<p>    }\n  );<\/p>\n<p>  if (\n    \"ResizeObserver\" in window\n  ) {<\/p>\n<p>    const observer =\n      new ResizeObserver(\n        entries => {<\/p>\n<p>          const entry =\n            entries[0];<\/p>\n<p>          if (!entry) return;<\/p>\n<p>          const width =\n            Math.round(\n              entry.contentRect.width\n            );<\/p>\n<p>          if (\n            Math.abs(\n              width - lastWidth\n            ) < 2\n          ) return;\n\n\n          lastWidth = width;\n\n\n          visibleItems =\n            width <= 768\n              ? 1\n              : 3;\n\n\n          activeIndex =\n            clampIndex(\n              activeIndex\n            );\n\n\n          requestAnimationFrame(\n            () => {<\/p>\n<p>              scrollToIndex(\n                activeIndex,\n                \"auto\"\n              );<\/p>\n<p>            }\n          );<\/p>\n<p>        }\n      );<\/p>\n<p>    observer.observe(section);<\/p>\n<p>  }<\/p>\n<p>  forceActive(0);<\/p>\n<p>  viewport.scrollLeft = 0;<\/p>\n<p>})();\n<\/script><br \/>\n<!-- ========================================================\n     PERSONAGE \u2014 ALWAYS MOVING\n     ENGLISH\n     FULL HTML + CSS\n     ======================================================== --><\/p>\n<section\n  class=\"personage-moving\"\n  lang=\"en\"\n><\/p>\n<div class=\"personage-moving__grid\">\n<p>    <!-- ====================================================\n         EDITORIAL COLUMN\n         ==================================================== --><\/p>\n<div class=\"personage-moving__editorial\">\n<p>      <!-- TITLE --><\/p>\n<h2 class=\"personage-moving__title\">\n<p>        <span><br \/>\n          ALWAYS<br \/>\n        <\/span><\/p>\n<p>        <span><br \/>\n          MOVING<br \/>\n        <\/span><\/p>\n<\/h2>\n<p>      <!-- COPY --><\/p>\n<div class=\"personage-moving__intro\">\n<p class=\"personage-moving__copy\">\n          NOTHING HERE IS STATIC. PERSONAGE IS BUILT ON MOVEMENT<br \/>\n          THAT IS SUBTLE, INTENTIONAL, AND CONTINUOUS. EVERY IDEA<br \/>\n          EVOLVES, EVERY DIRECTION REFINES ITSELF, AND EVERY<br \/>\n          EXPRESSION GROWS INTO ANOTHER FORM. THE BRAND LIVES IN A<br \/>\n          STATE OF BECOMING, NEVER CHASING TRENDS OR SETTLING INTO<br \/>\n          COMFORT, ALWAYS SHAPING ITS IDENTITY WITH PURPOSE.\n        <\/p>\n<p class=\"personage-moving__copy\">\n          GROWTH FOR PERSONAGE IS A QUIET DISCIPLINE. IT EMERGES IN<br \/>\n          HOW MATERIALS ARE CHOSEN, IN THE RESTRAINT BEHIND EACH<br \/>\n          DECISION, AND IN THE PREFERENCE FOR CLARITY OVER NOISE.<br \/>\n          THESE SUBTLE SHIFTS SHAPE THE BRAND WITH INTENTION RATHER<br \/>\n          THAN SPECTACLE. AS PERSONAGE CONTINUES TO MOVE, IT DOES SO<br \/>\n          WITH CALM CONFIDENCE, REFINING WHAT MATTERS AND LETTING GO<br \/>\n          OF WHAT DOES NOT.\n        <\/p>\n<\/p><\/div>\n<p>      <!-- QUICK LINKS --><\/p>\n<nav\n        class=\"personage-moving__links\"\n        aria-label=\"Quick links\"\n      ><\/p>\n<p>        <a\n          class=\"personage-moving__link\"\n          href=\"https:\/\/share.google\/KWaWvzftLhpdDUKLy\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        ><br \/>\n          OUR RIYADH LOCATION<br \/>\n        <\/a><\/p>\n<p>        <a\n          class=\"personage-moving__link\"\n          href=\"\/designers\"\n        ><br \/>\n          OUR DESIGNERS<br \/>\n        <\/a><\/p>\n<p>        <a\n          class=\"personage-moving__link\"\n          href=\"\/about\"\n        ><br \/>\n          OUR AGENCY<br \/>\n        <\/a><\/p>\n<p>        <a\n          class=\"personage-moving__link\"\n          href=\"\/services\"\n        ><br \/>\n          OUR SERVICES<br \/>\n        <\/a><\/p>\n<\/nav><\/div>\n<p>    <!-- IMAGE 01 --><\/p>\n<figure class=\"personage-moving__image\">\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/10\/1Story.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<\/figure>\n<p>    <!-- IMAGE 02 --><\/p>\n<figure class=\"personage-moving__image\">\n<p>      <img decoding=\"async\"\n        src=\"https:\/\/personage.sa\/wp-content\/uploads\/2025\/10\/2Story.webp\"\n        alt=\"\"\n        loading=\"lazy\"\n      ><\/p>\n<\/figure><\/div>\n<\/section>\n<style>\n.personage-moving,\n.personage-moving * {\n  box-sizing: border-box;\n}<\/p>\n<p>\/* ==========================================================\n   SECTION\n   ========================================================== *\/<\/p>\n<p>.personage-moving {\n  position: relative;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 100vh;\n  height: 100svh;<\/p>\n<p>  min-height: 720px;<\/p>\n<p>  margin: 0;<\/p>\n<p>  padding:\n    33px\n    0\n    40px\n    37px;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  background: #fff;<\/p>\n<p>  color: #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n}<\/p>\n<p>\/* ==========================================================\n   GRID\n   ========================================================== *\/<\/p>\n<p>.personage-moving__grid {\n  display: grid;<\/p>\n<p>  grid-template-columns:\n    minmax(430px,.86fr)\n    minmax(300px,.58fr)\n    minmax(300px,.58fr);<\/p>\n<p>  gap: 9px;<\/p>\n<p>  width: 100%;\n  height: 100%;\n}<\/p>\n<p>\/* ==========================================================\n   EDITORIAL\n   ========================================================== *\/<\/p>\n<p>.personage-moving__editorial {\n  position: relative;<\/p>\n<p>  display: flex;<\/p>\n<p>  width: 100%;\n  height: 100%;<\/p>\n<p>  min-width: 0;<\/p>\n<p>  flex-direction: column;<\/p>\n<p>  padding-right:\n    clamp(\n      36px,\n      4vw,\n      68px\n    );\n}<\/p>\n<p>\/* ==========================================================\n   TITLE\n   ========================================================== *\/<\/p>\n<p>.personage-moving__title {\n  position: absolute;<\/p>\n<p>  left: -7px;<\/p>\n<p>  bottom: -2px;<\/p>\n<p>  margin: 0;<\/p>\n<p>  padding: 0;<\/p>\n<p>  color: #000;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size:\n    clamp(\n      92px,\n      8.15vw,\n      126px\n    );<\/p>\n<p>  font-weight: 900;<\/p>\n<p>  line-height: .79;<\/p>\n<p>  letter-spacing: -.065em;<\/p>\n<p>  text-transform: uppercase;\n}<\/p>\n<p>.personage-moving__title span {\n  display: block;\n}<\/p>\n<p>\/* ==========================================================\n   COPY\n   ========================================================== *\/<\/p>\n<p>.personage-moving__intro {\n  width:\n    min(\n      100%,\n      575px\n    );\n}<\/p>\n<p>.personage-moving__copy {\n  margin:\n    0\n    0\n    22px;<\/p>\n<p>  padding: 0;<\/p>\n<p>  color:\n    rgba(0,0,0,.42);<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;<\/p>\n<p>  font-size: 14px;<\/p>\n<p>  font-weight: 400;<\/p>\n<p>  line-height: 16px;<\/p>\n<p>  letter-spacing: -.012em;<\/p>\n<p>  text-transform: uppercase;\n}<\/p>\n<p>\/* ==========================================================\n   QUICK LINKS\n   ========================================================== *\/<\/p>\n<p>.personage-moving__links {\n  position: absolute;<\/p>\n<p>  left: 0;<\/p>\n<p>  top: 50%;<\/p>\n<p>  z-index: 2;<\/p>\n<p>  display: flex;<\/p>\n<p>  width: max-content;<\/p>\n<p>  margin: 0;<\/p>\n<p>  padding: 0;<\/p>\n<p>  flex-direction: column;<\/p>\n<p>  align-items: flex-start;<\/p>\n<p>  gap: 0;<\/p>\n<p>  transform:\n    translateY(-50%);\n}<\/p>\n<p>.personage-moving__link {\n  position: relative;<\/p>\n<p>  display: block;<\/p>\n<p>  margin: 0;<\/p>\n<p>  padding: 0;<\/p>\n<p>  color:\n    rgba(0,0,0,.42) !important;<\/p>\n<p>  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif !important;<\/p>\n<p>  font-size:\n    20px !important;<\/p>\n<p>  font-weight:\n    800 !important;<\/p>\n<p>  line-height:\n    21px !important;<\/p>\n<p>  letter-spacing:\n    -.025em;<\/p>\n<p>  text-decoration:\n    none !important;<\/p>\n<p>  text-transform:\n    uppercase;<\/p>\n<p>  transition:\n    color .25s ease;\n}<\/p>\n<p>.personage-moving__link::after {\n  content: \"\";<\/p>\n<p>  position: absolute;<\/p>\n<p>  left: 0;<\/p>\n<p>  bottom: 1px;<\/p>\n<p>  width: 100%;<\/p>\n<p>  height: 2px;<\/p>\n<p>  background: #000;<\/p>\n<p>  transform:\n    scaleX(0);<\/p>\n<p>  transform-origin:\n    left center;<\/p>\n<p>  transition:\n    transform .25s ease;\n}<\/p>\n<p>.personage-moving__link:hover,\n.personage-moving__link:focus-visible {\n  color:\n    #000 !important;\n}<\/p>\n<p>.personage-moving__link:hover::after,\n.personage-moving__link:focus-visible::after {\n  transform:\n    scaleX(1);\n}<\/p>\n<p>\/* ==========================================================\n   IMAGES\n   ========================================================== *\/<\/p>\n<p>.personage-moving__image {\n  position: relative;<\/p>\n<p>  width: 100%;\n  height: 100%;<\/p>\n<p>  min-width: 0;<\/p>\n<p>  margin: 0;<\/p>\n<p>  overflow: hidden;<\/p>\n<p>  background: #eee;\n}<\/p>\n<p>.personage-moving__image img {\n  display: block;<\/p>\n<p>  width: 100%;\n  height: 100%;<\/p>\n<p>  object-fit: cover;<\/p>\n<p>  object-position: center;<\/p>\n<p>  transition:\n    transform .8s\n    cubic-bezier(.16,1,.3,1);\n}<\/p>\n<p>.personage-moving__image:hover img {\n  transform:\n    scale(1.018);\n}<\/p>\n<p>\/* ==========================================================\n   TABLET\n   ========================================================== *\/<\/p>\n<p>@media\n(max-width:1100px)\nand\n(min-width:769px) {<\/p>\n<p>  .personage-moving {\n    padding-left:\n      30px;\n  }<\/p>\n<p>  .personage-moving__grid {\n    grid-template-columns:\n      minmax(360px,.9fr)\n      minmax(250px,.6fr)\n      minmax(250px,.6fr);\n  }<\/p>\n<p>  .personage-moving__copy {\n    font-size:\n      12px;<\/p>\n<p>    line-height:\n      14px;\n  }<\/p>\n<p>  .personage-moving__links {\n    top:\n      51%;\n  }<\/p>\n<p>  .personage-moving__link {\n    font-size:\n      17px !important;<\/p>\n<p>    line-height:\n      18px !important;\n  }<\/p>\n<p>  .personage-moving__title {\n    font-size:\n      clamp(\n        76px,\n        8vw,\n        100px\n      );\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   MOBILE\n   MORE VERTICAL BREATHING ROOM\n   ========================================================== *\/<\/p>\n<p>@media (max-width:768px) {<\/p>\n<p>  .personage-moving {\n    width: 100%;<\/p>\n<p>    height: auto;<\/p>\n<p>    min-height: 0;<\/p>\n<p>    padding:\n      32px\n      28px\n      52px;<\/p>\n<p>    overflow:\n      visible;\n  }<\/p>\n<p>  .personage-moving__grid {\n    display: block;<\/p>\n<p>    width: 100%;<\/p>\n<p>    height: auto;\n  }<\/p>\n<p>  .personage-moving__editorial {\n    display: flex;<\/p>\n<p>    width: 100%;<\/p>\n<p>    height: auto;<\/p>\n<p>    padding: 0;<\/p>\n<p>    flex-direction:\n      column;\n  }<\/p>\n<p>  \/* ========================================================\n     TITLE\n     ======================================================== *\/<\/p>\n<p>  .personage-moving__title {\n    position:\n      static;<\/p>\n<p>    order:\n      1;<\/p>\n<p>    margin:\n      0\n      0\n      40px;<\/p>\n<p>    padding: 0;<\/p>\n<p>    font-size:\n      clamp(\n        68px,\n        19vw,\n        78px\n      );<\/p>\n<p>    font-weight:\n      900;<\/p>\n<p>    line-height:\n      .82;<\/p>\n<p>    letter-spacing:\n      -.06em;<\/p>\n<p>    transform:\n      translateX(-3px);\n  }<\/p>\n<p>  \/* ========================================================\n     COPY\n     ======================================================== *\/<\/p>\n<p>  .personage-moving__intro {\n    order:\n      2;<\/p>\n<p>    width:\n      100%;<\/p>\n<p>    max-width:\n      none;\n  }<\/p>\n<p>  .personage-moving__copy {\n    width:\n      100%;<\/p>\n<p>    margin:\n      0\n      0\n      31px;<\/p>\n<p>    color:\n      rgba(0,0,0,.42);<\/p>\n<p>    font-size:\n      14px;<\/p>\n<p>    font-weight:\n      400;<\/p>\n<p>    line-height:\n      16px;<\/p>\n<p>    letter-spacing:\n      -.015em;\n  }<\/p>\n<p>  .personage-moving__copy:last-child {\n    margin-bottom:\n      0;\n  }<\/p>\n<p>  \/* ========================================================\n     LINKS\n     EXTRA GAP AFTER COPY\n     ======================================================== *\/<\/p>\n<p>  .personage-moving__links {\n    position:\n      static;<\/p>\n<p>    order:\n      3;<\/p>\n<p>    width:\n      max-content;<\/p>\n<p>    margin:\n      44px\n      0\n      0;<\/p>\n<p>    transform:\n      none;<\/p>\n<p>    align-items:\n      flex-start;\n  }<\/p>\n<p>  .personage-moving__link {\n    font-size:\n      20px !important;<\/p>\n<p>    line-height:\n      21px !important;\n  }<\/p>\n<p>  .personage-moving__image {\n    display:\n      none !important;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/<\/p>\n<p>@media (max-width:370px) {<\/p>\n<p>  .personage-moving {\n    padding:\n      30px\n      24px\n      46px;\n  }<\/p>\n<p>  .personage-moving__title {\n    margin-bottom:\n      36px;<\/p>\n<p>    font-size:\n      66px;\n  }<\/p>\n<p>  .personage-moving__copy {\n    margin-bottom:\n      28px;<\/p>\n<p>    font-size:\n      13px;<\/p>\n<p>    line-height:\n      15px;\n  }<\/p>\n<p>  .personage-moving__links {\n    margin-top:\n      40px;\n  }<\/p>\n<p>  .personage-moving__link {\n    font-size:\n      18px !important;<\/p>\n<p>    line-height:\n      19px !important;\n  }<\/p>\n<p>}<\/p>\n<p>\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/<\/p>\n<p>@media (prefers-reduced-motion:reduce) {<\/p>\n<p>  .personage-moving__image img,\n  .personage-moving__link,\n  .personage-moving__link::after {\n    transition:\n      none;\n  }<\/p>\n<p>}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>OUR STORY MISSION WE CREATE DIGITAL EXPERIENCES THAT MOVE WITH INTENTION, SHAPED BY RESEARCH, GUIDED BY CREATIVITY, AND BUILT TO WORK SEAMLESSLY IN THE REAL WORLD. VISION WE IMAGINE A FUTURE WHERE BRANDS COMMUNICATE WITH CLARITY, TECHNOLOGY FEELS HUMAN, AND EVERY INTERACTION CARRIES PURPOSE AND MEANING. CREATIVE DIRECTION WE SHAPE DISTINCT CREATIVE SYSTEMS THAT CONNECT [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4738","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/4738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/comments?post=4738"}],"version-history":[{"count":25,"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/4738\/revisions"}],"predecessor-version":[{"id":8548,"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/pages\/4738\/revisions\/8548"}],"wp:attachment":[{"href":"http:\/\/personage.sa\/ar\/wp-json\/wp\/v2\/media?parent=4738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}