/* AVRA About Us - Figma 25502:1224 (desktop) / 25502:2540 (mobile)
   Grid: 120 gutter | 384 images | 48 | 816 text | 48 | 384 image | 120 = 1920 */

.avra-abhero__label { opacity: .8; font-feature-settings: 'salt' 1; }
.avra-abhero .avra-abhero__title { max-width: 672px !important; }
.avra-abhero .avra-abhero__intro { max-width: 620px !important; font-feature-settings: 'ss01' 1; }

/* body paragraphs carry their own rhythm; kill the editor's default margins */
.avra-abbody p { margin: 0 0 20px; }
.avra-abbody p:last-child { margin-bottom: 0; }

/* LESSON: never force width on an image whose ratio is not square - box it */
.avra-abimg img { display: block; width: 100%; height: auto; }

/* LESSON: fixed columns that need EXACTLY the container width wrap the moment
   a scrollbar takes a few px. Fluid below the design width, never exact-fit. */
@media (min-width: 768px) {
  .avra-abrow { flex-wrap: nowrap !important; }
  .avra-abrow > .elementor-element-abcolL,
  .avra-abrow > .elementor-element-abcolR {
    width: auto !important;
    flex: 0 1 384px !important;
    min-width: 0;
  }
  .avra-abrow > .elementor-element-abtext {
    width: auto !important;
    flex: 1 1 816px !important;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .avra-abrow, .avra-abmv { flex-direction: column !important; }
  .avra-abrow > .avra-abcol, .avra-abmv > .avra-abcol { width: 100% !important; }
  .avra-abmv { margin-left: 0 !important; }
  /* mobile export: images sit under the text, not beside it */
  .avra-abrow > .elementor-element-abcolL { order: 2; }
  .avra-abrow > .elementor-element-abtext { order: 1; }
  .avra-abrow > .elementor-element-abcolR { order: 3; }
  .avra-abbody p { margin-bottom: 16px; }
}

/* Mission/Vision indent via padding, not margin: margin-left on a 100%-wide
   container pushes it past the gutter. Columns stay fluid so a scrollbar can
   never force a wrap (the exact-fit trap). */
.avra-abmv { flex-wrap: nowrap; }
.avra-abmv > .avra-abcol {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0;
}
@media (min-width: 1920px) {
  .avra-abmv { padding-left: 432px; }
}
@media (max-width: 767px) {
  .avra-abmv { flex-wrap: wrap; padding-left: 0 !important; }
}

/* ---- collage --------------------------------------------------------------
   Two overlapping plates in the 384 column: the atrium (341x427, natural size
   of 2_rectangle_18 at 1x) with the city crossing (252x302) overlapping its
   lower right. Heights come from the assets, so no cropping is needed. */
.avra-abcollage { position: relative; min-height: 561px; }
.avra-abcollage .avra-abimg { margin: 0; }
.avra-abimg--a { width: 341px; max-width: 100%; }
.avra-abimg--b {
  position: absolute;
  left: 132px;
  top: 259px;
  width: 252px;
  max-width: 100%;
}
.avra-abimg--cafe img { aspect-ratio: 1 / 1; object-fit: cover; }

/* below the design width the collage scales with its column */
@media (max-width: 1919px) and (min-width: 768px) {
  .avra-abcollage { min-height: 0; aspect-ratio: 384 / 561; }
  .avra-abimg--a { width: 89%; }
  .avra-abimg--b { left: 34%; top: 46%; width: 66%; }
}

/* The mobile export has no imagery in this section - text only. */
@media (max-width: 767px) {
  .avra-abcollage,
  .elementor-element-abcolR { display: none !important; }
}


/* CTA inner is authored at 816 inside a 1920 band; below that width the fixed
   value overflows the viewport. Cap it. */
.elementor-element-abctatx { width: 100% !important; max-width: 816px; min-width: 0; }

/* ---- mobile pass measured against the supplied export ---------------------
   hero 670, ABOUT label 722, heading 764, lead 924, body 1056,
   OUR MISSION 1509, CTA 2282. Body drops to the 16/26 mobile scale used
   everywhere else on the site; 18/28 is the desktop value. */
@media (max-width: 767px) {
  .avra-abhero { min-height: 670px !important; }
  .avra-abhero .avra-abhero__intro p { font-size: 18px !important; line-height: 28px !important; }

  /* the 56px desktop gap under the section label is ~3 on mobile */
  .avra-abrow { margin-top: 32px !important; }

  .elementor-element-abhead h2 { font-size: 36px !important; line-height: 44px !important; }
  .elementor-element-ablead  { margin-top: 32px !important; }
  .elementor-element-ablead p { font-size: 20px !important; line-height: 28px !important; }

  .avra-abbody { margin-top: 40px !important; }
  .avra-abbody p { font-size: 16px !important; line-height: 26px !important; }

  .avra-abmv { margin-top: 48px !important; }
  .elementor-element-abmissh h3,
  .elementor-element-abvish h3 { font-size: 28px !important; line-height: 36px !important; }
  .elementor-element-abmissp p,
  .elementor-element-abvisp p { font-size: 16px !important; line-height: 26px !important; }
}

/* 48px of breathing room above the footer, as on the other mobile frames -
   the CTA band and the footer logo were flush at 0. */
@media (max-width: 767px) {
  .avra-abcta { margin-bottom: 48px; }
}