.hiw {
    /* One design pixel, 1440 canvas — floored so it never drops below 95% of
       the drawn size on a narrow laptop, uncapped above so a wide screen keeps
       scaling. */
    --hiw-u: max(0.06944vw, 0.95px);

    /* palette — every one of these is also an Elementor control */
    --hiw-cream: #ebe1ca;
    --hiw-ink: #1c3244;
    --hiw-body: #5a6478;
    --hiw-ring: #c9a961;
    --hiw-line: #1c3244;

    /* layout */
    --hiw-pad-y: calc(var(--hiw-u) * 80);
    --hiw-pad-x: calc(var(--hiw-u) * 40);
    /* the steps block is a measure, not a cap: it is a vw figure, so it grows
       with the viewport instead of stranding the row in the middle of a wide
       screen */
    --hiw-inner-w: calc(var(--hiw-u) * 1030);
    --hiw-head-gap: calc(var(--hiw-u) * 88);
    /* The Columns control writes --hiw-cols-SET, and this line decides what to
       do with it. That indirection is load-bearing: Elementor writes a control
       as `.elementor-element-xxx .hiw{...}` — two classes — which outranks a
       plain `.hiw{...}` here however far down the file it sits, media query or
       not. Written straight to --hiw-cols, a panel value of 3 would therefore
       beat the one-column rule at the phone breakpoint and the grid would stay
       three across on a 744px screen. Pointing the control at its own property
       leaves --hiw-cols owned by this file alone, where later rules win. */
    --hiw-cols: var(--hiw-cols-set, 3);
    --hiw-col-gap: calc(var(--hiw-u) * 40);
    --hiw-row-gap: calc(var(--hiw-u) * 56);

    /* step */
    --hiw-badge-size: calc(var(--hiw-u) * 95);
    --hiw-badge-border: calc(var(--hiw-u) * 1.5);
    --hiw-icon-size: calc(var(--hiw-u) * 39);
    --hiw-badge-gap: calc(var(--hiw-u) * 48);
    --hiw-step-text-w: calc(var(--hiw-u) * 280);

    /* arc — the clear air left between a ring and the arc that leaves it */
    --hiw-arc-pad: calc(var(--hiw-u) * 14);
    --hiw-arc-h: calc(var(--hiw-u) * 40);

    /* type scale */
    --hiw-eyebrow-size: calc(var(--hiw-u) * 13);
    --hiw-title-size: calc(var(--hiw-u) * 58);
    --hiw-lead-size: calc(var(--hiw-u) * 18);
    --hiw-step-title-size: calc(var(--hiw-u) * 19);
    --hiw-step-text-size: calc(var(--hiw-u) * 17);

    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* split so the two gutters can never drift apart: one value feeds both
       sides, and no later rule can set one without the other */
    padding-block: var(--hiw-pad-y);
    padding-inline: var(--hiw-pad-x);
    background-color: var(--hiw-cream);
}

.hiw *,
.hiw *::before,
.hiw *::after {
    box-sizing: border-box;
}

.hiw__inner {
    /* min() keeps the two auto margins equal inside an Elementor container
       narrower than the viewport, which a bare vw width would overflow */
    width: min(var(--hiw-inner-w), 100%);
    margin-inline: auto;
}

/* ============ Header ============ */
.hiw__head {
    margin-bottom: var(--hiw-head-gap);
    text-align: center;
}

.hiw__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--hiw-u) * 11);
    margin: 0 0 calc(var(--hiw-u) * 22);
}

.hiw__eyebrow-dash {
    flex: 0 0 auto;
    width: calc(var(--hiw-u) * 25);
    height: calc(var(--hiw-u) * 2);
    background: var(--hiw-ink);
}

.hiw__eyebrow-text {
    font-size: var(--hiw-eyebrow-size);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hiw-ink);
}

.hiw__title {
    max-width: calc(var(--hiw-u) * 700);
    margin: 0 auto calc(var(--hiw-u) * 20);
    font-size: var(--hiw-title-size);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--hiw-ink);
}

.hiw__lead {
    max-width: calc(var(--hiw-u) * 460);
    margin: 0 auto;
    font-size: var(--hiw-lead-size);
    line-height: 1.6;
    color: var(--hiw-body);
}

.hiw__lead p {
    margin: 0 0 1em;
}

.hiw__lead p:last-child {
    margin-bottom: 0;
}

/* left-aligned header, for a narrower column or a different page rhythm */
.hiw--head-left .hiw__head {
    text-align: left;
}

.hiw--head-left .hiw__eyebrow {
    justify-content: flex-start;
}

.hiw--head-left .hiw__title,
.hiw--head-left .hiw__lead {
    margin-inline: 0;
}

/* ============ Steps ============ */
.hiw__steps {
    display: grid;
    grid-template-columns: repeat(var(--hiw-cols), minmax(0, 1fr));
    gap: var(--hiw-row-gap) var(--hiw-col-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hiw__step {
    position: relative; /* the arc is positioned against this */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hiw__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--hiw-badge-size);
    height: var(--hiw-badge-size);
    margin-bottom: var(--hiw-badge-gap);
    border: var(--hiw-badge-border) dashed var(--hiw-ring);
    border-radius: 50%;
    color: var(--hiw-ink);
}

.hiw--ring-solid .hiw__badge {
    border-style: solid;
}

.hiw--ring-none .hiw__badge {
    border-style: none;
}

.hiw__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hiw-icon-size);
    height: var(--hiw-icon-size);
}

.hiw__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

/* an icon font glyph has no viewBox to fill, so it is sized by type instead */
.hiw__icon i {
    font-size: var(--hiw-icon-size);
    line-height: 1;
}

/* number instead of an icon */
.hiw__num {
    font-size: calc(var(--hiw-icon-size) * 0.92);
    font-weight: 800;
    line-height: 1;
    color: currentColor;
}

.hiw__step-title {
    margin: 0 0 calc(var(--hiw-u) * 20);
    font-size: var(--hiw-step-title-size);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hiw-ink);
}

.hiw__step-text {
    margin: 0;
    font-size: var(--hiw-step-text-size);
    line-height: 1.55;
    color: var(--hiw-body);
}

/* ============ Arc ============ */
/* Spans ring edge to ring edge rather than being given a length.

   The ring is centred in its column, so this column's ring centre sits at 50%
   of the step and the next one at 100% + gap + 50%. Taking the ring's radius
   and a little clear air off each end leaves:

       left  = 50% + radius + pad
       width = 100% + gap - 2 * (radius + pad)

   Which holds at any column width, column count or gap — nothing here needs to
   know how wide the row ended up. */
.hiw__arc {
    position: absolute;
    top: calc(var(--hiw-badge-size) / 2);
    left: calc(50% + var(--hiw-badge-size) / 2 + var(--hiw-arc-pad));
    width: calc(100% + var(--hiw-col-gap) - var(--hiw-badge-size) - var(--hiw-arc-pad) * 2);
    height: var(--hiw-arc-h);
    transform: translateY(-50%);
    color: var(--hiw-line);
    pointer-events: none;
}

.hiw__arc svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Stretched to whatever width the gap turns out to be, so the aspect ratio is
   not preserved; vector-effect keeps the stroke an even weight through the
   distortion and the dash pattern is set on the path itself. */
.hiw__arc path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
}

/* the arcs alternate: the first dips under the row, the next arches over it */
.hiw__step:nth-child(even) .hiw__arc {
    transform: translateY(-50%) scaleY(-1);
}

/* alternation off: every arc dips under, so the flip is taken back off */
.hiw--arc-same .hiw__step:nth-child(even) .hiw__arc {
    transform: translateY(-50%);
}

/* The last step in a row has nothing to its right to reach. The step count and
   the column count are independent, so the row ends are found from the chosen
   column count — the final step never carries an arc at all (the widget does
   not print one). */
.hiw--cols-2 .hiw__step:nth-child(2n) .hiw__arc,
.hiw--cols-3 .hiw__step:nth-child(3n) .hiw__arc,
.hiw--cols-4 .hiw__step:nth-child(4n) .hiw__arc {
    display: none;
}

/* ============ Alignment variants ============ */
.hiw--steps-left .hiw__step {
    align-items: flex-start;
    text-align: left;
}

/* the arc leaves the ring's centre, which is no longer the column's centre */
.hiw--steps-left .hiw__arc {
    left: calc(var(--hiw-badge-size) + var(--hiw-arc-pad));
    width: calc(100% + var(--hiw-col-gap) - var(--hiw-badge-size) - var(--hiw-arc-pad) * 2);
}

.hiw--steps-left .hiw__step-text {
    max-width: none;
}

/*=============================================
    Entrance animation
    Held at frame one by assets/css/reveal.css until scrolled into view.
=============================================*/
@media (prefers-reduced-motion: no-preference) {

    .hiw--animated .hiw__eyebrow,
    .hiw--animated .hiw__title,
    .hiw--animated .hiw__lead,
    .hiw--animated .hiw__step {
        animation: hiw-fade-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .hiw--animated .hiw__eyebrow { animation-delay: .08s; }
    .hiw--animated .hiw__title { animation-delay: .16s; }
    .hiw--animated .hiw__lead { animation-delay: .24s; }
    .hiw--animated .hiw__step:nth-child(1) { animation-delay: .34s; }
    .hiw--animated .hiw__step:nth-child(2) { animation-delay: .46s; }
    .hiw--animated .hiw__step:nth-child(3) { animation-delay: .58s; }
    .hiw--animated .hiw__step:nth-child(4) { animation-delay: .70s; }
    .hiw--animated .hiw__step:nth-child(n+5) { animation-delay: .82s; }

    /* Each arc arrives after the ring it leaves. Only opacity is animated: the
       dash pattern is what carries the drawing, and animating the offset or the
       length would fight the pattern the path already sets. */
    .hiw--animated .hiw__arc {
        animation: hiw-arc-in .8s ease-out both;
    }

    .hiw--animated .hiw__step:nth-child(1) .hiw__arc { animation-delay: .52s; }
    .hiw--animated .hiw__step:nth-child(2) .hiw__arc { animation-delay: .64s; }
    .hiw--animated .hiw__step:nth-child(3) .hiw__arc { animation-delay: .76s; }
    .hiw--animated .hiw__step:nth-child(n+4) .hiw__arc { animation-delay: .88s; }
}

@keyframes hiw-fade-up {
    from { opacity: 0; transform: translateY(calc(var(--hiw-u) * 24)); }
    to   { opacity: 1; transform: none; }
}

/* opacity only — the arc carries a transform that must survive the animation */
@keyframes hiw-arc-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*=============================================
    Breakpoints
=============================================*/

/* Laptops — still the 1440 design, but the unit is now held at its 0.95 floor
   rather than shrinking, so the row finds the room elsewhere: tighter gutters
   and a tighter column gap. */
@media (max-width: 1200px) {

    .hiw {
        --hiw-pad-x: calc(var(--hiw-u) * 32);
        --hiw-col-gap: calc(var(--hiw-u) * 28);
        --hiw-head-gap: calc(var(--hiw-u) * 72);
    }
}

/* 1024 AND DOWN — one step per row, whatever the Columns control says.

   1024 is the project's breakpoint: below it every section in this plugin is a
   single column, and this one is no exception. Three rings across a 744px
   screen leaves ~215px a column, and the arcs between them shrink to a smudge
   rather than reading as a connection.

   The unit also stops tracking the viewport here, and that is the point. A
   1024-canvas vw unit is only 1 design px at exactly 1024 wide; this query runs
   down to 768, where 0.09766vw is 0.75px and the whole design lands at 76%.
   Pinned to 1px it renders at the size it was drawn across the whole range. */
@media (max-width: 1024px) {

    .hiw {
        --hiw-u: 1px;
        --hiw-pad-y: calc(var(--hiw-u) * 64);
        --hiw-pad-x: calc(var(--hiw-u) * 32);
        --hiw-head-gap: calc(var(--hiw-u) * 48);
        --hiw-cols: 1;
        --hiw-row-gap: calc(var(--hiw-u) * 40);
        --hiw-badge-size: calc(var(--hiw-u) * 78);
        --hiw-icon-size: calc(var(--hiw-u) * 32);
        --hiw-badge-gap: calc(var(--hiw-u) * 24);
        --hiw-title-size: calc(var(--hiw-u) * 40);
        --hiw-lead-size: calc(var(--hiw-u) * 17);
        --hiw-step-title-size: calc(var(--hiw-u) * 18);
        --hiw-step-text-size: calc(var(--hiw-u) * 16);
        /* one step now has the full width of the screen, and a centred
           paragraph 700px across is a wall rather than a step */
        --hiw-step-text-w: calc(var(--hiw-u) * 420);
    }

    /* nothing to the right to reach once the steps are stacked */
    .hiw__arc {
        display: none;
    }

    /* the step is the full width of the row, so the copy is centred inside it
       rather than left where a three-column row would have put it */
    .hiw__step {
        margin-inline: auto;
    }
}

/* Mobile — 375 canvas, one step per row.

   The unit stays fluid but bounded. Unclamped it would render the design at 85%
   on a 320 phone and at 205% at 767 — the first too small, the second absurd.
   Floored at 1px a small phone gets the design at the size it was drawn, and
   the ceiling lets a large phone step up a little without running away. */
@media (max-width: 767px) {

    .hiw {
        --hiw-u: clamp(1px, 0.26667vw, 1.28px);
        --hiw-pad-y: calc(var(--hiw-u) * 48);
        --hiw-pad-x: calc(var(--hiw-u) * 20);
        --hiw-head-gap: calc(var(--hiw-u) * 40);
        /* the column count is already 1 from the 1024 query */
        --hiw-row-gap: calc(var(--hiw-u) * 36);
        --hiw-badge-size: calc(var(--hiw-u) * 76);
        --hiw-icon-size: calc(var(--hiw-u) * 32);
        --hiw-badge-gap: calc(var(--hiw-u) * 20);
        --hiw-title-size: calc(var(--hiw-u) * 32);
        --hiw-lead-size: calc(var(--hiw-u) * 16);
        --hiw-step-title-size: calc(var(--hiw-u) * 17);
        --hiw-step-text-size: calc(var(--hiw-u) * 16);
        --hiw-step-text-w: calc(var(--hiw-u) * 340);
    }

    .hiw__step-title {
        margin-bottom: calc(var(--hiw-u) * 12);
    }
}

/* Very small phones — the 320 class. Nothing shrinks further; the ring simply
   gives back the space the copy needs. */
@media (max-width: 360px) {

    .hiw {
        --hiw-badge-size: calc(var(--hiw-u) * 68);
        --hiw-icon-size: calc(var(--hiw-u) * 28);
        --hiw-title-size: calc(var(--hiw-u) * 29);
    }
}