/**
 * About page — hero + story (exact design mesh scene + zigzag blocks).
 */

body.page-id-9 {
  --beheshti-about-navy: #021a51;
  --beheshti-about-ink: #010616;
  /* the star lines bleed past the 1440 frame to the viewport edge */
  overflow-x: hidden;
  /* the hero is drawn at 1440x804; between 1024 and 1440 it scales with the
	   viewport so the diagonal cut and the type keep the same proportions */
  --beheshti-hero-h: min(804px, 55.83vw);
}

/* ---- Hero ---- */
body.page-id-9 #beheshti-about-hero {
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--beheshti-about-navy) !important;
  height: var(--beheshti-hero-h) !important;
  min-height: var(--beheshti-hero-h) !important;
  max-height: var(--beheshti-hero-h) !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

body.page-id-9 #beheshti-about-hero::after {
  display: none !important;
}

body.page-id-9 .beheshti-about-hero::after,
body.page-id-9 .beheshti-about-story::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    /* one even 111px band, so the hero and story strips meet without a seam
       (overlapping them doubled the alpha into a bright hairline) */
    right: 0 !important;
    width: 111px !important;
    height: auto !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: url(about-edge-strip.png?v=2) no-repeat right center / 100% 100% !important;
}

body.page-id-9 .beheshti-about-hero {
  position: relative;
  isolation: isolate;
  height: var(--beheshti-hero-h);
  min-height: var(--beheshti-hero-h);
  color: #fff;
  overflow: visible;
  background: var(--beheshti-about-navy);
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

body.page-id-9 .beheshti-about-hero__lines {
  display: none !important;
}

body.page-id-9 .beheshti-about-hero__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  height: var(--beheshti-hero-h);
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(0 0, 99% 0, 88.5% 100%, 0 100%);
}

body.page-id-9 .beheshti-about-hero__media img {
  display: block;
  width: 100%;
  height: var(--beheshti-hero-h) !important;
  object-fit: cover;
  object-position: 28% center;
}

body.page-id-9 .beheshti-about-hero__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 50%;
  height: var(--beheshti-hero-h);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  text-align: right;
}

body.page-id-9 .beheshti-about-hero__en {
  margin: 0;
  font-family: Aria, sans-serif;
  font-size: min(36px, 2.5vw);
  font-weight: 200;
  line-height: 1.1;
  color: #fff;
}

body.page-id-9 .beheshti-about-hero__fa {
  margin: min(27px, 1.88vw) 0 0;
  font-family: Aria, sans-serif;
  font-size: min(36px, 2.5vw);
  font-weight: 200;
  line-height: 1.1;
  color: #fff;
}

body.page-id-9 .beheshti-about-hero__bio {
  max-width: 460px;
  margin-right: 0;
  margin-left: auto;
  padding-right: 130px;
  padding-bottom: 80px;
}

body.page-id-9 .beheshti-about-hero__bio p {
  margin: 0;
  font-family: Aria, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(252, 252, 252, 0.95);
}

/* ---- Story ----
 * Figma "About me — desktop": a flat navy band, a centre hairline crossed by
 * two diagonals with a sparkle at each crossing, and four text blocks that
 * alternate left/right with a cyan square marker leading each heading.
 * The old photo collage layers are retired.
 */
body.page-id-9 #beheshti-about-story {
  position: relative !important;
  overflow: visible !important;
  background: var(--beheshti-about-navy) !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

body.page-id-9 #beheshti-about-story .elementor-container,
body.page-id-9 #beheshti-about-story .elementor-column,
body.page-id-9 #beheshti-about-story .elementor-widget,
body.page-id-9 #beheshti-about-story .elementor-widget-container,
body.page-id-9 #beheshti-about-story .elementor-widget-html {
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page-id-9 #beheshti-about-story > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

body.page-id-9 .beheshti-about-story {
  position: relative !important;
  color: #fff !important;
  padding: 150px 0 157px !important;
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  background: var(--beheshti-about-navy) !important;
  overflow: visible !important;
  /* the star lines may rise into the hero but must stop at the footer */
  clip-path: inset(-2000px 0 0 0) !important;
  z-index: 1 !important;
}

/* the collage and baked-in scene are no longer part of the design */
body.page-id-9 .beheshti-about-story__bg,
body.page-id-9 .beheshti-about-story__scene,
body.page-id-9 .beheshti-about-story__deco,
body.page-id-9 .beheshti-about-story__lines img {
  display: none !important;
}

body.page-id-9 .beheshti-about-story__lines {
  position: absolute !important;
  top: -140px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* the SVG tips sit on the element edges, so both diagonals end exactly on
     the frame edges */
  width: 100% !important;
  height: 1863.73px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: url(about-story-lines.svg?v=5) no-repeat center top !important;
  background-size: 100% 100% !important;
}

body.page-id-9 .beheshti-about-story__list {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  /* the frames use two unequal text columns — 572px on the right, 523px on
	   the left — each with a 27px gutter for the square marker */
  grid-template-columns: 524px 547px !important;
  column-gap: 146px !important;
  row-gap: 0px !important;
  max-width: 1228px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  direction: rtl !important;
}

body.page-id-9 .beheshti-about-story__item {
  display: block !important;
  position: relative !important;
  direction: rtl !important;
  text-align: right !important;
  /* room for the square marker that leads each heading — RTL start is the
	   right-hand side, which is where the marker sits */
  padding-inline-start: 27px !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* RTL grid: track 1 is the right-hand column */
body.page-id-9 .beheshti-about-story__item--br,
body.page-id-9 .beheshti-about-story__item--tr,
body.page-id-9 .beheshti-about-story__item--right {
  grid-column: 1 !important;
  align-self: start !important;
}

body.page-id-9 .beheshti-about-story__item--tl,
body.page-id-9 .beheshti-about-story__item--bl,
body.page-id-9 .beheshti-about-story__item--left {
  grid-column: 2 !important;
  align-self: start !important;
}

/* one row per block, so the columns alternate down the page instead of
   auto-placement pairing them up side by side */
body.page-id-9 .beheshti-about-story__item:nth-child(1) {
  grid-row: 1 !important;
}

body.page-id-9 .beheshti-about-story__item:nth-child(2) {
  grid-row: 2 !important;
}

body.page-id-9 .beheshti-about-story__item:nth-child(3) {
  grid-row: 3 !important;
}

body.page-id-9 .beheshti-about-story__item:nth-child(4) {
  grid-row: 4 !important;
}

body.page-id-9 .beheshti-about-story__node,
body.page-id-9 .beheshti-about-story__spacer {
  display: none !important;
}

body.page-id-9 .beheshti-about-story__card {
  position: relative !important;
  max-width: none !important;
  text-align: right !important;
  direction: rtl !important;
  padding: 0 !important;
  background: none !important;
  overflow: visible !important;
  margin-top: 10px;
}

body.page-id-9 .beheshti-about-story__title {
  position: relative !important;
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: Aria, sans-serif !important;
  font-size: 28px !important;
  font-weight: 350 !important;
  /* Figma: 35px per line (the two-line last title is 520x70) */
  line-height: 35px !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* cyan square sits on the first-line baseline (کرسی), not below it */
body.page-id-9 .beheshti-about-story__title::after {
  content: '' !important;
  position: absolute !important;
  /* optical seat of 28px Aria in 35px line ≈ top 8–9 */
  top: 8px !important;
  right: -27px !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  background: #99f1ff !important;
  pointer-events: none !important;
}

/* block three turns its three questions into a bulleted list in the frames */
body.page-id-9 .beheshti-about-story__points {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Aria, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-align: right !important;
  margin-top: 20px!important;
}

body.page-id-9 .beheshti-about-story__points li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 18px 0 0 !important;
  position: relative !important;
}

body.page-id-9 .beheshti-about-story__points li::before {
  content: '' !important;
  position: absolute !important;
  top: 9px !important;
  right: 4px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

body.page-id-9 .beheshti-about-story__body + .beheshti-about-story__points {
  margin-top: 22px !important;
}

body.page-id-9 .beheshti-about-story__points + .beheshti-about-story__body {
  margin-top: 22px !important;
}

body.page-id-9 .beheshti-about-story__body {
  margin: 0 !important;
  font-family: Aria, sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
}

@media (max-width: 1024px) {
  body.page-id-9 #beheshti-about-hero,
  body.page-id-9 #beheshti-about-hero > .elementor-container,
  body.page-id-9
    #beheshti-about-hero
    > .elementor-container
    > .elementor-column,
  body.page-id-9 #beheshti-about-hero .elementor-widget-html,
  body.page-id-9
    #beheshti-about-hero
    .elementor-widget-html
    > .elementor-widget-container,
  body.page-id-9 .beheshti-about-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* the mobile frame keeps the diagonal split: portrait top-left, the name
	   over the gradient beside it, the bio underneath */
  body.page-id-9 .beheshti-about-hero {
    position: relative !important;
    display: block !important;
    background: linear-gradient(
      90deg,
      #021a51 0%,
      #021a51 60%,
      #0b3f8f 86%,
      #1fb6d8 100%
    ) !important;
  }

  body.page-id-9 .beheshti-about-hero__media {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 56% !important;
    height: 250px !important;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%) !important;
    order: 0 !important;
  }

  body.page-id-9 .beheshti-about-hero__media img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
  }

  body.page-id-9 .beheshti-about-hero__lines {
    display: none !important;
  }

  body.page-id-9 .beheshti-about-hero__content {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 162px 20px 8px !important;
    gap: 0 !important;
    text-align: right !important;
  }

  body.page-id-9 .beheshti-about-hero__titles {
    text-align: right !important;
  }


  body.page-id-9 .beheshti-about-hero__bio {
    margin-top: 22px !important;
  }

  /* the mobile frame stacks the blocks and drops the decorative lines and
	   the square markers; there is no tablet frame, so the same stack is used
	   from 1023px down with larger type */
  body.page-id-9 .beheshti-about-story {
    padding: 96px 0 80px !important;
    min-height: 0 !important;
  }

  body.page-id-9 .beheshti-about-story__lines {
    display: none !important;
  }

  body.page-id-9 .beheshti-about-story__list {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 88px !important;
    /* the mobile frame gives the text a ~310px measure; cap it near the
		   desktop column width so the line length stays readable between the
		   two frames instead of running the full viewport */
    max-width: 604px !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 62px 0 20px !important;
  }

  body.page-id-9 .beheshti-about-story__item,
  body.page-id-9 .beheshti-about-story__item--tl,
  body.page-id-9 .beheshti-about-story__item--br,
  body.page-id-9 .beheshti-about-story__item--bl,
  body.page-id-9 .beheshti-about-story__item--tr,
  body.page-id-9 .beheshti-about-story__item--left,
  body.page-id-9 .beheshti-about-story__item--right {
    grid-column: 1 !important;
    padding-inline-start: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.page-id-9 .beheshti-about-story__card {
    max-width: none !important;
  }

  body.page-id-9 .beheshti-about-story__title {
    font-size: 22px !important;
    line-height: 34px !important;
    margin-bottom: 10px !important;
  }

  body.page-id-9 .beheshti-about-story__title::after {
    display: none !important;
  }

  body.page-id-9 .beheshti-about-story__body {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

@media (max-width: 767px) {
  body.page-id-9 .beheshti-about-hero__media,
  body.page-id-9 .beheshti-about-hero__media img {
    height: 250px !important;
  }

  body.page-id-9 .beheshti-about-hero__en,
  body.page-id-9 .beheshti-about-hero__fa {
    font-size: 26px !important;
    line-height: 40px !important;
  }

  body.page-id-9 .beheshti-about-story__list {
    padding: 0 62px 0 20px !important;
    row-gap: 88px !important;
  }

  body.page-id-9 .beheshti-about-story__title {
    font-size: 18px !important;
    line-height: 27px !important;
    margin-bottom: 8px !important;
  }

  body.page-id-9 .beheshti-about-story__body {
    font-size: 13px !important;
    line-height: 17.5px !important;
  }
}