/* =========================================
   LARGE SCREENS  (>1920px)

   Above Full HD the layout had four separate
   problems that compounded:

     1. the homepage hero is --min-height:100vh
        with no ceiling, so on a 2560x1440
        monitor it became a 1440px-tall band
        holding ~250px of content - a headline
        and two buttons marooned in artwork.
     2. content is capped at 1760px, leaving
        400px of empty gutter each side at
        2560 and 840px on a 3440 ultrawide.
        The page read as a narrow strip.
     3. the fluid type ceilings were reached
        at ~1890-2010px, so past that the
        canvas kept growing while the type
        stopped - which is what made it feel
        zoomed out.
     4. the About paragraphs inherited the
        full container and ran to 105
        characters per line. 45-75 is the
        comfortable range.

   Everything here sits behind a min-width
   query, so 1920 and below renders exactly
   as it did before - the widths already
   signed off cannot regress.

   The ceiling is 2560: values interpolate
   from their 1920 setting up to 2560 and then
   hold, so an ultrawide centres rather than
   stretching further.
   ========================================= */

@media (min-width: 1921px) {

    /* ---- 1. give the shell room to breathe ----
       1760px at 1920, reaching 2100px at 2560 and holding there.
       Interpolated rather than stepped so there is no jump at the
       breakpoint. */
    .elementor .e-con {
        --container-max-width:
            min(2100px, calc(1760px + (100vw - 1920px) * 0.53)) !important;
    }

    /* The four hero sections pin their own --content-width, which wins
       over the global variable, so they need lifting too. */
    .elementor .elementor-element.elementor-element-9372f26,
    .elementor .elementor-element.elementor-element-3a7430b,
    .elementor .elementor-element.elementor-element-5e8c52a,
    .elementor .elementor-element.elementor-element-1eac5e3 {
        --content-width:
            min(2100px, calc(1760px + (100vw - 1920px) * 0.53)) !important;
    }

    /* ---- 2. stop the homepage hero growing ----
       The only 100vh section on the site. Capped so a tall monitor gets
       a generous hero rather than a void; mobile and tablet already
       override this to 0vh, so they are untouched. */
    .elementor .elementor-element.elementor-element-9372f26 {
        --min-height: min(100vh, 1040px) !important;
    }

    /* ---- 3. carry the type scale up to the ceiling ----
       Same slopes as the base fluid scale - only the ceilings move, so
       each one is now reached at ~2560 instead of ~1900. */
    .elementor h1.elementor-heading-title,
    .elementor .split-h1 .elementor-heading-title {
        font-size: clamp(42px, calc(28.6px + 3.57vw), 120px) !important;
    }

    /* The headline widget is pinned to 1092px, which was wide enough for
       the three <br>-forced lines at 96px. At 120px the longest line
       ("Smarter compliance") needs 1161px and wrapped to a fourth line,
       so the widget is widened rather than the type shrunk - there is
       2100px of container to spend now. 1400px leaves ~20% headroom in
       case font metrics shift as the webfont loads. */
    .elementor .split-h1 {
        width: min(1400px, 100%) !important;
        max-width: 100% !important;
    }

    .elementor .heading-2-style,
    .dni-ways-heading {
        font-size: clamp(32px, calc(24.25px + 2.07vw), 72px) !important;
    }

    .elementor .solution-numbers {
        font-size: clamp(38px, calc(23.2px + 3.94vw), 112px) !important;
    }

    /* Buttons stayed at 18px, which read as small once everything around
       them grew. */
    .elementor .elementor-button {
        font-size: clamp(18px, calc(15px + 0.16vw), 21px) !important;
    }

    /* ---- 4. cap the measure, not the container ----
       Line length is a property of the paragraph, not the layout, so
       these are capped independently of the wider shell above.
       The ch unit is the width of the "0" glyph, which in Inter is wider
       than the average character - 68ch measured out at 82 real
       characters, so the cap is 58ch to land near 70. */
    .elementor .e-dd0864d-c383969,
    .elementor .e-7213826-54b6e74,
    .elementor .e-aae932a-ef9e6c8,
    .elementor .e-ba38562-6e032c6 {
        max-width: 58ch !important;
    }

    /* The Industry Applications component keeps its own 1600px content
       width, but its panel is a two-column grid, so at 2560 each column
       reaches 743px and the item copy runs to ~95 characters. Capping the
       text rather than the column keeps the grid intact. */
    .dni-uc-item-body,
    .dni-uc-item-title,
    .dni-uc-gap {
        max-width: 58ch;
    }
}