/* ==========================================================================
   custom.css — hand-maintained overrides
   Loaded AFTER the Webflow stylesheets so a re-export from Webflow never
   clobbers these rules. Do not paste these into bea-draft.webflow.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero overlap fix
   .hero-image (gaivota.svg) is absolutely positioned over the right 50% of
   the hero. .hero-content was full-width, so the white <h1> ran onto the
   white areas of the artwork and became unreadable. Constrain the text
   column to the left half at the breakpoints where the image is absolute.
   Below 991px the image goes position:relative and stacks, so no cap needed.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .hero-content {
    max-width: 50%;
    padding-right: 4vw;
  }
}

/* Safety net: never let long words punch out of the text column. */
.hero-subhead,
.heading-3,
.paragraph-2 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. Heading semantics
   The hero subhead was an <h3> sitting *before* the <h1>, which is a
   heading-order violation for screen readers. It is now a <p>; these rules
   restore the exact h3 box model so the layout is unchanged.
   -------------------------------------------------------------------------- */
p.hero-subhead {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   2b. Footer logos carry intrinsic width/height attributes (which prevent
   layout shift while they load). .rl_footer1_logo caps width at 300px but
   never resets height, so the attribute height would be applied literally
   and stretch the image. Restore proportional scaling.
   -------------------------------------------------------------------------- */
.rl_footer1_logo {
  height: auto;
}

/* --------------------------------------------------------------------------
   3. Skip link — visually hidden until focused.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   4. Visible focus indicator.
   Webflow ships a focus-visible polyfill but no actual focus styling, so
   keyboard users currently get nothing on some elements. Two-tone outline so
   it stays visible on both the orange background and the white artwork.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
  border-radius: 2px;
}

/* Same treatment for the polyfill's attribute hook (older Safari/Firefox). */
a[data-wf-focus-visible],
button[data-wf-focus-visible] {
  outline: 3px solid #1a1a1a;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}

/* --------------------------------------------------------------------------
   5. Footer address block — was an <a href="#"> (a link to nowhere, which
   screen readers announce as an interactive control). Now a <div>; this
   keeps the inherited link styling intact and restores the cursor.
   -------------------------------------------------------------------------- */
.rl_footer1_link.is-static-address {
  cursor: default;
  display: block;
  font-style: normal; /* <address> defaults to italic; the original <a> was not */
}

/* --------------------------------------------------------------------------
   5b. The hero paragraph previously used <br><br> … <br><br><br> plus a
   zero-width joiner purely as vertical spacing. Those are removed from the
   markup (screen readers announce stray breaks); this restores the same gap.
   -------------------------------------------------------------------------- */
.paragraph-2 {
  margin-top: 60px;
  margin-bottom: 90px;
}

/* --------------------------------------------------------------------------
   6. Respect reduced-motion.
   Webflow IX2 drives the scroll-in animations by setting opacity:0 inline.
   Users with prefers-reduced-motion get the content revealed immediately
   rather than animated in — without this they can be left staring at
   permanently invisible content if IX2 is slow to initialise.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-w-id] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* 7. No-JS fallback for IX2-animated blocks is handled by the <noscript>
      style block in each page's <head>, since it must apply before this
      stylesheet's cascade position is relevant. Nothing needed here. */