/* Banner section */
body:is(.page-id-42251) #masthead,
body:is(.page-id-42251) .ast-primary-header-bar,
body:is(.page-id-42551) .site-primary-header-wrap {
   
    z-index: 999 !important;
   
}
    .elevate-banner {
        width: 100%;
        position: relative;
        overflow: hidden;
		@media screen and (min-width: 1025px) {
    &::before {
    content: '';
    position: absolute;
    bottom: 0;
    background-image: url();
    background-size: cover;
    z-index: 99;
    pointer-events: none;
    width: 100%;
    top: 0%;
}

    }

        /* .banner-bg {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
        } */

        .banner-content {
			aspect-ratio: 1489 / 850;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            position: relative;
            padding-left: 22%;
            padding-right: 22%;
            padding-top: 10.68%;
            z-index:99;
            /* Add this line */
            

            .text-above-logo {
                width: 100%;
                text-align: center;
                color: var(--adro-electric-green);
                font-weight: 500;
                margin-bottom: 1.87%;
            }

            .logo-wrapper {
                width: 41.11%;
                margin-bottom: 9.58%;

                .elevate-logo {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 442/230;
                    background-size: cover;
                }
            }

            .elevate-title {
                width: 100%;
                text-align: center;
                font-weight: 500;
                margin-bottom: 1.12%;
            }

            .elevate-title-below {
                max-width: 100%;
                font-weight: 500;
                margin-bottom: 5.12%;
            }

            .text-below-title {
                width: 100%;
                text-align: center;
                font-weight: 500;
                color: var(--adro-electric-green);
                margin-bottom: 4.47%;
            }

            a .elevate-get-in-touch {
                background-color: var(--adro-deep-blue);
                color: var(--adro-electric-green);
                border-color: 2px solid var(--adro-electric-green);
                
            }
a{
margin-bottom: 20%;
}
            a .elevate-get-in-touch:hover {

                background-color: var(--adro-electric-green);
                color: var(--adro-deep-blue);
            }
        }
    }

    @media screen and (max-width: 1024px) {
        .elevate-banner {
            width: 100%;
            height: 84.52vh;


            .banner-content {
                padding-left: 14.63%;
                padding-right: 14.63%;
                padding-top: 24.5%;

                .text-above-logo {
                    margin-bottom: 5.77%;
                }

                .elevate-logo {
                    width: 53.9%;
                    height: auto;
                    aspect-ratio: 318 / 166;
                    margin-bottom: 6.78%;
                    object-fit: cover;

                }

                .elevate-title {
                    margin-bottom: 1%;
                }

                .elevate-title-below {
                    text-align: center;
                }

                .text-below-title {
                    margin-bottom: 4.07%;
                }

            }

            @media screen and (orientation: landscape) {
                height: 100.52vh;

                .banner-content {
                    padding-top: 9.5%;
                }

            }
        }
    }

    @media screen and (max-width: 767.5px) and (orientation: portrait) {
        .elevate-banner {
            width: 100%;
            height: 84.25vh;


            .banner-content {
                padding-left: 8.23%;
                padding-right: 8.23%;
                padding-top: 37.4%;

                .text-above-logo {
                    margin-bottom: 4.92%;
                }

                .elevate-logo {
                    width: 74.9%;
                    height: auto;
                    aspect-ratio: 244 / 128;
                    margin-bottom: 7.37%;

                }

                .elevate-title {
                    margin-bottom: 2%;
                }

                .text-below-title {
                    padding-left: 5%;
                    padding-right: 5%;
                    margin-bottom: 7.37%;
                }
            }
        }
    }





/* COUNTER SECTION */

    .counter-section {
        width: 100%;
        height: 15.94vh;
        background-color: var(--adro-electric-green);
        color: var(--adro-deep-blue);
        padding: 1.41% 3.34%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;

        .event-start-title {
            width: auto;
            font-weight: 500;
            text-align: left;
            color: var(--adro-deep-blue);
            margin: 0;
            margin-left: unset !important;
            margin-right: unset !important;
        }

        .counter {
            color: var(--adro-deep-blue);
            display: flex;
            align-items: center;
            flex-direction: row;
            margin-left: 9.27%;
            width: 62.51%;
            justify-content: space-between;

            .counter-style {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                min-width: 11.08%;

                /* select 1 div */
                span:nth-child(1) {
                    font-weight: 700;
                    font-family: Roboto !important;
                }

                span:nth-child(2) {
                    font-weight: 500;
                }
            }
        }

        /* Event started state - hide counter and make title full width */
        &.event-started {
            justify-content: center;

            .event-start-title {
                width: 100%;
                text-align: center;
                margin: 0 !important;
            }

            .counter {
                display: none;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        .counter-section {
            height: 16.05vh;
            padding: 1.92% 4.08%;
            flex-direction: column;
            align-items: center;

            .event-start-title {
                margin-bottom: 2.1%;
                text-align: center;
            }

            .counter {
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                margin-left: 0 !important;
                margin-right: 0 !important;

                .counter-style {
                    text-align: center;
                    min-width: 16.19%;
                }
            }

            /* Event started state for tablet */
            &.event-started {
                justify-content: center;

                .event-start-title {
                    margin-bottom: 0;
                    width: 100%;
                    text-align: center;
                }
            }

            @media screen and (orientation: landscape) {

                height: 20.94vh;
                padding: 1.41% 3.34%;
                flex-direction: row;
                align-items: center;

                .event-start-title {
                    margin-bottom: 0;
                    text-align: left;
                }

                .counter {
                    width: 62.51%;
                    flex-direction: row;
                    justify-content: space-between;
                    margin-left: 9.27% !important;
                    margin-right: 0 !important;
                    height: auto;
                    display: flex;
                    grid-template-columns: none;
                    grid-template-rows: none;
                    gap: 0;

                    .counter-style {
                        text-align: center;
                        min-width: 11.08%;

                    }
                }

                /* Event started state for landscape */
                &.event-started {
                    justify-content: center;

                    .event-start-title {
                        text-align: center;
                        width: 100%;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 767.5px) and (orientation: portrait) {
        .counter-section {
            height: 34.38vh;
            padding: 4.62% 6.16%;
            flex-direction: column;
            align-items: center;

            .event-start-title {
                margin-bottom: 5.27%;
                text-align: center;
                font-size: 1.3rem;
            }

            .counter {
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                gap: 3%;
                margin-left: 0 !important;
                margin-right: 0 !important;

                .counter-style {
                    text-align: center;
                    min-width: 16.19%;

                    span:nth-child(1) {
                        font-size: 2rem;
                    }
                }
            }

            /* Event started state for mobile portrait */
            &.event-started {
                height: 15.94vh;
                justify-content: center;

                .event-start-title {
                    margin-bottom: 0;
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }


/* SPEAKERS SECTION */

  .speakers-page-carousel-wrapper {
    padding: 0 3.34%;

    a {
      text-decoration: none !important;
    }

    circle {
      stroke: var(--adro-electric-green)
    }

    svg path,
    line {
      fill: var(--adro-electric-green) !important;
    }

    .owl-carousel {
      .owl-dots .owl-dot {
        border: 2px solid var(--adro-electric-green) !important;

      }

      .owl-dot.active {
        background-color: var(--adro-electric-green) !important;
      }
    }

    .section-central-heading {
      margin-bottom: 2.7% !important;
      text-align: left;

      h2,
      .sub-heading {
        margin-bottom: 2.7%;
      }

    }

    .speakers-page-item {
      position: relative;

      img {
        aspect-ratio: 72/43;
        border-radius: 18px;
      }
    }

    .image-wrapper {
      position: relative;
      border: 2px solid var(--adro-electric-green);
      border-radius: 20px;

    }

    .speaker-name {
      position: absolute;
      width: 78.2%;
      bottom: 0;
      left: 0;
      color: var(--adro-deep-blue);
      background-color: var(--adro-electric-green);
      padding: 1.5% 2.8%;
      border-radius: 0px 18px;
      z-index: 10;
    }

    .cta-with-icon {
      width: 81.3%;
      margin-bottom: 7%;
      margin-top: 0%;
    }

    .speakers-page-item .cta-with-icon:hover {
      color: var(--adro-electric-blue);
    }

    .description-text {
      margin: 8% 0 8.5% 0;
      width: 81.3%;
      color: white;
    }

    .title-icon {
      vertical-align: text-top;
      margin-left: 1%;
    }

    .carousel-controls {
      margin-bottom: 2.2%;

    }

    @media screen and (min-width: 768px) and (max-width: 1024px)and (orientation:portrait) {
      padding: 0;

      .section-central-heading {
        margin-bottom: 4.8% !important;
        text-align: left;

        h2 {
          margin: 0 4.8% 2.9% 4.8%;
        }

        .sub-heading {
          margin: 0 4.8% 4.8% 4.8%;
        }
      }

      .speaker-name {
        width: 84.7%;
        padding: 2.2% 4.4%;
      }

      .description-text {
        width: 100%;
        margin: 7% 0 8.8% 0;
      }

      .carousel-controls {
        margin-bottom: 3.5%;
      }
    }

    @media screen and (max-width: 767.5px) {
      padding: 0;

      .section-central-heading {
        margin-bottom: 10.3% !important;

        h2 {
          margin: 0 6.32% 6.32% 6.32%;
        }

        .sub-heading {
          margin: 0 6.32% 8.32% 6.32%;
        }
      }

      .speaker-name {
        width: 87%;
        padding: 3% 5.8%;
      }

      .description-text {
        width: 100%;
        margin: 8.4% 0 17% 0;

      }

      .carousel-controls {
/*         margin-bottom: 24.5%; */
      }
    }


  }

  .speakers-page-carousel-wrapper{ .carousel-controls #playPauseBtn {
    display: none !important;
  }
}

/* INTRODUCTION SECTION */

/*
  Two independent blocks: the video, then the heading + description.
  Replaces the old single side-by-side .our_expertise_container wrapper,
  so there is no longer a duplicated .portrait-only-header heading.
*/

.our_expertise_video_section {
    display: flex;
    width: 76%;
    aspect-ratio: 1459 / 720;
    height: 50%;
    justify-content: center;
    align-items: center;
    margin-left: 12% !important;
    margin-top: 3.8%;

    .video-container {
        width: 100%;
        aspect-ratio: 1459 / 720;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
    }

    .video-container iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.our_expertise_content_section {
    display: inline;
    width: 72.4%;

    h2 {
        width: 73.9%;
        aspect-ratio: 1419 / 57;
        padding-top: 14.8%;
        padding-bottom: 0.7%;
        text-align: left;
        font-weight: 500;
        color: white;
        margin-left: 22%;
        margin-right: 5.7%;
    }

    .description {
        width: 72.4%;
        aspect-ratio: 1390 / 381;
        font-weight: 400;
        text-align: left;
        color: white;
        margin-left: 22%;
        margin-right: 5.7%;
    }
}

/* Tablet portrait */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .our_expertise_video_section {
        width: 100%;
        aspect-ratio: 834 / 438;
        margin: 0 !important;

        .video-container {
            width: 90.4%;
            aspect-ratio: 754 / 438;
        }
    }

    .our_expertise_content_section {
        margin: 0 !important;

        h2 {
            margin: 0 auto !important;
            width: 81%;
            aspect-ratio: 651 / 94;
			padding-top: 15.9%;
        }

        .description {
            margin: 0 auto !important;
            width: 79.8%;
            aspect-ratio: 665 / 333;
        }
    }

    /*
      NOTE: the heading text below is hard-coded, so on this breakpoint the
      ACF heading field is ignored. See the handover note - this wants
      replacing with a <span> inside the ACF value.
    */
    .our_expertise_content_section h2.large-size {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;

        &::before {
            content: "40 visionaries.One";
            display: block;
            font-size: clamp(24px, 4vw, 40px) !important;
            line-height: 1.3 !important;
            font-weight: 500;
            color: #ffffff;
        }

        &::after {
            content: "game-changing conversation.";
            display: block;
            font-size: clamp(24px, 4vw, 40px) !important;
            line-height: 1.3 !important;
            font-weight: 500;
            color: var(--adro-electric-green);
        }
    }
}

/* Desktop (tablet landscape falls back to the base rules above) */
@media screen and (min-width: 1025px) {
    .our_expertise_content_section {
        h2 {
            aspect-ratio: 651 / 94;
            width: 78% !important;
        }
    }
}

/* Mobile */
@media screen and (max-width: 767.5px) {
    .our_expertise_video_section {
        width: 100%;
        aspect-ratio: 390 / 344;
        margin: 0 auto !important;

        .video-container {
            width: 88%;
            aspect-ratio: 342 / 296;
            border-radius: 20px !important;
            flex-shrink: 0;
        }
    }

    .our_expertise_content_section {
        width: 100%;
        aspect-ratio: 390 / 432;

        h2 {
            text-align: left;
            aspect-ratio: 334 / 61;
            width: 85.9%;
            padding-right: 4%;
            margin: 0 auto !important;
            padding-top: 0 !important;
            padding-bottom: 6%;
        }

        .description {
            text-align: left;
            aspect-ratio: 316 / 228;
            width: 86%;
            margin: 0 auto !important;
            font-size: clamp(18px, 2vw, 20px) !important;
        }
    }

    /* NOTE: hard-coded heading text again - same caveat as tablet portrait. */
    .our_expertise_content_section h2.large-size {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;

        &::before {
            content: "40 visionaries. One";
            display: block;
            font-size: clamp(20px, 2vw, 20px) !important;
            line-height: normal !important;
            font-weight: 500;
            color: #ffffff;
        }

        &::after {
            content: "game-changing conversation.";
            display: block;
            font-size: clamp(20px, 2vw, 20px) !important;
            line-height: normal !important;
            font-weight: 500;
            color: var(--adro-electric-green);
        }
    }
}

/* KEYNOTE SECTION */


   /* ── KEYNOTE — desktop + tablet landscape. Reference frame 1920.
     Content is 1802 wide at 118 in from each side. The palette inverts from
     the old design: the solid electric-green card becomes a dark teal SVG
     panel with white body copy, green heading, and a green name badge.

     .background-left is still the panel — the scroll animation adds
     slide-in-left/right and .in-view to that exact element, so swapping its
     fill keeps the animation intact. Do not rename it. ── */
  .keynotes {
    /* clip, not hidden: still stops the slide-in animations from creating a
       scrollbar, but hidden would also crop the panel where it bleeds past
       the 1802 container toward the viewport edge. */
    overflow-x: clip;

    /* vw, not %: the page container is 1802 wide, not 1920, so percentages
       resolve ~6.5% small (the heading measured 590 against Figma's 632).
       The Figma frame IS the viewport, so vw is the honest unit here. */
    --kn-side: 6.15vw;                    /* 118 / 1920 */
    --kn-heading-block: 4.43vw;           /* 85 = heading 56 + gap 29 */
    /* Point this at the uploaded export from Step 1. */
    --kn-panel: url(/wp-content/uploads/2026/08/keynote-panel.svg);
    --kn-panel-from: #1b4c55;
  }

  .section-wrapper {
    position: relative;
    margin: 5.5% auto 6.6%;            /* 72 top · 92 bottom, of 1920 */
    z-index: 3;

    .service-button-cta:after {
      background: url(/wp-content/uploads/2025/04/ic_blue_arrow.svg);
      background-size: contain;
      background-repeat: no-repeat;
      width: 10.09%;
    }

    /* Above the panel, not on it. width:max-content stops it stretching to
       the container and re-wrapping — Figma has it as a single line. */
    .keynote-heading {
      width: 32.92vw;                     /* 632 / 1920 */
      margin: 0 0 1.51vw 0;               /* 29 / 1920 */
      color: var(--adro-electric-green);
      line-height: 1.1667;
      white-space: nowrap;
    }

    /* New positioning context. The panel is a fixed 396 tall while the
       speaker image is 627, so the image deliberately breaks above it. */
    .keynote-panel {
      position: relative;
    }

    .background-layout {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      /* Bottom-anchored: the panel bottom, the image bottom and the badge
         bottom are all the same line in Figma. The heading's 29px clearance
         is held by arithmetic in .content-left below rather than by a
         padding-top here — that is what broke last time. */
      align-items: flex-end;
      width: 100%;
      height: 100%;
      z-index: -1;
      padding-left: var(--kn-side);

      /* aspect-ratio, not height:100% — that is what pins it to 396 while the
         wrapper is taller. The SVG carries its own 20px corners and gradient. */
      .background-left {
        width: 93.85vw;                   /* 1802 / 1920 */
        aspect-ratio: 1802 / 396;
        opacity: 0;
        border-radius: 20px 0 0 20px;     /* right edge bleeds off the page */
        background-image: var(--kn-panel);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      /* The panel now spans the full content width, so the old right-hand
         spacer has nothing to do. */
      .background-right {
        display: none;
      }
    }

    .content-overlay {
      display: flex;
      flex-direction: row;
      align-items: flex-end;              /* image bottom = panel bottom */
      justify-content: space-between;
      width: inherit;
      padding: 0 var(--kn-side);

      .content-left,
      .content-right {
        opacity: 0;
      }

      /* Fixed height, not content height. The column is bottom-aligned with
         the panel, so whatever it measures is what decides where the heading
         lands — and while that came from the paragraph, it moved with the
         line count: Opening's 7 lines left the column ~35 short of 481 and
         the heading fell inside the panel, while Closing's 8 cleared it.

         481 = the 85 heading block (56 + 29) plus the panel's own 396. The
         heading now sits 29 clear of the panel top on any copy length. */
      .content-left {
        display: flex;
        flex-direction: column;
        z-index: 1;
        width: 39.32vw;                   /* 755 / 1920 */
        /* min-height, not height: at 1920 the copy fits inside 481 so this is
           identical to the old fixed value, but at the narrow end of tablet
           landscape (800-1024) the same copy needs more room and a hard
           height pushed it out of the column instead of growing. */
        min-height: 25.05vw;              /* 481 / 1920 */
        margin-left: 4.43vw;              /* 85 / 1920, in from the panel edge */

        /* Fixed 350, not flex:1 — flex:1 claimed the full 396 panel and the
           box measured 395. Figma does not centre the copy either: it sits
           35 down from the panel top with 11 left below, so the offset is a
           margin rather than symmetric padding.

           56 heading + 29 gap + 35 + 350 + 11 = the 481 column height. */
        p {
          flex: 0 0 auto;
          min-height: 18.23vw;            /* 350 / 1920 */
          margin: 1.82vw 0 0;             /* 35 / 1920, below the panel top */
          color: var(--adro-white);
        }
      }

      .content-right {
        width: 36.61vw;                   /* 703 / 1920 */
        display: flex;
        align-items: flex-end;
        justify-content: center;
        opacity: 1;

        img {
          width: 100%;
          height: auto;
        }
      }

      /* aspect-ratio dropped: the cutout is a transparent PNG of a person, so
         forcing 956/608 on it distorted them. Width alone drives it now. */
      .content-right .image-wrapper {
        position: relative;
        width: 100%;
      }

      /* 717 against a 703 wrapper — the badge is wider than the photo, so it
         is right-aligned and overhangs to the left. */
      .info-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 101.99%;                   /* 717 / 703 */
        padding: 4.97% 5.14%;             /* 34.91 · 36.16, of 703 */
        background: var(--adro-electric-green);
        border-radius: 20px;
        opacity: 0.85;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        color: var(--adro-deep-blue);
      }

      .person-name,
      .person-designation {
        color: var(--adro-deep-blue);
      }
    }
  }

  /* Closing Keynote: image left, text right. */
  .section-wrapper:nth-child(even) {

    .content-overlay {
      flex-direction: row-reverse;
    }

    /* row-reverse flips the visual order but not physical margins, so the
       85 inset has to move to the other side by hand. */
    .content-left {
      margin-left: 0;
      margin-right: 4.43vw;               /* 85 / 1920 */
    }
  }
  /* ── KEYNOTE — tablet portrait + phone ──────────────────────────────────
     Same architecture as desktop, stacked. Three things changed vs the old
     small-screen rules, and all three were the cause of the overlap:

     1. The old rules were still the PREVIOUS design — a solid electric-green
        card with a cropped, rounded speaker photo. Figma now wants the dark
        --kn-panel gradient card, white copy, green name badge and the
        transparent speaker cutout, exactly like desktop.

     2. .content-left kept the desktop `height: 25.05vw` and its `p` kept
        `height: 18.23vw`, so the box was 209px tall while the copy needed
        ~450. Everything after it rendered on top of the spill. Both are
        `auto` here now — the card is content-driven (§15).

     3. The badge escaped the flow (absolute, plus `margin-bottom: -13%` on
        .content-left), so Opening never reserved the height its own speaker
        occupied and Closing climbed into it. The fix is a reservation, not a
        counter-margin: .keynote-panel carries `padding-bottom` equal to how
        far the speaker composition hangs below the card, and .content-right
        is anchored to `bottom: 0` of that padding box. Opening and Closing
        stay independent blocks in normal document flow (§7).

     Speaker positioning is relative to its OWN .keynote-panel, never to
     .keynotes. Typography stays on the global classes already in the markup
     (.large-size / .small-size / .medium-size / .smaller-size) — no local
     font-size is declared anywhere below (§11). ── */

  /* Shared structure. Only the numbers differ between the two breakpoints,
     so the structure is declared once and the geometry is supplied as
     custom properties in the two blocks after it. */
  @media screen and (max-width: 767.5px),
  screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    .keynotes .section-wrapper {
      position: relative;
      display: block;
      padding: 0;

      /* Desktop-only device: below 1024 the card IS the paragraph box, so
         the absolutely positioned panel layer has nothing left to paint. */
      .background-layout {
        display: none;
      }

      /* Positioning context for the speaker column, AND the block that
         reserves the height the speaker/badge hangs below the card into.
         This padding is what keeps Closing out of Opening. */
      .keynote-panel {
        position: relative;
        padding-bottom: var(--kn-drop);
      }

      .content-overlay {
        position: static;
        display: block;
        width: 100%;
        padding: 0;
      }

      /* Transparent wrapper — it only sets the left gutter and lets the card
         bleed to the right viewport edge, matching the Figma frame. */
      .content-left {
        display: block;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0 0 0 var(--kn-gutter);
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
      }

      .keynote-heading {
        width: auto;
        white-space: normal;
        margin: 0 0 var(--kn-head-gap) var(--kn-head-indent);
        color: var(--adro-electric-green);
      }

      /* THE CARD. min-height holds the Figma proportion, the real copy is
         free to make it taller. The side padding is the column the speaker
         cutout occupies; the bottom padding is the clear zone the cutout
         overlaps into, so body copy can never collide with a speaker. */
      .content-left > p {
        box-sizing: border-box;
        height: auto;
        min-height: var(--kn-card-min);
        margin: 0;
        padding: var(--kn-card-pad);
        border-radius: var(--kn-radius) 0 0 var(--kn-radius);
        background-image: linear-gradient(
          var(--kn-panel-angle, 90deg),
          var(--kn-panel-from) 0%,
          var(--adro-deep-blue) 100%);
        color: var(--adro-white);
      }

      /* Anchored to its own .keynote-panel. bottom:0 is the bottom of that
         PADDING box, i.e. the exact edge of the space reserved above — so
         the speaker composition can overlap the card without ever leaving
         the height its own block accounts for. */
      .content-right {
        position: absolute;
        bottom: 0;
        display: block;
        width: var(--kn-img);
        aspect-ratio: auto;
        border-radius: 0;
        overflow: visible;

        /* Resets for the old cropped-photo treatment — the asset is a
           transparent cutout and must not be cropped or rounded. */
        .image-wrapper {
          position: relative;
          width: 100%;
          aspect-ratio: auto;
        }

        /* display:block — as an inline image it carries a baseline descender
           gap, which pushed the badge ~4px past the bottom of the cutout. */
        img {
          display: block;
          width: 100%;
          height: auto;
          object-fit: contain;
          border-radius: 0;
        }
      }

      .info-overlay {
        box-sizing: border-box;
        border-radius: 15px;
        background: var(--adro-electric-green);
        opacity: 0.85;
        color: var(--adro-deep-blue);
      }
    }

    /* Opening: speaker on the right. */
    .keynotes .section-wrapper:nth-child(odd) .content-right {
      right: var(--kn-img-out);
      left: auto;
    }

    /* Closing: mirrored — speaker on the left, copy in the right column of
       the card. row-reverse is a desktop device and does nothing here; the
       mirroring is done by the padding swap on the card plus this offset. */
    .keynotes .section-wrapper:nth-child(even) {
      .content-overlay {
        padding: 0;
      }

      .content-left {
        margin-right: 0;
      }

      .content-left > p {
        padding: var(--kn-card-pad-alt);
      }

      .keynote-panel {
        padding-bottom: var(--kn-drop-alt);
      }

      .content-right {
        left: var(--kn-img-out-alt);
        right: auto;
        width: var(--kn-img-alt);
      }
    }
  }

  /* ── TABLET PORTRAIT — Figma frame 832, card 768 at a 64 left gutter.
     The badge sits directly BELOW the cutout here (not over it), so it stays
     in normal flow inside .image-wrapper and .content-right measures
     image + badge. ── */
  @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    .keynotes {
      --kn-gutter: 7.69%;                 /* 64 / 832 */
      --kn-head-indent: 0;                /* heading left-aligns to the card */
      --kn-head-gap: 3.39%;               /* 26 / 768 */
      --kn-radius: 25px;
      --kn-card-min: 46.5vw;              /* 387 / 832 */

 
      --kn-card-pad: 4.69% 54% 5.21% 5.08%;
      /* Closing mirrors it: 36 · 21 · 31 · 333, the 333 left column is Ann. */
      --kn-card-pad-alt: 4.69% 2.73% 4.04% 43.36%;

      /* 101 / 832. The speaker column is anchored to bottom:0 of this padding
         box, so this value is what places the cutout vertically: larger sends
         it down, smaller pulls it up. 101 lands the cutout's bottom edge ~11
         below the card, which is Figma's +9. */
      --kn-drop: 12.14%;
      --kn-drop-alt: 9.01%;

      --kn-img: 57.57%;                   /* 479 / 832 */
      --kn-img-out: 0;
      --kn-img-alt: 38.22%;               /* 318 / 832 */
      --kn-img-out-alt: 6.01%;            /* 50 / 832 */
    }

    .keynotes .section-wrapper {
      /* Adjacent margins collapse, so this is a single 71 gap between the two
         keynotes and 71 of clearance at each end of the section. The section
         spacers around .keynotes are 0vh at this breakpoint. */
      margin: 13% auto;                 /* 71 / 832 */

      /* Badge below the cutout, in flow, right-aligned under it. */
      .info-overlay {
        position: static;
        width: 97.91%;                    /* 469 / 479 */
        margin: 0 4.18% 0 auto;           /* 20 / 479 in from the right edge */
        padding: 3.62% 3.84%;             /* 17 · 18 of 469 */
        left: auto;
        right: auto;
        bottom: auto;
      }

      .person-designation {
        margin-top: 0;
      }
    }


    .keynotes .section-wrapper:not(:last-child) {
      margin-bottom: 9.11%;             /* 76 / 834 */
    }

    .keynotes .section-wrapper + .section-wrapper {
      margin-top: 9.11%;                /* 76 / 834 */
    }

    .keynotes .section-wrapper:nth-child(even) {
      /* Figma sets the Closing heading against the right gutter. */
      .keynote-heading {
        text-align: right;
        padding-right: 9.24%;             /* 71 / 768 */
      }

      /* Badge is wider than Ann's cutout and left-aligns to the card edge. */
      .info-overlay {
        width: 147.48%;                   /* 469 / 318 */
        margin: 0 auto 0 4.4%;            /* 14 / 318 */
      }
    }
  }

  /* ── PHONE — Figma frame 390, card 366 at a 24 left gutter.
     Both headings left-align with the card's body copy (24 gutter + 24 inner
     padding). The badge OVERLAYS the bottom of the cutout here, so it goes
     back to absolute inside .image-wrapper and .content-right measures the
     image alone. ── */
  @media screen and (max-width: 767.5px) {

    .keynotes {
      --kn-gutter: 6.15%;                 /* 24 / 390 */
      --kn-head-indent: 6.56%;            /* 24 / 366, aligns with body copy */
      --kn-head-gap: 7.92%;               /* 29 / 366 */
      --kn-radius: 20px;
      /* A floor, not the Figma 400: nothing on phone ties the card height to
         the cutout (it just rides the card's bottom edge), and the real copy
         is shorter than the Figma placeholder, so a hard 400 left dead space.
         Content drives it; this only stops a very short card. */
      --kn-card-min: 71.8vw;              /* 280 / 390 */

      /* Copy runs the full width of the card on phone, so the cutout is
         cleared vertically instead of horizontally: 24 · 24 · 120 · 24. */
      --kn-card-pad: 6.56% 6.56% 32.79% 6.56%;
      --kn-card-pad-alt: 6.56% 6.56% 32.79% 6.56%;

      --kn-drop: 34.36%;                  /* 134 / 390 */
      --kn-drop-alt: 52.82%;              /* 206 / 390 */

      --kn-img: 57.95%;                   /* 226 / 390 */
      --kn-img-out: 6.15%;                /* 24 / 390 */
      --kn-img-alt: 55.64%;               /* 217 / 390 */
      --kn-img-out-alt: 10%;              /* 39 / 390 */
    }

    .keynotes .section-wrapper {
/*       margin: 8.2% auto;                  /* 32 / 390, collapses to one gap */ */

      .info-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        left: auto;
        width: 104.42%;                   /* 236 / 226 */
        padding: 5% 6.8%;                 /* 12 · 16 of 236 */
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }

      .person-designation {
        margin-top: 0;
      }
    }

	.keynotes .section-wrapper + .section-wrapper {
      margin-top: 14.6%;
    }
	  
    .keynotes .section-wrapper:nth-child(even) {
      .info-overlay {
        left: -6.91%;                     /* 15 / 217 overhang past the cutout */
        right: auto;
        width: 108.76%;                   /* 236 / 217 */
      }
    }
  }


  .animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .slide-in-left.in-view {
    transition: transform 1.5s ease, opacity 1.5s ease;
  }

  .slide-in-right.in-view {
    transition: transform 1.5s ease, opacity 1.5s ease;
  }

  .slide-in-left {
    transform: translateX(-100px);
  }

  .slide-in-right {
    transform: translateX(100px);
  }

  .slide-in-left.in-view,
  .slide-in-right.in-view {
    opacity: 1 !important;
    transform: translateX(0);
  }


/* ROUNDTABLSE SECTION */

    .round-table {
        padding-top: 2.2%;
/*         padding-bottom: 11%; */



.fade-text {
  transition: opacity 0.4s ease;
}
.fade-out {
  opacity: 0;
}


        .main-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .main-header-inner {
                width: 57.29%;
                display: flex;
                justify-content: center;
                align-items: center;

                .round-table-header {
                    margin-bottom: 1.73%;
                }
            }
        }

        .container {
            display: flex;
            /* CHANGE: reversed the visual order so the carousel now sits on
               the left and the left-box (heading/description) sits on the
               right. Only the flex order is flipped here; the DOM/markup
               order is untouched. Below 1024px this base rule is overridden
               by flex-direction: column in the portrait/mobile media query,
               so mobile layout is unaffected by this swap. */
            flex-direction: row-reverse;

            .left-box {
                width: 42.49%;
                padding: 3% 3.9% 0 3.34%;
                box-sizing: border-box;

                .round-table-header {
                    margin-bottom: 5.4%;

                }

                .sub-header {
                    display: none;

                    .round-table-header {}
                }
            }

            .carousel-container {
                flex: 1;
                width: 100%;
                overflow: hidden;
				aspect-ratio:1104/557;

                .carousel:hover {
                    /* animation-play-state: paused; */
                }

                .carousel {
                    will-change: transform;
                    display: flex;
                    width: calc(20.2vw * var(--slide-count) * 2 + 1.67vw * (var(--slide-count) * 2 - 1));
                    animation: slideLoop calc(3.5 * var(--slide-count) * 1s) linear infinite;

                    .panel-slide[data-after-target="true"] .speaker .title,
                    .panel-slide[data-after-target="true"] .speaker:hover .caption,
                    .panel-slide[data-after-target="true"] .speaker .caption {
                        background-color: var(--adro-lilac);
                    }

                    .panel-slide {
                        margin: 0;
                        width: 20.2vw;
                        box-sizing: border-box;
                        margin-right: 1.67vw;

                        .speaker {
                            position: relative;
                            background: none;
                            overflow: hidden;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
                            img {
                                border-radius: 20px;
                                aspect-ratio: 416 / 603;
								width:100%;
								
                                object-fit: cover;

                            }
                        }
                       @media screen and (min-width:768px) and (max-width:1024px) and (orientation: landscape),
                        screen and (min-width:1024px) {
                            .speaker {
                                .title {
                                    padding: 3.14%;
                                    text-align: center;
                                    position: absolute;
                                    margin: 0;
                                    opacity: 0.85;
                                    bottom: 0;
                                    color: var(--adro-deep-blue);
                                    background-color: var(--adro-electric-green);
                                    border-radius: 0 0 20px 20px;
                                    width: 100%;
                                }

                                .caption {
                                    display: none;
                                }
                            }

                            .speaker:hover {
                                .caption {
                                    padding: 9.79%;
                                    align-items: center;
                                    position: absolute;
                                    background-color: var(--adro-electric-green);
                                    border-radius: 20px;
                                    height: 100%;
                                    width: 100%;
                                    text-align: center;
                                    opacity: 0.85;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    color: var(--adro-deep-blue);
                                }

                                span {
                                    display: none;
                                }

                                .title {
                                    display: none;
                                }
                            }
                        } 
                    }
                }
 @media screen and (min-width:768px) and (max-width:1024px) and (orientation: landscape) {
                    min-height: calc(31.25vw * 603 / 416);

                    .carousel {
                        width: calc(31.25vw * var(--slide-count) * 2 + 2vw * (var(--slide-count) * 2 - 1));

                        .panel-slide {
                            width: 31.25vw;
                            margin-right: 2vw;
                        }
	               }	
                }
            }
        }

      @media screen and (max-width: 768px) {
            padding-left: 0;

            .main-header {
                display: none;
            }

            .container {
                display: flex;
                flex-direction: column;

                .left-box {
                    padding-left: 6.16%;
                    width: 100%;
                    padding-right: 6.16%;
                    text-align: center;

                    .round-table-header {
                        margin-bottom: 9.36%;
                    }

                    .round-table-text {
                        margin-bottom: 9.36%;
                    }

                    .sub-header {
                        justify-content: center;
                        height: auto;
                        display: block;

                        .round-table-header {

                            margin-bottom: 6.15%;
                        }

                        .sub-header-inner {
                            width: 100%;
                            text-align: center
                        }
                    }
                }

                .carousel-container {
                    width: 100%;
					aspect-ratio: 390 / 280;

                    .carousel {
                        width: calc(53.84vw * var(--slide-count) * 2 + 4.1vw * (var(--slide-count) * 2 - 1));
                        animation: slideLoop calc(4* var(--slide-count) * 1s) linear infinite;

                        display: flex;
                        align-items: stretch;
						height: 100%;

                        .panel-slide {
                            margin-right: 4.1vw;
                            width: 53.84vw;
                            display: flex;
                            flex-direction: column;
                            flex: 1 1 auto;

                            .speaker {
                                flex: 1 1 auto;
                                display: flex;
                                flex-direction: column;

                                .title {
                                    display: none;
                                }

                                img {
                                    border-radius: 20px 20px 0 0;
									height:70%;
                                }

                                .caption {
                                    height: 100%;
                                    padding: 2.85%;
                                    text-align: center;
                                    position: static;
                                    margin: 0;
                                    top: 0;
                                    color: var(--adro-deep-blue);
                                    background-color: var(--adro-electric-green);
                                    border-radius: 0 0 20px 20px;
                                    width: 100%;
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
           @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
		   padding-left: 0;

            .main-header {
                display: none;
            }

            .container {
                display: flex;
                flex-direction: column;

                .left-box {
                    padding-left: 6.16%;
                    width: 100%;
                    padding-right: 6.16%;
                    text-align: center;
					padding-top:0;

                    .round-table-header {
                        margin-bottom: 9.36%;
                    }

                    .round-table-text {
                        margin-bottom: 9.36%;
                    }

                    .sub-header {
                        justify-content: center;
                        height: auto;
                        display: block;

                        .round-table-header {

                            margin-bottom: 6.15%;
                        }

                        .sub-header-inner {
                            width: 100%;
                            text-align: center
                        }
                    }
                }

                .carousel-container {
                    width: 100%;
					aspect-ratio: 834 / 560;
                    .carousel {
                        width: calc(53.84vw * var(--slide-count) * 2 + 4.1vw * (var(--slide-count) * 2 - 1));
                        animation: slideLoop calc(4* var(--slide-count) * 1s) linear infinite;

                        display: flex;
                        align-items: stretch;
						height: 100%;

                        .panel-slide {
                            margin-right: 4.1vw;
                            width: 53.84vw;
                            display: flex;
                            flex-direction: column;
                            flex: 1 1 auto;

                            .speaker {
                                flex: 1 1 auto;
                                display: flex;
                                flex-direction: column;

                                .title {
                                    display: none;
                                }

                                img {
                                    border-radius: 20px 20px 0 0;
									height:78.5%;
                                }

                                .caption {
                                    height: 100%;
                                    padding: 2.85%;
                                    text-align: center;
                                    position: static;
                                    margin: 0;
                                    top: 0;
                                    color: var(--adro-deep-blue);
                                    background-color: var(--adro-electric-green);
                                    border-radius: 0 0 20px 20px;
                                    width: 100%;
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
        @media screen and (min-width:768px) and (max-width:1024px) and (orientation: portrait) {

            .container {
                .left-box {
                    padding-left: 4.8%;
                    padding-right: 4.8%;

                    .round-table-header {
                        margin-bottom: 5.31%;
                    }

                    .round-table-text {
                        margin-bottom: 5.31%;
                    }

                    .sub-header {
                        .round-table-header {
                            margin-bottom: 3.45%;
                        }
                    }
                }

                .carousel-container {
                    .carousel {
                        width: calc(46.52vw * var(--slide-count) * 2 + 3.8vw * (var(--slide-count) * 2 - 1));

                        .panel-slide {
                            margin-right: 3.8vw;
                            width: 46.52vw;
                        }
                    }
                }
            }


        }
    }

    @keyframes slideLoop {
        0% {
            transform: translateX(1vw);
        }

        100% {
            transform: translateX(calc(-1 * (20.2vw * var(--slide-count) + 1.67vw * (var(--slide-count) - 1))));
        }
    }

    @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
        @keyframes slideLoop {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-31.25vw * var(--slide-count) - 2vw * var(--slide-count)));
            }
        }

    }

    @media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
        @keyframes slideLoop {
            0% {
                transform: translateX(-2vw);
            }

            100% {
                transform: translateX(calc(-46.52vw * var(--slide-count) - 3.8vw * var(--slide-count)));
            }
        }

    }

    @media screen and (max-width:767.5px) {
        @keyframes slideLoop {
            0% {
                transform: translateX(-2vw);
            }

            100% {
                transform: translateX(calc(-53.84vw * var(--slide-count) - 4.1vw * var(--slide-count)));
            }
        }

    }


/* ============================================================ */
/* LATEST NEWS / HIGHLIGHTS SECTION */
/* ============================================================ */
.latest-news-section {

    .service-button-cta:after {
        background-image: url(/wp-content/uploads/2025/09/Button%20icons%20Solid%20%26%20Non%20Solid%20button%20large%20%26%20Small%20x%20small%20%281%29.svg);
        filter: brightness(0) invert(1);
    }

    .underline-on-hover span::before {
        background-color: #fff;
    }

    .owl-carousel .owl-dots { border-color: white; }
    .owl-carousel .owl-dots .owl-dot { border-color: white !important; }
    .owl-carousel .owl-dots .owl-dot.active { background-color: white !important; }
    .owl-carousel .owl-dots .owl-dot.adjacent { border-color: rgba(255, 255, 255, 0.7) !important; }
    .owl-carousel .owl-dots .owl-dot.near { border-color: rgba(255, 255, 255, 0.5) !important; }
    .owl-carousel .owl-dots .owl-dot.far,
    .owl-carousel .owl-dots .owl-dot.edge-indicator {
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    #playPauseBtn,
    .owl-nav button {
        svg path,
        line {
            fill: white;
            stroke: white;
        }
        circle { stroke: white; }
    }

    /* ── Section header (shared all breakpoints) ── */
    .our-latest-news-header {
        padding: 2.6% 3.34% 0;

        .main-header { margin-bottom: 0.5em; }
        .sub-heading { text-align: left; }
    }

    /* ── Card section wrapper (shared) ── */
    .card-section {
        display: flex;
        /* bottom was 5.3% (101.8px); Figma puts 57px between the cards and
           the CTA, so the remaining gap now lives on .below-latest-news-button */
        padding: 3% 4% 2.9688%;
    }

    /* ── Section CTA (shared base = desktop + tablet landscape) ── */
    .below-latest-news-button {
        display: flex;
        justify-content: center;
        padding: 0 4% 2.2396%;
        /* 43px below the button @1920 */

        a {
            /* Astra underlines anchors in .entry-content and a decoration set on
               an ancestor cannot be removed by a descendant — kill it here. */
            text-decoration: none !important;
        }

        .custom-button {
            /* Figma shows the electric-blue CTA recoloured green, same override
               already used by .below-featured-insight-button. */
            border-color: var(--adro-electric-green) !important;
            color: var(--adro-white);
        }
		.custom-button:hover {
        background-color: var(--adro-electric-green) !important;
        color: var(--adro-deep-blue) !important;
    }
        .custom-button:focus,
.custom-button:focus-visible {
    background-color: var(--adro-deep-blue) !important;
    color: #fff!important;
    outline: none;
}
    }

    .card-section .latest-news-accordion .item.card .card-collapsed-title {
        display: none;
    }

    /*  DESKTOP + LANDSCAPE TABLET  (≥1025px  OR  768-1024 landscape) */
    @media screen and (min-width: 1025px),
           screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

        .card-wrapper[data-alignment="left"]   { background-position: left center; }
        .card-wrapper[data-alignment="right"]  { background-position: right center; }
        .card-wrapper[data-alignment="center"] { background-position: center center; }

        .card-section .small-cards.latest-news-accordion {
            display: flex !important;
            flex-direction: row !important;
            gap: 24px;
            width: 98.7% !important;
            overflow: visible !important;
            transform: none !important;
            transition: none !important;
        }

        .card-section .small-cards.latest-news-accordion .owl-stage-outer,
        .card-section .small-cards.latest-news-accordion .owl-stage {
            display: contents !important;
        }

        .card-section .small-cards.latest-news-accordion .owl-item {
            display: contents !important;
            width: auto !important;
            transform: none !important;
        }

        .card-section .small-cards.latest-news-accordion .owl-dots,
        .card-section .small-cards.latest-news-accordion .owl-nav,
        .card-section .small-cards.latest-news-accordion .owl-stage-outer::after {
            display: none !important;
        }

        .card-section .latest-news-accordion .item.card {
            flex: 1;
            height: 31.3vw;
            min-width: 0;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            background-size: cover;
            background-position: center;
            transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
        }

        .card-section .latest-news-accordion .item.card.active { flex: 4.6; }

        .card-section .latest-news-accordion .item.card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 10px;
            background: linear-gradient(180deg,
                rgba(67, 102, 143, 0.14) 11.22%,
                rgba(5, 9, 14, 0.60)     74.68%);
            z-index: 1;
            transition: background 0.5s ease;
        }

        .card-section .latest-news-accordion .item.card.active::before {
            background: linear-gradient(180deg,
                rgba(67, 102, 143, 0.14) 37.59%,
                rgba(5, 9, 14, 0.60)     63.32%);
        }

        .card-section .latest-news-accordion .item.card .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            padding: 0 7% 1% 7%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow: hidden;
        }

        .card-section .latest-news-accordion .item.card .card-title {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            color: #fff;
            text-transform: uppercase;
            white-space: normal;
            margin: 0 0 1% 0;
            transition: opacity 1.4s ease, transform 1.4s ease;
        }

        .card-section .latest-news-accordion .item.card.active .card-title {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0.5s;
        }

        .card-section .latest-news-accordion .item.card .card-description {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            color: #fff;
            text-align: left;
            width: 100%;
            margin: 0 0 6.8% 0;
            transition: opacity 1.4s ease, transform 1.4s ease;
        }

        .card-section .latest-news-accordion .item.card.active .card-description {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition-delay: 0.6s;
        }

        .card-section .latest-news-accordion .item.card .card-cta {
            display: none;
            color: #fff;
            text-align: left;
        }

        .card-section .latest-news-accordion .item.card.active .card-cta {
            display: inline-block;
            animation: lnSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
            animation-delay: 0.36s;
        }

        @keyframes lnSlideUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .card-section .latest-news-accordion .item.card .card-collapsed-title {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 69px;
            height: 253px;
            overflow: hidden;
            border-radius: 10px 0 0 0;
            background: rgba(0, 0, 0, 0.00);
            -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.05);
            backdrop-filter: blur(18px) saturate(160%) brightness(1.05);
            z-index: 2;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .card-section .latest-news-accordion .item.card .card-collapsed-title::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(-45deg,
                rgba(255, 255, 255, 0.30) 0%,
                rgba(255, 255, 255, 0.00) 45%,
                rgba(255, 255, 255, 0.00) 60%,
                rgba(255, 255, 255, 0.12) 100%);
            mix-blend-mode: overlay;
            pointer-events: none;
        }

        .card-section .latest-news-accordion .item.card .card-collapsed-title-text {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 253px;
            height: 69px;
            margin-top: -34.5px;
            margin-left: -126.5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--ADROSONIC-White-Base, #FFF);
            text-align: center;
            transform: rotate(-90deg);
            font-family: "Montserrat", sans-serif;
        }

        .card-section .latest-news-accordion .item.card.active .card-collapsed-title {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        @media screen and (min-width: 1025px) and (max-width: 1200px) {
            .card-section .latest-news-accordion .item.card { height: 700px; }
        }

        @media screen and (min-width: 768px) and (max-width: 1110px) and (orientation: landscape) {
            .card-section .latest-news-accordion .item.card { height: 500px; }
        }
    }

    /* MOBILE + PORTRAIT TABLET */
    @media screen and (max-width: 767.5px),
           screen and (max-width: 1024px) and (orientation: portrait) {

        .our-latest-news-header {
            padding: 4.31% 6.16% 0;

            .main-header {
                font-size: clamp(24px, 5vw, 24px) !important;
                text-align: center !important;
                line-height: normal !important;
                margin-bottom: 1em;
            }

            .sub-heading {
                font-size: clamp(18px, 5vw, 18px) !important;
                text-align: center !important;
                line-height: 1.4 !important;
                margin-bottom: 2.5rem;
            }
        }

        .below-latest-news-button {
            padding: 8.2051% 6.33%;
            /* 32px above and below the button @390 — the carousel dots have no
               bottom margin at this breakpoint, so the gap lives here */
        }

        .card-section {
            display: flex;
            flex-direction: column;
            padding: 0;
            gap: 0;
            overflow-x: clip;
            overflow-y: hidden;

            .owl-stage-outer {
                overflow: hidden !important;
                margin-bottom: 0;
            }

            .owl-stage {
                display: flex !important;
                align-items: center !important;
            }

            .owl-nav { display: none !important; }

            .center-outside-content {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
                padding-top: 4%;
                padding-bottom: 0;

                .card-description {
                    margin: 0;
                    line-height: 1.5 !important;
                    color: #fff;
                    text-align: left;
                }

                .card-cta {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.75rem;
                }
            }

            .owl-dots {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 0.5rem !important;
                margin-top: 8% !important;
                padding: 0 !important;
                margin-bottom: 16.3%;
            }

            .small-cards {
                display: block;

                .owl-item { display: flex !important; }

                .card {
                    border-radius: 4vw;
                    position: relative;
                    background-size: cover;
                    background-position: center;
                    display: inline-flex;
                    flex-direction: column;
                    align-items: center;
                    overflow: hidden !important;
                    margin: 0 !important;
                    transform: none;
                    padding: 0 !important;
                    box-sizing: border-box;
                    flex-shrink: 0;
                }

                .card::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    border-radius: inherit;
                    background: linear-gradient(180deg,
                        rgba(67, 102, 143, 0.65) 0%,
                        rgba(55, 82, 114, 0.75)  30%,
                        rgba(5, 9, 14, 0.75)     100%);
                    z-index: 1;
                }

                .card .card-content {
                    z-index: 2;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    padding-left: 6.4%;
                    padding-top: 6.4%;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                }

                .card .card-title {
                    display: block;
                    margin: 0 !important;
                    color: #fff;
                    text-align: left;
                    font-size: clamp(13px, 5vw, 18px) !important;
                    font-family: "Montserrat", sans-serif !important;
                }

                .owl-item:not(.center) .card .card-title { display: none !important; }
                .owl-item.active.center .card .card-title { display: block !important; }

                .card .card-description,
                .card .card-cta { display: none !important; }

                .card .card-collapsed-title { display: none !important; }

                .owl-item.active.center {
                    z-index: 3 !important;
                    position: relative;
                    justify-content: center !important;
                }

                .owl-item.active.center .card {
                    border-radius: 2.5vw !important;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    width: 75vw !important;
                    max-width: none !important;
                    height: 82vw !important;
                    padding: 0 !important;
                    top: 0;
                    z-index: 3;
                }

                .owl-item.active.center .card::before {
                    border-radius: inherit;
                    background: linear-gradient(0deg, rgba(67, 102, 143, 0.00) 55.16%, rgba(21, 35, 55, 0.67) 83.99%);
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                }

                .owl-item:not(.center) {
                    z-index: 1 !important;
                    position: relative;
                    justify-content: center !important;
                }

                .owl-item.center + .owl-item { justify-content: flex-start !important; }
                .owl-item:has(+ .owl-item.center) { justify-content: flex-end !important; }

                .owl-item:not(.center) .card {
                    width: 55vw !important;
                    max-width: none !important;
                    height: 69vw !important;
                    padding: 0 !important;
                    z-index: 1;
                }
            }
        }
    }

    /* Portrait tablet overrides (768–1024) */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

        .below-latest-news-button {
            padding: 0 4.8% 5.7554%;
            /* 48px below the button @834 */
        }

        .our-latest-news-header {
            padding: 8.7% 4.8% 0;

            .main-header {
                font-size: clamp(32px, 5vw, 40px) !important;
                line-height: normal !important;
                margin-bottom: 1.2em;
            }

            .sub-heading {
                font-size: clamp(16px, 3.5vw, 24px) !important;
                line-height: normal !important;
                text-align: center !important;
            }
        }

        .card-section {

            .owl-stage-outer { margin-bottom: 0; }

            .owl-dots {
                margin-top: 4.7% !important;
                margin-bottom: 4.9%;
            }

            .center-outside-content {
                padding-top: 3%;

                .card-description { font-size: clamp(24px, 3.5vw, 24px) !important; }
                .card-cta { font-size: clamp(24px, 3.5vw, 24px) !important; }
            }

            .small-cards {

                .card .card-title {
                    font-size: clamp(16px, 4.5vw, 32px) !important;
                    font-family: "Montserrat", sans-serif !important;
                }

                .owl-item.active.center { z-index: 10 !important; }

                .owl-item.active.center .card {
                    width: 55vw !important;
                    max-width: none !important;
                    height: 62vw !important;
                    padding: 0 !important;
                    top: 0;
                    z-index: 10;
                }

                .owl-item:not(.center) .card {
                    width: 45vw !important;
                    max-width: none !important;
                    height: 51vw !important;
                    padding: 0 !important;
                    z-index: 1;
                }

                .owl-item.center + .owl-item .card { transform: translateX(0vw) !important; }
                .owl-item:has(+ .owl-item.center) .card { transform: translateX(0vw) !important; }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .latest-news-section {
        .card-section {
            .owl-dots {
                margin-bottom: 6% !important;
            }
        }
    }
	
    .latest-news-section {
        .below-latest-news-button {
            padding-top: 0 !important;
        }
    }
}

.latest-news-section {
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
        & .our-latest-news-header {
            .main-header {
                text-align: left !important;
            }
        }
    }
}

/* ============================================================ */
/* TESTIMONIAL SECTION  (scroll-driven reverse card stack)       */

/* Sticky needs an unbroken run to the viewport: no ancestor may be a scroll
   container. `clip` clips without scrolling, so horizontal overflow protection
   is kept; `hidden`/`auto`/`scroll` would kill the pin.
   Keyed to the section itself, not a page ID, so it survives page duplication. */
html:has(.ecl-testimonial),
body:has(.ecl-testimonial) {
    overflow-x: clip;
    overflow-y: visible;
}



@property --ecl-peek {
    syntax: "<length>";
    inherits: true;
    initial-value: 35px;
}

.ecl-testimonial {

    /* ── Figma tokens that have no global-settings equivalent ──
       #184951 is the teal top of the card gradient. It is not in the
       Adrosonic palette; if the design team standardises it, move it to
       global-settings.css and delete this line. */
    --ecl-card-from: #184951;

    /* 15px @390  ·  24px @834  ·  55px @1920 — all ≈ 2.87vw */
    --ecl-card-radius: clamp(0.9375rem, 2.87vw, 3.4375rem);
    --ecl-photo-radius: clamp(0.625rem, 1.46vw, 1.75rem);

    /* ── the feel of the stack. Overridden per breakpoint below, so the
       media queries stay the single source of truth for the animation. ── */
    --ecl-visible-cards: 3;      /* front card + 2 layers behind, whatever the count */
    --ecl-peek: 2.1875rem;       /* 35px — vertical step between layers (Figma: 38 + 32) */
    --ecl-shrink: 0.1;           /* each layer 10% narrower (Figma: 1622 → 1450 → 1298) */
    --ecl-veil: 0.34;            /* how far back layers wash toward the page background */
    --ecl-scroll-per-card: 80;   /* % of a viewport spent on each hand-off. Lower = faster */
    --ecl-hold-last: 40;         /* % of a viewport the last card is held before releasing */
    --ecl-exit-tilt: 0.6;        /* degrees of tilt as a card falls away. 0 = straight down */

    position: relative;
    background-color: var(--adro-deep-blue);

    /* ── The pin. CSS does this, not JS — sticky is composited, so it
       never jitters. IMPORTANT: any ancestor with overflow:hidden kills
       position:sticky. overflow:clip is safe. ── */
    .ecl-testimonial-pin {
        position: sticky;
        top: 0;
        height: 100vh;               /* fallback for browsers without svh */
        height: 100svh;              /* svh so the mobile URL bar doesn't shift the pin */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(3.4375rem, 5.52vw, 6.625rem);   /* 106px heading → deck @1920 */
        padding-block: clamp(1.5rem, 4svh, 3rem);
        overflow: hidden;            /* cards falling away are clipped here */
    }

    /* ── Heading ── */
    .ecl-testimonial-header {
        width: 100%;
        padding-inline: 3.96%;       /* 76px @1920 */

        h2 {
            color: var(--adro-white);
            text-align: left;
            text-transform: capitalize;
        }
    }

    /* ── Deck. Reserves exactly one card so the layout can never collapse.
       max-width caps the height on short viewports while keeping the ratio. ── */
    .ecl-testimonial-deck {
        position: relative;
        width: 84.48%;                            /* 1622 / 1920 */
        aspect-ratio: 1622 / 680;
        max-width: calc(72svh * 1622 / 680);
    }

    /* ── Every layer, real or decorative, shares the card surface ──
       transform-origin:top center is what makes the layers behind peek
       ABOVE the front card instead of shrinking toward its middle. */
     .ecl-testimonial-card {
        position: absolute;
        inset: 0;
        border-radius: var(--ecl-card-radius);
        background: linear-gradient(180deg, var(--ecl-card-from) 0%, var(--adro-deep-blue) 100%);
        box-shadow: inset 0 0.25rem 0.25rem 0 var(--adro-electric-green);
        transform-origin: top center;
    }

    /* The veil: layers behind are washed toward the page background so the
       front card unmistakably reads as the front one. An overlay is used
       rather than filter:brightness() because a filter would create a
       containing block and trap the card's own shadow. */
     .ecl-testimonial-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--adro-deep-blue);
        opacity: var(--v, 0);
        pointer-events: none;
    }


    /* ── The card ── */
    .ecl-testimonial-card {
        display: flex;
        align-items: stretch;
        overflow: hidden;
        will-change: transform, opacity;
        --v: 0;                      /* veil amount, written by the JS each frame */
    }

    .ecl-testimonial-body {
        position: relative;
        z-index: 2;                  /* author text sits over the portrait on tablet */
        display: flex;
        flex-direction: column;
        width: 61.2%;
        padding: 5.3% 0 3.82% 5.92%; /* 86px top · 62px bottom · 96px left, of a 1622 card */
    }

    .ecl-testimonial-logo {
        width: 23.61%;               /* 383 / 1622 */

        img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: left center;
        }
    }

    .ecl-testimonial-quote {
        width: 100%;
        margin: 0;
        margin-top: 6.6%;
        padding: 0;
        border: 0;
        color: var(--adro-white);
        font-style: italic;
    }

    .ecl-testimonial-author {
        display: flex;
        align-items: flex-start;
        gap: 1.1%;
        margin-top: auto;            /* pinned to the bottom of the card whatever the quote length */

        p {
            color: var(--adro-white);
        }
    }

    .ecl-testimonial-quote-mark {
        flex: 0 0 auto;
        width: 1.97%;                /* 32 / 1622 */
        line-height: 0;

        svg {
            display: block;
            width: 100%;
            height: auto;
            fill: var(--adro-electric-green);
        }
    }

    /* Desktop + tablet landscape: "John Smith - Director of Innovation" on
       one line, company underneath. Mobile splits them — see the ≤767.5px block. */
    .ecl-testimonial-author-name,
    .ecl-testimonial-author-role {
        display: inline;
    }

    .ecl-testimonial-author-name:not(:last-child)::after {
        content: " - ";
    }

    .ecl-testimonial-author-company {
        display: block;
    }

    .ecl-testimonial-photo {
        position: absolute;
        right: 3.33%;                /* 54 / 1622 */
        bottom: 0;
        z-index: 1;
        width: 37.48%;               /* 608 / 1622 */
        height: 100%;                /* the portrait is the full card height in Figma */
        border-radius: var(--ecl-photo-radius);
        overflow: hidden;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: bottom center;
        }
    }

    /* ── TABLET PORTRAIT (768-1024, portrait). Reference frame 834 x 818.
       Card is 707 x 509.

       Every % below names the box it ACTUALLY resolves against, which is
       often not the card. Getting this wrong was the original bug: the logo,
       the quote mark and the author offset were all written as Figma-px / 707
       while resolving against much smaller parents. ── */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

        --ecl-peek: 1.5rem;                       /* 24px, per Figma */
        --ecl-scroll-per-card: 72;

        .ecl-testimonial-pin {
            gap: 3.4375rem;                       /* 55px heading → deck */
            height: 72vh !important;

		}

        /* Figma heading is 649 wide, not the 754 that equal padding produces:
           40px in on the left, 145px on the right. Asymmetric on purpose. */
        .ecl-testimonial-header {
            padding-inline: 4.8% 17.39%;          /* 40px · 145px @834 */
        }

        .ecl-testimonial-deck {
            width: 84.77%;                        /* 707 / 834 */
            aspect-ratio: 707 / 509;
            max-width: calc(72svh * 707 / 509);
        }

        /* 362 / 707. Less the 61px padding-left, the content box lands on
           exactly 301px — the Figma quote width — so the quote keeps its
           inherited width:100% and needs nothing of its own.

           position:static is deliberate: it hands the author block below back
           to the CARD as its containing block, so the right-column offsets can
           be read straight off Figma. The z-index it used to carry moves onto
           .ecl-testimonial-author, which is the only thing that needed it. */
        .ecl-testimonial-body {
            position: static;
            width: 51.2%;
            padding: 7.6% 0 5% 8.63%;             /* of a 707 card */
        }

        /* Resolves against the 301px BODY content box, not the card. */
        .ecl-testimonial-logo {
            width: 97.67%;                        /* 294 / 301 */
        }
		
		
		      
        .ecl-testimonial-author-name,
        .ecl-testimonial-author-role {
            display: block;
        }

        .ecl-testimonial-author-name:not(:last-child)::after {
            content: none;
        }

        .ecl-testimonial-quote.medium-size {
            margin-top: 15.4%;
            font-size: clamp(1.375rem, 2.877vw, 1.875rem) !important;
            line-height: normal;
        }

        .ecl-testimonial-photo {
            right: 2%;                            /* 14 / 707 */
            bottom: 24%;                          /* 122 / 509 */
            width: 45.83%;                        /* 324 / 707 */
            height: 53.63%;                       /* 273 / 509 */

            /* The source is portrait (~608x680) but this box is landscape
               (324x273), so cover discards ~89px of height. The base rule
               anchors bottom — right on desktop, where the portrait runs the
               full card height, but here it crops the face off. Anchor top so
               the crop comes off the chest instead, as in Figma. */
            img {
                object-position: top center;
            }
        }

        .ecl-testimonial-author {
            position: absolute;
            z-index: 2;
            left: 52.2%;                          /* 369 / 707 */
            bottom: 2%;                           /* 10 / 509 */
            width: 37.15%;                        /* 262.64 / 707 */
            height: 19.62%;                       /* 99.88 / 509 */
            margin-top: 0;
            gap: 5.33%;                           /* 14 / 262.64 — of the AUTHOR box */
            align-items: center;
        }

        .ecl-testimonial-quote-mark {
            width: 17.9%;                         /* 47 / 262.64 — of the AUTHOR box */
        }

        /* As a flex item the <p> shrinks to its text (132.9px in the dev
           build). flex:1 makes it claim the rest of the row, which is the
           201.64px Figma asks for. */
        .ecl-testimonial-author p.smallest-size {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: clamp(1rem, 2.158vw, 1.25rem) !important;
        }

    }

    /* ── MOBILE (≤767.5px). Reference frame 390 x 844 ── */
    @media screen and (max-width: 767.5px) {

        --ecl-peek: 1.09375rem;                   /* 17.5px, per Figma (18 + 17) */
        --ecl-scroll-per-card: 65;
        --ecl-hold-last: 35;
        --ecl-exit-tilt: 0;

        .ecl-testimonial-pin {
            gap: 2.3125rem;                       /* 37px heading → deck */
            height: 71vh !important;
		}

        .ecl-testimonial-header {
            padding-inline: 6.15%;                /* 24px @390 */
        }

        .ecl-testimonial-deck {
            width: 79.49%;                        /* 310 / 390 — 40px each side */
            aspect-ratio: 310 / 384;
            max-width: calc(72svh * 310 / 384);
        }

        .ecl-testimonial-body {
            width: 100%;
            padding: 9.35% 0 4% 7.1%;             /* of a 310 card */
        }

        .ecl-testimonial-logo {
            width: 52.34%;                        /* 150.754 / 288 */
            flex-shrink: 0;
        }

        .ecl-testimonial-quote {
            width: 92.01%;                         /* 265 / 310 */
            margin-top: 6.4%;
            /* DEVIATION, deliberate: Figma phone is 16px. .medium-size resolves
               to 20-22px here and is declared !important in global-settings, so
               a plain declaration would lose and the quote would overflow the
               310px card. See the flags list in the steps document. */
            font-size: 1rem !important;
        }

        .ecl-testimonial-author {
            flex-direction: column;               /* Figma puts the mark above the name */
            align-items: flex-start;
            gap: 0.5rem;
            width: 42.71%;                        /* 123 / 288 — of the BODY content box */
        }

        /* Against the 123px author box, not the card. The old 7.7% was
           23.85/310 and computed to 9px — min-width was silently propping it
           back up to 22px, which is why it measured roughly right by accident.
           Height is left to the SVG's own square viewBox: Figma's 24.36 against
           23.85 is sub-pixel rounding, not worth distorting the glyph for. */
        .ecl-testimonial-quote-mark {
            width: 19.39%;                        /* 23.85 / 123 */
        }

        .ecl-testimonial-author-name,
        .ecl-testimonial-author-role {
            display: block;
        }

        .ecl-testimonial-author-name:not(:last-child)::after {
            content: none;
        }

        .ecl-testimonial-photo {
            right: 3.23%;                         /* 10 / 310 */
            width: 51.29%;                        /* 159 / 310 */
            height: 40.89%;                       /* 157 / 384 */
        }
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .ecl-testimonial {
        & .ecl-testimonial-header {
            h2 {
                margin-bottom: 7.5%;
            }
        }
    }
}

/* ── Reduced motion / no-JS fallback ──
   Nothing pins, nothing moves, every testimonial stays readable as a plain
   vertical list. Costs three rules and removes the whole scroll-hijack
   accessibility complaint. Also used when there is only one testimonial. */
.ecl-testimonial.is-static {
    height: auto !important;
}

.ecl-testimonial.is-static .ecl-testimonial-pin {
    position: static;
    height: auto;
    overflow: visible;
}

.ecl-testimonial.is-static .ecl-testimonial-deck {
    width: 84.48%;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    display: grid;
    gap: 2rem;
}


.ecl-testimonial.is-static .ecl-testimonial-card {
    position: relative;
    inset: auto;
    aspect-ratio: 1622 / 680;
    transform: none;
    opacity: 1;
    --v: 0;
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .ecl-testimonial.is-static .ecl-testimonial-deck { width: 84.77%; }
    .ecl-testimonial.is-static .ecl-testimonial-card { aspect-ratio: 707 / 509; }
}

@media screen and (max-width: 767.5px) {
    .ecl-testimonial.is-static .ecl-testimonial-deck { width: 79.49%; }
    .ecl-testimonial.is-static .ecl-testimonial-card { aspect-ratio: 310 / 384; }
}


/* AGENDA SECTION */

    .agenda-section-head {
        text-align: center;

        .section-head {
            margin-bottom: 0;
        }
    }


    .svg-background-section {
        position: relative;
        overflow: hidden;

        .only-space-div {
            height: 7.6vh;
        }

        .only-space-div-bottom {
/*             height: 2.4vh; */
        }

        .content {
            position: relative;
            z-index: 1;
        }

        .timeline-container {
            position: relative;
            width: 56.05%;
            margin: auto;

            .timeline-line-wrapper {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 0;
                display: flex;
                flex-direction: column;
                align-items: center;

                .timeline-head,
                .timeline-foot {
                    height: 24px;
                    transform: translateX(1px);
                }

                .timeline-line {
                    flex: 1;
                    width: 2px;
                    background: var(--adro-electric-green);
                    margin-top: -8px;
                    margin-bottom: -8px;
                    margin-left: 1px;
                }
            }

            .timeline-item {
                width: 50%;
                padding: 0 5.91%;
                position: relative;
                box-sizing: border-box;

                .content {
                    background: var(--adro-electric-green);
                    border-radius: 15px;
                    padding: 3.9% 4.87%;
                    position: relative;
                    z-index: 1;
                    gap: 8px;
                    display: flex;
                    flex-direction: column;

                    * {
                        color: var(--adro-deep-blue);
                    }
                }

                .svg-connector {
                    position: absolute;
                    top: 50%;
                    bottom: 50%;
                    transform: translateY(-50%);
                    z-index: 0;

                    svg circle,
                    svg path {
                        fill: var(--adro-deep-blue);
                    }
                }
            }

            .timeline-item.left {
                left: 0;

                .svg-connector {
                    right: -10px;
                }
            }

            .timeline-item.right {
                left: 50%;
                text-align: left;

                .svg-connector {
                    left: -8px;
                    transform: scaleX(-1);
                }
            }

            @media screen and (min-width:768px) {
                .timeline-item.right:not(:first-child) {
                    margin-top: -4vh;
                }

                .timeline-item.left.translateup:not(:first-child) {
                    margin-top: -4vh;
                }
            }

            .only-space-empty {
                height: 24px;
            }
        }

        @media screen and (min-width:768px) and (max-width:1024px) and (orientation: landscape) {
            .timeline-container {
                width: 100%;

                .timeline-item {
                    padding: 0 3.34%;
                }
            }
        }

        @media screen and (min-width:768px) and (max-width:1024px) and (orientation: portrait) {
            .only-space-div {
                height: 6.16vh;
            }

            .timeline-container {
                width: 100%;

                .timeline-item .content {
                    padding: 4.85%;
                }

                .timeline-item.left {
                    padding-right: 5.64%;
                    padding-left: 4.8%;
                }

                .timeline-item.right {
                    padding-left: 5.64%;
                    padding-right: 4.8%;
                }
            }
        }

        @media (max-width: 767.5px) {
            .only-space-div {
                height: 5vh;
            }

            .timeline-container {
                width: 100%;

                .timeline-line-wrapper {
                    right: 4.11%;
                    left: unset;
                    transform: none;

                    .timeline-line {
                        left: 0;
                    }
                }

                .timeline-item,
                .timeline-item.left,
                .timeline-item.right {
                    width: 95.9%;
                    left: 0;
                    text-align: left;
                    padding: 0;
                }

                .timeline-item.left.translateup:not(:first-child) {
                    margin-top: 9.75%;
                }

                .timeline-item.right:not(:first-child) {
                    margin-top: 9.75%;
                }

                .timeline-item {
                    margin-top: 0;

                    .content {
                        margin-left: 4.55%;
                        margin-right: 5.09%;
                        width: 88.24%;
                        padding: 2.14% 4.28%;
                    }
                }

                .timeline-item.left {
                    .svg-connector {
                        right: -0.54%;
                    }
                }

                .timeline-item.right {
                    .svg-connector {
                        right: 0;
                        left: unset;
                        transform: scaleX(1);
                    }
                }
            }
        }
    }

/* AGENDA - Sequential scroll-triggered focus/pulse animation */

@media screen and (min-width: 768px) {

    @keyframes agendaFocusPulse {
        0%   { transform: translateY(0)    scale(1);    }
        45%  { transform: translateY(-6px) scale(1.07); }
        100% { transform: translateY(0)    scale(1);    }
    }

    /* The card is the inner .content - origin centred so it grows in place */
    .svg-background-section .timeline-item .content {
        transform-origin: center center;
        will-change: transform;
    }

    /* When the JS marks the item as active, run the pulse once */
    .svg-background-section .timeline-item.agenda-focus > .content {
        animation: agendaFocusPulse 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svg-background-section .timeline-item.agenda-focus > .content {
        animation: none !important;
    }
}

/* JOIN US SECTION */

.join-us-at-wrapper {

    /* ------------------------------------------------------------------
       BACKGROUND ARTWORK  ->  REPLACE THE URL ON THE NEXT LINE
       Upload the Figma background SVG through Media Library, then swap the
       empty data-URI below for the real path, e.g.
           --join-us-bg-svg: url(/wp-content/uploads/2026/08/join-us-bg.svg);
       Nothing else in this block has to change.
       ------------------------------------------------------------------ */
    --join-us-bg-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 926'%3E%3C/svg%3E");

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--adro-deep-blue);
    background-image: var(--join-us-bg-svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;

    /* 64px top / 160px bottom @1920 */
    padding: 0.2% 4.6875% 8.3333% 3.3333%;

    * {
        box-sizing: border-box;
    }

    /* DESKTOP + TABLET LANDSCAPE GRID
       col 1 = 799px gallery, gutter = 74px, col 2 = 893px content @1920
       (percentages resolve against the 1766px content box) */
    .join-us-inner {
        display: grid;
        grid-template-columns: 45.2435% 50.5663%;
        column-gap: 4.1903%;
        align-items: start;
    }

    .venue-heading {
        grid-column: 2;
        grid-row: 1;
        margin-top: 2.4636%;
        /* 22px  */
        margin-bottom: 2.6875%;
        /* 24px  */
        color: var(--adro-white);
    }

    .venue-gallery {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        gap: 4.8811%;
        /* 39px of 799px */
        /* Stretches to the full height of the content column. 702px @1920 is
           the Figma floor, not a fixed height — real ACF copy is longer than
           the Figma placeholder, so the images grow with it instead of
           leaving dead space underneath. */
        align-self: stretch;
        min-height: 36.5625vw;
        /* 702px @1920 */
    }

    .venue-image {
        width: 47.5594%;
        /* 380px of 799px */
        height: 100%;
        min-height: 36.5625vw;
        /* 702px @1920 */
        object-fit: cover;
        border-radius: 1.25rem;
        /* 20px */
        display: block;
    }

    .venue-body {
        grid-column: 2;
        grid-row: 2;
    }

    .venue-name {
        color: var(--adro-electric-green);
        margin-bottom: 1.9037%;
        /* 17px of 893px */
    }

    .venue-desc {
        color: var(--adro-white);
        margin-bottom: 3.9194%;
        /* 35px of 893px */
    }
	
	.venue-directions,
    .venue-directions:hover,
    .venue-directions:focus,
    .venue-directions:visited {
        /* Astra underlines every anchor inside .entry-content. A decoration set
           on an ancestor cannot be switched off by a descendant, so it has to
           die here on the <a>, not on the button. */
        text-decoration: none !important;
    }

    .venue-directions {
        display: inline-block;
        margin: 0 0 6.4949%;
        /* 58px of 893px */

        .custom-button {
            min-width: 15.5rem;
            /* 248px */
            min-height: 2.5rem;
            /* 40px  */
            padding: 0.5rem;
            gap: 0.5rem;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            border: 2px solid var(--adro-electric-green);
            border-radius: 50px;
            background-color: var(--adro-deep-blue);
            color: var(--adro-white);
        }

        .custom-button:hover {
            background-color: var(--adro-electric-green);
            color: var(--adro-deep-blue);
            
        }
    }

    .transport-info {
        display: flex;
        flex-direction: column;

        .info {
            display: flex;
            align-items: center;
            gap: 4.9272%;
            /* 44px of 893px */
        }

        .info+.info {
            margin-top: 8.7346%;
            /* 78px of 893px */
        }

        .info svg {
            flex: 0 0 auto;
            width: 8.125rem;
            /* 130px */
            height: 7.125rem;
            /* 114px */
        }

        .info .text {
            color: var(--adro-white);
        }
    }

    /* DESKTOP + TABLET LANDSCAPE (landscape follows the desktop composition) */
    @media screen and (min-width: 1025px),
    screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

        .venue-directions .custom-button {
            width: 15.5rem;
            /* 248px */
            height: 2.5rem;
            /* 40px  */
        }

        .transport-info .info .text {
            /* Figma calls for 28px here and no global token sits between
               .smaller-size (24) and .small-size (32), so the size is
               corrected at section level only. 1.4583vw = 28px @1920. */
            font-size: clamp(1.25rem, 1.4583vw, 1.75rem) !important;
        }
    }

    /* TABLET LANDSCAPE —  */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

        .venue-heading {
            font-size: clamp(1.25rem, 2.5vw, 2.425rem) !important;
        }

        .venue-name,
        .venue-desc {
            font-size: clamp(0.9375rem, 1.6667vw, 1.35rem) !important;
        }

        .venue-directions .custom-button {
            width: 11rem;
            min-width: 11rem;
            height: 3rem;
            min-height: 3rem;
        }

        .transport-info {

            .info svg {
                width: 6.7708vw;
                height: 5.9375vw;
            }

            .info .text {
                font-size: clamp(0.875rem, 1.4583vw, 1.75rem) !important;
            }
        }
    }

    /* TABLET PORTRAIT */
    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

        padding: 0% 4.7962% 9.6%;

        .join-us-inner {
            grid-template-columns: 1fr;
            column-gap: 0;
        }

        .venue-heading,
        .venue-gallery,
        .venue-body {
            grid-column: 1;
            grid-row: auto;
        }

        /* Figma's tablet-portrait composition uses a larger type ramp than the
           global tokens produce at 834px, so the sizes are corrected here only. */
        .venue-heading {
            margin-top: 0;
            margin-bottom: 4.5093%;
            /* 34px of 754px */
            font-size: 2.5rem !important;
            /* 40px */
        }

        .venue-name,
        .venue-desc {
            font-size: 2rem !important;
            /* 32px */
        }

        .transport-info .info .text {
            font-size: 1.5rem !important;
            /* 24px */
        }

        .venue-gallery {
            gap: 4.2553%;
            /* 32px of 752px */
            margin-bottom: 6.1007%;
            /* 46px of 754px */
			min-height: 0;         
        }

        .venue-image {
            width: 47.8723%;
			height: auto;        
            min-height: 0;        
            aspect-ratio: 360 / 408;
        }

        .venue-name {
            margin-bottom: 5.5%;
            /* 24px of 754px */
        }

        .venue-desc {
            margin-bottom: 7.4270%;
            /* 56px of 754px */
        }

        .venue-directions {
            margin-bottom: 6.4%;
            /* 23px of 754px */

            .custom-button {
                min-width: 15.5rem;
                width: 15.5rem;
                /* 248px */
                min-height: 2.5rem;
                height: 2.5rem;
                /* 40px  */
            }
        }

        .transport-info {

            .info {
                gap: 8.3554%;
                /* 63px of 754px */
            }

            .info+.info {
                margin-top: 5.3050%;
                /* 40px of 754px */
            }

            .info svg {
                width: 5.25rem;
                /* 84px */
                height: 4.625rem;
                /* 74px */
            }
        }
    }

    /* PHONE — Figma frame 390 wide */
    @media screen and (max-width: 767.5px) {

        /* 24px sides / 32px top / ~44px bottom @390 */
        padding: 8.2051% 6.3300% 11.2462%;

        .join-us-inner {
            grid-template-columns: 1fr;
            column-gap: 0;
        }

        .venue-heading,
        .venue-gallery,
        .venue-body {
            grid-column: 1;
            grid-row: auto;
        }

        .venue-heading {
            margin-top: 0;
            margin-bottom: 7.0381%;
            /* 24px of 341px */
            text-align: left;
        }

        .venue-gallery {
            gap: 4.3724%;
            /* 14.91px of 341px */
            margin-bottom: 6.9032%;
			min-height: 0;
            /* 23.54px of 341px */
        }

        .venue-image {
            width: 47.8138%;
			height: auto;           /* ADD */
            min-height: 0;          /* ADD */
            /* 163.043px of 341px */
            aspect-ratio: 163.043 / 184.915;
            border-radius: 0.9375rem;
            /* 15px */
        }

        .venue-name {
            margin-bottom: 7.0381%;
            /* 24px of 341px */
        }

        .venue-desc {
            margin-bottom: 7.0381%;
            /* 24px of 341px */
        }

        .venue-directions {
            display: block;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 11.7302%;
            /* 40px of 341px */
            /* 40px of 341px */

            .custom-button {
                min-width: 11.4375rem;
                width: 11.4375rem;
                /* 183px */
                min-height: 2.5rem;
                height: 2.5rem;
                /* 40px  */
            }
        }

        .transport-info {

            .info {
                gap: 4.6921%;
                /* 16px of 341px */
            }

            .info+.info {
                margin-top: 7.0381%;
                /* 24px of 341px */
            }

            .info svg {
                width: 5.25rem;
                /* 84px */
                height: 4.625rem;
                /* 74px */
            }
        }
    }
}




/* FEATURED INSIGHTS SECTION - page-scoped colour overrides */

.featured-insights,
.featured-insight-header-area,
.below-featured-insight-button {
    --adro-electric-blue: var(--adro-electric-green);
}


.featured-insights .slider .owl-nav button.owl-prev,
.featured-insights .slider .owl-nav button.owl-next {
    color: var(--adro-electric-green) !important;
}

.featured-insights .slider .owl-nav button svg [fill]:not([fill="none"]) {
    fill: var(--adro-electric-green) !important;
}


.featured-insights .insights-featured-cta.service-button-cta::after {
    background: url(/wp-content/uploads/2026/08/ic_green_arrow.svg) no-repeat center / contain !important;
}

.featured-insights .slider .owl-nav button svg [stroke]:not([stroke="none"]) {
    stroke: var(--adro-electric-green) !important;
}

/* Discover-insights button */
.below-featured-insight-button .custom-button {
    border-color: var(--adro-electric-green) !important;
}
.below-featured-insight-button .custom-button:hover {
    background-color: var(--adro-electric-green) !important;
	color: var(--adro-deep-blue) !important;
}
.below-featured-insight-button .custom-button:focus,
.below-featured-insight-button .custom-button:focus-visible {
    background-color: var(--adro-deep-blue) !important;
    color:#fff !important;
    outline: none;
}

@media screen and (max-width: 767.5px) {
    .featured-insight-header-area .sub-header {
        margin-bottom: 2rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .featured-insight-header-area .sub-header {
        margin-bottom: 3.75rem;
    }
}

/* SPACER SECTION */

.site-above-footer-wrap[data-section="section-above-footer-builder"] {
  background-color: var(--adro-electric-green);
}
header{
background-color:var(--adro-deep-blue);
}
header:hover{
background-color:var(--adro-blue);
}

/* ECL 2026 spacer set.*/
  .spacer-between-banner-introduction {
    height: 0vh;
  }

  .spacer-between-agenda-featured-insights {
    height: 15.5vh;
  }

  .spacer-between-featured-insights-join-us {
    height: 16.6667vh;
  }

  .spacer-between-introduction-speakers {
    height: 10vh;
  }

  .spacer-between-speakers-keynote {
    height: 0vh;
  }

  .spacer-between-keynote-roundtable {
/*     height: 4.4vh; */
  }

  .spacer-between-roundtable-innovation-showcase {
    height: 9.7vh;
  }

  .spacer-between-innovation-showcase-agenda {
    height: 17.8vh;
  }

  .spacer-between-innovation-showcase-testimonial {
    height: 2.7vh;
  }

  .spacer-between-testimonial-agenda {
    height: 13.7vh;
  }

  .spacer-between-roundtable-agenda {
    height: 17.8vh;
  }

  .spacer-between-agenda-join-us {
    height: 13.4vh;
  }

  @media screen and (min-width:768px) and (max-width: 1024px) and (orientation:portrait) {
    .spacer-between-banner-introduction {
      height: 4.7vh;
    }

    .spacer-between-introduction-speakers {
      height: 6.8vh;
    }

    .spacer-between-speakers-keynote {
      height: 0vh;
    }

    .spacer-between-keynote-roundtable {
      height: 3vh;
    }

    .spacer-between-roundtable-innovation-showcase {
      height: 3vh;
    }

    .spacer-between-innovation-showcase-agenda {
      height: 10.45vh;
    }

    .spacer-between-innovation-showcase-testimonial {
      height: 2.1vh;
    }

    .spacer-between-testimonial-agenda {
      height: 5.6vh;
    }

    .spacer-between-roundtable-agenda {
      height: 10.45vh;
    }

    .spacer-between-agenda-featured-insights {
      height: 9.24vh;
    }

    .spacer-between-featured-insights-join-us {
      height: 3.83vh;
    }

    .spacer-between-agenda-join-us {
      height: 10.7vh;
    }
  }

  @media screen and (max-width: 767.5px) {
    .only-space-div-bottom {
      height: 0 !important;
    }

    .spacer-between-banner-introduction {
      height: 0vh;
    }

    .spacer-between-introduction-speakers {
      height: 9.3vh;
    }

    .spacer-between-speakers-keynote {
      height: 4.63vh;
    }

    .spacer-between-keynote-roundtable {
      height: 6.13vh;
    }

    .spacer-between-roundtable-innovation-showcase {
      height: 9.3vh;
    }

    .spacer-between-innovation-showcase-agenda {
      height: 10vh;
    }

    .spacer-between-innovation-showcase-testimonial {
      height: 0vh;
    }

    .spacer-between-testimonial-agenda {
      height:7.25vh;
    }

    .spacer-between-roundtable-agenda {
      height: 10vh;
    }

    .spacer-between-agenda-featured-insights {
      height: 11.9vh;
    }

    .spacer-between-featured-insights-join-us {
      height: 5.8vh;
    }

    .spacer-between-agenda-join-us {
      height: 13vh;
    }
  }
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .ecl-testimonial .ecl-testimonial-pin {
    height: 82svh !important;
  }
}