/* WeThink Marketing — Design System Override (v2, rebuilt from scratch
   on the clean re-mirror). Loaded on every page via a <link> right
   before </head>, so it loads after each page's own per-post kit CSS
   and can safely override the shared --e-global-color-* custom
   properties those files all define redundantly. */

:root {
  --ds-font: 'Lato', Arial, sans-serif;

  /* 2. Brand color pass — the site's own Elementor global color kit
     (confirmed directly in its generated per-post CSS) is:
       --e-global-color-primary   #000000  (pure black)
       --e-global-color-accent    #FF134B  (pink/magenta)
     Redefining both here, after those files load, recolors every
     element that already draws from the kit (buttons, accents,
     several headings) sitewide without touching each page's HTML. */
  --e-global-color-primary: #011536;
  --e-global-color-accent: #db1a4b;

  /* Convenience aliases for rules below that don't want to depend on
     the site's own kit variable names. */
  --ds-navy: #011536;
  --ds-magenta: #db1a4b;
  --ds-text: #7A7A7A;

  /* Root-cause fix for the header's "Contact" nav item: its inline
     style draws a gradient from this Elementor global color variable,
     which is referenced across the site's per-post CSS but never
     defined anywhere — so the gradient silently fails and the button
     renders as white text on nothing (invisible). CSS custom
     properties resolve through inheritance even for var() used inside
     an inline style, so defining it here fixes that button without
     touching its markup. */
  --e-global-color-0d221aa: #db1a4b;
}

/* 1. One font family everywhere, regardless of what each page's own
   generated CSS asked for. */
body, input, textarea, select, button,
.elementor-widget-container,
.elementor-heading-title,
.elementor-image-box-title,
.elementor-image-box-description,
.elementor-button, .elementor-button-text,
.elementor-nav-menu, .elementor-item,
.elementor-widget-text-editor, p, li, span, a {
  font-family: var(--ds-font) !important;
}

/* 2. "All the blacks become dark navy" — the kit variable swap above
   already recolors anything using var(--e-global-color-primary), but
   headings and nav text on this theme are frequently set to a literal
   #000/#000000 instead of the variable. Catching the common cases
   directly. */
.elementor-heading-title,
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .menu-link,
h1, h2, h3, h4, h5, h6 {
  color: var(--ds-navy);
}

/* 3. Footer "Services" links (BRANDING / MARKETING / TECHNOLOGY) never
   had an explicit color, so they fell back to the browser's default
   link blue. Navy by default, brand magenta on hover, per direct
   instruction. */
footer.elementor-location-footer a,
footer.elementor-location-footer .elementor-item {
  color: var(--ds-navy) !important;
}
footer.elementor-location-footer a:hover {
  color: var(--ds-magenta) !important;
}

/* 4. Header phone number/icon — brand accent color instead of
   inheriting whatever plain text color the surrounding nav sets. */
.elementor-element-fe0ade4 .elementor-icon-list-text,
.elementor-element-fe0ade4 .elementor-icon-list-icon,
.elementor-element-fe0ade4 .elementor-icon-list-icon i {
  color: var(--ds-magenta) !important;
}

/* 4. Language switcher — compact EN/SP square pills instead of a lone
   "Español" text link. Adds an "EN" self-link (this domain IS the
   English version) reusing the existing "Español" item's markup
   pattern, and restyles both into small square buttons. Scoped to
   .lang-item so it only touches the language-switcher links, not the
   rest of the nav. */
.lang-item {
  list-style: none;
  display: flex !important;
  align-self: center !important;
}
.lang-item > .menu-link,
.lang-item > .elementor-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  background: #EBEBEB !important;
  color: var(--ds-navy) !important;
}
.lang-item + .lang-item {
  margin-left: 6px;
}
/* Highlight whichever language is actually active on this page — the
   site already marks it with .current-lang (English pages carry it on
   the EN item, Spanish pages on the ES item), so this follows that
   instead of hardcoding EN as always-active, which would mislabel SP
   as inactive on the Spanish pages. */
.lang-item.current-lang > .menu-link,
.lang-item.current-lang > .elementor-item {
  background: var(--ds-navy) !important;
  color: #fff !important;
}

/* 5. "button_b" white buttons ("Watch video"/"Ver Video", "Portfolio" on
   inbound-en/brand-wtm-en/etc.) — confirmed as a real, sitewide,
   pre-existing bug on the live site itself: every per-post CSS file
   that styles a `.button_b` widget sets `background-color:#FFFFFF` on
   `.elementor-button` but never sets a text/icon color, so it falls
   back to Elementor's own button default of white — invisible
   white-on-white. Confirmed across 5 real instances site-wide (grepped
   every per-post CSS file for this exact pattern): homepage "Watch
   video" (94cd96c), inbound-en's "Portfolio" (21f0fc4) and its second
   copy (da42bab), brand-wtm-en's equivalent (d4bc815). Scoped to the
   `.button_b` CLASS rather than individual element IDs so any current
   or future instance of this reusable button style is covered, not
   just the ones caught this pass. */
.button_b .elementor-button,
.button_b .elementor-button-text,
.button_b .elementor-button-icon,
.button_b .elementor-button-icon i {
  color: var(--ds-navy) !important;
}

/* 5b. Same white-on-white button bug, but on a "Portfolio" button that
   was placed without the `.button_b` class (ux-ui-en/index.html) — same
   root cause, just not caught by the class-scoped rule above. */
.elementor-element-670c8c0 .elementor-button,
.elementor-element-670c8c0 .elementor-button-text,
.elementor-element-670c8c0 .elementor-button-icon,
.elementor-element-670c8c0 .elementor-button-icon i {
  color: var(--ds-navy) !important;
}

/* 5c. Services accordion titles on inbound-en (Social Media Management,
   PPC/SEM, Organic SEO, Email Marketing, Audiovisual & Photography,
   Content Marketing) — confirmed real bug: each widget's own per-post
   CSS forces the accordion title/icon to white
   (`.elementor-accordion-title{color:#FFFFFF}`) but never gives the
   title bar itself a background-color, so the white text sits directly
   on the page's light background — unreadable. (A near-identical
   accordion widget on government-en does set a light `#F3F3F3`
   background with dark `#303030` text and is correctly contrasted;
   left untouched.) */
.elementor-element-70c9504 .elementor-accordion-title,
.elementor-element-3031012 .elementor-accordion-title,
.elementor-element-32b194d .elementor-accordion-title,
.elementor-element-702e733 .elementor-accordion-title,
.elementor-element-3d2e4b4 .elementor-accordion-title,
.elementor-element-287ba9d .elementor-accordion-title,
.elementor-element-70c9504 .elementor-accordion-icon,
.elementor-element-3031012 .elementor-accordion-icon,
.elementor-element-32b194d .elementor-accordion-icon,
.elementor-element-702e733 .elementor-accordion-icon,
.elementor-element-3d2e4b4 .elementor-accordion-icon,
.elementor-element-287ba9d .elementor-accordion-icon {
  color: var(--ds-navy) !important;
}
.elementor-element-70c9504 .elementor-accordion-icon svg,
.elementor-element-3031012 .elementor-accordion-icon svg,
.elementor-element-32b194d .elementor-accordion-icon svg,
.elementor-element-702e733 .elementor-accordion-icon svg,
.elementor-element-3d2e4b4 .elementor-accordion-icon svg,
.elementor-element-287ba9d .elementor-accordion-icon svg {
  fill: var(--ds-navy) !important;
}

/* 6. Main nav rendering bold on Spanish pages but not English — root
   cause is another missing per-post CSS file: index.html's own
   stylesheet (post-3245.css) 404s (a real, already-confirmed live-site
   bug, not a mirroring artifact), so the English nav falls back to the
   theme's plain 400 weight, while the Spanish homepage's per-post CSS
   loads fine and the theme's own current/active-state styling bumps it
   to 600. Standardizing on 600 (bold) sitewide — the look Spanish
   already had — rather than 400, per direct instruction. */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .menu-link {
  font-weight: 600 !important;
}

/* 7. Header phone number — pin it flush to the right edge of its row
   regardless of how much space the nav beside it claims, instead of
   letting flex distribution place it wherever the row's other content
   happens to push it (the position swing between languages noted
   above was one symptom of that).

   The homepage's header row (element-29eed68) is an Elementor
   Container in flex mode ("e-flex"), where margin-left:auto alone is
   enough. Every internal page's header row (element-c2cd053) is the
   *same* header template but its container is set to grid mode
   ("e-grid") instead -- a real difference in the site's own markup,
   not a mirroring artifact -- and a margin-auto push doesn't carry
   the same way inside a single-item grid track, so the phone number
   sat ~200px short of the right edge there. Adding justify-self:end
   covers the grid case without disturbing the flex one (each property
   is simply ignored under the layout mode it doesn't apply to).

   That alone wasn't enough on internal pages: their header row
   (element-c2cd053) is an Elementor grid container hard-set to TWO
   equal columns (--e-con-grid-template-columns: repeat(2, 1fr)) even
   though only one widget -- the phone number -- actually lives in it.
   It renders correctly aligned to the end of its own (first) column,
   which is exactly why it sat one whole empty column-width short of
   the row's real right edge. Collapsing the container to a single
   column lets that same end-alignment reach the actual edge. */
.elementor-element-fe0ade4 {
  margin-left: auto !important;
  justify-self: end !important;
}
.elementor-element-c2cd053 {
  --e-con-grid-template-columns: repeat(1, 1fr) !important;
}

/* 8. Homepage hero photo cluster (index.html only) — restored from the
   earlier session (lost when the site was re-mirrored from scratch):
   Chicas.png replaces the original stock photo, scaled up, with the 5
   small team GIFs repositioned around its edges so none of them land
   on a face. Tomas.gif in particular was moved down the right edge
   per direct request after it first landed on a face higher up. */
.elementor-element-efa7b3b > .elementor-widget-wrap {
  position: relative;
}
.elementor-element-51c39ea {
  transform: scale(1.18);
  transform-origin: center center;
  position: relative;
  z-index: 1;
}
.elementor-element-ea0ac79,
.elementor-element-87e0817,
.elementor-element-85f9eed,
.elementor-element-4f5b497,
.elementor-element-d23f1da {
  position: absolute !important;
  z-index: 2 !important;
  width: 110px !important;
  /* explicit ratio (matches the source GIFs' real 135x112 dimensions)
     instead of leaving height to shrink-to-fit content — that left
     the wrapper at 0 height until the image had actually finished
     loading, during which its top:% offset had nothing to measure
     against and the whole thumbnail could render in the wrong spot. */
  aspect-ratio: 135 / 112;
}
.elementor-element-ea0ac79 .elementor-widget-container,
.elementor-element-87e0817 .elementor-widget-container,
.elementor-element-85f9eed .elementor-widget-container,
.elementor-element-4f5b497 .elementor-widget-container,
.elementor-element-d23f1da .elementor-widget-container {
  width: 100% !important;
}
.elementor-element-ea0ac79 img,
.elementor-element-87e0817 img,
.elementor-element-85f9eed img,
.elementor-element-4f5b497 img,
.elementor-element-d23f1da img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* Leti_1.gif — top-left corner, clear of the left woman's face.
   top:%/bottom:% here are relative to the image's own unscaled box,
   but .elementor-element-51c39ea is scaled 1.18x from its center, so
   the photo visually extends ~9% of its own height beyond that box on
   every side. A small top offset like the first two passes used (2%,
   then 8%/14%) was still well above the photo's real visual top edge,
   landing in the "Committed to driving..." section above instead —
   pushed further down here to actually clear that. */
.elementor-element-ea0ac79 {
  top: calc(24% + 450px);
  left: -6%;
}
/* Pao.gif — right edge, upper */
.elementor-element-87e0817 {
  top: calc(32% + 400px);
  right: -10%;
}
/* Tomas.gif — the "guy with glasses" — moved down the right edge,
   below Pao.gif, per direct request (was landing on a face higher up) */
.elementor-element-85f9eed {
  top: calc(58% + 400px);
  right: -12%;
}
/* Albeiro.gif — bottom-left corner */
.elementor-element-4f5b497 {
  bottom: -8%;
  left: -6%;
}
/* leidy.gif — bottom-right corner */
.elementor-element-d23f1da {
  bottom: -10%;
  right: 6%;
}

/* 9. Team flip-box card: Carlos Aguirre -> Janelli Ropper, Creative
   Director (direct request, both the homepage's "What we do" team strip
   and the Team page's own grid).

   Team page (element-150bd73): its own per-post CSS (post-19543.css)
   already renders every team member's flip-box correctly (real
   background-image rules, height, colors) -- this card was never
   actually broken here, just needs its two photos swapped.

   Homepage (element-e1f67f0): same widget. post-3245.css (its own
   per-post file) does 404 on the live site, but a SEPARATE, correctly-
   loading file -- post-20628.css -- also targets this element ID
   (shared via Elementor's global-template duplication) and still sets
   Carlos's original photo with higher selector specificity
   (`.elementor-20628 .elementor-element.elementor-element-e1f67f0 ...`,
   4 classes vs. this rule's 2). Missed on the first pass, which is why
   the name changed but the photo silently kept losing the cascade.
   `!important` added below to actually win. */
.elementor-element-150bd73 .elementor-flip-box__front {
  background-image: url('2026_content/janelli.png') !important;
}
.elementor-element-150bd73 .elementor-flip-box__back {
  background-image: url('2026_content/Janelli_roll_over.png') !important;
}

.elementor-element-e1f67f0 .elementor-flip-box__front {
  background-image: url('2026_content/janelli.png') !important;
  background-position: center center;
  background-size: cover;
}
.elementor-element-e1f67f0 .elementor-flip-box__back {
  background-color: var(--ds-magenta);
  background-image: url('2026_content/Janelli_roll_over.png') !important;
  background-position: center center;
  background-size: cover;
}
.elementor-element-e1f67f0 .elementor-flip-box {
  height: 466px;
}
.elementor-element-e1f67f0 .elementor-flip-box__back .elementor-flip-box__layer__overlay {
  background-color: transparent;
  text-align: center;
  justify-content: flex-end;
}
.elementor-element-e1f67f0 .elementor-flip-box__back .elementor-flip-box__layer__title,
.elementor-element-e1f67f0 .elementor-flip-box__back .elementor-flip-box__layer__description {
  color: #FFFFFF;
  margin-bottom: 0px;
}

/* 9b. Who We Are founders card (element-95c3ff0) -- the front-facing
   name was updated to Janelli in an earlier pass, but no CSS override
   was ever written for this widget's photos. Front uses the rollover
   photo per direct request; the back face (shown on hover -- the
   actual "rollover" interaction) still had its own per-post CSS
   pointing at Carlos.png, missed in the first pass because it was
   deliberately left alone as a "quirk" -- that was wrong, it's just
   the same missing-photo-swap bug as the front, now using the other
   Janelli photo so both faces are actually her. This card's own alias
   file (index.html@p=19466.html) never got the earlier text fix
   either -- same alias-sync gap as the team page -- fixed there
   directly in the HTML.

   This same section (id="why_wethink") was missing a third card
   entirely: an empty column (element-32f8f75) sat between this one and
   Giorelsy's, on both this page and its alias -- confirmed the live
   site has the exact same empty column, so this was never a mirroring
   artifact. Rebuilt the missing widget (new element-a3f7c29, no real
   ID to recover) matching the team page's working Juliana Vallejo card
   (element-8266657) structurally: front is photo-only via CSS, back
   shows just her name with no role text. Both faces use juliana.png
   (her other, rollover-style portrait) per direct request, rather than
   the team page's juli-_1_.webp. */
.elementor-element-95c3ff0 .elementor-flip-box__front {
  background-image: url('2026_content/Janelli_roll_over.png') !important;
  background-position: center center;
  background-size: cover;
}
.elementor-element-95c3ff0 .elementor-flip-box__back {
  background-image: url('2026_content/janelli.png') !important;
  background-position: center center;
  background-size: cover;
}
.elementor-element-a3f7c29 .elementor-flip-box__front,
.elementor-element-a3f7c29 .elementor-flip-box__back {
  background-image: url('wp-content/uploads/2022/08/juliana.png') !important;
  background-position: center center;
  background-size: cover;
}

/* 10. Submenu (dropdown) hover contrast — Elementor Pro's own CSS
   already does this correctly on its own (dark background #3f444b,
   white text), but rule 2's nav color override above
   (.elementor-nav-menu .menu-link { color: navy }) matches these
   dropdown links too (they carry .menu-link alongside
   .elementor-sub-item) at the same specificity, and being loaded
   later in the document, wins — leaving the hover's dark background
   with dark navy text instead of white. Restoring white specifically
   for the hover/focus/active states here. */
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item:focus,
.elementor-nav-menu--dropdown .elementor-item.highlighted,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-sub-item:hover,
.elementor-sub-item:focus,
.elementor-sub-item.highlighted,
.elementor-sub-item.elementor-item-active {
  color: #fff !important;
}

/* 11. Portfolio page hero ("The future of marketing / is crosscultural.")
   — the widget's own per-post CSS (post-19562.css EN, post-10670.css ES)
   sets a font-family/size/weight for element aa88952 but never a color,
   so it falls back to the browser's default black text directly on the
   dark data_banner.webp background — unreadable, and confirmed the same
   on the Spanish mirror. The line above it (de3c96d) already sets
   color:#FFFFFF correctly, which is why only the bold second line was
   disappearing. Forcing brand magenta here doubles as the requested
   emphasis color for this line. */
.elementor-element-aa88952 .elementor-heading-title {
  color: var(--ds-magenta) !important;
}

/* 12. Sitewide contrast sweep, homepage (per direct request to check
   them all, not just the one instance reported) -- same missing-color
   root cause as items 5 and 11 above, found by rendering the page and
   measuring actual text/background contrast ratios (WCAG), not just
   reading the CSS:

   - "Our Group" heading: the "Our" half is hard-coded white inline,
     but "Group" itself has no color at all in its per-post CSS, so it
     falls back to this file's own global navy heading color -- on the
     section's near-black starfield background that's ~1.3:1 contrast,
     functionally invisible. Navy was never going to work on a dark
     section; using it as an accent match for the "Our"/"Group"
     two-tone pattern used elsewhere. This is a shared global template
     block that Elementor re-IDs per page -- found on the homepage
     (element-1a6d6e0) plus 4 more instances across team-en,
     who-we-are-en, inbound-en and government-en (each also mirrored
     under its own index.html@p=NNNN.html alias), all fixed here by ID.
   - Closing manifesto line "BECAUSE WE THINK DIFFERENTLY."
     (element-8386db2): identical bug, identical fix. Its companion
     line above it ("We connect differently because", element-dea6a54)
     does have an explicit white color, which is why only the bigger,
     bolder headline under it was going dark-on-dark.
   - "View Work" and "Our team" buttons (element-d759c7b, -38488a3):
     both share the same button_a-style per-post CSS that sets
     background-color:#FF134B but never a font-weight, leaving
     Elementor's normal-weight default -- white-on-#FF134B at normal
     weight measures 3.86:1, under the 4.5:1 small-text minimum. Every
     other button on the page (Contact, Send, Explore) is bold and
     clears it easily; matching that weight here both fixes the
     inconsistency and clears the ratio (small bold text's minimum
     drops to 3:1). */
.elementor-element-1a6d6e0 .elementor-heading-title,
.elementor-element-6535ec6 .elementor-heading-title,
.elementor-element-ed48b91 .elementor-heading-title,
.elementor-element-553ee86 .elementor-heading-title,
.elementor-element-8354ac3 .elementor-heading-title {
  color: var(--ds-magenta) !important;
}
.elementor-element-8386db2 {
  color: var(--ds-magenta) !important;
}
.elementor-element-d759c7b .elementor-button,
.elementor-element-38488a3 .elementor-button {
  font-weight: 800 !important;
}

/* 13. "Values" image-box (element-289b06a) — per direct request, the
   "Values" title and its Accountability/Creativity/Honesty/Strategy/
   Integrity/Authenticity list next to "Mission" on the Government page
   in brand magenta. Same shared-template widget as item 12, mirrored
   across 9 files (Government + Who We Are, EN and ES, plus their
   index.html@p=NNNN.html aliases) — fixed once here by ID for all of
   them. */
.elementor-element-289b06a .elementor-image-box-title,
.elementor-element-289b06a .elementor-image-box-description {
  color: var(--ds-magenta) !important;
}