/* ==========================================================
   PRAYAN IMPEX — ABOUT / WHO WE ARE
   Reference-2 implementation. Scoped ONLY to #about.
   All copy remains real/selectable HTML.
   ========================================================== */

@media (min-width: 901px) {
  #about.about-section-reference {
    position: relative !important;
    width: 100% !important;
    height: 857px !important;
    min-height: 857px !important;
    max-height: 857px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    isolation: isolate !important;
  }

  #about .about-reference-grid {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  #about .about-reference-left,
  #about .about-reference-right {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- GLOBAL PAGE-GRID ALIGNMENT ---------- */
  /* Reference uses the same 5vw visual origin as the other large desktop sections. */
  #about .about-reference-left .eyebrow {
    position: absolute !important;
    left: 5vw !important;
    top: 87px !important;
    margin: 0 !important;
    color: var(--red) !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 2px !important;
    font-weight: 800 !important;
    z-index: 20 !important;
  }

  #about .about-heading-rule {
    position: absolute !important;
    left: calc(5vw + 181px) !important;
    top: 94px !important;
    width: 214px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--red) !important;
    z-index: 20 !important;
  }
  #about .about-heading-rule i { display: none !important; }
  #about .about-heading-rule b {
    position: absolute !important;
    right: -5px !important;
    top: -3px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--red) !important;
  }

  #about .about-reference-left h2 {
    position: absolute !important;
    left: 5vw !important;
    top: 141px !important;
    width: 610px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #17202b !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 69px !important;
    line-height: .88 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    z-index: 20 !important;
  }
  #about .about-reference-left h2 span { color: var(--red) !important; }

  /* Red marker is part of the heading block, never part of the image. */
  #about .about-reference-left h2::after {
    content: "" !important;
    display: block !important;
    width: 63px !important;
    height: 3px !important;
    margin-top: 25px !important;
    background: var(--red) !important;
  }

  /* ---------- IMAGE: NO RECTANGULAR BORDER ---------- */
  #about .about-visual {
    position: absolute !important;
    left: 0 !important;
    top: 444px !important;
    width: 815px !important;
    height: 413px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    z-index: 2 !important;
    pointer-events: none !important;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 72%, rgba(0,0,0,.94) 82%, rgba(0,0,0,.62) 91%, rgba(0,0,0,.20) 98%, transparent 100%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.20) 3%, rgba(0,0,0,.72) 9%, #000 17%, #000 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image: linear-gradient(to right, #000 0%, #000 72%, rgba(0,0,0,.94) 82%, rgba(0,0,0,.62) 91%, rgba(0,0,0,.20) 98%, transparent 100%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.20) 3%, rgba(0,0,0,.72) 9%, #000 17%, #000 100%) !important;
    mask-composite: intersect !important;
  }
  #about .about-visual img {
    display: block !important;
    width: 815px !important;
    height: 413px !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: left center !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
  }
  #about .about-visual::before,
  #about .about-visual::after { display: none !important; content: none !important; }

  /* ---------- RIGHT COPY: SAME REFERENCE GRID ---------- */
  #about .about-reference-right .about-copy {
    position: absolute !important;
    left: 47.25vw !important;
    top: 137px !important;
    width: 42.75vw !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #17202b !important;
    font-size: 16px !important;
    line-height: 1.58 !important;
    z-index: 20 !important;
  }
  #about .about-reference-right .about-copy p { margin: 0 0 31px !important; }

  #about .about-reference-rule {
    position: absolute !important;
    left: 47.25vw !important;
    top: 395px !important;
    width: 78px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--red) !important;
    z-index: 20 !important;
  }

  /* ---------- FULL-WIDTH CURVE ---------- */
  #about .about-reference-curve {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 469px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: url("assets/about-curve-join-v3.svg") center bottom / 100% 100% no-repeat !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  #about .about-reference-curve::before,
  #about .about-reference-curve::after { display: none !important; content: none !important; }

  /* ---------- CARDS ---------- */
  #about .about-reference-cards {
    position: absolute !important;
    left: 47.25vw !important;
    top: 440px !important;
    width: 42.75vw !important;
    max-width: 762px !important;
    height: 316px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  #about .about-reference-card {
    position: relative !important;
    width: auto !important;
    height: 316px !important;
    min-height: 316px !important;
    margin: 0 !important;
    padding: 28px 28px 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(215,25,32,.12) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }
  #about .about-reference-card:hover,
  #about .about-reference-card:focus-visible,
  #about .about-reference-card.is-active {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(17,19,22,.10) !important;
    outline: none !important;
  }
  #about .about-reference-card strong {
    display: block !important;
    margin: 0 0 18px !important;
    color: var(--red) !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 51px !important;
    line-height: 1 !important;
  }
  #about .about-reference-card h3 {
    margin: 0 0 16px !important;
    color: #111316 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  #about .about-reference-card p {
    margin: 0 !important;
    color: #202832 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }
  #about .about-reference-card i {
    position: absolute !important;
    left: 28px !important;
    bottom: 24px !important;
    width: 43px !important;
    height: 3px !important;
    margin: 0 !important;
    background: var(--red) !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  #about.about-section-reference { height: 820px !important; min-height: 820px !important; max-height: 820px !important; }
  #about .about-reference-left h2 { font-size: 58px !important; width: 500px !important; }
  #about .about-reference-right .about-copy { font-size: 14px !important; }
  #about .about-reference-cards { gap: 10px !important; }
  #about .about-reference-card { padding: 24px 18px 20px !important; }
}

@media (max-width: 900px) {
  #about.about-section-reference {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 55px 0 70px !important;
    overflow: hidden !important;
  }
  #about .about-reference-grid { display: flex !important; flex-direction: column !important; gap: 34px !important; }
  #about .about-reference-left,
  #about .about-reference-right { position: relative !important; }
  #about .about-reference-left .eyebrow,
  #about .about-heading-rule,
  #about .about-reference-left h2,
  #about .about-reference-right .about-copy,
  #about .about-reference-rule,
  #about .about-reference-cards,
  #about .about-visual { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  #about .about-reference-left h2 { font-size: clamp(48px, 13vw, 68px) !important; margin-top: 24px !important; }
  #about .about-visual { margin-top: 32px !important; mask-image: none !important; -webkit-mask-image: none !important; }
  #about .about-visual img { width: 100% !important; height: auto !important; object-fit: contain !important; }
  #about .about-reference-right .about-copy { font-size: 14px !important; max-width: none !important; }
  #about .about-reference-rule { margin: 28px 0 !important; }
  #about .about-reference-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  #about .about-reference-card { width: 100% !important; height: 220px !important; min-height: 220px !important; }
  #about .about-reference-curve { display: none !important; }
}

/* ==========================================================
   ABOUT — DEFINITIVE REFERENCE GEOMETRY / CURVE RESTORE
   This block intentionally overrides the earlier experimental
   About rules. It does not alter any other section.
   ========================================================== */
@media (min-width: 1201px) {
  #about.about-section-reference {
    position: relative !important;
    height: 856px !important;
    min-height: 856px !important;
    max-height: 856px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    isolation: isolate !important;
  }

  #about .about-reference-grid {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* SAME CONTENT ORIGIN AS THE REFERENCE PAGE */
  #about .about-reference-left .eyebrow {
    position: absolute !important;
    left: 4.85vw !important;
    top: 88px !important;
    margin: 0 !important;
    z-index: 20 !important;
  }

  #about .about-heading-rule {
    position: absolute !important;
    left: 15.00vw !important;
    top: 95px !important;
    width: 215px !important;
    height: 2px !important;
    z-index: 20 !important;
  }

  #about .about-reference-left h2 {
    position: absolute !important;
    left: 4.85vw !important;
    top: 140px !important;
    width: 600px !important;
    margin: 0 !important;
    font-size: 69px !important;
    line-height: .88 !important;
    z-index: 20 !important;
  }

  /* Marker belongs to the heading block, not the photograph. */
  #about .about-reference-left h2::after {
    content: "" !important;
    display: block !important;
    width: 63px !important;
    height: 3px !important;
    margin-top: 25px !important;
    background: var(--red) !important;
  }

  /* COMPLETE TRADE VISUAL: natural source aspect ratio, no right/upper box. */
  #about .about-visual {
    position: absolute !important;
    left: 0 !important;
    top: 443px !important;
    width: 815px !important;
    height: 481px !important;
    overflow: visible !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: transparent !important;
    -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 66%, rgba(0,0,0,.98) 76%, rgba(0,0,0,.80) 86%, rgba(0,0,0,.42) 94%, transparent 100%),
      linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.65) 11%, #000 18%, #000 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image: linear-gradient(to right,
      #000 0%, #000 66%, rgba(0,0,0,.98) 76%, rgba(0,0,0,.80) 86%, rgba(0,0,0,.42) 94%, transparent 100%),
      linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.65) 11%, #000 18%, #000 100%) !important;
    mask-composite: intersect !important;
  }

  #about .about-visual img {
    display: block !important;
    width: 815px !important;
    height: 481px !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: left top !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
  }

  /* RIGHT CONTENT SHARES THE SAME REFERENCE GRID. */
  #about .about-reference-right .about-copy {
    position: absolute !important;
    left: 47.00vw !important;
    top: 138px !important;
    width: 42.75vw !important;
    max-width: 760px !important;
    margin: 0 !important;
    z-index: 20 !important;
  }

  #about .about-reference-rule {
    position: absolute !important;
    left: 47.00vw !important;
    top: 395px !important;
    width: 78px !important;
    height: 2px !important;
    margin: 0 !important;
    z-index: 20 !important;
  }

  /* CARDS: complete, evenly distributed, above the curve. */
  #about .about-reference-cards {
    position: absolute !important;
    left: 47.00vw !important;
    top: 443px !important;
    width: 42.75vw !important;
    height: 316px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
  }

  #about .about-reference-card {
    width: auto !important;
    height: 316px !important;
    min-height: 316px !important;
    background: #fff !important;
    border: 1px solid rgba(215,25,32,.12) !important;
    box-shadow: none !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }

  /* THE CURVE IS A SECTION-WIDE BACKGROUND LAYER.
     It is deliberately behind both the photograph and cards. */
  #about .about-reference-curve {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 470px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    background: url("assets/about-curve-join-v3.svg") center bottom / 100% 100% no-repeat !important;
    box-shadow: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* The curve must never be clipped by an inner image/card box. */
  #about .about-reference-curve::before,
  #about .about-reference-curve::after {
    display: none !important;
    content: none !important;
  }
}

/* Keep the same alignment principle on smaller desktop widths. */
@media (min-width: 901px) and (max-width: 1200px) {
  #about.about-section-reference {
    height: 820px !important;
    min-height: 820px !important;
    max-height: 820px !important;
  }
  #about .about-reference-left .eyebrow { left: 5vw !important; }
  #about .about-reference-left h2 { left: 5vw !important; }
  #about .about-heading-rule { left: 15vw !important; }
  #about .about-visual {
    left: 0 !important;
    top: 405px !important;
    width: 58vw !important;
    height: 415px !important;
  }
  #about .about-visual img { width: 58vw !important; height: 415px !important; }
  #about .about-reference-right .about-copy,
  #about .about-reference-rule,
  #about .about-reference-cards { left: 47.5vw !important; }
  #about .about-reference-cards { width: 50vw !important; gap: 10px !important; }
  #about .about-reference-card { min-width: 0 !important; width: auto !important; padding: 24px 18px 20px !important; }
  #about .about-reference-curve { height: 420px !important; }
}

/* ==========================================================
   FINAL ABOUT GEOMETRY — REFERENCE CANVAS / NO CROPPING
   ========================================================== */
@media (min-width: 1201px) {
  #about.about-section-reference {
    height: 924px !important;
    min-height: 924px !important;
    max-height: 924px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #about .about-reference-grid {
    width: 100% !important;
    max-width: none !important;
    height: 924px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* Exact same visual left origin used by the reference composition. */
  #about .about-reference-left .eyebrow {
    left: 5vw !important;
    top: 88px !important;
  }
  #about .about-heading-rule {
    left: 15.55vw !important;
    top: 95px !important;
    width: 214px !important;
  }
  #about .about-reference-left h2 {
    left: 5vw !important;
    top: 141px !important;
    width: 610px !important;
    font-size: 69px !important;
    line-height: .88 !important;
  }

  /* The photograph is the full 815x481 source image.
     Only its edges are feathered; its lower composition is never cropped. */
  #about .about-visual {
    left: 0 !important;
    top: 443px !important;
    width: 815px !important;
    height: 481px !important;
    overflow: visible !important;
    z-index: 2 !important;
    -webkit-mask-image:
      linear-gradient(to right, #000 0%, #000 72%, rgba(0,0,0,.98) 80%, rgba(0,0,0,.78) 89%, rgba(0,0,0,.35) 97%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.55) 9%, #000 16%, #000 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      linear-gradient(to right, #000 0%, #000 72%, rgba(0,0,0,.98) 80%, rgba(0,0,0,.78) 89%, rgba(0,0,0,.35) 97%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.55) 9%, #000 16%, #000 100%) !important;
    mask-composite: intersect !important;
  }
  #about .about-visual img {
    width: 815px !important;
    height: 481px !important;
    object-fit: fill !important;
    object-position: left top !important;
  }

  /* Reference right-column origin and card row. */
  #about .about-reference-right .about-copy {
    left: 48.55vw !important;
    top: 137px !important;
    width: 42.0vw !important;
    max-width: 760px !important;
  }
  #about .about-reference-rule {
    left: 48.55vw !important;
    top: 395px !important;
    width: 78px !important;
  }
  #about .about-reference-cards {
    left: 48.55vw !important;
    top: 439px !important;
    width: 44.25vw !important;
    max-width: 766px !important;
    height: 316px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    z-index: 20 !important;
  }
  #about .about-reference-card {
    height: 316px !important;
    min-height: 316px !important;
    background: #fff !important;
    opacity: 1 !important;
  }

  /* Full-width curve: its bottom edge is exactly the About section's
     bottom edge, so the red field cannot terminate as a rectangle. */
  #about .about-reference-curve {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 481px !important;
    background-image: url("assets/about-curve-join-v3.svg") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    z-index: 1 !important;
  }
}

/* ==========================================================
   ABOUT FINAL GRID LOCK — ALIGN TO THE SAME CONTAINER AS
   #services, KEEP FULL-BLEED VISUAL/CURVE
   ========================================================== */
@media (min-width: 901px) {
  #about.about-section-reference {
    position: relative !important;
    width: 100% !important;
    height: 924px !important;
    min-height: 924px !important;
    max-height: 924px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    isolation: isolate !important;
  }

  /* This is deliberately the same width/centering rule used by
     #services.reference-services > .container. This makes the
     WHO WE ARE origin mathematically identical to WHAT WE DO. */
  #about .about-reference-grid {
    position: relative !important;
    width: min(var(--max), calc(100% - 40px)) !important;
    max-width: var(--max) !important;
    height: 924px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    display: block !important;
  }

  #about .about-reference-left,
  #about .about-reference-right {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Exact same horizontal origin as the Services container. */
  #about .about-reference-left .eyebrow {
    position: absolute !important;
    left: 0 !important;
    top: 88px !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #about .about-heading-rule {
    position: absolute !important;
    left: 181px !important;
    top: 95px !important;
    width: 214px !important;
    height: 2px !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #about .about-reference-left h2 {
    position: absolute !important;
    left: 0 !important;
    top: 141px !important;
    width: 610px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 69px !important;
    line-height: .88 !important;
    z-index: 30 !important;
  }

  #about .about-reference-left h2::after {
    content: "" !important;
    display: block !important;
    width: 63px !important;
    height: 3px !important;
    margin-top: 25px !important;
    background: var(--red) !important;
  }

  /* Full image: its left edge is full-bleed, while its text/grid
     remains locked to the same container as Services. */
  #about .about-visual {
    position: absolute !important;
    left: calc((100% - 100vw) / 2) !important;
    top: 443px !important;
    width: 815px !important;
    height: 481px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: transparent !important;
    -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 66%, rgba(0,0,0,.98) 76%, rgba(0,0,0,.80) 86%, rgba(0,0,0,.42) 94%, transparent 100%),
      linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.65) 11%, #000 18%, #000 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image: linear-gradient(to right,
      #000 0%, #000 66%, rgba(0,0,0,.98) 76%, rgba(0,0,0,.80) 86%, rgba(0,0,0,.42) 94%, transparent 100%),
      linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.18) 4%, rgba(0,0,0,.65) 11%, #000 18%, #000 100%) !important;
    mask-composite: intersect !important;
  }

  #about .about-visual img {
    display: block !important;
    width: 815px !important;
    height: 481px !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: left top !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Right content/card origin is also inside the same Services grid. */
  #about .about-reference-right .about-copy {
    position: absolute !important;
    left: 50% !important;
    top: 137px !important;
    width: 50% !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #about .about-reference-rule {
    position: absolute !important;
    left: 50% !important;
    top: 395px !important;
    width: 78px !important;
    height: 2px !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #about .about-reference-cards {
    position: absolute !important;
    left: 50% !important;
    top: 439px !important;
    width: 50% !important;
    height: 316px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
  }

  #about .about-reference-card {
    width: auto !important;
    height: 316px !important;
    min-height: 316px !important;
    background: #fff !important;
    opacity: 1 !important;
    border: 1px solid rgba(215,25,32,.12) !important;
    box-shadow: none !important;
    border-radius: 13px !important;
  }

  /* Curve is tied to the actual section bottom, not to the image/card
     column. It therefore physically reaches the bottom edge. */
  #about .about-reference-curve {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 481px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("assets/about-curve-join-v3.svg") center bottom / 100% 100% no-repeat !important;
    transform: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}


/* ==========================================================
   REQUESTED MICRO-FIX — WHO WE ARE TEXT ORIGIN
   Match the exact left origin of #services .reference-services-head.
   Only the WHO WE ARE text block is moved; no other About geometry is changed.
   ========================================================== */
@media (min-width: 901px) {
  /* ALIGNMENT-ONLY FIX: use the exact same horizontal origin as
     #services.reference-services > .container. Do not hard-code a
     separate canvas width: the Services container is based on --max. */
  #about .about-reference-left .eyebrow,
  #about .about-reference-left h2 {
    left: max(20px, calc((100vw - var(--max)) / 2)) !important;
  }
}

/* ==========================================================
   V4 — EXACT WHO WE ARE / WHAT WE DO ORIGIN LOCK
   The About grid is already the same .container/canvas used by
   #services. The previous micro-fix incorrectly added the viewport
   container offset a second time. Text must therefore start at 0
   inside the About container — exactly where WHAT WE DO starts inside
   its own container.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-reference-left .eyebrow,
  #about .about-reference-left h2 {
    left: 0 !important;
  }
}

/* V5 — WHO WE ARE visual text-origin correction
   The About heading's visible glyph origin is 13px left of the Services
   eyebrow's visible origin at the supplied desktop resolution. Shift only
   the About text/rule as a unit; no image/card/curve geometry is changed. */
@media (min-width:901px){
  #about .about-reference-left .eyebrow,
  #about .about-reference-left h2{
    transform:translateX(13px) !important;
  }
  #about .about-heading-rule{
    transform:translateX(13px) !important;
  }
}

/* ==========================================================
   IMAGE POSITION ONLY — WHO WE ARE
   Keep all existing sizing, masking, cards, curve and text unchanged.
   Move only the background trade visual slightly to the right.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-visual {
    left: calc((100% - 100vw) / 2 + 70px) !important;
  }
}

/* ==========================================================
   IMAGE LEFT-EDGE FADE ONLY
   Purpose: remove the visible vertical seam at the left edge of
   the WHO WE ARE trade visual without changing its position,
   dimensions, cards, curve, text, or any other page section.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-visual::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 125px !important;
    height: 100% !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 5%,
      rgba(255,255,255,.86) 10%,
      rgba(255,255,255,.58) 22%,
      rgba(255,255,255,.22) 42%,
      rgba(255,255,255,0) 100%
    ) !important;
  }
  #about .about-visual::after {
    display: none !important;
    content: none !important;
  }
}

/* FINAL IMAGE-ONLY CORRECTION
   Restore the trade visual to the reference-2 left edge and remove the
   excessive white overlay that was hiding the globe/creating the large
   blank strip. No other About geometry is changed. */
@media (min-width: 901px) {
  #about .about-visual {
    left: calc((100% - 100vw) / 2) !important;
  }
  #about .about-visual::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 42px !important;
    height: 100% !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.90) 10%,
      rgba(255,255,255,.55) 28%,
      rgba(255,255,255,.18) 58%,
      rgba(255,255,255,0) 100%
    ) !important;
  }
  #about .about-visual img {
    width: 815px !important;
    height: 481px !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: left top !important;
  }
}

/* IMAGE-ONLY CORRECTION — REFERENCE 2 SCALE
   Preserve every other About element. Size the trade visual proportionally
   to the viewport so the complete airplane remains clear of the cards while
   keeping the globe and the full artwork visible. */
@media (min-width: 901px) {
  #about .about-visual {
    width: 47.2vw !important;
    height: auto !important;
  }
  #about .about-visual img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: left top !important;
  }
}

/* ==========================================================
   CURVE-ONLY REFERENCE FIX
   Change only the rear curved background artwork. All other
   About geometry, text, cards and imagery remain untouched.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-reference-curve {
    background-image: url("assets/about-curve-join-v3.svg") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
}

/* FINAL CURVE GEOMETRY ONLY — match the supplied 1727×911 reference exactly.
   The curve artwork already contains transparent pixels outside the lower-right
   composition, so it must map 1:1 to the full About section. */
@media (min-width: 901px) {
  #about .about-reference-curve {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    background-image: url("assets/about-curve-join-v3.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: 100% 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* CURVE-ONLY FINAL CORRECTION
   Use a transparent curve-only extraction of Reference 5's lower-right
   red/pale-red artwork. This override changes only the rear curve layer. */
@media (min-width: 901px) {
  #about .about-reference-curve {
    background-image: url("assets/about-curve-join-v3.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: 100% 100% !important;
  }
}

/* ==========================================================
   CURVE-ONLY FINAL REPAIR
   Replace the malformed/notched curve layer with a continuous
   transparent curve that matches the supplied Reference 5 geometry.
   No text, image, card, alignment, spacing, or other section is changed.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-reference-curve {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url("assets/about-curve-join-v3.svg") left bottom / 100% 100% no-repeat !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   FINAL BACKGROUND JOIN ONLY
   Make the left transport visual and the right curved red field
   meet as one continuous lower background, matching Reference 5.
   No text, card, alignment, or other section geometry is changed.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-reference-curve {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 911px !important;
    background-image: url("assets/about-curve-join-v3.svg") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 911px !important;
    transform: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* FINAL BACKGROUND-JOIN CORRECTION — curve only.
   Replaces the extracted screenshot/notched artwork with a clean continuous
   vector curve whose left endpoint starts exactly where the trade visual ends.
   No text, cards, alignment, or image positioning is changed. */
@media (min-width: 901px) {
  #about .about-reference-curve {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 481px !important;
    background: url("assets/about-curve-join-v3.svg") left bottom / 100% 481px no-repeat !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* FINAL BACKGROUND-JOIN GEOMETRY ONLY — continuous lower curve.
   The trade image remains untouched; this layer begins exactly at its right edge
   on the section bottom and rises smoothly toward the right without entering the card/text area. */
@media (min-width: 901px) {
  #about .about-reference-curve {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 315px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("assets/about-curve-join-v3.svg") left bottom / 100% 315px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* FINAL BACKGROUND-JOIN CORRECTION — only the rear curve geometry changes. */
@media (min-width: 901px) {
  #about .about-reference-curve {
    background: url("assets/about-curve-join-v3.svg") center bottom / 100% 100% no-repeat !important;
    background-color: transparent !important;
  }
}

/* ==========================================================
   FINAL BACKGROUND JOIN ONLY
   Keep every existing text/card/curve position unchanged.
   Align the trade artwork's bottom edge exactly with the About
   section bottom so the left visual and lower curve read as one
   continuous background.
   ========================================================== */
@media (min-width: 901px) {
  #about .about-visual {
    top: 443px !important;
    width: 815px !important;
    height: 481px !important;
    overflow: visible !important;
    left: calc((100% - 100vw) / 2) !important;
    z-index: 2 !important;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.98) 80%,
      rgba(0,0,0,.78) 89%,
      rgba(0,0,0,.35) 97%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.98) 80%,
      rgba(0,0,0,.78) 89%,
      rgba(0,0,0,.35) 97%,
      transparent 100%
    ) !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: add !important;
  }

  #about .about-visual img {
    display: block !important;
    width: 815px !important;
    height: 481px !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: left top !important;
  }

  /* Keep the curve in its current position; only ensure it is the
     lower background layer directly beneath the trade visual. */
  #about .about-reference-curve {
    z-index: 1 !important;
    bottom: 0 !important;
  }
}

/* FINAL IMAGE TOP-EDGE BLEND ONLY
   Remove the visible horizontal seam where the trade artwork begins.
   No position, sizing, curve, card or text geometry is changed. */
@media (min-width: 901px) {
  #about .about-visual::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 34px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.86) 18%,
      rgba(255,255,255,.48) 48%,
      rgba(255,255,255,.16) 76%,
      rgba(255,255,255,0) 100%
    ) !important;
  }
}

/* CARD CONTENT / BOTTOM ACCENT ONLY
   Keep card positions, dimensions and overall layout unchanged.
   Reserve space below the paragraph so the bottom red accent can
   never overlap the card copy. */
@media (min-width: 901px) {
  #about .about-reference-card p {
    padding-bottom: 28px !important;
    box-sizing: border-box !important;
  }

  #about .about-reference-card i {
    bottom: 10px !important;
  }
}

/* CARD 03 ONLY — prevent the bottom accent from touching the final line of copy. */
@media (min-width: 901px) {
  #about .about-reference-card:nth-child(3) p {
    line-height: 1.45 !important;
  }
  #about .about-reference-card:nth-child(3) i {
    bottom: 1.05vw !important;
  }
}

/* CARD WIDTH / BOTTOM ACCENT V4 ONLY
   Keep all existing card and page positioning intact while giving the
   cards a little more horizontal room so their copy wraps cleanly.
   No image, curve, heading, or section geometry is changed. */
@media (min-width: 901px) {
  #about .about-reference-cards {
    width: 44.2vw !important;
    max-width: 766px !important;
    gap: 18px !important;
  }

  #about .about-reference-card {
    min-width: 0 !important;
  }

  #about .about-reference-card i,
  #about .about-reference-card:nth-child(3) i {
    bottom: 12px !important;
  }
}

/* CARD ACCENT MICRO-FIX ONLY: lift the bottom red accent slightly while leaving
   card size, position, typography and all other About geometry unchanged. */
@media (min-width: 901px) {
  #about .about-reference-card i {
    bottom: 34px !important;
  }
}

/* CARD SPACING ONLY — keep card row position/width unchanged.
   Reduce excess lower whitespace while preserving identical outer dimensions
   across all three cards, and lift all red accents by the same amount. */
@media (min-width: 901px) {
  #about .about-reference-card {
    height: 16.90vw !important;
  }
  #about .about-reference-cards {
    height: 16.90vw !important;
  }
  #about .about-reference-card i {
    bottom: 1.95vw !important;
  }
}

/* CARD V8 — natural text flow, equal card heights, shared accent baseline.
   Only the three About cards are affected. */
@media (min-width: 901px) {
  #about .about-reference-card {
    height: 286px !important;
    min-height: 286px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 28px 28px 24px !important;
  }
  #about .about-reference-cards {
    height: 286px !important;
    align-items: stretch !important;
  }
  #about .about-reference-card h3 {
    margin: 0 0 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #about .about-reference-card p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #about .about-reference-card i {
    position: absolute !important;
    left: 28px !important;
    bottom: 22px !important;
    width: 43px !important;
    height: 3px !important;
  }
}

/* CARD 03 ACCENT BASELINE FIX ONLY — match cards 01 and 02 exactly. */
@media (min-width: 901px) {
  #about .about-reference-card:nth-child(3) i {
    bottom: 22px !important;
  }
}

/* FINAL CARD CONTENT ALIGNMENT — exact requested line breaks only.
   Keep existing card row geometry and all other page elements unchanged. */
@media (min-width: 901px) {
  #about .about-reference-card {
    height: 286px !important;
    min-height: 286px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 28px 28px 24px !important;
  }

  #about .about-reference-card h3 {
    margin: 0 0 16px !important;
    line-height: 1.25 !important;
  }

  #about .about-reference-card p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.55 !important;
  }

  #about .about-reference-card i {
    position: absolute !important;
    left: 28px !important;
    bottom: 22px !important;
    top: auto !important;
  }
}


/* CARD V11 — natural wrapping with requested logical line lengths.
   Only card internals are changed; outer card row geometry remains unchanged. */
@media (min-width: 901px) {
  #about .about-reference-card {
    height: 286px !important;
    min-height: 286px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 28px 18px 22px !important;
  }
  #about .about-reference-card strong {
    margin: 0 0 18px !important;
  }
  #about .about-reference-card h3 {
    width: 100% !important;
    max-width: 195px !important;
    margin: 0 0 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #about .about-reference-card p {
    width: 100% !important;
    max-width: 205px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #about .about-reference-card i {
    position: absolute !important;
    left: 18px !important;
    bottom: 22px !important;
    top: auto !important;
    width: 43px !important;
    height: 3px !important;
    margin: 0 !important;
  }
}

/* FINAL CARD ACCENT POSITION ONLY
   Lift the existing bottom red accent uniformly without changing any
   card geometry, typography, text flow, sizing, positioning, image, curve,
   or any other page element. */
@media (min-width: 901px) {
  #about .about-reference-card i {
    bottom: 34px !important;
  }
}

/* FINAL REQUESTED FIX — ABOUT HEADLINE HORIZONTAL ORIGIN ONLY
   Lock only the WHO WE ARE headline to the same 1517px desktop
   content-canvas origin used by the live Home/Services layout.
   No eyebrow, rule, image, cards, curve, copy, sizing, or other
   page section is changed. */
@media (min-width: 1441px) {
  #about .about-reference-left h2 {
    left: calc(50% - 758.5px) !important;
    transform: none !important;
  }
}

/* FINAL CORRECTION — ALIGN ABOUT MAIN HEADLINE EXACTLY WITH THE
   EXISTING "WHO WE ARE" EYEBROW. ONLY THE HEADLINE HORIZONTAL ORIGIN
   IS CHANGED; ALL OTHER ABOUT AND SITE ELEMENTS REMAIN UNTOUCHED. */
@media (min-width: 901px) {
  #about .about-reference-left h2 {
    left: 5vw !important;
    transform: none !important;
  }
}


/* ==========================================================
   ABOUT — FINAL PIXEL-LOCKED HEADLINE ALIGNMENT
   The headline's left edge is synchronized to the WHO WE ARE
   eyebrow at runtime. Scoped exclusively to #about.
   ========================================================== */
@media (min-width:901px){
  #about .about-reference-left h2{
    margin-left:0 !important;
    padding-left:0 !important;
    text-indent:0 !important;
  }
}


/* FINAL V4 — EXACT RENDERED-EDGE ALIGNMENT
   The runtime lock in index.html owns only the About headline's
   horizontal origin. No other element/page is changed. */
@media (min-width:901px){
  #about .about-reference-left h2{
    position:absolute !important;
    margin-left:0 !important;
    padding-left:0 !important;
    text-indent:0 !important;
    transform:none !important;
  }
}

/* FINAL CARD 03 RED-LINE ALIGNMENT — ONLY CARD 03 ACCENT
   Runtime script sets the exact rendered vertical coordinate. This rule
   preserves the existing accent dimensions and horizontal position. */
@media (min-width: 901px) {
  #about .about-reference-card:nth-child(3) i {
    width: 43px !important;
    height: 3px !important;
    left: 18px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* ==========================================================
   FINAL LIVE/VIEW ALIGNMENT LOCK — ABOUT PAGE ONLY
   Use the actual rendered left edge of the shared Services/Home
   content origin. This avoids viewport-relative drift in live view.
   ========================================================== */
@media (min-width:901px){
  #about .about-reference-grid{
    position:relative !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #about .about-reference-left .eyebrow,
  #about .about-reference-left h2{
    transform:none !important;
    margin-left:0 !important;
    padding-left:0 !important;
    text-indent:0 !important;
  }
}

/* FINAL MICRO-FIX — WHO WE ARE RULE ONLY
   Move only the red line/dot beside WHO WE ARE to the reference position.
   No other About or site element is changed. */
@media (min-width:901px){
  #about .about-heading-rule{
    transform: none !important;
  }
}