@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");

    /* ── Scoped wrapper ── */
    #omnicom-page-wrapper {
      font-family: "Instrument Sans", sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* the 100vw full-bleed sections extend ~scrollbar-width past the body
         content when a vertical scrollbar is visible — clip it here */
      overflow-x: clip;
    }
    #omnicom-page-wrapper *,
    #omnicom-page-wrapper *::before,
    #omnicom-page-wrapper *::after {
      box-sizing: border-box;
    }

    /* ── Container — max 1200px, min 32px side gutter, auto-centered ── */
    #omnicom-page-wrapper .container {
      max-width: 1200px !important;
      margin-inline: max(32px, 50% - 600px) !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding: 0;
      height: auto;
      position: static;
      width: auto;
    }
    /* Kill BeTheme's clearfix pseudo-elements (phantom flex item) */
    #omnicom-page-wrapper .container::after,
    #omnicom-page-wrapper .container::before {
      content: none !important;
      display: none !important;
    }

    /* Strip the bottom margin BeTheme injects on the column wrapper that
       hosts this page (UID rov4lss). Unscoped selector — the wrapper holding
       these styles lives INSIDE the column, so we can only reach the column
       chain by class name (BeTheme nests #omnicom-page-wrapper several
       levels deep inside .column.mcb-item-rov4lss > div). */
    .column.mcb-item-rov4lss,
    .column.mcb-item-rov4lss > div {
      margin-bottom: 0 !important;
    }

    /* ── Section 0 — pill subnav (sits above section-1) ── */
    #omnicom-page-wrapper .s0-pillnav {
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      background: #fff;
      padding: 20px 0;
      /* sit above the section-1 lottie — the lottie has a negative
         top offset and extends past section-1's top edge, so without
         this z-index it would paint over the subnav. */
      z-index: 5;
    }
    /* the grey top-gradient is the shadow cast down from the white nav row
       above; it bleeds 60px past the pillnav's own bottom edge into
       section-1's top so the shadow reads as shared between the two
       sections instead of boxed inside the subnav alone. Negative z-index
       keeps it behind the pill/dropdown content within this stacking
       context (established by .s0-pillnav's position+z-index) while still
       painting above section-1's lottie. */
    #omnicom-page-wrapper .s0-pillnav::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      /* top+bottom (not height:100%) — .s0-pillnav's height is auto
         (content-driven), and a percentage height on an absolutely
         positioned child of an auto-height container resolves to auto
         per spec, collapsing this pseudo instead of bleeding past it.
         Anchoring both edges sidesteps that entirely. */
      top: 0;
      bottom: -60px;
      background: linear-gradient(180deg, #E3E3E3 0%, rgba(227, 227, 227, 0.00) 100%);
      pointer-events: none;
      z-index: -1;
    }
    #omnicom-page-wrapper .s0-pillnav-inner {
      /* same container pattern as .container — max 1200px centered */
      margin-inline: max(32px, 50vw - 600px);
    }
    #omnicom-page-wrapper .s0-pillnav-mobile-select {
      display: none;
    }
    #omnicom-page-wrapper .s0-pillnav-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: nowrap;
    }
    #omnicom-page-wrapper .s0-pillnav-item {
      text-decoration: none;
      color: #000;
      font-weight: 600;
      font-size: clamp(14px, 0.625rem + 0.42vw, 16px);
      letter-spacing: 0.16px;
      line-height: 0.9;
      padding: 13px 15px;
      border-radius: 999px;
      white-space: nowrap;
      transition: background-color 0.2s, color 0.2s;
    }
    #omnicom-page-wrapper .s0-pillnav-item.active {
      background: #000;
      color: #fff;
    }
    #omnicom-page-wrapper .s0-pillnav-dropdown {
      display: none;
    }
    @media (max-width: 768px) {
      #omnicom-page-wrapper .s0-pillnav-menu {
        display: none;
      }
      #omnicom-page-wrapper .s0-pillnav-dropdown {
        display: block;
      }
      /* Select nativo estilizado como la pastilla. appearance:none deja
         estilizar el control cerrado; la lista abierta la dibuja el OS, igual
         que antes (el boton custom abria ese mismo picker con showPicker()).
         El chevron va como background-image porque un select no admite hijos:
         por eso queda anclado a la derecha y no pegado al texto. */
      #omnicom-page-wrapper .s0-pillnav-mobile-select {
        display: block;
        width: 100%;
        /* BeTheme le pone margin-bottom:20px a todo select (be.min.css), junto
           con inputs y textarea. Antes no se notaba porque el select estaba
           fuera de flujo; ahora empujaria la seccion 20px hacia abajo. */
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
        background-color: #1b1b1b;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M7%2010L12%2015L17%2010'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 30px center;
        color: #fff;
        padding: 15px 30px;
        border: none;
        border-radius: 64px;
        font-size: 16px;
        font-weight: 600;
        font-family: inherit;
        letter-spacing: 0.16px;
        line-height: 0.9;
        text-align: center;
        text-align-last: center;
        cursor: pointer;
      }
    }

    /* ── Section 1 — two-column intro ── */
    #omnicom-page-wrapper .section-1 {
      /* shared geometry tokens for the absolutely-positioned hero lottie
         and the blur strip layered over it (so both stay in sync) */
      /* single fluid clamp from Figma's "Asset 23" dims — mobile (403) 300.284×275.18
         → desktop (1440) 707×646. No mobile size override; it scales in one curve. */
      --s1-lottie-w: clamp(300.284px, 142.22px + 39.22vw, 707px);
      --s1-lottie-h: clamp(275.18px, 131.07px + 35.76vw, 646px);
      --s1-lottie-bottom: calc(var(--s1-lottie-h) * -63 / 1140);

      background-color: #fff;
      padding: clamp(99px, 63.43px + 9.484vw, 200px) 0
        clamp(30px, 12.4px + 4.695vw, 80px);
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      overflow-x: clip;
    }
    /* flex-row wrapper, justify-content: space-between */
    #omnicom-page-wrapper .s1-inner {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 0;
    }
    /* blur strip — covers the FULL WIDTH of the lottie × bottom 35% of its
       height, anchored to .section-1 just like the lottie. Sits in the DOM
       AFTER the lottie and BEFORE .s1-inner so source order puts it above
       the lottie (both at z-index:0) and below the cols (z-index:1) → the
       backdrop-filter blurs the lottie pixels underneath without affecting
       the text. Uses the same --s1-lottie-* tokens so the strip tracks the
       lottie's fluid sizing automatically. */
    #omnicom-page-wrapper .s1-lottie-blur {
      position: absolute;
      /* bottom-anchored to frost the LOWER part of the circle (the legs that
         descend into section-2) while the top arc stays sharp. The box hangs
         ~9% of H past the section boundary so its bottom mask-fade falls in
         the section-2-occluded zone — the visible frost stays solid right to
         the boundary. The top mask-fade gives the soft sharp→frosted blend. */
      /* Figma frosts the UPPER-LEFT of the ring (where the thick arc is). The
         box is oversized (kernel room on right/bottom) but a radial mask
         concentrates the visible frost top-left and fades out before the right
         edge — so it never spans the full width. */
      top: calc(var(--s1-lottie-h) * -0.05);
      left: calc(max(32px, 50vw - 600px) + clamp(100px, -6.1rem + 38.03vw, 429.5px) - var(--s1-lottie-w) - 25vw);
      width: calc(var(--s1-lottie-w) + 50vw);
      height: calc(var(--s1-lottie-h) * 0.95);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      -webkit-mask-image: radial-gradient(ellipse 42% 45% at 38% 32%, #000 38%, transparent 74%);
      mask-image: radial-gradient(ellipse 42% 45% at 38% 32%, #000 38%, transparent 74%);
      pointer-events: none;
      z-index: 0;
    }
    /* hero lottie — anchored to .section-1 (its next positioned ancestor,
       since .s1-inner is now position:static). Two anchors with the same
       percentage trick:
       - right:50% of the 100vw section → bounding box's right edge sits at
         50vw = viewport center = wrapper center (wrapper is auto-centered).
       - bottom:calc(...) → pushes the bbox bottom down by a fraction of the
         blue stroke's rendered thickness so the stroke straddles the
         section-1/section-2 boundary, slightly weighted into section-2 (the
         lottie looks like it rests on the section edge with a touch of
         sink). Math: stroke = 84 viewBox units, viewBox height = 1140, the
         63 numerator = 0.75 of the stroke thickness (≈ centerline + ¼
         stroke). Driven by --s1-lottie-h so the offset scales with the
         fluid lottie height (≈ -9.7px mobile → -54.9px desktop).
       Explicit width+height (NOT aspect-ratio): <lottie-player> is a web
       component that ignores aspect-ratio; without an explicit height the
       player collapses. Fluid 288×263 → 1087×993 (viewport 375→1440). */
    #omnicom-page-wrapper .s1-lottie {
      position: absolute;
      /* top-anchored (not bottom) so the lottie doesn't slide down as
         section-1 grows from copy wrapping. Factor -383/993 calibrated
         at desktop (2056vw, lottie_h=993, top=-383). */
      bottom: clamp(-269px, -5.4rem - 12.676vw, -134px);
      left: calc(max(32px, 50vw - 600px) + clamp(100px, -6.1rem + 38.03vw, 429.5px) - var(--s1-lottie-w));
      width: var(--s1-lottie-w);
      height: var(--s1-lottie-h);
      /* Figma desktop rotation; mobile overrides to -157.58deg in the media query */
      transform: rotate(-29.48deg);
      pointer-events: none;
      z-index: 0;
    }
    /* columns — left: heading, right: body */
    #omnicom-page-wrapper .s1-col-left,
    #omnicom-page-wrapper .s1-col-right {
      position: relative;
      z-index: 1;
    }
    #omnicom-page-wrapper .s1-col-left {
      flex: 0 1 clamp(100px, -2.66rem + 38.03vw, 505px);
    }
    /* right column — body paragraph */
    #omnicom-page-wrapper .s1-col-right {
      flex: 0 1 clamp(100px, -7.52rem + 58.78vw, 726px);
      display: flex;
      flex-direction: column;
      gap: 30px;
    }
    #omnicom-page-wrapper .s1-text {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      color: #373737;
    }
    /* heading — the "&" is Instrument Sans; fluid 40px (mobile) → 46px (desktop) */
    #omnicom-page-wrapper .s1-heading {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(40px, 2.37rem + 0.56vw, 46px);
      font-weight: 400;
      line-height: 0.92;
      letter-spacing: -0.92px;
      color: #1b1b1b;
    }
    /* interlaced accent — Cormorant Garamond Medium Italic; fluid 53px → 58px */
    #omnicom-page-wrapper .s1-accent {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(53px, 3.2rem + 0.47vw, 58px);
      line-height: 0.92;
    }
    /* structural reflow → needs a media query (clamp can't restack columns) */
    @media (max-width: 768px) {
      #omnicom-page-wrapper .s1-inner {
        flex-direction: column;
        /* override desktop's flex-start so stacked cols fill the cross-axis
           width — needed for the logo's margin-inline:auto to actually center */
        align-items: stretch;
        gap: 30px;
      }
      #omnicom-page-wrapper .s1-col-left,
      #omnicom-page-wrapper .s1-col-right {
        flex: 1 1 auto;
      }
      /* lottie on mobile — size comes from the single fluid clamp above (no
         override). Here we only re-anchor it: top-aligned and horizontally
         centered. */
      #omnicom-page-wrapper .s1-lottie {
        top: calc(var(--s1-lottie-h) * -0.27);
        bottom: auto;
        /* horizontal centering: left:0 + right:0 + margin-inline:auto centers
           the width-constrained absolute element in its 100vw container */
        left: 0;
        right: 0;
        margin-inline: auto;
        transform: rotate(-157.58deg);
      }
      /* mobile blur: the lottie is centered + pushed up, sitting
         behind the logo. Extend the strip vertically (height: 1.40)
         and use a tighter mask (15%/80% vs desktop 25%/70%) so the
         solid blur region:
         - starts at the logo's vertical middle (top half sharp)
         - extends down past the heading + into the body paragraph
         - fades smoothly into section-2's dark transition. */
      /* mobile: Figma keeps the top-left of the ring sharp and frosts the
         LOWER part (where it sits behind the heading). Radial mask concentrates
         the frost on the ring's lower-centre and fades the top + edges. */
      #omnicom-page-wrapper .s1-lottie-blur {
        top: calc(var(--s1-lottie-h) * -0.05);
        bottom: auto;
        left: 0;
        right: 0;
        margin-inline: auto;
        width: calc(var(--s1-lottie-w) + 50vw);
        height: calc(var(--s1-lottie-h) * 1.75);
        -webkit-mask-image: radial-gradient(ellipse 48% 26% at 50% 34%, #000 45%, transparent 80%);
        mask-image: radial-gradient(ellipse 48% 26% at 50% 34%, #000 45%, transparent 80%);
      }
    }

    /* ════ Section 2 — black, three-row stack ════ */
    #omnicom-page-wrapper .section-2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, #FF672E 0%, #4F7FF2 100%);
    }
    #omnicom-page-wrapper .section-2 {
      background-color: #0a0a0a;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.00) 38.5%, rgba(0, 0, 0, 0.65) 62.02%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%),
        url("/wp-content/uploads/2026/06/ld-s2-bg.jpg") lightgray 50% / cover no-repeat;
      color: #ffffff;
      padding: clamp(60px, 15.64px + 11.83vw, 186px) 0 clamp(60px, 26.2px + 9.014vw, 156px);
      /* fluid band height — negative-slope clamp: taller on narrow viewports
         (clears the man's face on iPad portrait ~820px), no-op on desktop
         (at ≥1440 the 440px floor sits below the natural ~465px height). The
         flex-end below bottom-anchors the copy under the face; harmless on
         desktop where the band's free space is ~0. Mobile (≤768) keeps its own
         taller min-height from the media query below. */
      min-height: clamp(440px, 800px - 27vw, 660px);
      display: flex;
      align-items: flex-end;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      overflow-x: clip;
    }
    /* flex-column wrapper — 3 rows */
    #omnicom-page-wrapper .s2-inner {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    /* ── Shared eyebrow badge pattern (sections 2, 3, 4) ──
       Inline-flex pill with a fixed visible size (272x41), holding a
       dot + label. The "glow" is a pre-rendered PNG positioned absolute
       and MUCH larger than the pill (426x196), shifted by negative top/
       left so the focal area of the glow is centered behind the visible
       pill. Lets the soft glow bleed past the pill bounds without
       affecting layout, and avoids the runtime cost of backdrop-filter. */
    #omnicom-page-wrapper .s2-eyebrow,
    #omnicom-page-wrapper .s3-eyebrow,
    #omnicom-page-wrapper .s4-eyebrow,
    #omnicom-page-wrapper .s4-eyebrow {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 272px;
      height: 41px;
      padding: 6px 14px;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(14px, 0.73rem + 0.30vw, 16px);
      font-weight: 600;
      letter-spacing: 0.16px;
      line-height: 1.4;
    }
    /* All 3 eyebrows render at 440×196 per Figma (frame node bbox).
       Offsets center the glow PNG around the visible 272×41 pill:
       - top:-77 = (196-41)/2, glow extends ≈77px above/below the pill
       - left:-81 ≈ (440-272)/2, glow extends ≈81px left/right of the pill
       The s4 PNG has a slightly different intrinsic glow center than s2/s3
       (the meetOmni-badge-02 export is shaped differently), so its left is
       fine-tuned to -86 to land visually identical to the others. */
    #omnicom-page-wrapper .s2-eyebrow-bg,
    #omnicom-page-wrapper .s3-eyebrow-bg,
    #omnicom-page-wrapper .s4-eyebrow-bg,
    #omnicom-page-wrapper .s4-eyebrow-bg {
      position: absolute;
      /* !important + max-width:none — BeTheme has a global img{max-width:100%}
         rule that caps the img to its parent pill width (272px) and crushes
         the 440px-wide glow. Override here so the bg PNG renders at its
         designed dimensions. */
      width: 440px !important;
      max-width: none !important;
      height: 196px !important;
      top: -77px;
      left: -81px;
      z-index: 0;
      pointer-events: none;
    }
    #omnicom-page-wrapper .s4-eyebrow-bg {
      left: -86px;
    }
    #omnicom-page-wrapper .s2-eyebrow > :not(.s2-eyebrow-bg),
    #omnicom-page-wrapper .s3-eyebrow > :not(.s3-eyebrow-bg),
    #omnicom-page-wrapper .s4-eyebrow > :not(.s4-eyebrow-bg),
    #omnicom-page-wrapper .s4-eyebrow > :not(.s4-eyebrow-bg) {
      position: relative;
      z-index: 1;
    }
    #omnicom-page-wrapper .s2-eyebrow-dot,
    #omnicom-page-wrapper .s3-eyebrow-dot,
    #omnicom-page-wrapper .s4-eyebrow-dot,
    #omnicom-page-wrapper .s4-eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    /* Per-section text + dot colors */
    #omnicom-page-wrapper .s2-eyebrow,
    #omnicom-page-wrapper .s3-eyebrow,
    #omnicom-page-wrapper .s4-eyebrow {
      color: #fff;
    }
    #omnicom-page-wrapper .s2-eyebrow-dot,
    #omnicom-page-wrapper .s3-eyebrow-dot,
    #omnicom-page-wrapper .s4-eyebrow-dot {
      background-color: #fff;
    }
    #omnicom-page-wrapper .s4-eyebrow {
      color: #000;
    }
    #omnicom-page-wrapper .s4-eyebrow-dot {
      background-color: #000;
    }

    #omnicom-page-wrapper .s2-text {
      margin: 0;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1.6em;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(14px, 0.73rem + 0.30vw, 16px);
      font-weight: 400;
      line-height: normal;
      color: #ffffff;
    }
    #omnicom-page-wrapper .s2-text > p {
      margin: 0;
    }
    /* heading — fluid font-size 30px (mobile) → 46px (desktop) */
    #omnicom-page-wrapper .s2-heading {
      margin: 0;
      flex: 1 1 0;
      min-width: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(30px, 0.73rem + 2.38vw, 46px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.92px;
      color: #ffffff;
    }
    /* row 2 — flex-row, justify-content: space-between */
    #omnicom-page-wrapper .s2-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: clamp(20px, 0.28rem + 4.13vw, 64px);
    }
    @media (max-width: 768px) {
      /* Mobile hero: Figma frame is a fixed 631px (at 403w) with content
         bottom-anchored (justify-end) so the bg image gets a tall region up
         top. Recreate with a fluid min-height + flex-end; tighten the heading
         tracking so "Our Curated Curriculum" fits one line like Figma. */
      #omnicom-page-wrapper .section-2 {
        min-height: clamp(560px, 300px + 82vw, 700px);
        padding-top: 60px;
        padding-bottom: 60px;
        align-items: flex-end;
      }
      #omnicom-page-wrapper .s2-heading {
        letter-spacing: -0.6px;
      }
      #omnicom-page-wrapper .s2-row {
        flex-direction: column;
      }
    }
    /* row 3 — carousel: static row on desktop, swipeable on mobile.
   Full-bleed track + max() padding: the first card aligns to the container,
   overflowing cards bleed to the viewport edge instead of being hard-clipped. */
    #omnicom-page-wrapper .s2-cards {
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      padding-left: max(32px, 50vw - 600px);
      padding-right: max(32px, 50vw - 600px);
      overflow: hidden;
    }
    #omnicom-page-wrapper .s2-cards-inner {
      display: flex;
      padding-top: clamp(30px, -0.27rem + 4.46vw, 60px);
      /* 20px between every flex item (cards ↔ separators) at all breakpoints —
         the +/= symbols always sit 20px from the cards. */
      gap: 20px;
      /* promote the animated track to its own GPU layer →
         the x-transform is composited, not repainted, every frame */
      will-change: transform;
      backface-visibility: hidden;
    }
    #omnicom-page-wrapper .s2-card {
      flex: 1;
      background: rgba(250, 250, 250, 0.9);
      border-radius: 24px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    #omnicom-page-wrapper .s2-card-sep {
      margin: 0;
      flex-shrink: 0;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      /* opacity is driven per-frame by JS (updateSepVisibility) as the
         separator pages out on the left — no CSS transition, or it would lag
         behind the per-frame writes */
    }
    #omnicom-page-wrapper .s2-card-sep span {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #omnicom-page-wrapper .s2-card-sep svg {
      display: block;
    }
    /* cards-per-view: 3-up ≥992 (flex-fill — the +/= equation reads inline
       with all three cards). Below 992 each card takes a fixed share so the
       track overflows and the carousel pages it — the +/= separator stays
       VISIBLE and peeks at the trailing edge as a "there's more" hint, but the
       card widths are tuned so ONLY the symbol peeks: the next CARD lands
       exactly at the clip edge, never slicing into view.

       Geometry: .s2-cards clips with overflow:hidden at its PADDING-box, i.e.
       32px past the content edge on each side, while cards are sized off the
       content width. Between two cards sits 60px (gap 20 + sep 20 + gap 20).
       For the next card to land at the clip edge (vw = content + 64), each
       card's width must reach that boundary — hence the −28 (mobile) / −88
       (tablet) reductions below (the old −34 / −94 left the card peeking 6px
       into the padding alongside the symbol). */
    @media (max-width: 992px) {
      /* tablet 2-up: card1 + "+" + card2 visible, the trailing "=" peeks,
         card3 fully clipped. card3.left = 32 + 2·W + 120; W = (100%−88px)/2
         puts it exactly at vw. */
      #omnicom-page-wrapper .s2-card {
        flex: 0 0 calc((100% - 88px) / 2);
      }
    }
    @media (max-width: 640px) {
      /* mobile 1-up: card1 visible, the trailing "+" peeks, card2 fully
         clipped. card2.left = 32 + W + 60; W = 100%−28px puts it exactly at
         vw, so the symbol peeks but no card slice shows. */
      #omnicom-page-wrapper .s2-card {
        flex: 0 0 calc(100% - 28px);
      }
    }
    #omnicom-page-wrapper .s2-card-title {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(16px, 0.91rem + 0.38vw, 20px);
      font-weight: 600;
      line-height: 120%;
      letter-spacing: -0.4px;
      color: #000;
    }
    #omnicom-page-wrapper .s2-card-text {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(14px, 0.73rem + 0.30vw, 16px);
      font-weight: 500;
      line-height: 153%;
      color: #1b1b1b;
    }
    /* carousel nav — hidden by default; JS reveals it only when the cards overflow (mobile) */
    #omnicom-page-wrapper .s2-nav {
      display: none;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 30px;
    }
    #omnicom-page-wrapper .s2-nav-arrows {
      display: flex;
      gap: 10px;
    }
    #omnicom-page-wrapper .s2-arrow-btn {
      width: clamp(45px, 1.46rem + 2.83vw, 64px);
      height: clamp(45px, 1.46rem + 2.83vw, 64px);
      position: relative;
      cursor: pointer;
    }
    #omnicom-page-wrapper .s2-pill-indicator {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    #omnicom-page-wrapper .s2-pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 7px;
      background-color: rgba(255, 255, 255, 0.3);
      /* FIXED snappy expansion, decoupled from --carousel-dur: a position
         indicator must feel immediate, not lag the (up-to-1s) slide. */
      transition:
        width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #omnicom-page-wrapper .s2-pill-dot.active {
      width: 35px;
      background-color: #ffffff;
    }


    /* ── Eyebrow badge — pill + bleeding glow PNG (shared s3 + s4) ──
       The established OMC badge (same as OPEN/Omni): a 272×41 inline-flex
       pill holding a dot + label, with a soft glow PNG (meetOmni-badge-02)
       positioned absolute and larger (440×196), bleeding behind the pill.
       No pill background — the glow IS the visual. Text + dot black on
       both (light bgs). */
    #omnicom-page-wrapper .s3-eyebrow,
    #omnicom-page-wrapper .s3-eyebrow {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 272px;
      height: 41px;
      padding: 6px 14px;
      font-family: "Instrument Sans", sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.16px;
      line-height: 1.4;
      color: #000;
    }
    /* glow PNG — 440×196 centered behind the 272×41 pill.
       left = (440-272)/2 = 84; top = (196-41)/2 ≈ 77. The meetOmni-badge-02
       export's glow centroid sits a touch left, so -86 lands it centered.
       !important + max-width:none defeats BeTheme's global img{max-width:100%}
       which would otherwise crush the 440px glow to the 272px pill width. */
    #omnicom-page-wrapper .s3-eyebrow-bg,
    #omnicom-page-wrapper .s3-eyebrow-bg {
      position: absolute;
      width: 440px !important;
      max-width: none !important;
      height: 196px !important;
      top: -77px;
      left: -86px;
      z-index: 0;
      pointer-events: none;
    }
    #omnicom-page-wrapper .s3-eyebrow > :not(.s3-eyebrow-bg),
    #omnicom-page-wrapper .s3-eyebrow > :not(.s3-eyebrow-bg) {
      position: relative;
      z-index: 1;
    }
    #omnicom-page-wrapper .s3-eyebrow-dot,
    #omnicom-page-wrapper .s3-eyebrow-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #000;
      flex-shrink: 0;
    }

    /* ── Pill button (Search / Open Roles) — black pill + arrow circle ──
       Adapted from the temporalhtml2 button pattern, re-scoped + recolored
       to the Figma black variant (#1B1B1B, white label + white arrow). */
    #omnicom-page-wrapper .btn-pill {
      display: inline-flex;
      align-items: flex-start;
      text-decoration: none;
      cursor: pointer;
    }
    #omnicom-page-wrapper .btn-pill-label {
      display: block;
      text-align: center;
      background: #1b1b1b;
      color: #fff;
      padding: 13px 24px;
      border-radius: 40px;
      font-family: "Instrument Sans", sans-serif;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.18px;
      transition: background-color 0.2s;
    }
    #omnicom-page-wrapper .btn-pill-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #1b1b1b;
      margin-left: -2px;
      flex-shrink: 0;
      transition: background-color 0.2s;
    }
    #omnicom-page-wrapper .btn-pill:hover .btn-pill-label,
    #omnicom-page-wrapper .btn-pill:hover .btn-pill-arrow {
      background: #000;
    }
    @media (max-width: 768px) {
      #omnicom-page-wrapper .s3-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
      }
      #omnicom-page-wrapper .s3-col-right {
        padding-top: 0;
        justify-content: flex-end;
      }
    }

    /* ════ Section 3 — "Working at Omnicom", header + two feature rows ════ */
    #omnicom-page-wrapper .section-3 {
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 18.27%);
      padding: clamp(60px, 38.87px + 5.634vw, 120px) 0;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      overflow-x: clip;
    }
    /* flex-column wrapper — 3 children */
    #omnicom-page-wrapper .s3-inner {
      display: flex;
      flex-direction: column;
      gap: clamp(50px, 46.48px + 0.939vw, 60px);
    }
    #omnicom-page-wrapper .s3-text {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(14px, 13.3px + 0.188vw, 16px);
      font-weight: 400;
      line-height: 1.6;
      color: #000;
    }
    /* eyebrow text above each feature title ("How We Work" etc) —
       SemiBold variant of s3-text per Figma (16.46px, tracking 0.16,
       line-height 1.4). Separate class because earlier we used .s3-text
       for both this eyebrow AND the body text below the title, which
       need different weights/spacing. */
    #omnicom-page-wrapper .s3-feature-eyebrow {
      margin: 0;
      margin-top: clamp(15px, 10.73px + 1.06vw, 26px);
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(14px, 13.3px + 0.188vw, 16px);
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 0;
      color: #373737;
    }
    /* heading — fluid font-size 30px (mobile) → 46px (desktop) */
    #omnicom-page-wrapper .s3-heading {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(30px, 1.52rem + 1.5vw, 46px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: clamp(-0.92px, -0.476px - 0.0309vw, -0.6px);
      color: #000;
    }
    /* feature title — fluid font-size 20px (mobile) → 46px (desktop) */
    #omnicom-page-wrapper .s3-feature-title {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(20px, 0.68rem + 2.44vw, 46px);
      font-weight: 600;
      /* lh 1.2 (=24px) mobile → 1 (=46px) desktop, expressed as a length clamp */
      line-height: clamp(24px, 16.25px + 2.066vw, 46px);
      letter-spacing: clamp(-0.92px, -0.198px - 0.0501vw, -0.4px);
      color: #000;
    }
    /* Management & Leadership: Figma muestra el título en 2 líneas. Un
       max-width fuerza el quiebre en desktop; en mobile se anula para que
       fluya natural con el resto. Solo aplica a este título (clase aparte). */
    #omnicom-page-wrapper .s3-feature-title-2line {
      max-width: 8em;
    }
    @media (max-width: 768px) {
      #omnicom-page-wrapper .s3-feature-title-2line {
        max-width: none;
      }
    }
    /* child 2 — flex-row, justify-content: space-between */
    #omnicom-page-wrapper .s3-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      /* same gap as the feature rows below so both columns line up */
      gap: clamp(20px, 0.28rem + 4.13vw, 64px);
      padding-top: clamp(20px, 0.99rem + 1.13vw, 32px);
    }
    /* 2 equal columns (flex: 1 1 0) — match the 50/50 split of the feature
       rows below so the column edges align across the whole section */
    #omnicom-page-wrapper .s3-row .s3-heading,
    #omnicom-page-wrapper .s3-row .s3-text {
      flex: 1 1 0;
      min-width: 0;
    }
    #omnicom-page-wrapper .s3-row .s3-text {
      /* override the inherited 26px from .s3-text — inside s3-row the text
         is centered horizontally next to the heading, not stacked under it */
      margin-top: 0;
    }
    /* feature row — image on one side, text wrapper on the other.
       Text is vertically centered against the image per Figma. */
    #omnicom-page-wrapper .s3-feature {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: clamp(20px, 0.28rem + 4.13vw, 64px);
    }
    /* reverse modifier — image on the right, text on the left */
    #omnicom-page-wrapper .s3-feature-reverse {
      flex-direction: row-reverse;
    }
    /* image slot — holds the Figma 570×347 aspect ratio; object-fit:cover
       crops the photo to fill. The bg is a fallback tint while it loads. */
    #omnicom-page-wrapper .s3-feature-img {
      flex: 1 1 0;
      min-width: 0;
      width: 100%;
      aspect-ratio: 570 / 347;
      display: block;
      border-radius: 24px;
      object-fit: cover;
      background: #e9e9e9;
    }
    /* text side — flex-column of paragraphs */
    #omnicom-page-wrapper .s3-feature-col {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    /* on mobile every feature stacks as a column — image always on top.
   The image is first in the DOM, so `column` (never column-reverse) keeps it
   on top; `row-reverse` only affects the desktop layout. */
    @media (max-width: 768px) {
      /* child 2 — the two space-between paragraphs stack on mobile */
      #omnicom-page-wrapper .s3-row {
        flex-direction: column;
      }
      #omnicom-page-wrapper .s3-feature {
        flex-direction: column;
        align-items: stretch;
      }
      #omnicom-page-wrapper .s3-feature-img,
      #omnicom-page-wrapper .s3-feature-col {
        flex: 0 0 auto;
      }
      /* single fixed aspect-ratio (570/347) at all breakpoints — the card
         images are exported from Figma at exactly that ratio (1140×694), so
         object-fit:cover never crops them on mobile either. No mobile override. */
      /* fluid-width blocks go full-width once columns stack */
      #omnicom-page-wrapper .s3-row .s3-heading,
      #omnicom-page-wrapper .s3-row .s3-text {
        width: 100%;
      }
    }

    /* ════ Section 4 — black, fixed carousel of full-width cards ════ */
black, fixed carousel of full-width cards ════ */
    #omnicom-page-wrapper .section-4 {
      background-color: #000;
      /* circle2.svg moved to ::after pseudo (below) so it can overflow
         the section vertically. background-image can't extend past the
         element's bounds — its bottom-extending portion gets clipped. */
      color: #ffffff;
      padding: 0 0 60px;
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      overflow-x: clip;
      /* isolate: section-3 owns its stacking context so the blur
         ::before samples ONLY the circle ::after underneath, not
         whatever BeTheme's #Content/.mcb-wrap wrappers paint behind. */
      isolation: isolate;
    }
    /* flex-column wrapper — 3 paragraphs + carousel */
    #omnicom-page-wrapper .s4-inner {
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 1;
    }
    #omnicom-page-wrapper .s4-text {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(14px, 0.73rem + 0.30vw, 16px);
      font-weight: 400;
      line-height: 160%;
      color: #ffffff;
    }
    /* heading — fluid font-size 30px (mobile) → 46px (desktop) */
    #omnicom-page-wrapper .s4-heading {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(30px, 0.73rem + 2.38vw, 46px);
      font-weight: 600;
      line-height: 1;
      color: #ffffff;
    }
    /* carousel — full-bleed clipping wrapper + max() padding so overflowing
   cards bleed to the viewport edge instead of clipping at the container */
    #omnicom-page-wrapper .s4-cards {
      width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      overflow: hidden;
    }
    #omnicom-page-wrapper .s4-cards-inner {
      display: flex;
      gap: 0;
      /* promote the animated track to its own GPU layer →
         the x-transform is composited, not repainted, every frame */
      will-change: transform;
      backface-visibility: hidden;
    }
    /* each card = full width of the wrapper → one card per view.
   flex-column so the per-slide intro stacks above the subcards */
    #omnicom-page-wrapper .s4-card {
      flex: 0 0 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      transition: opacity 0.3s ease;
    }
    /* fade the dimmable parts independently (card itself stays at 1).
       promote each to its own compositor layer so the opacity fade runs on
       the GPU instead of repainting the (large) background image every frame
       while the track is sliding. */
    #omnicom-page-wrapper .s4-card-box,
    #omnicom-page-wrapper .s4-card-intro {
      transition: opacity 0.3s ease, filter 0.3s ease;
      will-change: opacity, filter;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    #omnicom-page-wrapper .s4-card:not(.is-active) .s4-card-box,
    #omnicom-page-wrapper .s4-card:not(.is-active) .s4-card-intro {
      filter: brightness(0.5);
    }
    /* bordered box — holds only the subcards; the intro now sits outside it */
    #omnicom-page-wrapper .s4-card-box {
      background-color: #0a0a0a;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: clamp(15px, 0.57rem + 1.45vw, 30px) clamp(15px, 0.33rem + 2.41vw, 40px) 0;
      min-height: clamp(825px, 962.9px - 9.577vw, 927px);
      display: flex;
      align-items: flex-end;
    }
    #omnicom-page-wrapper #s4-cards-container > .s4-card.is-active > div {
      position: relative;
      margin-top: 0;
    }
  
    #omnicom-page-wrapper .s4-cards-area > .s4-card-logo {
      position: absolute;
      top: clamp(50px, -1.875rem + 10.42vw, 95px);
      left: 0;
      width: clamp(265px, 44.6px + 28.7vw, 389px);
      height: clamp(56px, 8px + 6.25vw, 83px);
      object-fit: contain;
      object-position: left top;
      z-index: 5;
    }
    /* card 2 — shows more of the lower part of its bg on desktop */
    #omnicom-page-wrapper .s4-card-box-low {
      background-position: center 32%;
    }
    /* mobile — dedicated portrait crops; keep the bottom-fade gradient layer */
    @media (max-width: 768px) {
      #omnicom-page-wrapper .s4-card-box:not(.s4-card-box-low) {
        background-image:
          linear-gradient(0deg, rgba(0, 0, 0, 0.00) 66.97%, #000 100.62%),
          url('/wp-content/uploads/2026/06/card1mobile-1.jpg') !important;
      }
      #omnicom-page-wrapper .s4-card-box-low {
        background-image:
          linear-gradient(0deg, rgba(0, 0, 0, 0.00) 66.97%, #000 100.62%),
          url('/wp-content/uploads/2026/06/card-2-mobile.jpg') !important;
      }
    }
    /* per-slide intro — text block stacked above the subcards inside a card */
    #omnicom-page-wrapper .s4-card-intro {
      display: flex;
      flex-direction: column;
    }
    #omnicom-page-wrapper .s4-card-intro-text {
      margin: 0;
      padding-top: 26px;
      min-height: 76px;
      font-family: "Instrument Sans", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 160%;
      color: #ffffff;
    }
    /* card sub-heading — fluid font-size 30px (mobile) → 36px (desktop) */
    #omnicom-page-wrapper .s4-card-heading {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: clamp(30px, 1.45rem + 0.89vw, 36px);
      font-weight: 600;
      line-height: 1;
      color: #ffffff;
    }
    /* cards-area: position:relative so the static overlay can be absolute inside */
    #omnicom-page-wrapper .s4-cards-area {
      position: relative;
    }
    /* static subcard overlay — full-bleed width; padding lives on the subcard itself */
    #omnicom-page-wrapper .s4-subcard-overlay {
      position: absolute;
      bottom: 0;
      width: 100vw;
      left: calc(50% - 50vw);
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 87.447%),
        url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.75%22 numOctaves=%222%22 stitchTiles=%22stitch%22 /%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22 /%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22 opacity=%220.4%22 /%3E%3C/svg%3E') 0 0 / 180px 180px repeat,
        rgba(0, 0, 0, 0.20);
      background-blend-mode: normal, overlay, normal;
      -webkit-backdrop-filter: blur(11.735px);
      backdrop-filter: blur(11.735px);
      padding-block: clamp(30px, 13.18px + 4.485vw, 67px);
    }
    /* subcard — full-width glass card; horizontal padding matches container gutters */
    #omnicom-page-wrapper .s4-subcard {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0;
      padding: 0 max(32px, 50vw - 600px);
    }
    /* all copy variants share one grid cell so the card reserves the height of
       the TALLEST copy — no jump when paging between cards with different line
       counts. Pure CSS: grid sizing, only opacity toggles per slide. */
    #omnicom-page-wrapper .s4-subcard-stack {
      display: grid;
    }
    #omnicom-page-wrapper .s4-subcard-slide {
      grid-area: 1 / 1;
      opacity: 0;
      transition: opacity 0.28s ease;
      pointer-events: none;
    }
    #omnicom-page-wrapper .s4-subcard-slide.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    /* subcard copy — Figma: identical at mobile (403) and desktop (1440), so fixed (no clamp) */
    #omnicom-page-wrapper .s4-subcard-text {
      margin: 0;
      font-family: "Instrument Sans", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
      color: #e1e1e1;
    }
    /* title — Instrument Sans SemiBold 30/1, -0.6px tracking */
    #omnicom-page-wrapper .s4-subcard-title {
      font-size: 30px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.6px;
    }
    #omnicom-page-wrapper .s4-subcard-body {
      margin-top: 20px;
    }
    /* carousel nav — ALWAYS visible (fixed): arrows left, pills right, below the cards */
    #omnicom-page-wrapper .s4-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 60px;
    }
    #omnicom-page-wrapper .s4-nav-arrows {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: clamp(30px, 58.76px - 2.247vw, 50px);
    }
    #omnicom-page-wrapper .s4-arrows-btns {
      display: flex;
      align-items: center;
      gap: clamp(10px, 3.95px + 1.616vw, 25.52px);
    }
    #omnicom-page-wrapper .s4-arrow-btn {
      width: clamp(45px, 1.46rem + 2.83vw, 64px);
      height: clamp(45px, 1.46rem + 2.83vw, 64px);
      position: relative;
      cursor: pointer;
    }
    /* ── carousel arrow states (shared by both carousels) ── */
    #omnicom-page-wrapper .arrow-ico {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: clamp(45px, 1.46rem + 2.83vw, 64px);
      height: clamp(45px, 1.46rem + 2.83vw, 64px);
    }
    /* next arrow = the prev SVG mirrored */
    #omnicom-page-wrapper .s2-arrow-next .arrow-ico,
    #omnicom-page-wrapper .s4-arrow-next .arrow-ico {
      transform: translate(-50%, -50%) scaleX(-1);
    }
    /* default visible, hover hidden — instant swap on hover */
    #omnicom-page-wrapper .arrow-ico-hover {
      display: none;
    }
    #omnicom-page-wrapper .s2-arrow-btn:hover .arrow-ico-default,
    #omnicom-page-wrapper .s4-arrow-btn:hover .arrow-ico-default {
      display: none;
    }
    #omnicom-page-wrapper .s2-arrow-btn:hover .arrow-ico-hover,
    #omnicom-page-wrapper .s4-arrow-btn:hover .arrow-ico-hover {
      display: block;
    }
    /* enabled ↔ disabled fade — FIXED quick fade, decoupled from the slide.
       The nav state is feedback, not content: it should register fast and
       consistently, not drag along with the (distance-derived, up-to-1s)
       --carousel-dur the track uses. */
    #omnicom-page-wrapper .s2-arrow-btn,
    #omnicom-page-wrapper .s4-arrow-btn {
      transition: opacity 0.2s ease;
    }
    /* disabled — dim to 60%, no hover, not clickable */
    #omnicom-page-wrapper .s2-arrow-btn.is-disabled,
    #omnicom-page-wrapper .s4-arrow-btn.is-disabled {
      opacity: 0.6;
      cursor: default;
      pointer-events: none;
    }
    #omnicom-page-wrapper .s4-pill-indicator {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    #omnicom-page-wrapper .s4-pill-dot {
      width: 7px;
      height: 7px;
      border-radius: 7px;
      background-color: rgba(255, 255, 255, 0.3);
      /* FIXED snappy expansion, decoupled from --carousel-dur: a position
         indicator must feel immediate, not lag the (up-to-1s) slide. */
      transition:
        width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #omnicom-page-wrapper .s4-pill-dot.active {
      width: 35px;
      background-color: #ffffff;
    }
    /* section-3 — below 768px the carousel becomes a stacked flex-column
   (breakpoint must match mobileBreakpoint in the initCarousel call) */

  /* ──────────────────────────────────────────────────────────────────────
     Reset del contenedor de BeTheme
     Al salir de BeBuilder, el contenido pasa por the_content(), que BeTheme
     envuelve en .section_wrapper con padding: 80px. Eso angosta el wrapper a
     ~1309px y, como #omnicom-page-wrapper tiene overflow-x: clip, recorta las
     secciones full-bleed (100vw). Se neutraliza solo dentro de .the_content
     para no tocar el resto del sitio.
     ────────────────────────────────────────────────────────────────────── */
  .the_content > .section_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .the_content.mcb-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .the_content .the_content_wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }