/* ------------------------------------------------------------------
   Aragon Energy — hero width balance.

   The hero is a fixed 1040px block pinned 100px from the left, so on
   screens wider than ~1240px the image + stats column stops short and
   leaves a wide empty margin on the right.

   This nudges only that column ("Right content": the hero image and
   the Core solution areas / 5, From supply to lifecycle support /
   End-to-end, Local coordination. Global capability. / East Africa
   stats) into the unused space. It uses `left` rather than
   transform/margin so Framer's layout and appear animation are
   untouched, and it is scoped to the desktop breakpoint so tablet and
   mobile layouts are unchanged.

   The shift grows with the screen so the column's right edge keeps the
   same 100px margin the left column has, then caps at 320px so the image
   never drifts away from the text column on very wide displays.
------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .framer-1gm4cez[data-framer-name="Right content"] {
    position: relative;
    left: min(320px, max(0px, calc(100vw - 1240px)));
  }

  /* The hero row is clipped at the 1040px content edge, which would cut the
     shifted column ("Local coordination. Global capability." / "East Africa").
     Only this one wrapper is opened up; the page-level clips stay as they are,
     so nothing can spill outside the viewport. */
  .framer-ZYnvt .framer-i5h74i {
    overflow: visible;
  }
}

/* ------------------------------------------------------------------
   Hero image at the tablet breakpoint.

   Between 810px and 1199px Framer stacks the hero into one column, but
   the image frame keeps its desktop flex rule and collapses to a 1px
   sliver under the stat strip. The frame is given the photograph's own
   ratio so the crop keeps working at every width and orientation.
------------------------------------------------------------------- */

@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-12xxhts {
    height: auto !important;
    flex: 0 0 auto !important;
  }

  .framer-19w7yh1-container[data-framer-name="Hero image"] {
    aspect-ratio: 1400 / 788;
    height: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Short landscape viewports (phones on their side, small laptops) cannot fit
   the desktop display size, so the hero headline steps down to keep the call
   to action in view instead of running past the fold. */
@media (orientation: landscape) and (max-height: 560px) {
  h1[data-styles-preset="OutigpOUd"] {
    font-size: clamp(30px, 6.4vh, 42px) !important;
    line-height: 1.08 !important;
  }
}

/* ------------------------------------------------------------------
   Long body copy that replaces the per-letter reveal spans.
------------------------------------------------------------------- */

p.ae-prose,
p.ae-prose span,
h2.ae-prose,
h3.ae-prose {
  /* Framer's .framer-text rules outrank a bare class, and this only ever
     lands on paragraphs that arrive without a text preset, so the type is
     pinned here rather than left to the reset. */
  font-family: "Geist", "Geist Placeholder", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

@media (max-width: 809.98px) {
  p.ae-prose,
  p.ae-prose span {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}