/* ==========================================================================
   AEC Global — mobile refinements (added September 2026)
   Loaded last, so it wins over the inline styles it needs to override.
   Everything here is scoped to <=900px except where noted.
   Nothing in this file changes the desktop layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Word breaking — never split a word mid-letter.
   Replaces `overflow-wrap:anywhere`, which produced "inspeccion/amos".
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  main h1, main h2, main h3, main p, main li, main summary, main label,
  .aec-legal-breadcrumb, nav[aria-label="Breadcrumb"] {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
  }
}

/* --------------------------------------------------------------------------
   2. Hero — let the content set the height instead of a fixed box.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #top { min-height: 0 !important; }
  #top > div { padding-block: 30px 34px !important; }
}

/* --------------------------------------------------------------------------
   3. Hero stats — two numbers side by side, language line as a footnote.
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .stat-row { flex-direction: row !important; flex-wrap: wrap !important; gap: 0 !important; }
  .stat-row .stat { border-top: none !important; padding-top: 0 !important; min-width: 0 !important; }
  .stat-row .stat:nth-child(1),
  .stat-row .stat:nth-child(2) { flex: 1 1 0 !important; }
  .stat-row .stat:nth-child(2) {
    border-left: 1px solid rgba(255,255,255,.22) !important;
    padding-left: 18px !important;
  }
  .stat-row .stat:nth-child(3) {
    flex: 1 1 100%;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.22) !important;
    margin-top: 16px; padding-top: 14px !important; padding-left: 0 !important;
  }
  .stat-row .stat b { font-size: 34px !important; }
  .stat-row .stat span { font-size: 12.5px !important; }
  .stat-row .stat:nth-child(3) b { font-size: 18px !important; }
}

/* --------------------------------------------------------------------------
   4. Real photographs are portrait originals — give them a portrait box on
   phones instead of cropping 60% away to fit a landscape slot.
   Illustrative (landscape) images are untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .card-photo:has(img[src*="aec-real"]) { aspect-ratio: 4 / 5 !important; }
  .tri-strip figure:has(img[src*="aec-real"]) { aspect-ratio: 4 / 5 !important; }
}

/* --------------------------------------------------------------------------
   5. Floating WhatsApp button — only after the hero has been passed.
   Gated on .aec-m so that without JS the button behaves exactly as before.
   -------------------------------------------------------------------------- */
.aec-m .aec-wa-float {
  opacity: 0; pointer-events: none;
  transform: translateY(10px) scale(.94);
  transition: opacity .25s ease, transform .25s ease;
}
.aec-m.aec-past-hero .aec-wa-float {
  opacity: 1; pointer-events: auto; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .aec-m .aec-wa-float { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Mobile navigation drawer.
   Below 900px the inline nav and the language pills are replaced by one
   button. Only applied once JS has confirmed it can build the drawer.
   -------------------------------------------------------------------------- */
.aec-mnav-toggle { display: none; }

@media (max-width: 900px) {
  .aec-m header nav[aria-label],
  .aec-m header div[role="group"] { display: none !important; }

  header > div {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  /* the logo may shrink (wordmark ellipsises) rather than push the page wide */
  header > div > a:first-child { min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden; }
  header > div > a:first-child span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* the request CTA shrinks before anything overflows */
  header [data-action="goAsk"],
  header > div > a[href*="request-a-quote"] {
    flex: 0 1 auto !important; min-width: 0 !important;
    font-size: 13.5px !important; padding: 11px 14px 11px 20px !important;
    white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
  }

  .aec-m .aec-mnav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none; margin-left: auto;
    background: transparent; border: 1.5px solid #DCE5EE; border-radius: 14px;
    color: #032750; cursor: pointer; padding: 0;
  }
  .aec-m .aec-mnav-toggle svg { width: 22px; height: 22px; display: block; }
  .aec-m header button[data-action="goAsk"] {
    margin-left: 0 !important;
    padding: 11px 16px 11px 22px !important;
    font-size: 14px !important;
  }
  /* the inline WhatsApp link in the bar collapses to its icon */
  .aec-m header a[data-feature="whatsapp"] { display: none !important; }
}

@media (max-width: 420px) {
  header [data-action="goAsk"],
  header > div > a[href*="request-a-quote"] {
    font-size: 13px !important; padding: 10px 12px 10px 18px !important;
  }
}

/* the closed drawer sits off-screen to the right; clip it so it can never
   add horizontal scroll. `clip` (not `hidden`) keeps position:sticky working. */
.aec-m { overflow-x: clip; }

/* the drawer itself */
.aec-mnav-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,39,80,.55);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.aec-mnav-scrim[data-open="1"] { opacity: 1; pointer-events: auto; }

.aec-mnav-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(84vw, 340px);
  background: #fff;
  box-shadow: -18px 0 44px rgba(3,39,80,.22);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  font-family: Inter, system-ui, sans-serif;
}
.aec-mnav-panel[data-open="1"] { transform: none; }

.aec-mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #DCE5EE;
}
.aec-mnav-title {
  font: 600 12px Montserrat, system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #57697C;
}
.aec-mnav-close {
  width: 40px; height: 40px; flex: none; display: flex;
  align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 12px;
  color: #032750; cursor: pointer; padding: 0;
}
.aec-mnav-close svg { width: 20px; height: 20px; }

.aec-mnav-links { display: flex; flex-direction: column; padding: 6px 0; }
.aec-mnav-links a {
  display: flex; align-items: center; min-height: 52px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 17px; font-weight: 600; color: #032750;
  text-decoration: none; border-bottom: 1px solid #DCE5EE;
}
.aec-mnav-links a:last-child { border-bottom: none; }
.aec-mnav-links a[aria-current="page"] { color: #04707B; }

.aec-mnav-actions { display: grid; gap: 10px; padding: 18px 0 20px; }
.aec-mnav-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 10px; border: none;
  font: 700 14px Montserrat, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .045em;
  background: #032750; color: #fff; cursor: pointer; text-decoration: none;
  box-shadow: inset 6px 0 0 #F2600C;
}
.aec-mnav-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; border-radius: 9999px;
  border: 1.5px solid #04707B; color: #04707B;
  font: 600 15.5px Inter, system-ui, sans-serif; text-decoration: none;
}
.aec-mnav-wa svg { width: 18px; height: 18px; }

.aec-mnav-langs { margin-top: auto; padding-top: 18px; border-top: 1px solid #DCE5EE; }
.aec-mnav-langrow { display: flex; gap: 8px; margin-top: 10px; }
.aec-mnav-langrow a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 12px; background: #F4F7FA;
  font: 600 14px Inter, system-ui, sans-serif; color: #3D5468; text-decoration: none;
}
.aec-mnav-langrow a[aria-current="page"] { background: #032750; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .aec-mnav-panel, .aec-mnav-scrim { transition: none; }
}
@media (min-width: 901px) {
  .aec-mnav-scrim, .aec-mnav-panel { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. WeChat panel in the footer.
   -------------------------------------------------------------------------- */
.aec-wechat-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 9999px; border: 1px solid rgba(211,223,232,.35);
  background: transparent; color: #D3DFE8; cursor: pointer; padding: 0;
}
.aec-wechat-btn svg { width: 20px; height: 20px; display: block; }

.aec-wechat-scrim {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(3,39,80,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.aec-wechat-scrim[hidden] { display: none !important; }

.aec-wechat-card {
  width: 100%; max-width: 330px; background: #fff; color: #032750;
  border-radius: 22px; padding: 22px 22px 20px; text-align: center;
  font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 24px 60px rgba(3,39,80,.34);
  position: relative;
}
.aec-wechat-card h2 {
  font: 700 18px Montserrat, system-ui, sans-serif;
  margin: 0 0 4px; padding: 0 34px; color: #032750;
}
.aec-wechat-card p { font-size: 13.5px; line-height: 1.5; color: #4E6377; margin: 0 0 16px; }
.aec-wechat-card img {
  width: 100%; max-width: 236px; height: auto; display: block; margin: 0 auto 16px;
  border: 1px solid #DCE5EE; border-radius: 14px; padding: 8px; background: #fff;
}
.aec-wechat-id {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #F4F7FA; border: 1px solid #DCE5EE; border-radius: 12px;
  padding: 10px 12px; font-size: 13.5px;
}
.aec-wechat-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: #032750; overflow-wrap: anywhere; text-align: left;
}
.aec-wechat-copy {
  flex: none; border: none; background: #04707B; color: #fff;
  font: 600 12.5px Inter, system-ui, sans-serif;
  border-radius: 9999px; padding: 8px 13px; min-height: 36px; cursor: pointer;
}
.aec-wechat-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #57697C; cursor: pointer;
  border-radius: 9999px; font-size: 20px; line-height: 1; padding: 0;
}


/* --------------------------------------------------------------------------
   8. Phone refinements for the new CTA and the video band (September 2026).
   -------------------------------------------------------------------------- */

/* the floating request button no longer sits under the WhatsApp bubble */
[data-action="goAsk"][style*="position:fixed"] { right: 92px !important; }

@media (max-width: 620px) {
  [data-action="goAsk"][style*="position:fixed"] {
    right: 20px !important; bottom: 88px !important;
    font-size: 13.5px !important; padding: 12px 18px 12px 24px !important;
  }
}

/* body CTAs: smaller type, and they wrap instead of overflowing */
@media (max-width: 620px) {
  main [data-action="goAsk"],
  main a[href*="request-a-quote"] {
    font-size: 14px !important;
    padding: 13px 20px 13px 26px !important;
    white-space: normal !important;
    max-width: 100%;
  }
}

/* video band */
@media (max-width: 620px) {
  #video { padding: 46px 0 !important; }
  #video h2 { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 20px !important; }
  #video .aec-video { border-radius: 12px !important; box-shadow: 0 14px 34px rgba(0,0,0,.34) !important; }
  #video .aec-video-play span {
    font-size: 12.5px !important; padding: 12px 18px !important; gap: 9px !important;
  }
  #video .aec-video-play span svg { width: 13px !important; height: 15px !important; }
}


/* --------------------------------------------------------------------------
   9. Fixed header everywhere + phone header layout (September 2026).
   The bar is pinned with position:fixed instead of sticky, because sticky
   fails in iOS Safari when an ancestor clips the x axis (see rule 6).
   --aec-header-h is measured by aec-mobile-nav.js on load and on resize.
   -------------------------------------------------------------------------- */
:root { --aec-header-h: 71px; }

header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 80 !important;
  background: rgba(255,255,255,.97) !important;
}
body { padding-top: var(--aec-header-h); }
[id] { scroll-margin-top: calc(var(--aec-header-h) + 14px); }

/* phone: full logo lockup (symbol + wordmark) always visible */
@media (max-width: 900px) {
  header > div > a:first-child span { display: inline !important; }
}
/* The wordmark is tucked under the arc with a negative margin tuned to a
   92px symbol, so the lockup can only be scaled as a whole: symbol box, image
   and that margin move together, or the text lands on top of the ship. */
@media (max-width: 900px) {
  /* the base stylesheet makes the image fill the picture box (object-fit),
     so the box, the tuck and the type scale together and the image is left
     alone — sizing the <img> separately is what pushed the wordmark onto
     the ship. Ratio kept from the desktop lockup: 92 / -63 / 24. */
  header .aec-logo-lockup--header > picture { width: 74px !important; height: 68px !important; }
  header .aec-logo-lockup--header > span { margin-left: -51px !important; font-size: 19px !important; }

  /* the request button sits on the right, next to the menu */
  header [data-action="goAsk"],
  header > div > a[href*="request-a-quote"] { margin-left: auto !important; }
  .aec-m .aec-mnav-toggle { margin-left: 8px !important; }
}

@media (max-width: 400px) {
  header > div { gap: 6px !important; padding: 9px 11px !important; }
  header .aec-logo-lockup--header > picture { width: 64px !important; height: 59px !important; }
  header .aec-logo-lockup--header > span { margin-left: -44px !important; font-size: 17px !important; }
  header [data-action="goAsk"],
  header > div > a[href*="request-a-quote"] {
    font-size: 11.5px !important; letter-spacing: .02em !important;
    padding: 10px 11px 10px 16px !important;
  }
}

@media (max-width: 900px) {
/* the menu button carries its weight: filled, with the active language on it */
.aec-m .aec-mnav-toggle {
  width: 46px !important; height: 46px !important; padding: 0 !important;
  background: #032750 !important; border: none !important;
  border-radius: 13px !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(3,39,80,.26);
  display: flex !important; align-items: center; justify-content: center;
}
.aec-m .aec-mnav-toggle svg { width: 22px !important; height: 22px !important; }
}
.aec-mnav-lang { display: none !important; }
@media (max-width: 430px) {
  .aec-m .aec-mnav-toggle { width: 44px !important; height: 44px !important; }
}


/* --------------------------------------------------------------------------
   10. Phone bar: logo + menu only (September 2026). Everything else — request,
   WhatsApp, languages — lives inside the drawer, so nothing can be clipped in
   any of the four languages.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  header [data-action="goAsk"],
  header > div > a[href*="request-a-quote"],
  header > div > a[href*="/anfrage"],
  header [data-feature="whatsapp"] { display: none !important; }
  header > div { gap: 10px !important; }
  .aec-m .aec-mnav-toggle { margin-left: auto !important; }
}

/* --------------------------------------------------------------------------
   11. Between 901 and 1240px the bar carries logo, menu, WhatsApp, request and
   the language selector. German and Portuguese labels are the longest, so the
   nav and the button tighten up there instead of overflowing.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1240px) {
  header nav[aria-label] { gap: 12px !important; font-size: 13.5px !important; }
  header [data-action="goAsk"],
  header > div > a[href*="request-a-quote"],
  header > div > a[href*="/anfrage"] {
    font-size: 12.5px !important; letter-spacing: .03em !important;
    padding: 11px 14px 11px 20px !important;
  }
  header [data-feature="whatsapp"] { font-size: 12.5px !important; }
  .aec-lang-btn { padding: 7px 10px !important; }
}