/* =========================================================
   PHOENIX ABOUT PAGE — REFERENCE IMAGE IMPLEMENTATION
   Scoped only to .phx-about-reference / .phx-about-page
   Header and Footer intentionally untouched.
   ========================================================= */
.phx-about-reference{--teal:#13c7c8;--teal2:#63eceb;--dark:#032a32;--dark2:#062f38;--paper:#eef7f7;--ink:#17383e;width:100%;overflow:hidden;font-family:inherit;color:var(--ink)}
.phx-about-reference *{box-sizing:border-box}.phx-about-reference img{display:block;max-width:100%}.phx-about-reference h1,.phx-about-reference h2,.phx-about-reference h3,.phx-about-reference p{margin:0}.phx-about-reference a{text-decoration:none}
.pa-hero{min-height:430px;position:relative;overflow:hidden;background:#032a31;color:#fff;background-image:linear-gradient(90deg,rgba(2,34,42,.08),rgba(2,34,42,var(--pa-overlay)) 62%,rgba(2,34,42,.96)),var(--pa-hero-bg);background-size:cover;background-position:var(--pa-bg-pos);}
.pa-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 17% 68%,rgba(28,239,236,.2),transparent 23%),linear-gradient(180deg,rgba(0,0,0,.08),transparent 55%,rgba(0,0,0,.15));}
.pa-hero-inner{position:relative;z-index:2;min-height:430px;max-width:1200px;margin:auto;padding:48px 32px;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;direction:ltr}.pa-hero-art{height:100%;display:flex;align-items:center;justify-content:flex-start;overflow:visible}.pa-hero-art img{width:min(100%,650px);height:100%;max-height:330px;object-fit:cover;object-position:left center;filter:drop-shadow(0 0 20px rgba(18,228,225,.28));border-radius:0}.pa-hero-copy{direction:rtl;justify-self:end;max-width:var(--pa-cw);transform:translate(var(--pa-cx),var(--pa-cy))}.pa-kicker{color:#13d2d1;font-size:15px;font-weight:700;margin-bottom:16px;position:relative}.pa-kicker:after{content:"";display:inline-block;width:38px;height:1px;background:var(--teal);vertical-align:middle;margin-right:10px;box-shadow:0 0 8px rgba(19,199,200,.45)}.pa-hero-copy h1{font-size:var(--pa-title-size);line-height:1.6;font-weight:800;margin-bottom:16px}.pa-hero-copy p{font-size:var(--pa-body-size);line-height:2;color:#d9e8e9}
.pa-story{background:linear-gradient(90deg,#062a32,#052d36);color:#fff;padding:28px 0 20px}.pa-story-inner{width:min(1120px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center;direction:ltr}.pa-story-copy{direction:rtl;position:relative;padding:4px 0 6px}.pa-section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.pa-section-head i{width:36px;height:1px;background:var(--teal);display:block;flex:none}.pa-section-head h2{font-size:25px;font-weight:800;color:inherit}.pa-story-text{font-size:14px;line-height:2.05;color:#d8e8e9}.pa-story-text p{margin:0 0 8px}.pa-link{display:inline-flex;align-items:center;gap:12px;margin-top:14px;color:#13d9d8;font-size:12px;font-weight:700}.pa-link span{font-size:24px;line-height:1}.pa-story-media{position:relative;overflow:hidden;border-radius:9px;transform:translate(var(--pa-story-x),var(--pa-story-y));}.pa-story-media img{width:var(--pa-story-w);height:auto;min-height:178px;max-height:220px;object-fit:cover;object-position:var(--pa-story-img-pos,center);margin-left:auto;border-radius:var(--pa-story-r);filter:saturate(.98) contrast(1.02)}
.pa-story-media video.pa-story-video{width:100%;height:220px;display:block;object-fit:cover;object-position:center;border-radius:var(--pa-story-r);background:#021d24;}
@media(max-width:600px){.pa-story-media video.pa-story-video{height:220px;}}.pa-story-media .pa-story-play{z-index:5}.pa-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:2px solid #12d7d7;background:rgba(0,28,35,.55);color:#fff;display:grid;place-items:center;box-shadow:0 0 24px rgba(19,215,215,.25);cursor:pointer}.pa-play span{font-size:20px;margin-right:-3px}
.pa-why{background:linear-gradient(135deg,#f2f8f8,#eaf4f4);padding:26px 0 20px}.pa-why-inner{width:min(1120px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:1.04fr .96fr;gap:34px;align-items:center;direction:ltr}.pa-why-media{overflow:hidden;border-radius:var(--pa-why-r);transform:translate(var(--pa-why-x),var(--pa-why-y));box-shadow:0 12px 35px rgba(12,50,56,.12)}.pa-why-media img{width:var(--pa-why-w);margin-left:auto;aspect-ratio:460/292;object-fit:cover;object-position:var(--pa-why-img-pos,center);border-radius:var(--pa-why-r)}.pa-why-list{direction:rtl}.pa-why-list .pa-section-head h2{color:#153a40;font-size:var(--pa-title-size)}.pa-why-items{border-right:1px solid rgba(12,176,178,.38);margin-right:12px}.pa-why-item{display:grid;grid-template-columns:42px 1px 1fr 46px;align-items:center;min-height:58px;position:relative}.pa-why-item>b{font-size:18px;color:#0caab0;text-align:center;direction:ltr}.pa-why-line{height:1px;background:rgba(12,176,178,.38);display:block}.pa-why-copy{padding:6px 14px 6px 8px}.pa-why-copy h3{font-size:14px;color:#173d43;font-weight:800;margin-bottom:3px}.pa-why-copy p{font-size:10px;line-height:1.8;color:#597176}.pa-iconbox{width:42px;height:42px;border:1px solid #10aeb4;border-radius:8px;color:#e6a735;display:grid;place-items:center;background:rgba(255,255,255,.46);justify-self:end}.pa-iconbox svg{width:24px;height:24px}
.pa-values{position:relative;min-height:170px;overflow:hidden;background:#052c34;color:#fff}.pa-values:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(13,208,208,.08),transparent 35%),linear-gradient(90deg,rgba(0,0,0,.06),transparent 45%,rgba(0,0,0,.08))}.pa-values-inner{position:relative;z-index:2;width:min(1120px,calc(100% - 48px));min-height:170px;margin:auto;display:grid;grid-template-columns:1fr 1.05fr 1fr;align-items:center;gap:12px}.pa-values-col{padding:14px 24px}.pa-values-left{text-align:left;direction:rtl}.pa-values-right{text-align:right;direction:rtl}.pa-value-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}.pa-value-head span{font-size:29px;line-height:1;color:#15d7d5}.pa-values-left .pa-value-head{justify-content:flex-start}.pa-values-right .pa-value-head{justify-content:flex-end}.pa-value-head h2{font-size:22px;font-weight:800}.pa-values ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}.pa-values li{font-size:11px;line-height:1.7;color:#d7e7e8;display:flex;align-items:center;gap:7px}.pa-values li i{font-style:normal;color:#12d4d2;font-size:13px}.pa-values li .pa-value-text{display:inline-block;will-change:transform}.pa-values-art{height:165px;display:flex;align-items:center;justify-content:center;transform:translate(var(--pa-values-x),var(--pa-values-y))}.pa-values-art img{width:var(--pa-values-w);height:100%;object-fit:cover;object-position:center;mix-blend-mode:screen;opacity:var(--pa-values-opacity);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pa-journey{position:relative;min-height:245px;overflow:hidden;background:#e9f4f5 var(--pa-journey-bg) center/cover no-repeat;color:#164047;padding:18px 0 5px}.pa-journey:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,248,249,.22),rgba(238,248,249,.02));pointer-events:none}.pa-journey-head{position:relative;z-index:3;width:min(1120px,calc(100% - 48px));margin:0 auto 0}.pa-journey-head .pa-section-head{justify-content:flex-start}.pa-journey-head .pa-section-head h2{color:#147b82}.pa-journey-head p{font-size:13px;line-height:1.9;color:#537174;max-width:270px}.pa-journey-track{position:relative;z-index:2;height:142px;width:min(1120px,calc(100% - 48px));margin:-12px auto 0}.pa-wave{position:absolute;left:6%;right:7%;top:64px;height:48px;border-top:3px solid #18bfc0;border-radius:50%;transform:rotate(-1deg);filter:drop-shadow(0 0 8px rgba(17,201,201,.42));background:linear-gradient(180deg,transparent 55%,rgba(20,210,210,.08))}.pa-wave:before,.pa-wave:after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(18,207,208,.62);width:140px;height:38px;top:-18px}.pa-wave:before{left:10%}.pa-wave:after{right:11%}.pa-wave span{position:absolute;left:14%;right:18%;top:0;height:4px;background:linear-gradient(90deg,transparent,#16bdbd,#9ef1ee,#16bdbd,transparent);filter:blur(.2px)}.pa-j-item{position:absolute;top:18px;transform:translateX(50%);width:128px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}.pa-j-icon{width:var(--pa-icon-w,42px);height:var(--pa-icon-h,42px);color:#08aeb3;display:grid;place-items:center;transform:translate(var(--pa-icon-x,0),var(--pa-icon-y,0));overflow:hidden}.pa-j-icon img{width:100%;height:100%;display:block;object-fit:fill}.pa-j-icon svg{width:100%;height:100%;display:block}.pa-j-item b{font-size:var(--pa-year-size);color:#193f44;line-height:1.1}.pa-j-item span{font-size:var(--pa-item-title-size);color:#49696d;line-height:1.5}.pa-j-item:after{content:"";position:absolute;top:55px;width:8px;height:8px;border-radius:50%;background:#65e8e5;box-shadow:0 0 13px #32d5d3}.pa-j-item:nth-child(even){top:44px}.pa-j-item:nth-child(odd){top:10px}
.pa-cta{position:relative;min-height:220px;background:#062b34 var(--pa-cta-bg) left center/cover no-repeat;color:#fff;overflow:hidden}.pa-cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,29,37,.18),rgba(2,29,37,var(--pa-cta-overlay)) 53%,rgba(2,29,37,.96) 100%)}.pa-cta-inner{position:relative;z-index:2;width:min(1120px,calc(100% - 48px));min-height:220px;margin:auto;padding:42px 40px 35px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}.pa-cta-inner .pa-kicker{margin-bottom:2px}.pa-cta-inner h2{color:#13d3d2;line-height:1.25;font-weight:800;margin:2px 0 8px}.pa-cta-inner p{font-size:13px;color:#d6e6e7;line-height:1.8;margin-bottom:14px}.pa-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-width:205px;border:1px solid #10d2d2;border-radius:28px;padding:10px 20px;color:#fff;font-size:13px;font-weight:700;background:rgba(1,32,40,.28);box-shadow:0 0 18px rgba(11,206,207,.12)}.pa-cta-button span{font-size:20px;color:#19dada}
/* ============================================================
   PHX ABOUT — JOURNEY LAYOUT ONLY
   Keep the existing journey design/content intact.
   Desktop: text stays on the right, journey artwork/timeline moves
   into the left column so the composition uses the full section.
   Mobile: restore the existing single-column flow.
   ============================================================ */
@media(min-width:901px){
  .phx-about-reference .pa-journey{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    column-gap:46px;
    align-items:center;
    min-height:245px;
    padding:18px 0 5px;
  }
  .phx-about-reference .pa-journey-head{
    grid-column:2;
    grid-row:1;
    width:auto;
    margin:0;
    align-self:center;
    justify-self:stretch;
  }
  .phx-about-reference .pa-journey-track{
    grid-column:1;
    grid-row:1;
    width:100%;
    height:142px;
    margin:0;
    min-width:0;
    align-self:center;
  }
  .phx-about-reference .pa-journey-head .pa-section-head{
    justify-content:flex-start;
  }
}
@media(max-width:900px){
  .phx-about-reference .pa-journey{
    display:block;
  }
  .phx-about-reference .pa-journey-head{
    width:calc(100% - 48px);
    margin:0 auto;
  }
  .phx-about-reference .pa-journey-track{
    width:calc(100% - 48px);
    margin:-12px auto 0;
  }
}

@media(max-width:900px){.pa-hero-inner{grid-template-columns:1fr;min-height:560px;padding:100px 24px 35px}.pa-hero-copy{order:1;justify-self:center;text-align:center!important;max-width:650px}.pa-hero-art{order:2;justify-content:center}.pa-hero-art img{max-height:220px}.pa-story-inner,.pa-why-inner{grid-template-columns:1fr;gap:25px}.pa-story-copy{order:2}.pa-story-media{order:1}.pa-why-media{order:1}.pa-why-list{order:2}.pa-values-inner{grid-template-columns:1fr 1fr}.pa-values-art{display:none}.pa-values-col{padding:16px}.pa-journey{min-height:300px}.pa-journey-track{height:180px}.pa-j-item{width:100px}.pa-cta-inner{padding:38px 24px}.pa-cta-inner{align-items:center;text-align:center!important}}
@media(max-width:600px){.pa-hero-inner{min-height:560px;padding:88px 18px 26px}.pa-hero-copy h1{font-size:28px!important}.pa-hero-copy p{font-size:13px!important}.pa-story,.pa-why{padding:28px 0}.pa-story-inner,.pa-why-inner{width:calc(100% - 28px)}.pa-story-text{font-size:12px}.pa-story-media img{min-height:175px}.pa-section-head h2{font-size:21px}.pa-why-item{grid-template-columns:34px 1px 1fr 40px;min-height:66px}.pa-why-copy h3{font-size:12px}.pa-why-copy p{font-size:9px}.pa-iconbox{width:38px;height:38px}.pa-values-inner{width:calc(100% - 20px);gap:0}.pa-values-col{padding:16px 8px}.pa-value-head h2{font-size:17px}.pa-value-head span{font-size:23px}.pa-values li{font-size:9px}.pa-journey-head{width:calc(100% - 28px)}.pa-journey-track{width:calc(100% - 10px);overflow:hidden}.pa-wave{left:3%;right:3%}.pa-j-item{width:70px}.pa-j-item b{font-size:11px!important}.pa-j-item span{font-size:8px!important}.pa-j-icon{width:var(--pa-icon-w,26px);height:var(--pa-icon-h,26px);min-width:var(--pa-icon-w,26px);min-height:var(--pa-icon-h,26px)}.pa-j-icon svg{width:70%;height:70%}.pa-cta{min-height:245px}.pa-cta-inner{min-height:245px;padding:32px 18px}.pa-cta-inner h2{font-size:28px!important}.pa-cta-inner p{font-size:11px!important}.pa-cta-button{width:100%;max-width:220px;font-size:11px}}
/* Header uses the same full-width overlay geometry as the Contact page. */
@media(min-width:901px){.phx-about-reference .pa-hero{padding-top:0}.phx-about-reference .pa-hero-inner{padding-top:120px}}
@media(max-width:900px){.phx-about-reference .pa-hero-inner{padding-top:110px}}
@media(max-width:600px){.phx-about-reference .pa-hero-inner{padding-top:92px}}

/* ============================================================
   PHOENIX ABOUT — HEADER LOCK
   Exact geometry/appearance of the existing Contact-page header.
   Header markup itself is NOT modified.
   ============================================================ */
body.phx-about-page header.navbar{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0 40px!important;
  padding:0!important;
  z-index:10000!important;
}
body.phx-about-page header.navbar .navbar-glass{
  /* Align only the About-page menu box with the homepage menu position. */
  transform:translateX(20px)!important;
  background:rgba(3,25,34,.52)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  border-color:rgba(86,224,226,.18)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.06)!important;
}
body.phx-about-page .phx-header-logo-image{
  height:44px!important;
  max-width:145px!important;
}
body.phx-about-page .nav-links > li > a{
  font-size:15px!important;
}

@media(max-width:900px){
  body.phx-about-page header.navbar .navbar-glass{transform:none!important;}
  body.phx-about-page header.navbar{
    margin:0!important;
    padding:10px 14px!important;
    width:100%!important;
  }
  body.phx-about-page .phx-header-logo-image{
    max-width:120px!important;
    max-height:36px!important;
    height:auto!important;
  }
}
@media(max-width:600px){
  body.phx-about-page header.navbar{
    padding:8px 10px!important;
  }
  body.phx-about-page .phx-header-logo-image{
    max-width:104px!important;
    max-height:32px!important;
  }
}
@media(max-width:390px){
  body.phx-about-page header.navbar{
    padding:8px!important;
  }
  body.phx-about-page .phx-header-logo-image{
    max-width:92px!important;
    max-height:30px!important;
  }
}


/* =========================================================
   ABOUT PAGE — REQUESTED FINAL ADJUSTMENTS
   ========================================================= */

/* رنگ‌های کلی قابل مدیریت از پنل */
.phx-about-reference{
  --teal:var(--about-accent,#13c7c8);
  --teal2:var(--about-accent,#63eceb);
  --ink:var(--about-text-color,#17383e);
  background:var(--about-page-bg,#eef7f7);
}

/* درباره ققنوس: تصویر به‌صورت Full-Bleed کل سکشن را پوشش می‌دهد */
.pa-story{
  position:relative;
  min-height:320px;
  padding:0;
  background:var(--about-dark-bg,#052c34);
  isolation:isolate;
}
.pa-story:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--pa-story-bg);
  background-size:cover;
  background-position:var(--pa-story-img-pos,center);
}
.pa-story:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,29,36,.93),rgba(3,35,43,.72) 55%,rgba(3,35,43,.38));
  pointer-events:none;
}
.pa-story-inner{
  position:relative;
  z-index:2;
  width:min(1120px,calc(100% - 48px));
  min-height:320px;
  display:block;
  padding:46px 0;
}
.pa-story-copy{
  width:min(58%,650px);
  padding:0 0 0 8px;
}
.pa-story-media{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  border-radius:0;
}
.pa-story-media img{width:100%;height:100%;max-height:none;min-height:0;object-fit:cover;border-radius:0}

/* چرا ققنوس: تصویر نیز کل سکشن را پوشش می‌دهد */
.pa-why{
  position:relative;
  min-height:360px;
  padding:0;
  isolation:isolate;
  background:var(--about-light-bg,#eef7f7);
}
.pa-why:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--pa-why-bg);
  background-size:cover;
  background-position:var(--pa-why-img-pos,center);
}
.pa-why:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(270deg,rgba(242,248,248,.97),rgba(238,247,247,.82) 47%,rgba(238,247,247,.28));
  pointer-events:none;
}
.pa-why-inner{
  position:relative;
  z-index:2;
  width:min(1120px,calc(100% - 48px));
  min-height:360px;
  display:block;
  padding:44px 0;
}
.pa-why-media{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  border-radius:0;
  box-shadow:none;
}
.pa-why-media img{width:100%;height:100%;aspect-ratio:auto;max-width:none;object-fit:cover;border-radius:0}
.pa-why-list{
  width:min(60%,670px);
  margin-right:0;
}

/* اهداف و ارزش‌ها کمی بزرگ‌تر */
.pa-values{
  min-height:225px;
}
.pa-values-inner{
  min-height:225px;
  gap:20px;
}
.pa-values-col{
  padding:24px 28px;
}
.pa-values-art{
  height:210px;
}
.pa-values li{
  font-size:12px;
  line-height:1.9;
  min-height:24px;
}
.pa-value-head{
  margin-bottom:14px;
}
.pa-value-head h2{
  font-size:24px;
}

/* مدیریت مستقل تیک و متن */
.pa-values li span{display:inline-block}
.pa-values li i{
  flex:none;
  min-width:16px;
}

/* حذف دایره نورانی زیر سال‌ها */
.pa-j-item:after{display:none!important}

/* آیکن‌های قابل آپلود برای مسیر ما */
.pa-j-icon img{
  width:100%;
  height:100%;
  max-width:34px;
  max-height:34px;
  object-fit:contain;
  display:block;
}

/* رنگ متن و بک‌گراند عمومی */
.phx-about-reference .pa-values{
  background:var(--about-dark-bg,#052c34);
}
.phx-about-reference .pa-kicker,
.phx-about-reference .pa-link,
.phx-about-reference .pa-value-head span,
.phx-about-reference .pa-cta-inner h2{
  color:var(--about-accent,#13c7c8);
}

/* موبایل: هر دو سکشن همچنان Full-Bleed بمانند */
@media(max-width:900px){
  .pa-story,.pa-story-inner{min-height:360px}
  .pa-story-inner{padding:40px 0}
  .pa-story-copy{width:100%;max-width:none;padding:0 8px}
  .pa-why,.pa-why-inner{min-height:430px}
  .pa-why-inner{padding:38px 0}
  .pa-why-list{width:100%;max-width:none}
  .pa-values{min-height:250px}
  .pa-values-inner{min-height:250px}
  .pa-values-col{padding:22px 16px}
  .pa-values-art{height:230px}
}
@media(max-width:600px){
  .pa-story,.pa-story-inner{min-height:390px}
  .pa-story-inner{width:calc(100% - 28px);padding:34px 0}
  .pa-story-copy{width:100%}
  .pa-why,.pa-why-inner{min-height:480px}
  .pa-why-inner{width:calc(100% - 28px);padding:34px 0}
  .pa-values{min-height:290px}
  .pa-values-inner{min-height:290px}
  .pa-values-col{padding:20px 8px}
  .pa-values li{font-size:10px}
  .pa-value-head h2{font-size:18px}
}


/* ============================================================
   ABOUT PAGE — FINAL SPLIT LAYOUT FIX
   درباره ققنوس: متن چپ + تصویر/ویدئو راست، هر دو در کل عرض بخش.
   چرا ققنوس: تصویر چپ + محتوا راست، هر دو در کل عرض بخش.
   ============================================================ */
@media(min-width:901px){
  .phx-about-reference .pa-story{
    min-height:320px;
    padding:0;
    background:var(--about-dark-bg,#052c34);
  }
  .phx-about-reference .pa-story-inner{
    width:100%;
    max-width:none;
    min-height:320px;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
    direction:ltr;
  }
  .phx-about-reference .pa-story-copy{
    grid-column:1;
    grid-row:1;
    width:auto;
    max-width:none;
    min-height:320px;
    padding:48px clamp(42px,6vw,110px) 42px clamp(42px,6vw,110px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    direction:rtl;
    position:relative;
    z-index:3;
    background:linear-gradient(90deg,rgba(3,29,36,.98),rgba(3,35,43,.90));
  }
  .phx-about-reference .pa-story-media{
    grid-column:2;
    grid-row:1;
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:320px;
    opacity:1;
    z-index:2;
    pointer-events:auto;
    border-radius:0;
    transform:none;
    overflow:hidden;
  }
  .phx-about-reference .pa-story-media img{
    width:100%;
    height:100%;
    min-height:320px;
    max-height:none;
    margin:0;
    object-fit:cover;
    object-position:var(--pa-story-img-pos,center);
    border-radius:0;
  }
  .phx-about-reference .pa-story-media:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(3,29,36,.05),rgba(3,29,36,.10));
    pointer-events:none;
  }

  .phx-about-reference .pa-why{
    min-height:360px;
    padding:0;
  }
  .phx-about-reference .pa-why-inner{
    width:100%;
    max-width:none;
    min-height:360px;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:stretch;
    direction:ltr;
  }
  .phx-about-reference .pa-why-media{
    grid-column:1;
    grid-row:1;
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:360px;
    opacity:1;
    z-index:2;
    pointer-events:auto;
    transform:none;
    border-radius:0;
    box-shadow:none;
    overflow:hidden;
  }
  .phx-about-reference .pa-why-media img{
    width:100%;
    height:100%;
    min-height:360px;
    max-width:none;
    margin:0;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:var(--pa-why-img-pos,center);
    border-radius:0;
  }
  .phx-about-reference .pa-why-list{
    grid-column:2;
    grid-row:1;
    width:auto;
    max-width:none;
    min-height:360px;
    margin:0;
    padding:42px clamp(42px,6vw,110px) 38px clamp(42px,6vw,110px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    direction:rtl;
    position:relative;
    z-index:3;
    background:linear-gradient(270deg,rgba(242,248,248,.99),rgba(238,247,247,.93));
  }
}

/* هیچ دایره نورانی اضافه‌ای زیر سال‌های مسیر ما نمایش داده نشود. */
.phx-about-reference .pa-j-item:after,
.phx-about-reference .pa-wave:before,
.phx-about-reference .pa-wave:after{
  content:none!important;
  display:none!important;
  box-shadow:none!important;
}

/* کنترل واضح تیک‌ها و متن اهداف/ارزش‌ها در پنل و نمایش مستقل هر ردیف */
.phx-about-reference .pa-values li{
  width:100%;
}
.phx-about-reference .pa-values li > span,
.phx-about-reference .pa-values li > i{
  position:relative;
}

@media(max-width:900px){
  .phx-about-reference .pa-story-inner,
  .phx-about-reference .pa-why-inner{
    width:100%;
    max-width:none;
    margin:0;
  }
  .phx-about-reference .pa-story-media,
  .phx-about-reference .pa-why-media{
    position:relative;
    inset:auto;
    opacity:1;
    transform:none;
    border-radius:0;
    box-shadow:none;
  }
  .phx-about-reference .pa-story-media img,
  .phx-about-reference .pa-why-media img{
    border-radius:0;
  }
}


/* ============================================================
   ABOUT PAGE — FINAL REQUESTED CONTROLS
   ============================================================ */
.phx-about-reference{
  --about-heading-color:#17383e;
  --about-muted-color:#597176;
  --about-border-color:#d5e1e1;
  --about-card-color:#ffffff;
  --about-icon-color:#13c7c8;
}
.phx-about-reference .pa-section-head h2,
.phx-about-reference .pa-why-list .pa-section-head h2,
.phx-about-reference .pa-value-head h2{color:var(--about-heading-color)!important}
.phx-about-reference .pa-story-text,
.phx-about-reference .pa-why-copy p,
.phx-about-reference .pa-values li{color:var(--about-muted-color)!important}
.phx-about-reference .pa-why-items{border-color:var(--about-border-color)!important}
.phx-about-reference .pa-why-line{background:var(--about-border-color)!important}
.phx-about-reference .pa-iconbox{border-color:var(--about-border-color)!important;color:var(--about-icon-color)!important;background:var(--about-card-color)!important}
.phx-about-reference .pa-values li i,
.phx-about-reference .pa-value-head span{color:var(--about-icon-color)!important}

/* تیک هر ردیف کاملاً مستقل است */
.phx-about-reference .pa-values li{gap:9px}
.phx-about-reference .pa-values li i{display:inline-block;position:relative;flex:none}
.phx-about-reference .pa-values li.pa-tick-before{flex-direction:row}
.phx-about-reference .pa-values li.pa-tick-after{flex-direction:row}

/* چرا ققنوس: تصویر سمت چپ بدون فضای خالی، کاملاً فیت */
@media(min-width:901px){
  .phx-about-reference .pa-why-media,
  .phx-about-reference .pa-why-media img{
    width:100%!important;
    height:100%!important;
    min-height:360px!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    object-fit:cover!important;
    object-position:center center!important;
    display:block!important;
  }
}
@media(max-width:900px){
  .phx-about-reference .pa-why-media,
  .phx-about-reference .pa-why-media img{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    object-fit:cover!important;
  }
}

/* ============================================================
   ABOUT PAGE — FINAL WHY IMAGE + RESPONSIVE FIX
   تصویر چرا ققنوس: نیمه چپ کامل، بدون گوشه گرد و بدون فضای خالی.
   ============================================================ */
@media (min-width:901px){
  .phx-about-reference .pa-why{
    width:100%;
    min-height:420px!important;
    padding:0!important;
    background:var(--about-light-bg,#eef7f7)!important;
    overflow:hidden!important;
  }
  .phx-about-reference .pa-why:before,
  .phx-about-reference .pa-why:after{
    display:none!important;
    content:none!important;
  }
  .phx-about-reference .pa-why-inner{
    width:100%!important;
    max-width:none!important;
    min-height:420px!important;
    height:420px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:50% 50%!important;
    gap:0!important;
    align-items:stretch!important;
    direction:ltr!important;
  }
  .phx-about-reference .pa-why-media{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:420px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    z-index:2!important;
  }
  .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:var(--pa-why-img-pos,center center)!important;
  }
  .phx-about-reference .pa-why-list{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-height:420px!important;
    height:420px!important;
    margin:0!important;
    padding:48px clamp(34px,5vw,90px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    direction:rtl!important;
    background:var(--about-light-bg,#eef7f7)!important;
    z-index:3!important;
  }
}

/* تبلت: تصویر و متن بدون فضای خالی و با ارتفاع متناسب */
@media (min-width:601px) and (max-width:900px){
  .phx-about-reference .pa-why,
  .phx-about-reference .pa-why-inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  .phx-about-reference .pa-why-inner{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .phx-about-reference .pa-why-media{
    position:relative!important;
    width:100%!important;
    height:clamp(280px,42vw,390px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    opacity:1!important;
    transform:none!important;
  }
  .phx-about-reference .pa-why-media img{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    object-fit:cover!important;
  }
  .phx-about-reference .pa-why-list{
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:36px clamp(28px,6vw,70px)!important;
    background:var(--about-light-bg,#eef7f7)!important;
  }
}

/* موبایل: تصویر تمام عرض، بدون گوشه گرد و بدون حاشیه */
@media (max-width:600px){
  .phx-about-reference,
  .phx-about-reference .pa-why,
  .phx-about-reference .pa-why-inner{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .phx-about-reference .pa-why{
    padding:0!important;
    overflow:hidden!important;
  }
  .phx-about-reference .pa-why:before,
  .phx-about-reference .pa-why:after{
    display:none!important;
    content:none!important;
  }
  .phx-about-reference .pa-why-inner{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:0!important;
  }
  .phx-about-reference .pa-why-media{
    order:1!important;
    position:relative!important;
    width:100%!important;
    height:clamp(230px,62vw,330px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    opacity:1!important;
    transform:none!important;
    box-shadow:none!important;
  }
  .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:var(--pa-why-img-pos,center center)!important;
  }
  .phx-about-reference .pa-why-list{
    order:2!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:30px 20px 34px!important;
    background:var(--about-light-bg,#eef7f7)!important;
  }
}

/* جلوگیری از بیرون‌زدگی افقی در تمام اندازه‌ها */
html,body{
  max-width:100%;
  overflow-x:hidden;
}
.phx-about-reference,
.phx-about-reference *{
  max-width:100%;
}
.phx-about-reference img,
.phx-about-reference video{
  max-width:100%;
}


/* Per-section colors from About page manager */
.phx-about-reference .pa-hero{background-color:var(--about-hero-bg)!important;color:var(--about-hero-title)!important}.phx-about-reference .pa-hero h1{color:var(--about-hero-title)!important}.phx-about-reference .pa-hero p{color:var(--about-hero-text)!important}.phx-about-reference .pa-kicker{color:var(--about-hero-accent)!important}
.phx-about-reference .pa-story{background-color:var(--about-story-bg)!important}.phx-about-reference .pa-story h2{color:var(--about-story-title)!important}.phx-about-reference .pa-story p{color:var(--about-story-text)!important}.phx-about-reference .pa-story .pa-play{border-color:var(--about-story-accent)!important;color:var(--about-story-accent)!important}
.phx-about-reference .pa-why{background-color:var(--about-why-bg)!important}.phx-about-reference .pa-why h2,.phx-about-reference .pa-why h3{color:var(--about-why-title)!important}.phx-about-reference .pa-why p{color:var(--about-why-text)!important}
.phx-about-reference .pa-values{background-color:var(--about-values-bg)!important}.phx-about-reference .pa-values h2,.phx-about-reference .pa-values h3{color:var(--about-values-title)!important}.phx-about-reference .pa-values li,.phx-about-reference .pa-values p{color:var(--about-values-text)!important}.phx-about-reference .pa-values i{color:var(--about-values-accent)!important}
.phx-about-reference .pa-journey{background-color:var(--about-journey-bg)!important;color:var(--about-journey-title)!important}.phx-about-reference .pa-journey h2,.phx-about-reference .pa-journey b{color:var(--about-journey-title)!important}.phx-about-reference .pa-journey p,.phx-about-reference .pa-journey span{color:var(--about-journey-text)!important}.phx-about-reference .pa-journey .pa-section-head i{background:var(--about-journey-accent)!important}
.phx-about-reference .pa-cta{background-color:var(--about-cta-bg)!important;color:var(--about-cta-title)!important}.phx-about-reference .pa-cta h2{color:var(--about-cta-title)!important}.phx-about-reference .pa-cta p{color:var(--about-cta-text)!important}.phx-about-reference .pa-cta-button{background:var(--about-cta-accent)!important}

/* V14 — desktop Hero standard: 1905×600 reference size. */
@media (min-width:901px){
  .phx-about-reference .pa-hero{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    height:600px !important;
    min-height:600px !important;
    max-height:600px !important;
  }
  .phx-about-reference .pa-hero-inner{height:600px !important;min-height:600px !important;}
}

/* V15 — requested visual corrections only: clean images, larger typography, values/why/journey fixes. */
@media (min-width:901px){
  /* No dark/black image halo or color filter over uploaded images. */
  .phx-about-reference .pa-hero{background-image:var(--pa-hero-bg)!important;}
  .phx-about-reference .pa-hero:after,
  .phx-about-reference .pa-journey:after,
  .phx-about-reference .pa-cta:after{display:none!important;}
  .phx-about-reference .pa-hero-art img,
  .phx-about-reference .pa-story-media img,
  .phx-about-reference .pa-why-media img,
  .phx-about-reference .pa-values-art img{filter:none!important;mix-blend-mode:normal!important;}

  /* اهداف و ارزش‌های ققنوس — larger section and the selected image fills it. */
  .phx-about-reference .pa-values{min-height:390px!important;background:var(--about-values-bg,#eef7f7)!important;}
  .phx-about-reference .pa-values:before{display:none!important;}
  .phx-about-reference .pa-values-inner{width:100%!important;max-width:none!important;min-height:390px!important;height:390px!important;grid-template-columns:1fr 1.1fr 1fr!important;gap:0!important;position:relative!important;}
  .phx-about-reference .pa-values-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;z-index:0!important;overflow:hidden!important;}
  .phx-about-reference .pa-values-art img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;opacity:1!important;mask-image:none!important;}
  .phx-about-reference .pa-values-col{position:relative!important;z-index:2!important;padding:46px clamp(30px,4.5vw,80px)!important;background:transparent!important;}
  .phx-about-reference .pa-values-left{grid-column:1!important;grid-row:1!important;}
  .phx-about-reference .pa-values-right{grid-column:3!important;grid-row:1!important;}
  .phx-about-reference .pa-value-head h2{font-size:27px!important;}
  .phx-about-reference .pa-values li{font-size:14px!important;line-height:2!important;}

  /* چرا ققنوس — denser, reference-like numbered rows with user-selectable icons. */
  .phx-about-reference .pa-why-list{padding:42px clamp(30px,4.5vw,78px)!important;}
  .phx-about-reference .pa-why-item{grid-template-columns:50px 1px minmax(0,1fr) 58px!important;min-height:68px!important;}
  .phx-about-reference .pa-why-item>b{font-size:21px!important;}
  .phx-about-reference .pa-why-copy{padding:7px 16px 7px 10px!important;}
  .phx-about-reference .pa-why-copy h3{font-size:16px!important;line-height:1.55!important;}
  .phx-about-reference .pa-why-copy p{font-size:11.5px!important;line-height:1.85!important;}
  .phx-about-reference .pa-iconbox{width:48px!important;height:48px!important;background:rgba(255,255,255,.55)!important;}
  .phx-about-reference .pa-iconbox img{width:100%!important;height:100%!important;object-fit:contain!important;padding:6px!important;}
  .phx-about-reference .pa-iconbox svg{width:28px!important;height:28px!important;}

  /* مسیر ما — one luminous path exactly through the icon centers, no decorative dots. */
  .phx-about-reference .pa-journey{min-height:285px!important;padding:20px 0 8px!important;}
  .phx-about-reference .pa-journey-track{height:160px!important;margin:0 auto!important;}
  .phx-about-reference .pa-wave{left:6%!important;right:6%!important;top:50px!important;height:2px!important;border:0!important;border-radius:0!important;transform:none!important;background:linear-gradient(90deg,transparent,#18d0cf 7%,#9cf7f2 50%,#18d0cf 93%,transparent)!important;box-shadow:0 0 13px rgba(24,208,207,.72)!important;}
  .phx-about-reference .pa-wave:before,.phx-about-reference .pa-wave:after,.phx-about-reference .pa-wave span{display:none!important;}
  .phx-about-reference .pa-j-item{top:0!important;height:120px!important;transform:translateX(50%)!important;gap:5px!important;}
  .phx-about-reference .pa-j-item:nth-child(even),.phx-about-reference .pa-j-item:nth-child(odd){top:0!important;}
  .phx-about-reference .pa-j-icon{width:var(--pa-icon-w,42px)!important;height:var(--pa-icon-h,42px)!important;min-width:var(--pa-icon-w,42px)!important;min-height:var(--pa-icon-h,42px)!important;max-width:var(--pa-icon-w,42px)!important;max-height:var(--pa-icon-h,42px)!important;aspect-ratio:auto!important;flex:none!important;transform:translate(var(--pa-icon-x,0px),calc(50px - (var(--pa-icon-h,42px) / 2) + var(--pa-icon-y,0px)))!important;position:relative!important;z-index:2!important;background:rgba(4,44,52,.72)!important;border:1px solid rgba(19,199,200,.7)!important;border-radius:9px!important;box-shadow:0 0 16px rgba(19,211,210,.35)!important;overflow:hidden!important;}
  .phx-about-reference .pa-j-icon img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;padding:6px!important;box-sizing:border-box!important;filter:none!important;mix-blend-mode:normal!important;}
  .phx-about-reference .pa-j-icon svg{width:70%!important;height:70%!important;}
  .phx-about-reference .pa-j-item:after{display:none!important;}
  .phx-about-reference .pa-j-item b{font-size:15px!important;}
  .phx-about-reference .pa-j-item span{font-size:12px!important;}

  /* Readable desktop type scale without changing section order/layout. */
  .phx-about-reference .pa-hero-copy h1{font-size:48px!important;}
  .phx-about-reference .pa-hero-copy p{font-size:17px!important;}
  .phx-about-reference .pa-section-head h2{font-size:28px!important;}
  .phx-about-reference .pa-story-text{font-size:15px!important;}
  .phx-about-reference .pa-cta-inner h2{font-size:40px!important;}
  .phx-about-reference .pa-cta-inner p{font-size:15px!important;}
}

@media(max-width:900px){
  /* Keep the selected values image visible and filling the whole section on smaller screens too. */
  .phx-about-reference .pa-values{min-height:360px!important;}
  .phx-about-reference .pa-values:before{display:none!important;}
  .phx-about-reference .pa-values-inner{width:100%!important;min-height:360px!important;display:grid!important;grid-template-columns:1fr 1fr!important;position:relative!important;gap:0!important;}
  .phx-about-reference .pa-values-art{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:0!important;transform:none!important;}
  .phx-about-reference .pa-values-art img{width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;mask-image:none!important;mix-blend-mode:normal!important;}
  .phx-about-reference .pa-values-col{position:relative!important;z-index:2!important;padding:28px 16px!important;background:transparent!important;}
  .phx-about-reference .pa-value-head h2{font-size:20px!important;}
  .phx-about-reference .pa-values li{font-size:11px!important;}
}

/* V16 — چرا ققنوس: prevent the fixed 420px desktop box from clipping the six rows. */
@media (min-width:901px){
  .phx-about-reference .pa-why,
  .phx-about-reference .pa-why-inner,
  .phx-about-reference .pa-why-list{min-height:560px!important;height:auto!important;}
  .phx-about-reference .pa-why-list{padding-top:48px!important;padding-bottom:48px!important;overflow:visible!important;}
  .phx-about-reference .pa-why-items{overflow:visible!important;}
  .phx-about-reference .pa-why-item{min-height:74px!important;}
  .phx-about-reference .pa-why-copy p{font-size:12.5px!important;line-height:1.85!important;}
}

/* V19 — ویدئوی قابل مدیریت و آیکن‌های مسیر ما */
.phx-about-reference .pa-story-media video.pa-story-video{
  display:block!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  background:#021d24!important;
}
.phx-about-reference .pa-story-media:has(video.pa-story-video):after{display:none!important;}
.phx-about-reference .pa-j-icon{
  overflow:hidden!important;
}
.phx-about-reference .pa-j-icon img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:100%!important;
  min-height:100%!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}
.phx-about-reference .pa-j-icon svg{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}

/* =========================================================
   V20 — Integrated media composition (approved pattern)
   Scope: ONLY About page > «درباره ققنوس» + «چرا ققنوس؟»
   No admin/data/markup changes.
   ========================================================= */
.phx-about-reference .pa-story,
.phx-about-reference .pa-why{
  overflow:hidden;
  isolation:isolate;
}

/* درباره ققنوس: keep the managed image/video, but remove the perceptual media boundary. */
.phx-about-reference .pa-story:after{
  background:linear-gradient(90deg,
    rgba(3,29,36,.96) 0%,
    rgba(3,35,43,.90) 34%,
    rgba(3,35,43,.66) 58%,
    rgba(3,35,43,.22) 82%,
    rgba(3,35,43,.06) 100%)!important;
}
.phx-about-reference .pa-story-media{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
}
.phx-about-reference .pa-story-media img,
.phx-about-reference .pa-story-media video.pa-story-video{
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* چرا ققنوس: image remains fitted in its allocated side while its inner edge fades into content. */
.phx-about-reference .pa-why:before{display:none!important;}
.phx-about-reference .pa-why:after{display:none!important;}
.phx-about-reference .pa-why-inner{background:transparent!important;}
.phx-about-reference .pa-why-media{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:hidden!important;
}
.phx-about-reference .pa-why-media:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 52%,
    color-mix(in srgb,var(--about-why-bg,#fff) 18%,transparent) 68%,
    color-mix(in srgb,var(--about-why-bg,#fff) 72%,transparent) 88%,
    var(--about-why-bg,#fff) 100%);
}
.phx-about-reference .pa-why-media img{
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  object-fit:cover!important;
}
.phx-about-reference .pa-why-list{
  position:relative!important;
  z-index:3!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

@media(max-width:900px){
  .phx-about-reference .pa-story:after{
    background:linear-gradient(180deg,rgba(3,29,36,.34) 0%,rgba(3,35,43,.68) 52%,rgba(3,29,36,.96) 100%)!important;
  }
  .phx-about-reference .pa-why-media:after{
    background:linear-gradient(180deg,
      transparent 0%,
      transparent 55%,
      color-mix(in srgb,var(--about-why-bg,#fff) 45%,transparent) 78%,
      var(--about-why-bg,#fff) 100%);
  }
}

/* V21 — requested About-page-only controls/fixes. */
.phx-about-reference .pa-values-col .pa-value-head h2{font-family:var(--pa-values-title-font,inherit)!important;}
.phx-about-reference .pa-values-col > ul,
.phx-about-reference .pa-values-col > ul li,
.phx-about-reference .pa-values-col > ul .pa-value-text{font-family:var(--pa-values-item-font,inherit)!important;}
.phx-about-reference .pa-values-col .pa-value-head span{display:inline-block!important;}

/* مسیر ما: یک قاب کاملاً یکسان برای همه آیکن‌ها؛ اندازه تنظیم‌شده فقط اندازه خود تصویر را کنترل می‌کند. */
@media (min-width:901px){
  .phx-about-reference .pa-j-icon{
    width:var(--pa-icon-box-w,100px)!important;
    height:var(--pa-icon-box-h,60px)!important;
    min-width:var(--pa-icon-box-w,100px)!important;
    min-height:var(--pa-icon-box-h,60px)!important;
    max-width:var(--pa-icon-box-w,100px)!important;
    max-height:var(--pa-icon-box-h,60px)!important;
    transform:translate(var(--pa-icon-x,0px),calc(50px - (var(--pa-icon-box-h,60px) / 2) + var(--pa-icon-y,0px)))!important;
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
  }
  .phx-about-reference .pa-j-icon img{
    width:var(--pa-icon-w,42px)!important;
    height:var(--pa-icon-h,42px)!important;
    max-width:calc(100% - 10px)!important;
    max-height:calc(100% - 10px)!important;
    min-width:0!important;
    min-height:0!important;
    object-fit:contain!important;
    padding:0!important;
  }
}
@media (max-width:900px){
  .phx-about-reference .pa-j-icon{
    width:var(--pa-icon-box-w,90px)!important;
    height:var(--pa-icon-box-h,54px)!important;
    min-width:var(--pa-icon-box-w,90px)!important;
    min-height:var(--pa-icon-box-h,54px)!important;
    max-width:var(--pa-icon-box-w,90px)!important;
    max-height:var(--pa-icon-box-h,54px)!important;
    transform:translate(var(--pa-icon-x,0px),calc(50px - (var(--pa-icon-box-h,54px) / 2) + var(--pa-icon-y,0px)))!important;
    box-sizing:border-box!important;
    display:grid!important;
    place-items:center!important;
  }
  .phx-about-reference .pa-j-icon img{
    width:var(--pa-icon-w,42px)!important;
    height:var(--pa-icon-h,42px)!important;
    max-width:calc(100% - 8px)!important;
    max-height:calc(100% - 8px)!important;
    min-width:0!important;
    min-height:0!important;
    object-fit:contain!important;
    padding:0!important;
  }
}

/* درباره ققنوس: کلیپ در دسکتاپ دیده شود و کلید Play دقیقاً در مرکز خود کلیپ بماند. */
@media (min-width:901px){
  .phx-about-reference .pa-story-media:has(video.pa-story-video){
    opacity:1!important;
    z-index:1!important;
    pointer-events:auto!important;
  }
  .phx-about-reference .pa-story-media:has(video.pa-story-video) .pa-story-play{
    display:grid!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    z-index:10!important;
    pointer-events:auto!important;
  }
  .phx-about-reference .pa-story-media:has(video.pa-story-video) .pa-story-play.is-playing{
    display:none!important;
  }
}


/* PHX About — journey item text controls (scoped) */
.phx-about-reference .pa-j-item > span{
  font-family:var(--pa-item-title-font,inherit);
  transform:translate(var(--pa-item-title-x,0),var(--pa-item-title-y,0));
  display:block;
}
.phx-about-reference .pa-cta-inner{
  /* alignment is supplied per section from the About admin setting */
}


/* V22 — About page only: independent year positioning + reliable CTA alignment. */
.phx-about-reference .pa-j-item > b{position:relative!important;display:block!important;transform:translate(var(--pa-year-x,0px),var(--pa-year-y,0px))!important;z-index:3!important;}
.phx-about-reference .pa-cta-inner{width:min(1120px,calc(100% - 48px))!important;display:flex!important;flex-direction:column!important;align-items:var(--pa-cta-items,flex-end)!important;text-align:var(--pa-cta-align,right)!important;}
.phx-about-reference .pa-cta-inner .pa-kicker,.phx-about-reference .pa-cta-inner h2,.phx-about-reference .pa-cta-inner p,.phx-about-reference .pa-cta-inner .pa-cta-button{text-align:var(--pa-cta-align,right)!important;align-self:var(--pa-cta-items,flex-end)!important;}
.phx-about-reference .pa-cta-inner .pa-cta-button{margin-left:0!important;margin-right:0!important;}
@media(max-width:900px){.phx-about-reference .pa-cta-inner{align-items:var(--pa-cta-items,center)!important;text-align:var(--pa-cta-align,center)!important;}.phx-about-reference .pa-cta-inner .pa-kicker,.phx-about-reference .pa-cta-inner h2,.phx-about-reference .pa-cta-inner p,.phx-about-reference .pa-cta-inner .pa-cta-button{align-self:var(--pa-cta-items,center)!important;text-align:var(--pa-cta-align,center)!important;}}


/* ABOUT PAGE — typography/alignment controls requested */
.phx-about-reference .pa-kicker{font-family:var(--phx-about-kicker-font,inherit);}
.phx-about-reference .pa-why-desc{margin:0 0 14px;line-height:1.9;max-width:100%;}
.phx-about-reference .pa-values .pa-value-head h2{font-family:var(--pa-values-title-font,inherit);}
.phx-about-reference .pa-values .pa-value-text{font-family:var(--pa-values-item-font,inherit);}
.phx-about-reference .pa-cta-inner > .pa-kicker,.phx-about-reference .pa-cta-inner > h2,.phx-about-reference .pa-cta-inner > p{width:100%;}
@media(min-width:901px){
  .phx-about-reference .pa-journey{min-height:245px;}
  .phx-about-reference .pa-journey-head{position:absolute;right:calc((100% - min(1120px, calc(100% - 48px)))/2);top:30px;width:min(330px,30%);margin:0;z-index:4;}
  .phx-about-reference .pa-journey-track{margin:0 auto;height:190px;padding-top:20px;width:min(1120px,calc(100% - 48px));}
  .phx-about-reference .pa-journey-head + .pa-journey-track{margin-top:0;}
}


/* ABOUT PAGE — journey desktop composition: complete visual left, copy right */
@media(min-width:901px){
  .phx-about-reference .pa-journey{min-height:245px;padding:18px 0 5px;}
  .phx-about-reference .pa-journey-head{position:absolute;right:0;top:28px;width:32%;max-width:360px;margin:0;padding:0 28px 0 12px;box-sizing:border-box;}
  .phx-about-reference .pa-journey-track{position:absolute;left:0;right:auto;top:18px;width:68%;height:190px;margin:0;overflow:visible;}
}
@media(max-width:900px){
  .phx-about-reference .pa-journey-head{position:relative;right:auto;top:auto;width:calc(100% - 48px);max-width:none;margin:0 auto;}
  .phx-about-reference .pa-journey-track{position:relative;left:auto;right:auto;top:auto;width:min(1120px,calc(100% - 48px));margin:-12px auto 0;}
}

/* V24 — restore original About journey composition; only nudge the complete timeline slightly right. */
@media(min-width:901px){
  .phx-about-reference .pa-journey{min-height:245px;padding:18px 0 5px;}
  .phx-about-reference .pa-journey-head{position:relative;right:auto;top:auto;width:min(330px,30%);max-width:330px;margin:0 0 0 max(24px,calc((100% - 1120px)/2));padding:0;z-index:4;}
  .phx-about-reference .pa-journey-track{position:relative;left:auto;right:auto;top:auto;width:min(1120px,calc(100% - 48px));height:190px;margin:-12px auto 0;transform:translateX(28px);overflow:visible;}
}


/* ============================================================
   ABOUT PAGE — FIX ADMIN TYPOGRAPHY CONTROLS
   Scope: only the three requested About-page text elements.
   The existing admin fields remain the single source of truth.
   ============================================================ */

/* 1) درباره ققنوس — متن زیر عنوان */
.phx-about-reference .pa-story-copy .pa-story-text{
  font-size:var(--pa-story-body-size)!important;
}
.phx-about-reference .pa-story-copy .pa-story-text p{
  font-size:inherit!important;
}

/* 2) مسیر ما — متن زیر هر آیکن */
.phx-about-reference .pa-j-item > span{
  font-size:var(--pa-journey-item-title-size)!important;
  font-family:var(--pa-item-title-font,inherit)!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  text-align:center!important;
  line-height:1.5!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Keep the left-side journey copy readable and contained. */
@media(min-width:901px){
  .phx-about-reference .pa-journey-head{
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .phx-about-reference .pa-journey-head p{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* 3) تحول دیجیتال — متن زیر عنوان */
.phx-about-reference .pa-cta-inner > p{
  font-size:var(--pa-cta-body-size)!important;
}

/* V25 — مسیر ما: فقط کادر متن بخش مسیر ما را خوانا و منطقی نگه می‌دارد.
   هیچ ساختار، محتوا یا کنترل مدیریتی تغییر نمی‌کند. */
.phx-about-reference .pa-journey-head{
  box-sizing:border-box!important;
  min-width:0!important;
}
.phx-about-reference .pa-journey-head .pa-section-head{
  width:100%!important;
  min-width:0!important;
}
.phx-about-reference .pa-journey-head .pa-section-head h2{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:visible!important;
}
.phx-about-reference .pa-journey-head > p{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  line-height:1.9!important;
}
@media(max-width:900px){
  .phx-about-reference .pa-journey-head{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
  .phx-about-reference .pa-journey-head .pa-section-head{
    justify-content:center!important;
  }
  .phx-about-reference .pa-journey-head > p{
    max-width:none!important;
    width:100%!important;
    text-align:center!important;
  }
}


/* ============================================================
   ABOUT PAGE — JOURNEY TEXT WIDTH FIX ONLY
   Scope: only #phx-journey / .pa-journey-head.
   Purpose: prevent the Persian description from becoming
   unnaturally narrow/column-like. No layout/content changes.
   ============================================================ */
@media (min-width:901px){
  .phx-about-reference #phx-journey .pa-journey-head{
    width:min(420px,38%)!important;
    max-width:420px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .phx-about-reference #phx-journey .pa-journey-head > p{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    word-wrap:normal!important;
    writing-mode:horizontal-tb!important;
    direction:rtl!important;
    text-align:right!important;
  }
  .phx-about-reference #phx-journey .pa-journey-head .pa-section-head{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .phx-about-reference #phx-journey .pa-journey-head .pa-section-head h2{
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
  }
}
@media (max-width:900px){
  .phx-about-reference #phx-journey .pa-journey-head{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .phx-about-reference #phx-journey .pa-journey-head > p{
    width:100%!important;
    max-width:none!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    word-wrap:normal!important;
    writing-mode:horizontal-tb!important;
    direction:rtl!important;
  }
}


/* ============================================================
   PHX ABOUT — RESPONSIVE FIX (PAGE SCOPED)
   Only responsive behavior. Desktop design remains unchanged.
   ============================================================ */
.phx-about-reference,
.phx-about-reference *{box-sizing:border-box;}
.phx-about-reference{width:100%;max-width:100%;overflow-x:hidden;}
.phx-about-reference img,
.phx-about-reference video{max-width:100%;}

/* Large tablet / small laptop */
@media (max-width:1100px){
  .phx-about-reference .pa-hero-inner,
  .phx-about-reference .pa-story-inner,
  .phx-about-reference .pa-why-inner,
  .phx-about-reference .pa-journey-head,
  .phx-about-reference .pa-journey-track,
  .phx-about-reference .pa-cta-inner{
    width:calc(100% - 40px);
    max-width:none;
  }

  .phx-about-reference .pa-hero-inner{gap:28px;padding-left:20px;padding-right:20px;}
  .phx-about-reference .pa-story-inner,
  .phx-about-reference .pa-why-inner{gap:28px;}
  .phx-about-reference .pa-values-inner{width:calc(100% - 40px);}
}

/* Tablet */
@media (max-width:900px){
  .phx-about-reference .pa-hero{
    min-height:0;
  }
  .phx-about-reference .pa-hero-inner{
    width:calc(100% - 32px);
    min-height:0;
    padding:72px 0 30px;
    grid-template-columns:1fr;
    gap:24px;
  }
  .phx-about-reference .pa-hero-copy{
    order:1;
    width:100%;
    max-width:680px;
    justify-self:center;
    transform:translate(0,0);
  }
  .phx-about-reference .pa-hero-art{
    order:2;
    width:100%;
    min-width:0;
    justify-content:center;
  }
  .phx-about-reference .pa-hero-art img{
    width:100%;
    max-width:650px;
    height:auto;
    max-height:280px;
    object-fit:cover;
  }

  .phx-about-reference .pa-story,
  .phx-about-reference .pa-why{padding:30px 0;}
  .phx-about-reference .pa-story-inner,
  .phx-about-reference .pa-why-inner{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
    gap:24px;
  }
  .phx-about-reference .pa-story-copy,
  .phx-about-reference .pa-why-list{width:100%;min-width:0;}
  .phx-about-reference .pa-story-media,
  .phx-about-reference .pa-why-media{
    width:100%;
    max-width:100%;
    transform:none;
  }
  .phx-about-reference .pa-story-media video.pa-story-video{width:100%;height:auto;min-height:220px;max-height:360px;}
  .phx-about-reference .pa-story-media img{width:100%;height:auto;max-height:360px;}
  .phx-about-reference .pa-why-media img{width:100%;height:auto;aspect-ratio:460/292;}

  /* Values: preserve both columns on tablet, but make them fluid. */
  .phx-about-reference .pa-values-inner{
    width:calc(100% - 32px);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
  }
  .phx-about-reference .pa-values-col{min-width:0;padding:14px 8px;}
  .phx-about-reference .pa-values li{min-width:0;}
  .phx-about-reference .pa-values .pa-value-text{min-width:0;overflow-wrap:anywhere;}
  .phx-about-reference .pa-values-art{min-width:0;}

  /* Journey becomes a real responsive block instead of relying on fixed absolute positions. */
  .phx-about-reference #phx-journey{
    min-height:0;
    padding:24px 0 22px;
  }
  .phx-about-reference #phx-journey .pa-journey-head{
    position:relative;
    right:auto;left:auto;top:auto;
    width:calc(100% - 32px);
    max-width:none;
    margin:0 auto 18px;
    padding:0;
    transform:none;
  }
  .phx-about-reference #phx-journey .pa-journey-track{
    position:relative;
    left:auto;right:auto;top:auto;
    width:calc(100% - 32px);
    height:auto;
    min-height:0;
    margin:0 auto;
    padding:10px 0 4px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 10px;
    overflow:visible;
    transform:none;
  }
  .phx-about-reference #phx-journey .pa-wave{
    left:4%;right:4%;top:58px;width:auto;
  }
  .phx-about-reference #phx-journey .pa-j-item,
  .phx-about-reference #phx-journey .pa-j-item:nth-child(even),
  .phx-about-reference #phx-journey .pa-j-item:nth-child(odd){
    position:relative;
    right:auto!important;left:auto!important;top:auto!important;
    width:100%;
    min-width:0;
    transform:none!important;
    margin:0;
    justify-self:center;
  }
  .phx-about-reference #phx-journey .pa-j-icon{flex:none;}
  .phx-about-reference #phx-journey .pa-j-item > b,
  .phx-about-reference #phx-journey .pa-j-item > span{max-width:100%;overflow-wrap:anywhere;}

  .phx-about-reference .pa-cta{min-height:220px;}
  .phx-about-reference .pa-cta-inner{
    width:calc(100% - 32px);
    min-height:220px;
    padding:38px 16px 32px;
    transform:none;
  }
}

/* Mobile */
@media (max-width:600px){
  .phx-about-reference .pa-hero-inner{
    width:calc(100% - 24px);
    padding:64px 0 24px;
    gap:18px;
  }
  .phx-about-reference .pa-hero-copy h1{
    font-size:28px!important;
    line-height:1.55!important;
    overflow-wrap:anywhere;
  }
  .phx-about-reference .pa-hero-copy p{
    font-size:13px!important;
    line-height:1.9!important;
    overflow-wrap:anywhere;
  }
  .phx-about-reference .pa-hero-art img{max-height:230px;}

  .phx-about-reference .pa-story,
  .phx-about-reference .pa-why{padding:26px 0;}
  .phx-about-reference .pa-story-inner,
  .phx-about-reference .pa-why-inner{
    width:calc(100% - 24px);
    gap:20px;
  }
  .phx-about-reference .pa-section-head{gap:8px;margin-bottom:10px;}
  .phx-about-reference .pa-section-head i{width:28px;}
  .phx-about-reference .pa-section-head h2{font-size:21px!important;line-height:1.5;}
  .phx-about-reference .pa-story-text{font-size:12px!important;line-height:2!important;}
  .phx-about-reference .pa-story-text p{overflow-wrap:anywhere;}
  .phx-about-reference .pa-link{max-width:100%;overflow-wrap:anywhere;}
  .phx-about-reference .pa-story-media video.pa-story-video{min-height:190px;height:220px;}
  .phx-about-reference .pa-story-media img{min-height:0;max-height:280px;}

  .phx-about-reference .pa-why-items{margin-right:0;}
  .phx-about-reference .pa-why-item{
    grid-template-columns:34px 1px minmax(0,1fr) 34px;
    min-height:62px;
  }
  .phx-about-reference .pa-why-copy{padding:6px 10px 6px 5px;min-width:0;}
  .phx-about-reference .pa-why-copy h3,
  .phx-about-reference .pa-why-copy p{overflow-wrap:anywhere;}
  .phx-about-reference .pa-why-copy h3{font-size:13px;}
  .phx-about-reference .pa-why-copy p{font-size:10px;line-height:1.75;}

  /* Values: one column prevents cramped text and accidental overflow. */
  .phx-about-reference .pa-values-inner{
    width:calc(100% - 24px);
    grid-template-columns:1fr;
    gap:18px;
  }
  .phx-about-reference .pa-values-art{display:none;}
  .phx-about-reference .pa-values-col{padding:8px 0;min-width:0;}
  .phx-about-reference .pa-values-left .pa-value-head,
  .phx-about-reference .pa-values-right .pa-value-head{justify-content:flex-start;}
  .phx-about-reference .pa-values li{font-size:12px;line-height:1.8;align-items:flex-start;}
  .phx-about-reference .pa-values li i{flex:0 0 auto;margin-top:2px;}
  .phx-about-reference .pa-values .pa-value-text{font-size:inherit!important;overflow-wrap:anywhere;}

  /* Journey: two compact columns on phones. */
  .phx-about-reference #phx-journey .pa-journey-head,
  .phx-about-reference #phx-journey .pa-journey-track{width:calc(100% - 24px);}
  .phx-about-reference #phx-journey .pa-journey-head .pa-section-head{justify-content:flex-start!important;}
  .phx-about-reference #phx-journey .pa-journey-head > p{
    text-align:right!important;
    font-size:12px!important;
    line-height:1.9!important;
    overflow-wrap:anywhere;
  }
  .phx-about-reference #phx-journey .pa-journey-track{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 8px;
    padding-top:6px;
  }
  .phx-about-reference #phx-journey .pa-wave{
    top:72px;
    left:0;right:0;
    opacity:.45;
  }
  .phx-about-reference #phx-journey .pa-wave:before,
  .phx-about-reference #phx-journey .pa-wave:after{width:70px;height:26px;}
  .phx-about-reference #phx-journey .pa-j-item{gap:4px;}
  .phx-about-reference #phx-journey .pa-j-item > b{font-size:13px!important;}
  .phx-about-reference #phx-journey .pa-j-item > span{
    font-size:11px!important;
    line-height:1.6!important;
    padding:0 3px;
  }
  .phx-about-reference #phx-journey .pa-j-icon{
    max-width:90px!important;
    max-height:60px!important;
  }

  .phx-about-reference .pa-cta{min-height:210px;}
  .phx-about-reference .pa-cta-inner{
    width:calc(100% - 24px);
    min-height:210px;
    padding:32px 10px 26px;
  }
  .phx-about-reference .pa-cta-inner h2{
    font-size:28px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere;
  }
  .phx-about-reference .pa-cta-inner p{
    font-size:12px!important;
    line-height:1.9!important;
    overflow-wrap:anywhere;
  }
  .phx-about-reference .pa-cta-button{
    width:min(205px,100%)!important;
    max-width:100%;
  }
}

/* Very small phones */
@media (max-width:390px){
  .phx-about-reference .pa-hero-inner,
  .phx-about-reference .pa-story-inner,
  .phx-about-reference .pa-why-inner,
  .phx-about-reference .pa-values-inner,
  .phx-about-reference #phx-journey .pa-journey-head,
  .phx-about-reference #phx-journey .pa-journey-track,
  .phx-about-reference .pa-cta-inner{width:calc(100% - 18px);}
  .phx-about-reference .pa-hero-copy h1{font-size:25px!important;}
  .phx-about-reference .pa-why-item{grid-template-columns:30px 1px minmax(0,1fr) 28px;}
  .phx-about-reference #phx-journey .pa-journey-track{gap:20px 5px;}
  .phx-about-reference #phx-journey .pa-j-item > span{font-size:10px!important;}
}

/* ============================================================
   ABOUT PAGE — FINAL RESPONSIVE PASS
   Only page-about.php. No content/admin behavior changes.
   ============================================================ */
.phx-about-reference .pa-values{
  background-color:#052c34!important;
  color:#fff!important;
}
.phx-about-reference .pa-values h2,
.phx-about-reference .pa-values h3,
.phx-about-reference .pa-values .pa-value-head h2{
  color:#fff!important;
}
.phx-about-reference .pa-values li,
.phx-about-reference .pa-values li .pa-value-text,
.phx-about-reference .pa-values p{
  color:#d7e7e8!important;
}
.phx-about-reference .pa-values li i,
.phx-about-reference .pa-values .pa-value-head span{
  color:#12d4d2!important;
}

/* If an old saved admin color is empty/invalid, keep the reference colors usable. */
.phx-about-reference .pa-values{
  background-color:var(--about-values-bg,#052c34)!important;
}
.phx-about-reference .pa-values h2,
.phx-about-reference .pa-values h3,
.phx-about-reference .pa-values .pa-value-head h2{
  color:var(--about-values-title,#fff)!important;
}
.phx-about-reference .pa-values li,
.phx-about-reference .pa-values li .pa-value-text,
.phx-about-reference .pa-values p{
  color:var(--about-values-text,#d7e7e8)!important;
}
.phx-about-reference .pa-values li i,
.phx-about-reference .pa-values .pa-value-head span{
  color:var(--about-values-accent,#12d4d2)!important;
}

/* CTA «آغاز تحول دیجیتال» — always readable at tablet/mobile widths. */
.phx-about-reference .pa-cta{
  min-height:220px!important;
  background-color:#062b34!important;
}
.phx-about-reference .pa-cta-inner{
  width:min(1120px,calc(100% - 48px))!important;
  min-height:220px!important;
  box-sizing:border-box!important;
  max-width:100%!important;
}
.phx-about-reference .pa-cta-inner h2{color:#13d3d2!important;}
.phx-about-reference .pa-cta-inner p{color:#d6e6e7!important;}
.phx-about-reference .pa-cta-button{
  color:#fff!important;
  border-color:#10d2d2!important;
  background:rgba(1,32,40,.72)!important;
}
.phx-about-reference .pa-cta{
  background-color:var(--about-cta-bg,#062b34)!important;
}
.phx-about-reference .pa-cta-inner h2{
  color:var(--about-cta-title,#13d3d2)!important;
}
.phx-about-reference .pa-cta-inner p{
  color:var(--about-cta-text,#d6e6e7)!important;
}

/* Tablet: two-column values, but never allow either column to squeeze into the image. */
@media (min-width:601px) and (max-width:900px){
  .phx-about-reference .pa-values{
    min-height:330px!important;
  }
  .phx-about-reference .pa-values-inner{
    min-height:330px!important;
    height:auto!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  .phx-about-reference .pa-values-art{display:none!important;}
  .phx-about-reference .pa-values-col{
    min-width:0!important;
    padding:30px 24px!important;
    background:transparent!important;
  }
  .phx-about-reference .pa-value-head{
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  .phx-about-reference .pa-value-head h2{
    font-size:22px!important;
    line-height:1.5!important;
  }
  .phx-about-reference .pa-values li{
    min-width:0!important;
    font-size:12px!important;
    line-height:1.9!important;
  }
  .phx-about-reference .pa-values .pa-value-text{
    min-width:0!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .phx-about-reference .pa-cta-inner{
    width:calc(100% - 40px)!important;
    padding:42px 28px 34px!important;
  }
}

/* Phones: one column and comfortable reading width. */
@media (max-width:600px){
  .phx-about-reference .pa-values{
    min-height:0!important;
  }
  .phx-about-reference .pa-values-inner{
    width:calc(100% - 24px)!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  .phx-about-reference .pa-values-art{display:none!important;}
  .phx-about-reference .pa-values-col{
    min-width:0!important;
    padding:24px 8px!important;
    background:transparent!important;
  }
  .phx-about-reference .pa-values-left .pa-value-head,
  .phx-about-reference .pa-values-right .pa-value-head{
    justify-content:flex-start!important;
  }
  .phx-about-reference .pa-value-head h2{
    font-size:20px!important;
    line-height:1.5!important;
  }
  .phx-about-reference .pa-values li{
    font-size:12px!important;
    line-height:1.9!important;
  }
  .phx-about-reference .pa-values .pa-value-text{
    font-size:inherit!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  .phx-about-reference .pa-cta{
    min-height:260px!important;
  }
  .phx-about-reference .pa-cta-inner{
    width:calc(100% - 24px)!important;
    min-height:260px!important;
    padding:34px 12px 28px!important;
    transform:none!important;
  }
  .phx-about-reference .pa-cta-inner > .pa-kicker,
  .phx-about-reference .pa-cta-inner > h2,
  .phx-about-reference .pa-cta-inner > p{
    width:100%!important;
    max-width:100%!important;
  }
  .phx-about-reference .pa-cta-inner h2{
    font-size:28px!important;
    line-height:1.45!important;
  }
  .phx-about-reference .pa-cta-inner p{
    font-size:12px!important;
    line-height:1.9!important;
  }
  .phx-about-reference .pa-cta-button{
    width:min(205px,100%)!important;
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Values: preserve the selected artwork, but restore contrast so the two text columns remain readable. */
.phx-about-reference .pa-values:before{
  display:block!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(3,36,43,.82) 0%,rgba(3,36,43,.38) 32%,rgba(3,36,43,.24) 50%,rgba(3,36,43,.38) 68%,rgba(3,36,43,.82) 100%)!important;
}
.phx-about-reference .pa-values-art{z-index:0!important;}

/* CTA: at tablet/phone the image stays, while a restrained overlay restores text contrast. */
@media (max-width:1100px){
  .phx-about-reference .pa-cta:after{
    display:block!important;
    z-index:1!important;
    background:linear-gradient(90deg,rgba(2,29,37,.62),rgba(2,29,37,.56) 55%,rgba(2,29,37,.76))!important;
  }
  .phx-about-reference .pa-cta-inner{z-index:2!important;}
}

/* ============================================================
   ABOUT PAGE — TARGETED RESPONSIVE CORRECTIONS (V26)
   Scope: ONLY .phx-about-reference / page-about.php.
   Preserve existing responsive rules; fix only reported breakpoints.
   ============================================================ */

/* 1) Hero — short laptop viewport (e.g. 1366x600): keep bird and copy
   in separate grid areas and prevent the managed image from covering text. */
@media (min-width:901px) and (max-height:650px){
  .phx-about-reference .pa-hero{
    height:600px!important;
    min-height:600px!important;
    max-height:600px!important;
  }
  .phx-about-reference .pa-hero-inner{
    height:600px!important;
    min-height:600px!important;
    width:calc(100% - 56px)!important;
    max-width:1320px!important;
    padding:34px 18px 30px!important;
    grid-template-columns:minmax(0,1fr) minmax(420px,.82fr)!important;
    gap:24px!important;
    align-items:center!important;
  }
  .phx-about-reference .pa-hero-art{
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    align-self:center!important;
    justify-content:flex-start!important;
  }
  .phx-about-reference .pa-hero-art img{
    width:min(100%,540px)!important;
    height:auto!important;
    max-height:330px!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
  }
  .phx-about-reference .pa-hero-copy{
    min-width:0!important;
    width:100%!important;
    max-width:560px!important;
    justify-self:end!important;
    transform:none!important;
  }
  .phx-about-reference .pa-hero-copy h1{
    font-size:clamp(38px,3.4vw,48px)!important;
    line-height:1.45!important;
    overflow-wrap:normal!important;
  }
  .phx-about-reference .pa-hero-copy p{
    max-width:520px!important;
    font-size:15px!important;
    line-height:1.9!important;
  }
}

/* 2) Why Phoenix — laptop/tablet landscape: prevent the copy column
   from becoming narrower than its content while keeping the image visible. */
@media (min-width:901px) and (max-width:1400px){
  .phx-about-reference .pa-why-inner{
    width:calc(100% - 56px)!important;
    max-width:1280px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:28px!important;
  }
  .phx-about-reference .pa-why-media,
  .phx-about-reference .pa-why-list{min-width:0!important;}
  .phx-about-reference .pa-why-media img{
    width:100%!important;
    height:100%!important;
    min-height:420px!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .phx-about-reference .pa-why-list{
    padding:36px 30px!important;
  }
  .phx-about-reference .pa-why-copy{
    min-width:0!important;
    padding-left:8px!important;
    padding-right:12px!important;
  }
  .phx-about-reference .pa-why-copy p{
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* 3) Values / company goals — phone: retain the real managed image
   behind the text instead of hiding it; keep every text line inside viewport. */
@media (max-width:600px){
  .phx-about-reference .pa-values{
    min-height:0!important;
    background:var(--about-values-bg,#052c34)!important;
  }
  .phx-about-reference .pa-values-inner{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    padding:24px 12px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  .phx-about-reference .pa-values-art{
    display:flex!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    transform:none!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  .phx-about-reference .pa-values-art img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
    opacity:.72!important;
    mask-image:none!important;
    mix-blend-mode:normal!important;
  }
  .phx-about-reference .pa-values-col{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    min-width:0!important;
    padding:16px 10px!important;
    background:rgba(5,44,52,.56)!important;
    border-radius:10px!important;
  }
  .phx-about-reference .pa-values .pa-value-head{
    width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  .phx-about-reference .pa-values .pa-value-head h2{
    min-width:0!important;
    max-width:calc(100% - 42px)!important;
    font-size:20px!important;
    line-height:1.6!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .phx-about-reference .pa-values ul,
  .phx-about-reference .pa-values li{
    width:100%!important;
    min-width:0!important;
  }
  .phx-about-reference .pa-values li{
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:7px!important;
    font-size:12px!important;
    line-height:1.9!important;
    text-align:right!important;
  }
  .phx-about-reference .pa-values .pa-value-text{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    transform:none!important;
  }
}

/* 4) Journey — phone: remove the old icon transform that displaced labels
   away from their own icon/year/title. */
@media (max-width:600px){
  .phx-about-reference #phx-journey .pa-journey-track{
    width:calc(100% - 24px)!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 8px!important;
    padding:8px 0 12px!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .phx-about-reference #phx-journey .pa-j-item,
  .phx-about-reference #phx-journey .pa-j-item:nth-child(even),
  .phx-about-reference #phx-journey .pa-j-item:nth-child(odd){
    position:relative!important;
    inset:auto!important;
    right:auto!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    transform:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
  }
  .phx-about-reference #phx-journey .pa-j-icon{
    width:min(var(--pa-icon-box-w,90px),100%)!important;
    height:var(--pa-icon-box-h,54px)!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:none!important;
    transform:none!important;
    margin:0 auto!important;
  }
  .phx-about-reference #phx-journey .pa-j-item > b,
  .phx-about-reference #phx-journey .pa-j-item > span{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .phx-about-reference #phx-journey .pa-j-item > b{font-size:13px!important;line-height:1.4!important;}
  .phx-about-reference #phx-journey .pa-j-item > span{font-size:11px!important;line-height:1.65!important;}
  .phx-about-reference #phx-journey .pa-wave{display:none!important;}
}

/* 5) CTA / آغاز تحول دیجیتال — short laptop and mobile: keep the image,
   text and button inside one readable layer. */
@media (max-width:1100px){
  .phx-about-reference .pa-cta{
    min-height:300px!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  .phx-about-reference .pa-cta-inner{
    position:relative!important;
    z-index:3!important;
    width:calc(100% - 40px)!important;
    min-height:300px!important;
    height:auto!important;
    max-width:900px!important;
    margin:0 auto!important;
    padding:48px 28px 42px!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  .phx-about-reference .pa-cta-inner > .pa-kicker,
  .phx-about-reference .pa-cta-inner > h2,
  .phx-about-reference .pa-cta-inner > p,
  .phx-about-reference .pa-cta-inner > .pa-cta-button{
    position:relative!important;
    z-index:4!important;
    max-width:100%!important;
  }
  .phx-about-reference .pa-cta-inner h2{
    font-size:clamp(28px,4vw,40px)!important;
    line-height:1.45!important;
  }
  .phx-about-reference .pa-cta-inner p{
    font-size:13px!important;
    line-height:1.95!important;
  }
  .phx-about-reference .pa-cta-button{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:5!important;
    height:auto!important;
    min-height:46px!important;
    margin-top:4px!important;
  }
}

@media (max-width:600px){
  .phx-about-reference .pa-cta{
    min-height:320px!important;
    background-position:center center!important;
  }
  .phx-about-reference .pa-cta-inner{
    width:calc(100% - 24px)!important;
    min-height:320px!important;
    padding:42px 14px 34px!important;
  }
  .phx-about-reference .pa-cta-inner h2{font-size:27px!important;line-height:1.5!important;}
  .phx-about-reference .pa-cta-inner p{font-size:12px!important;line-height:1.95!important;}
  .phx-about-reference .pa-cta-button{width:min(205px,100%)!important;min-width:0!important;}
}

/* 6) Story video — make the custom play control reliably clickable on touch
   devices and keep it above the decorative section layers. */
.phx-about-reference .pa-story-media{isolation:isolate!important;}
.phx-about-reference .pa-story-media .pa-story-video{position:relative!important;z-index:1!important;}
.phx-about-reference .pa-story-media .pa-story-play{
  position:absolute!important;
  z-index:20!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
}
@media (max-width:600px){
  .phx-about-reference .pa-story-media .pa-story-play{width:56px!important;height:56px!important;display:grid!important;}
}

/* ============================================================
   ABOUT PAGE — RESPONSIVE REPAIR V3
   Scope: ONLY .phx-about-reference / body.phx-about-page
   Fixes short-height laptop viewports and mobile media behavior.
   Existing desktop/mobile rules remain intact; these rules only
   override the broken cases reported from real viewports.
   ============================================================ */

/* Laptop: 1366px wide with a short viewport (600px / 390px / 340px).
   These reports are height-driven, so width-only media queries do not catch them. */
@media (min-width:901px) and (max-height:650px){
  .phx-about-reference .pa-hero-inner{
    width:calc(100% - 48px)!important;
    max-width:1320px!important;
    grid-template-columns:minmax(0,1fr) minmax(430px,.86fr)!important;
    gap:34px!important;
    padding:82px 18px 24px!important;
  }
  .phx-about-reference .pa-hero-art{
    min-width:0!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }
  .phx-about-reference .pa-hero-art img{
    width:min(100%,560px)!important;
    max-width:560px!important;
    height:auto!important;
    max-height:300px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .phx-about-reference .pa-hero-copy{
    width:100%!important;
    max-width:560px!important;
    min-width:0!important;
    justify-self:end!important;
    transform:none!important;
  }
  .phx-about-reference .pa-hero-copy h1{
    font-size:clamp(34px,3.2vw,46px)!important;
    line-height:1.42!important;
    margin-bottom:10px!important;
  }
  .phx-about-reference .pa-hero-copy p{
    max-width:500px!important;
    font-size:14px!important;
    line-height:1.8!important;
  }
}

/* Short laptop — values/goals: preserve the image and make both text columns
   fit vertically instead of inheriting the tall 390px desktop composition. */
@media (min-width:901px) and (max-height:500px){
  .phx-about-reference .pa-values{
    min-height:340px!important;
    height:340px!important;
  }
  .phx-about-reference .pa-values-inner{
    min-height:340px!important;
    height:340px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr)!important;
  }
  .phx-about-reference .pa-values-col{
    min-width:0!important;
    padding:24px 30px!important;
  }
  .phx-about-reference .pa-value-head{
    gap:8px!important;
    margin-bottom:7px!important;
  }
  .phx-about-reference .pa-value-head h2{
    font-size:22px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
  .phx-about-reference .pa-values li{
    min-width:0!important;
    font-size:12px!important;
    line-height:1.65!important;
    margin:0!important;
  }
  .phx-about-reference .pa-values .pa-value-text{
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    transform:none!important;
  }
}

/* Very short laptop — CTA: keep the right-side copy inside the visible section
   and use the full background instead of a left-anchored crop. */
@media (min-width:901px) and (max-height:430px){
  .phx-about-reference .pa-cta{
    min-height:300px!important;
    height:300px!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  .phx-about-reference .pa-cta-inner{
    width:min(1120px,calc(100% - 56px))!important;
    min-height:300px!important;
    height:300px!important;
    padding:30px 36px!important;
    margin:0 auto!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  .phx-about-reference .pa-cta-inner > *{
    max-width:560px!important;
  }
  .phx-about-reference .pa-cta-inner h2{
    font-size:32px!important;
    line-height:1.35!important;
  }
  .phx-about-reference .pa-cta-inner p{
    font-size:12px!important;
    line-height:1.7!important;
  }
  .phx-about-reference .pa-cta-button{
    min-height:42px!important;
    padding:8px 18px!important;
  }
}

/* Mobile story: remove any managed X/Y translation from the desktop layout,
   make the media occupy the complete available column, and keep the video
   and play control above all decorative layers. */
@media (max-width:600px){
  .phx-about-reference .pa-story-inner{
    width:calc(100% - 20px)!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    direction:rtl!important;
  }
  .phx-about-reference .pa-story-copy,
  .phx-about-reference .pa-story-media{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    transform:none!important;
    margin:0!important;
  }
  .phx-about-reference .pa-story-media{
    overflow:hidden!important;
    isolation:isolate!important;
  }
  .phx-about-reference .pa-story-media .pa-story-video,
  .phx-about-reference .pa-story-media > img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    object-fit:cover!important;
  }
  .phx-about-reference .pa-story-media .pa-story-video{
    height:220px!important;
  }
  .phx-about-reference .pa-story-media .pa-story-play{
    display:grid!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:56px!important;
    height:56px!important;
    z-index:50!important;
    pointer-events:auto!important;
  }
}

/* Mobile values: keep the actual image as the section background and prevent
   text/tick transforms or desktop widths from pushing content outside screen. */
@media (max-width:600px){
  .phx-about-reference .pa-values{
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
    background-image:var(--pa-values-bg)!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  .phx-about-reference .pa-values-inner{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:22px 12px!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    overflow:visible!important;
  }
  .phx-about-reference .pa-values-art{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  .phx-about-reference .pa-values-art img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    opacity:.82!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
    mix-blend-mode:normal!important;
  }
  .phx-about-reference .pa-values-col{
    width:100%!important;
    min-width:0!important;
    padding:14px 12px!important;
    background:rgba(5,44,52,.62)!important;
    border-radius:10px!important;
  }
  .phx-about-reference .pa-values li{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    gap:7px!important;
    font-size:12px!important;
    line-height:1.85!important;
  }
  .phx-about-reference .pa-values li i{
    flex:0 0 auto!important;
    transform:none!important;
  }
  .phx-about-reference .pa-values .pa-value-text{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    transform:none!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* Mobile journey: force a predictable two-column flow and neutralize every
   desktop percentage position/transform. */
@media (max-width:600px){
  .phx-about-reference #phx-journey .pa-journey-track{
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:calc(100% - 20px)!important;
    height:auto!important;
    min-height:0!important;
    margin:12px auto 0!important;
    padding:6px 0 16px!important;
    gap:24px 8px!important;
    overflow:visible!important;
    transform:none!important;
  }
  .phx-about-reference #phx-journey .pa-j-item,
  .phx-about-reference #phx-journey .pa-j-item:nth-child(odd),
  .phx-about-reference #phx-journey .pa-j-item:nth-child(even){
    position:relative!important;
    inset:auto!important;
    right:auto!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
  }
  .phx-about-reference #phx-journey .pa-j-icon{
    transform:none!important;
    margin:0 auto!important;
  }
  .phx-about-reference #phx-journey .pa-j-item > b,
  .phx-about-reference #phx-journey .pa-j-item > span{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .phx-about-reference #phx-journey .pa-wave{display:none!important;}
}

/* ============================================================
   ABOUT PAGE — VERIFIED TARGETED REPAIR
   Scope: ONLY .phx-about-reference / body.phx-about-page
   Do not use these rules outside the About page.
   ============================================================ */

/* 1) SHORT LAPTOP 1366x600 — hero: prevent the two columns from
   exceeding the available width and make the Phoenix visual stay
   completely inside its own column. */
@media (min-width:1201px) and (max-height:650px){
  body.phx-about-page .phx-about-reference .pa-hero-inner{
    width:calc(100% - 56px)!important;
    max-width:1320px!important;
    grid-template-columns:minmax(0,1fr) minmax(390px,.72fr)!important;
    gap:24px!important;
    padding:76px 12px 20px!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-art{
    min-width:0!important;
    width:100%!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-art img{
    display:block!important;
    width:100%!important;
    max-width:560px!important;
    height:280px!important;
    max-height:280px!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-copy{
    min-width:0!important;
    width:100%!important;
    max-width:520px!important;
    justify-self:end!important;
    transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-copy h1,
  body.phx-about-page .phx-about-reference .pa-hero-copy p{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}

/* 2) WHY PHOENIX — laptop: show the complete left image instead of
   cropping its left side. The image keeps its own half of the section. */
@media (min-width:1201px) and (min-height:651px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why-inner{
    min-height:430px!important;
    height:auto!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media{
    min-height:430px!important;
    height:430px!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
    background:#eef7f7!important;
  }
}

/* 3) VALUES — short laptop: keep both text columns readable and
   neutralize only the managed per-item translations that cause broken lines. */
@media (min-width:901px) and (max-height:500px){
  body.phx-about-page .phx-about-reference .pa-values{
    min-height:410px!important;
    height:auto!important;
  }
  body.phx-about-page .phx-about-reference .pa-values-inner{
    min-height:410px!important;
    height:auto!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:0!important;
  }
  body.phx-about-page .phx-about-reference .pa-values-art{display:none!important;}
  body.phx-about-page .phx-about-reference .pa-values-col{
    min-width:0!important;
    padding:30px 48px!important;
    background:rgba(5,44,52,.04)!important;
  }
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head span,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-text,
  body.phx-about-page .phx-about-reference .pa-values li i{
    transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-values li{
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    gap:8px!important;
    font-size:12px!important;
    line-height:1.8!important;
  }
  body.phx-about-page .phx-about-reference .pa-values .pa-value-text{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* 4) CTA — short laptop: preserve the complete right-side text and
   button; do not let the managed content offset push it outside. */
@media (min-width:901px) and (max-height:650px){
  body.phx-about-page .phx-about-reference .pa-cta{
    min-height:360px!important;
    height:auto!important;
    background-image:var(--pa-cta-bg)!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner{
    width:calc(100% - 56px)!important;
    max-width:1120px!important;
    min-height:360px!important;
    height:auto!important;
    margin:0 auto!important;
    padding:42px 48px!important;
    transform:none!important;
    box-sizing:border-box!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner > *{
    max-width:600px!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner h2,
  body.phx-about-page .phx-about-reference .pa-cta-inner p{
    overflow-wrap:anywhere!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-button{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    align-self:flex-end!important;
  }
}

/* 5) STORY / ABOUT PHOENIX — mobile: media must be in the visible
   flow, not behind the isolated section. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference .pa-story{
    overflow:hidden!important;
    isolation:isolate!important;
  }
  body.phx-about-page .phx-about-reference .pa-story-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:calc(100% - 20px)!important;
    min-height:0!important;
    padding:28px 0!important;
    gap:18px!important;
    position:relative!important;
    z-index:2!important;
  }
  body.phx-about-page .phx-about-reference .pa-story-copy{
    order:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:0!important;
    transform:none!important;
    position:relative!important;
    z-index:3!important;
  }
  body.phx-about-page .phx-about-reference .pa-story-media{
    order:2!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:220px!important;
    max-width:none!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:4!important;
    pointer-events:auto!important;
    transform:none!important;
    overflow:hidden!important;
    background:#021d24!important;
  }
  body.phx-about-page .phx-about-reference .pa-story-media .pa-story-video,
  body.phx-about-page .phx-about-reference .pa-story-media > img{
    position:relative!important;
    z-index:5!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:220px!important;
    min-height:220px!important;
    max-height:none!important;
    margin:0!important;
    object-fit:cover!important;
  }
  body.phx-about-page .phx-about-reference .pa-story-media .pa-story-play{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    z-index:20!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
}

/* 6) WHY PHOENIX — mobile: restore the actual image above the section
   background and keep the content below it. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference .pa-why{
    overflow:hidden!important;
    isolation:isolate!important;
    min-height:0!important;
    padding:0!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-height:0!important;
    padding:0!important;
    gap:0!important;
    position:relative!important;
    z-index:2!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media{
    order:1!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:240px!important;
    min-height:240px!important;
    max-width:none!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:3!important;
    pointer-events:none!important;
    transform:none!important;
    overflow:hidden!important;
    background:#eef7f7!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-list{
    order:2!important;
    width:100%!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    padding:28px 16px 32px!important;
    position:relative!important;
    z-index:4!important;
    background:#eef7f7!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-items{width:100%!important;}
  body.phx-about-page .phx-about-reference .pa-why-item{
    grid-template-columns:30px 1px minmax(0,1fr) 34px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-copy{
    min-width:0!important;
    width:100%!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-copy h3,
  body.phx-about-page .phx-about-reference .pa-why-copy p{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}

/* 7) VALUES — mobile: retain the real background image and make every
   text row stay inside the viewport. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference .pa-values{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    background-image:var(--pa-values-bg)!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  body.phx-about-page .phx-about-reference .pa-values-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:20px 12px 24px!important;
    gap:14px!important;
    position:relative!important;
    z-index:2!important;
  }
  body.phx-about-page .phx-about-reference .pa-values-art{
    display:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-values-col{
    width:100%!important;
    min-width:0!important;
    padding:14px 12px!important;
    background:rgba(5,44,52,.82)!important;
    border-radius:10px!important;
  }
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head span,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-text,
  body.phx-about-page .phx-about-reference .pa-values li i{
    transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head{
    width:100%!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
  }
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head h2{
    min-width:0!important;
    max-width:calc(100% - 38px)!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.5!important;
  }
  body.phx-about-page .phx-about-reference .pa-values ul{width:100%!important;}
  body.phx-about-page .phx-about-reference .pa-values li{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:7px!important;
    text-align:right!important;
    line-height:1.9!important;
  }
  body.phx-about-page .phx-about-reference .pa-values .pa-value-text{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* 8) JOURNEY — mobile: all item positions are controlled by the grid,
   not the desktop percentage/transform coordinates. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference #phx-journey .pa-journey-track{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:calc(100% - 20px)!important;
    height:auto!important;
    min-height:0!important;
    margin:12px auto 0!important;
    padding:8px 0 20px!important;
    gap:26px 8px!important;
    overflow:visible!important;
  }
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item,
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item:nth-child(odd),
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item:nth-child(even){
    position:relative!important;
    inset:auto!important;
    right:auto!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
  }
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-icon{
    transform:none!important;
    margin:0 auto!important;
  }
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item > b,
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item > span{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

/* ============================================================
   ABOUT PAGE — V5 VERIFIED RESPONSIVE REPAIR
   LAST OVERRIDE — page scoped only
   ============================================================ */
body.phx-about-page .phx-about-reference{overflow-x:hidden!important;max-width:100%!important;}
body.phx-about-page .phx-about-reference img,
body.phx-about-page .phx-about-reference video{max-width:100%;}

/* 1. HERO — short laptop: never let the artwork/copy share an overflowing grid. */
@media (min-width:901px) and (max-height:650px){
  body.phx-about-page .phx-about-reference .pa-hero{height:auto!important;min-height:600px!important;max-height:none!important;}
  body.phx-about-page .phx-about-reference .pa-hero-inner{
    width:min(1280px,calc(100% - 64px))!important;
    min-height:600px!important;height:auto!important;
    grid-template-columns:minmax(0,1fr) minmax(360px,.72fr)!important;
    gap:28px!important;padding:34px 18px!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-art{min-width:0!important;width:100%!important;overflow:hidden!important;justify-content:flex-start!important;}
  body.phx-about-page .phx-about-reference .pa-hero-art img{width:100%!important;max-width:600px!important;height:auto!important;max-height:300px!important;object-fit:contain!important;object-position:center!important;}
  body.phx-about-page .phx-about-reference .pa-hero-copy{width:100%!important;max-width:100%!important;min-width:0!important;transform:none!important;}
  body.phx-about-page .phx-about-reference .pa-hero-copy h1,
  body.phx-about-page .phx-about-reference .pa-hero-copy p{max-width:100%!important;overflow-wrap:anywhere!important;}
}

/* 2. WHY PHOENIX — laptop: show the complete left image, not a cover crop. */
@media (min-width:901px) and (max-width:1400px) and (min-height:651px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important;}
  body.phx-about-page .phx-about-reference .pa-why-media{width:100%!important;transform:none!important;overflow:hidden!important;}
  body.phx-about-page .phx-about-reference .pa-why-media img{width:100%!important;height:auto!important;aspect-ratio:auto!important;max-height:100%!important;object-fit:contain!important;object-position:left center!important;margin:0!important;}
}

/* 3. VALUES — short laptop: remove stored editor transforms which push text out. */
@media (min-width:901px) and (max-height:560px){
  body.phx-about-page .phx-about-reference .pa-values{min-height:220px!important;height:auto!important;}
  body.phx-about-page .phx-about-reference .pa-values-inner{width:calc(100% - 48px)!important;min-height:220px!important;height:auto!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important;}
  body.phx-about-page .phx-about-reference .pa-values-art{display:none!important;}
  body.phx-about-page .phx-about-reference .pa-values-col{min-width:0!important;padding:18px 12px!important;}
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head span,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head h2,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-text,
  body.phx-about-page .phx-about-reference .pa-values li i{transform:none!important;position:static!important;}
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head h2{max-width:calc(100% - 40px)!important;overflow-wrap:anywhere!important;}
  body.phx-about-page .phx-about-reference .pa-values li{min-width:0!important;align-items:flex-start!important;}
}

/* 4 + 8. STORY / DIGITAL TRANSFORMATION — narrow screens: use normal flow. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference .pa-story-inner{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important;}
  body.phx-about-page .phx-about-reference .pa-story-copy{order:1!important;width:100%!important;min-width:0!important;transform:none!important;position:relative!important;z-index:5!important;}
  body.phx-about-page .phx-about-reference .pa-story-media{order:2!important;width:100%!important;min-width:0!important;max-width:100%!important;transform:none!important;position:relative!important;z-index:6!important;opacity:1!important;visibility:visible!important;overflow:hidden!important;isolation:isolate!important;}
  body.phx-about-page .phx-about-reference .pa-story-media video.pa-story-video{display:block!important;width:100%!important;height:220px!important;min-height:190px!important;max-height:none!important;opacity:1!important;visibility:visible!important;position:relative!important;z-index:1!important;}
  body.phx-about-page .phx-about-reference .pa-story-media .pa-story-play{display:grid!important;position:absolute!important;z-index:20!important;pointer-events:auto!important;}

  body.phx-about-page .phx-about-reference .pa-cta{min-height:300px!important;background-image:var(--pa-cta-bg)!important;background-size:cover!important;background-position:center center!important;}
  body.phx-about-page .phx-about-reference .pa-cta-inner{width:calc(100% - 24px)!important;min-height:300px!important;height:auto!important;transform:none!important;padding:34px 12px!important;}
  body.phx-about-page .phx-about-reference .pa-cta-inner > *{transform:none!important;max-width:100%!important;}
  body.phx-about-page .phx-about-reference .pa-cta-button{display:inline-flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:5!important;}
}

/* 5. VIDEO — native playback fallback on touch/mobile. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference .pa-story-video{pointer-events:auto!important;}
}

/* 6. VALUES — mobile: keep the actual selected background image and contain every text node. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference .pa-values{
    height:auto!important;min-height:0!important;overflow:hidden!important;
    background-image:var(--pa-values-bg)!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;
  }
  body.phx-about-page .phx-about-reference .pa-values:before{background:linear-gradient(90deg,rgba(3,36,43,.70),rgba(3,36,43,.38),rgba(3,36,43,.70))!important;}
  body.phx-about-page .phx-about-reference .pa-values-inner{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:calc(100% - 24px)!important;height:auto!important;min-height:0!important;gap:0!important;padding:18px 0 24px!important;}
  body.phx-about-page .phx-about-reference .pa-values-art{display:none!important;}
  body.phx-about-page .phx-about-reference .pa-values-col{width:100%!important;min-width:0!important;padding:18px 8px!important;background:rgba(3,36,43,.55)!important;}
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head span,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head h2,
  body.phx-about-page .phx-about-reference .pa-values .pa-value-text,
  body.phx-about-page .phx-about-reference .pa-values li i{transform:none!important;position:static!important;}
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head{width:100%!important;min-width:0!important;display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;}
  body.phx-about-page .phx-about-reference .pa-values .pa-value-head h2{min-width:0!important;max-width:calc(100% - 42px)!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.5!important;}
  body.phx-about-page .phx-about-reference .pa-values li{display:flex!important;width:100%!important;min-width:0!important;align-items:flex-start!important;gap:7px!important;}
  body.phx-about-page .phx-about-reference .pa-values li .pa-value-text{display:block!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;}
}

/* 7. JOURNEY — mobile: cancel all desktop absolute coordinates and transforms. */
@media (max-width:600px){
  body.phx-about-page .phx-about-reference #phx-journey .pa-journey-head{position:relative!important;inset:auto!important;width:calc(100% - 24px)!important;margin:0 auto 18px!important;transform:none!important;}
  body.phx-about-page .phx-about-reference #phx-journey .pa-journey-track{position:relative!important;inset:auto!important;width:calc(100% - 24px)!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:8px 0 20px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 8px!important;overflow:visible!important;transform:none!important;}
  body.phx-about-page .phx-about-reference #phx-journey .pa-wave{position:absolute!important;left:0!important;right:0!important;top:72px!important;}
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item,
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item:nth-child(odd),
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item:nth-child(even){position:relative!important;inset:auto!important;right:auto!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;min-width:0!important;margin:0!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;}
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-icon{position:relative!important;transform:none!important;margin:0 auto!important;}
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item > b,
  body.phx-about-page .phx-about-reference #phx-journey .pa-j-item > span{position:static!important;inset:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;transform:none!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;}
}

/* V8 — WHY PHOENIX / 1351x776 laptop: preserve the complete source image.
   Do not crop it and do not replace its right side with white. */
@media (min-width:1200px) and (min-height:700px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why-media{
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    background:transparent!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media:after{
    display:none!important;
    content:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:left top!important;
    margin:0!important;
    border-radius:0!important;
  }
}

/* V9 — WHY PHOENIX / laptop 1351x776
   Keep the image flush to the left edge and fill its entire half.
   Do not create a white letterbox or center the crop. */
@media (min-width:1200px) and (min-height:700px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why-media{
    width:100%!important;
    height:420px!important;
    min-height:420px!important;
    overflow:hidden!important;
    background:transparent!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    object-fit:cover!important;
    object-position:left center!important;
    aspect-ratio:auto!important;
  }
}

/* FINAL TARGETED FIX — WHY PHOENIX LAPTOP 1351x776
   Restore the actual image element in the left column.
   Do not use the section background/overlay here: they were creating the
   white/faded area and hiding the real image geometry. */
@media (min-width:901px) and (max-width:1400px) and (min-height:651px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why{
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    background:#eef7f7!important;
    isolation:isolate!important;
  }
  body.phx-about-page .phx-about-reference .pa-why:before,
  body.phx-about-page .phx-about-reference .pa-why:after{
    display:none!important;
    content:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-inner{
    position:relative!important;
    width:min(1120px,calc(100% - 48px))!important;
    min-height:0!important;
    height:auto!important;
    margin:0 auto!important;
    padding:26px 0 20px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important;
    gap:34px!important;
    align-items:center!important;
    direction:ltr!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media{
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    overflow:hidden!important;
    z-index:1!important;
    transform:none!important;
    border-radius:var(--pa-why-r,9px)!important;
    box-shadow:0 12px 35px rgba(12,50,56,.12)!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:0!important;
    border-radius:var(--pa-why-r,9px)!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-list{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    z-index:2!important;
  }
}

/* V11 — WHY PHOENIX / LAPTOP
   The requirement here is literal: the complete source image must fill the
   entire left grid area, with ZERO cropping and ZERO white/empty letterbox.
   Therefore the image is stretched to the exact bounds of the left column.
   This is intentionally limited to the laptop viewport range only. */
@media (min-width:901px) and (max-width:1400px) and (min-height:651px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why-inner{
    align-items:stretch!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    align-self:stretch!important;
    overflow:hidden!important;
    background:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media:before,
  body.phx-about-page .phx-about-reference .pa-why-media:after{
    display:none!important;
    content:none!important;
    background:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    aspect-ratio:auto!important;
    object-fit:fill!important;
    object-position:center center!important;
    border-radius:0!important;
  }
}

/* V13 — WHY PHOENIX / LAPTOP 1351x776
   Keep the original inner fade. Remove only the unwanted white strip between
   the laptop's left edge and the image. The image itself reaches the left edge
   of the section and is stretched to the full left-column bounds so no source
   area is cropped. */
@media (min-width:901px) and (max-width:1400px) and (min-height:651px) and (max-height:850px){
  body.phx-about-page .phx-about-reference .pa-why-inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:26px 48px 20px 0!important;
    box-sizing:border-box!important;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important;
    gap:34px!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    align-self:stretch!important;
    overflow:hidden!important;
    position:relative!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:fill!important;
    object-position:center center!important;
    border:0!important;
    border-radius:0!important;
  }
  /* Restore the intended fade between the image and the text. */
  body.phx-about-page .phx-about-reference .pa-why-media:after{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      transparent 0%,
      transparent 52%,
      color-mix(in srgb,var(--about-why-bg,#fff) 18%,transparent) 68%,
      color-mix(in srgb,var(--about-why-bg,#fff) 72%,transparent) 88%,
      var(--about-why-bg,#fff) 100%)!important;
  }
}


/* ============================================================
   PHOENIX ABOUT — targeted short-laptop hero separation fix
   Scope: About page only, 901–1400px wide and short viewports.
   Keeps the existing hero art and copy in separate grid columns.
   ============================================================ */
@media (min-width:901px) and (max-width:1400px) and (max-height:650px){
  body.phx-about-page .phx-about-reference .pa-hero{
    height:600px!important;
    min-height:600px!important;
    max-height:600px!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-inner{
    box-sizing:border-box!important;
    width:calc(100% - 48px)!important;
    max-width:1280px!important;
    height:600px!important;
    min-height:600px!important;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important;
    gap:clamp(24px,2.2vw,32px)!important;
    padding:48px 12px 20px!important;
    align-items:center!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-art{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    justify-content:flex-start!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-art img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:clamp(220px,42vh,300px)!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-copy{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    justify-self:stretch!important;
    transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-copy h1{
    max-width:100%!important;
    font-size:clamp(30px,2.75vw,38px)!important;
    line-height:1.45!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.phx-about-page .phx-about-reference .pa-hero-copy p{
    max-width:100%!important;
    font-size:clamp(13px,1.05vw,15px)!important;
    line-height:1.85!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}

/* FINAL CORRECTION — About page > Why Phoenix.
   Laptop/small desktop only: restore the full-height left image column from
   the reference layout. The image must fill the column, not shrink to its
   intrinsic height; keep the right-hand list and section layout unchanged. */
@media (min-width:901px) and (max-width:1400px) {
  body.phx-about-page .phx-about-reference .pa-why {
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    isolation:isolate!important;
    background:var(--about-light-bg,#eef7f7)!important;
  }
  body.phx-about-page .phx-about-reference .pa-why:before,
  body.phx-about-page .phx-about-reference .pa-why:after {
    display:none!important;
    content:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-inner {
    display:grid!important;
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0 48px 0 0!important;
    gap:34px!important;
    direction:ltr!important;
    box-sizing:border-box!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media {
    position:relative!important;
    grid-column:1!important;
    grid-row:1!important;
    align-self:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media:before {
    display:none!important;
    content:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-media:after {
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      transparent 0%,
      transparent 52%,
      color-mix(in srgb,var(--about-why-bg,#fff) 18%,transparent) 68%,
      color-mix(in srgb,var(--about-why-bg,#fff) 72%,transparent) 88%,
      var(--about-why-bg,#fff) 100%)!important;
  }
  body.phx-about-page .phx-about-reference .pa-why-list {
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:26px 0 20px!important;
    position:relative!important;
    z-index:3!important;
    box-sizing:border-box!important;
  }
}


/* FINAL IMAGE-CROP FIX — About page > Why Phoenix.
   Only laptop/small-desktop widths. Preserve the existing full-height left
   column and fade; stretch the source image to the column bounds so every
   part of the original image remains visible (no object-fit:cover crop). */
@media (min-width:901px) and (max-width:1400px) {
  body.phx-about-page .phx-about-reference .pa-why-media img {
    object-fit:fill!important;
    object-position:center center!important;
  }
}


/* TARGETED FIX — About page > Digital transformation CTA only.
   Keep the CTA button's managed position; place the copy above it on the right. */
@media (min-width:601px) and (max-width:1400px){
  body.phx-about-page .phx-about-reference .pa-cta{
    min-height:226px!important;height:auto!important;overflow:hidden!important;
    background-image:var(--pa-cta-bg)!important;background-size:100% 100%!important;
    background-position:left center!important;background-repeat:no-repeat!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner{
    width:calc(100% - 48px)!important;max-width:1120px!important;
    min-height:226px!important;height:auto!important;margin:0 auto!important;
    padding:24px 0!important;box-sizing:border-box!important;
    display:flex!important;flex-direction:column!important;align-items:flex-end!important;
    justify-content:center!important;text-align:right!important;transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner > .pa-kicker,
  body.phx-about-page .phx-about-reference .pa-cta-inner > h2,
  body.phx-about-page .phx-about-reference .pa-cta-inner > p{
    width:min(390px,100%)!important;max-width:390px!important;min-width:0!important;
    align-self:flex-end!important;text-align:right!important;overflow-wrap:normal!important;
    word-break:normal!important;transform:none!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner > p{margin-bottom:14px!important;}
  body.phx-about-page .phx-about-reference .pa-cta-button{
    align-self:flex-end!important;
    /* Keep the existing inline button transform, width and font size unchanged. */
  }
}
@media (min-width:601px) and (max-width:900px){
  body.phx-about-page .phx-about-reference .pa-cta-inner{
    width:calc(100% - 32px)!important;padding:22px 0!important;
  }
  body.phx-about-page .phx-about-reference .pa-cta-inner > .pa-kicker,
  body.phx-about-page .phx-about-reference .pa-cta-inner > h2,
  body.phx-about-page .phx-about-reference .pa-cta-inner > p{
    width:min(360px,100%)!important;max-width:360px!important;
  }
}


/* Corrected direction: Company Goals moves right; Phoenix Values moves left. */
@media screen and (min-width: 901px) and (max-width: 1366px) and (min-height: 501px) {
  body.phx-about-page section.pa-values > .pa-values-inner > .pa-values-col.pa-values-left {
    position: relative !important;
    left: 130px !important;
    right: auto !important;
  }
  body.phx-about-page section.pa-values > .pa-values-inner > .pa-values-col.pa-values-right {
    position: relative !important;
    right: 130px !important;
    left: auto !important;
  }
}


/* Minimal targeted fix: journey heading/description above the timeline, centered. */
body.phx-about-page .phx-about-reference #phx-journey .pa-journey-head{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(1120px,calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:18px 0 0!important;
  text-align:center!important;
  transform:none!important;
}
body.phx-about-page .phx-about-reference #phx-journey .pa-journey-head .pa-section-head{
  width:100%!important;
  justify-content:center!important;
  text-align:center!important;
  margin:0 auto 6px!important;
}
body.phx-about-page .phx-about-reference #phx-journey .pa-journey-head p{
  width:min(760px,100%)!important;
  max-width:760px!important;
  margin:0 auto!important;
  text-align:center!important;
}
body.phx-about-page .phx-about-reference #phx-journey .pa-journey-track{
  position:relative!important;
  inset:auto!important;
  margin:18px auto 0!important;
  transform:none!important;
}

/* Mobile only: Phoenix Values ticks must sit to the right, before each text. */
@media screen and (max-width:600px){
  body.phx-about-page .phx-about-reference section.pa-values .pa-values-right ul li{
    display:flex!important;
    flex-direction:row!important;
    direction:rtl!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    gap:7px!important;
    text-align:right!important;
  }
  body.phx-about-page .phx-about-reference section.pa-values .pa-values-right ul li > i{
    order:0!important;
    flex:0 0 auto!important;
    margin:2px 0 0!important;
  }
  body.phx-about-page .phx-about-reference section.pa-values .pa-values-right ul li > .pa-value-text{
    order:1!important;
    display:block!important;
    flex:1 1 0!important;
    min-width:0!important;
    text-align:right!important;
  }
}


/* Mobile only — About page > Goals and Phoenix Values typography.
   Increase the two column headings by 3px and their list text by 5px.
   Keep tablet, laptop and larger layouts unchanged. */
@media screen and (max-width:600px){
  body.phx-about-page .phx-about-reference section.pa-values .pa-value-head h2{
    font-size:23px!important;
  }
  body.phx-about-page .phx-about-reference section.pa-values ul li .pa-value-text{
    font-size:17px!important;
    line-height:1.8!important;
  }
}