/*=============================================
    Why Us — browning
    Widget: classes/widgets/WhyUs/why-us.php

    Portrait in a circle with a floating phone card and a paper-plane doodle
    on one side, eyebrow / title / copy / checklist / CTA on the other.

    SIZING — everything is vw.
    `--wu-u` is one design pixel expressed in vw, so a value lifted straight
    off the mockup is written as calc(var(--wu-u) * 56). Re-pointing --wu-u at
    a different design canvas in a media query rescales the whole section at
    once; only the values a designer would genuinely redraw (type sizes and
    padding on phones) are restated per breakpoint.

        desktop  1440 canvas -> 100/1440 = 0.06944vw
        tablet   1024 canvas -> 100/1024 = 0.09766vw
        mobile    375 canvas -> 100/375  = 0.26667vw

    Above 1920 the unit is frozen in px, so the section stops growing and sits
    centred with equal space either side. Left as vw a 4K display renders a
    130px heading, which is not the design at any size.

    GUTTERS — the space left of the row always equals the space right of it,
    at every width. Two rules carry that and both matter:
      1. .wu uses padding-inline, so one value feeds both sides.
      2. .wu__inner caps at min(--wu-max, 100%). Without the 100% the vw cap
         is measured against the viewport and overflows any narrower Elementor
         container, leaving the auto margins nothing to centre with.
    The phone card and the plane deliberately bleed past the circle, but both
    are clamped so they stop at the section edge instead of the gutter.

    Loaded only where the widget is used (get_style_depends).
=============================================*/

.wu {
    /* one design pixel, 1440 canvas */
    --wu-u: 0.06944vw;

    /* palette — every one of these is also an Elementor control */
    --wu-ink: #1C3244;
    --wu-body: #5A6478;
    --wu-accent: #E8B64A;
    --wu-card-bg: #FFFFFF;

    /* layout */
    --wu-pad-y: calc(var(--wu-u) * 96);
    --wu-pad-x: calc(var(--wu-u) * 90);
    --wu-max: calc(var(--wu-u) * 1240);
    --wu-gap: calc(var(--wu-u) * 76);
    /* half the row, less its share of the gap — so the copy column, which
       takes whatever is left, lands on the same figure */
    --wu-media-w: calc(50% - var(--wu-gap) / 2);

    /* type scale */
    --wu-eyebrow-size: calc(var(--wu-u) * 13);
    --wu-title-size: calc(var(--wu-u) * 56);
    --wu-text-size: calc(var(--wu-u) * 17);
    --wu-item-size: calc(var(--wu-u) * 16);
    --wu-btn-size: calc(var(--wu-u) * 16);
    --wu-card-label-size: calc(var(--wu-u) * 14);
    --wu-card-number-size: calc(var(--wu-u) * 18);

    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(--wu-pad-y);
    padding-inline: var(--wu-pad-x);
    background: #FFFFFF;
}

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

.wu__inner {
    display: flex;
    align-items: center;
    gap: var(--wu-gap);
    width: 100%;
    /* min() is load-bearing. --wu-max is a vw figure, so it is measured
       against the viewport, not against whatever Elementor container this
       widget was dropped into. In a container narrower than the viewport the
       bare vw value overflows, the auto margins are left with no slack to
       hand out, and the row ends up pinned to one edge — which is exactly how
       the gutters drift apart. Clamping to 100% of the parent keeps the two
       auto margins equal at every width. */
    margin-inline: auto;
}

/* the media column is fixed so the circle keeps its proportions and the copy
   takes whatever is left, rather than both halving on a narrow laptop */
/* An even split, and one that stays even.

   Both columns used to be sized from their contents: .wu__content ran
   `flex: 1 1 auto`, so its base size was its own max-content width, and
   .wu__media was `flex: 0 1`, so it could shrink. A longer or larger title
   grew the content column's base size past the row, flexbox took the
   difference out of the only shrinkable item, and the image changed size
   every time the copy did.

   Neither column is content-sized now. The image takes an explicit half of
   the row (less half the gap) and cannot flex at all; the copy runs from a
   zero basis, so its contents have no say in the split and it simply fills
   what is left — the matching half. min-width:0 on both defeats the automatic
   minimum size, which would otherwise let a long unbreakable word push a
   column back out. */
.wu__media {
    position: relative;
    flex: 0 0 var(--wu-media-w);
    max-width: var(--wu-media-w);
    min-width: 0;
}

.wu__content {
    flex: 1 1 0;
    min-width: 0;
}

/* media on the right: swap the visual order only, so the DOM keeps the
   heading before the image for screen readers and mobile stacking */
.wu--media-right .wu__media {
    order: 2;
}

.wu--media-right .wu__content {
    order: 1;
}

.wu--align-top .wu__inner {
    align-items: flex-start;
}

.wu--align-bottom .wu__inner {
    align-items: flex-end;
}

/* ============ Figure ============ */
.wu__figure {
    position: relative;
    /* above the plane, below the phone card. The trail is drawn starting from
       inside the circle so it reads as emerging from behind the portrait —
       that only works if the photo paints over it. Both are positioned, so
       DOM order alone would put the later element (the plane) on top. */
    z-index: 1;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
}

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

.wu--shape-rounded .wu__figure {
    border-radius: calc(var(--wu-u) * 28);
}

.wu--shape-square .wu__figure {
    border-radius: 0;
}

/* a portrait is taller than it is wide, so the free-crop shape drops the
   forced square and lets the image set its own height */
.wu--shape-free .wu__figure {
    aspect-ratio: auto;
    border-radius: calc(var(--wu-u) * 20);
}

.wu--shape-free .wu__figure img {
    height: auto;
}

/* ============ Phone card ============ */
.wu__card {
    position: absolute;
    left: max(calc(var(--wu-u) * -64), calc(var(--wu-pad-x) * -1));
    bottom: calc(var(--wu-u) * 96);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: calc(var(--wu-u) * 16);
    padding: 29px 40px;
    background: var(--wu-card-bg);
    text-decoration: none;
    box-shadow: 15px 29px 87px 0px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 64px;
    border-bottom-left-radius: 64px;
}

.wu__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(var(--wu-u) * 46);
    height: calc(var(--wu-u) * 46);
    border-radius: 50%;
    background: #F4F1EA;
    color: var(--wu-ink);
}

.wu__card-icon svg {
    width: calc(var(--wu-u) * 20);
    height: calc(var(--wu-u) * 20);
}

.wu__card-icon i {
    font-size: calc(var(--wu-u) * 18);
    line-height: 1;
}

.wu__card-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--wu-u) * 3);
}

.wu__card-label {
    margin: 0;
    font-size: var(--wu-card-label-size);
    line-height: 1.4;
    color: var(--wu-body);
}

.wu__card-number {
    margin: 0;
    font-size: var(--wu-card-number-size);
    font-weight: 700;
    line-height: 1.3;
    color: var(--wu-ink);
    text-decoration: none;
    white-space: nowrap;
}

a.wu__card-number:hover,
a.wu__card-number:focus {
    color: var(--wu-accent);
}

/* ---- Card hover ----
   Driven from .wu__card:hover rather than the number's own, because the card
   is a <div> and the number is only an <a> when a link is set — hovering
   anywhere on the card should still light the whole thing up.

   Each of these is (0,3,0) — two classes plus :hover — so they outrank the
   Style 2 overrides further down without needing to be repeated there. */
.wu__card-icon {
    transition:
        transform .3s cubic-bezier(.22, .61, .36, 1),
        background-color .3s ease,
        color .3s ease;
}

.wu__card:hover .wu__card-icon {
    transform: scale(1.08);
    background: var(--wu-accent);
    color: #ffffff;
}

.wu__card-number {
    transition: color .3s ease;
}

.wu__card:hover .wu__card-number {
    color: var(--wu-accent);
}

/* A rule that wipes in from the left, the same left-to-right motion the
   buttons use in assets/css/buttons.css. Only on the linked number — an
   underline under a plain <span> would read as something you can click.
   align-self stops the flex column stretching the box, which would run the
   rule past the end of the digits. */
a.wu__card-number {
    position: relative;
    align-self: flex-start;
}

a.wu__card-number::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--wu-u) * -3);
    height: max(1px, calc(var(--wu-u) * 2));
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.wu__card:hover a.wu__card-number::after,
a.wu__card-number:hover::after,
a.wu__card-number:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* the colour change still carries the state; only the movement goes */
@media (prefers-reduced-motion: reduce) {

    .wu__card-icon,
    .wu__card-number,
    a.wu__card-number::after {
        transition: none;
    }

    .wu__card:hover .wu__card-icon {
        transform: none;
    }
}

/* ============ Paper-plane doodle ============ */
.wu__doodle {
    position: absolute;
    /* The plane's nose sits ~9 design px inside the drawing's right edge, so
       this overhang is very nearly where the nose lands. The column gap is 76,
       so -24 leaves roughly 60 of clear air before the copy column — at -86
       the nose crossed the gap entirely and touched the button. */
    right: calc(var(--wu-u) * -24);
    bottom: calc(var(--wu-u) * -6);
    z-index: 0;
    width: calc(var(--wu-u) * 240);
    color: var(--wu-ink);
    pointer-events: none;
}

.wu__doodle svg,
.wu__doodle img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============ Eyebrow ============ */
.wu__eyebrow {
    display: flex;
    align-items: center;
    gap: calc(var(--wu-u) * 12);
    margin: 0 0 calc(var(--wu-u) * 20);
}

.wu__eyebrow-dash {
    flex: 0 0 auto;
    width: calc(var(--wu-u) * 24);
    height: calc(var(--wu-u) * 2);
    background: var(--wu-ink);
}

.wu__eyebrow-text {
    font-size: var(--wu-eyebrow-size);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wu-ink);
}

/* ============ Title ============ */
.wu__title {
    margin: 0 0 calc(var(--wu-u) * 22);
    font-size: var(--wu-title-size);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--wu-ink);
}

/* ============ Copy ============ */
.wu__text {
    margin: 0 0 calc(var(--wu-u) * 28);
    max-width: calc(var(--wu-u) * 500);
    font-size: var(--wu-text-size);
    line-height: 1.65;
    color: var(--wu-body);
}

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

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

/* ============ Checklist ============ */
/* A grid rather than a flex column so the Columns control has something to
   drive. At one column it lays out exactly as the flex version did. */
.wu__list {
    display: grid;
    grid-template-columns: repeat(var(--wu-list-cols, 1), minmax(0, 1fr));
    gap: calc(var(--wu-u) * 14);
    margin: 0 0 calc(var(--wu-u) * 34);
    padding: 0;
    list-style: none;
}

.wu__item {
    display: flex;
    align-items: center;
    gap: calc(var(--wu-u) * 14);
    font-size: var(--wu-item-size);
    line-height: 1.5;
    color: var(--wu-ink);
}

.wu__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(var(--wu-u) * 18);
    color: var(--wu-accent);
}

.wu__item-icon svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
}

.wu__item-icon i {
    font-size: calc(var(--wu-u) * 15);
    line-height: 1;
}

/* The item's text always sits in this column, whether or not the optional
   title above it is filled in — with no title the column has a single child
   and the row reads exactly as it did before the title existed. */
.wu__item-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--wu-u) * 4);
    min-width: 0;
}

.wu__item-title {
    font-size: calc(var(--wu-u) * 19);
    font-weight: 700;
    line-height: 1.3;
    color: var(--wu-ink);
}

/* ============ Awards panel ============ */
/* Off unless the Awards section is switched on, so no saved widget grows one. */
.wu__awards {
    margin: 0 0 calc(var(--wu-u) * 34);
    padding: calc(var(--wu-u) * 22) calc(var(--wu-u) * 24);
    border-radius: calc(var(--wu-u) * 9);
    background: #142535;
}

.wu__awards-title {
    display: block;
    margin-bottom: calc(var(--wu-u) * 18);
    font-size: calc(var(--wu-u) * 19);
    font-weight: 700;
    line-height: 1.3;
    color: var(--wu-awards-ink, var(--wu-accent));
}

.wu__chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--wu-u) * 12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wu__chip {
    padding: calc(var(--wu-u) * 7) calc(var(--wu-u) * 12);
    border-radius: calc(var(--wu-u) * 4);
    background: #1C3244;
    font-size: calc(var(--wu-u) * 12);
    font-weight: 600;
    line-height: 1.2;
    color: var(--wu-chip-ink, #FFFFFF);
}

/* ============ Button ============ */
.wu__btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--wu-u) * 10);
    padding: calc(var(--wu-u) * 19) calc(var(--wu-u) * 32);
    border: 0;
    border-radius: calc(var(--wu-u) * 4);
    background: var(--wu-accent);
    font-size: var(--wu-btn-size);
    line-height: 1;
    color: var(--wu-ink);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.wu__btn:hover,
.wu__btn:focus {
    background: var(--wu-ink);
    color: #FFFFFF;
    transform: translateY(calc(var(--wu-u) * -2));
}

.wu__btn svg {
    width: calc(var(--wu-u) * 16);
    height: calc(var(--wu-u) * 16);
    fill: currentColor;
}

.wu__btn i {
    font-size: calc(var(--wu-u) * 14);
    line-height: 1;
}

.wu__actions {
    display: flex;
}

.wu--btn-center .wu__actions {
    justify-content: center;
}

.wu--btn-right .wu__actions {
    justify-content: flex-end;
}

/*=============================================
    Style 2 — profile card

    The same circle and phone card, with the copy column turned into a short
    profile: a gold eyebrow over a large name, a lead paragraph, then the
    checklist read as titled fact blocks two abreast, and the awards panel
    closing it out. Values are design px on the 1440 canvas like the rest of
    the file, so the whole skin rescales off --wu-u with everything else.
=============================================*/
.wu--style-2 .wu {
    --wu-title-size: calc(var(--wu-u) * 72);
    --wu-text-size: calc(var(--wu-u) * 18);
    --wu-item-size: calc(var(--wu-u) * 16);
    /* two fact blocks abreast; the Columns control can still override it */
    --wu-list-cols: 2;
}

/* gold rather than the ink the base skin uses */
.wu--style-2 .wu__eyebrow-text,
.wu--style-2 .wu__eyebrow-dash {
    color: var(--wu-accent);
}

.wu--style-2 .wu__eyebrow-dash {
    background: var(--wu-accent);
}

.wu--style-2 .wu__title {
    margin-bottom: calc(var(--wu-u) * 20);
}

.wu--style-2 .wu__text {
    max-width: calc(var(--wu-u) * 590);
    margin-bottom: calc(var(--wu-u) * 40);
    line-height: 1.55;
}

.wu--style-2 .wu__list {
    column-gap: calc(var(--wu-u) * 38);
    row-gap: calc(var(--wu-u) * 26);
    margin-bottom: calc(var(--wu-u) * 36);
}

/* fact blocks, not ticked lines: the check goes and the copy stacks */
.wu--style-2 .wu__item {
    align-items: start;
    gap: 0;
}

.wu--style-2 .wu__item-icon {
    display: none;
}

.wu--style-2 .wu__item-body {
    gap: calc(var(--wu-u) * 12);
}

.wu--style-2 .wu__item-title {
    font-size: calc(var(--wu-u) * 19);
}

.wu--style-2 .wu__item-text {
    line-height: 1.5;
    color: var(--wu-body);
}

.wu--style-2 .wu__awards {
    margin-bottom: calc(var(--wu-u) * 34);
}

/* a plain rounded card here — the base skin's asymmetric corners belong to the
   navy field it was drawn for */
.wu--style-2 .wu__card {
    gap: calc(var(--wu-u) * 12);
    padding: calc(var(--wu-u) * 26) calc(var(--wu-u) * 40);
    border-radius: calc(var(--wu-u) * 16);
    box-shadow: 0 calc(var(--wu-u) * 20) calc(var(--wu-u) * 60) rgba(16, 32, 46, 0.12);
}

.wu--style-2 .wu__card-icon {
    width: calc(var(--wu-u) * 54);
    height: calc(var(--wu-u) * 54);
    background: #F3F4F6;
}

.wu--style-2 .wu__card-icon svg {
    width: calc(var(--wu-u) * 22);
    height: calc(var(--wu-u) * 22);
}

.wu--style-2 .wu__card-label {
    font-size: calc(var(--wu-u) * 17);
}

.wu--style-2 .wu__card-number {
    font-size: calc(var(--wu-u) * 20);
}

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

    .wu--animated .wu__media,
    .wu--animated .wu__eyebrow,
    .wu--animated .wu__title,
    .wu--animated .wu__text,
    .wu--animated .wu__item,
    .wu--animated .wu__awards,
    .wu--animated .wu__actions {
        animation: wu-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .wu--animated .wu__media { animation-delay: 0.05s; }
    .wu--animated .wu__eyebrow { animation-delay: 0.15s; }
    .wu--animated .wu__title { animation-delay: 0.22s; }
    .wu--animated .wu__text { animation-delay: 0.30s; }
    .wu--animated .wu__item:nth-child(1) { animation-delay: 0.38s; }
    .wu--animated .wu__item:nth-child(2) { animation-delay: 0.44s; }
    .wu--animated .wu__item:nth-child(3) { animation-delay: 0.50s; }
    .wu--animated .wu__item:nth-child(4) { animation-delay: 0.56s; }
    .wu--animated .wu__item:nth-child(n+5) { animation-delay: 0.62s; }
    .wu--animated .wu__awards { animation-delay: 0.66s; }
    .wu--animated .wu__actions { animation-delay: 0.72s; }

    /* the card and the plane land after the portrait they sit on */
    .wu--animated .wu__card {
        animation: wu-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
    }

    .wu--animated .wu__doodle {
        animation: wu-plane-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
    }

    /* Promote both drifters to their own compositor layer. The card carries an
       87px-blur box-shadow and two lines of text, and without a layer the
       browser repaints that shadow and re-rasterises the type on every frame
       of the drift — at the fractional offsets the travel passes through, that
       is what reads as shaking rather than floating. Promoted, the card is
       rasterised once and the transform is a pure compositor move.

       Scoped to .wu--float so a static card is never needlessly layered. */
    .wu--float .wu__card,
    .wu--float .wu__doodle {
        will-change: transform;
    }

    /* gentle continuous drift, opt-in via the Ambient Motion control */
    .wu--float .wu__card {
        animation:
            wu-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both,
            wu-drift 6s ease-in-out 1.2s infinite;
    }

    .wu--float .wu__doodle {
        animation:
            wu-plane-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both,
            wu-drift 7.5s ease-in-out 1.5s infinite;
    }
}

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

@keyframes wu-card-in {
    from { opacity: 0; transform: translate(calc(var(--wu-u) * -24), calc(var(--wu-u) * 16)); }
    to   { opacity: 1; transform: none; }
}

@keyframes wu-plane-in {
    from { opacity: 0; transform: translate(calc(var(--wu-u) * -28), calc(var(--wu-u) * 18)); }
    to   { opacity: 1; transform: none; }
}

@keyframes wu-drift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(var(--wu-u) * -8)); }
}

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

/* Tablet — 1024 canvas. Two columns hold, everything rescales off --wu-u. */
@media (max-width: 1024px) {

    .wu {
        --wu-u: 0.09766vw;
        --wu-pad-y: calc(var(--wu-u) * 72);
        --wu-pad-x: calc(var(--wu-u) * 32);
        --wu-gap: calc(var(--wu-u) * 44);
        --wu-media-w: calc(50% - var(--wu-gap) / 2);
        --wu-title-size: calc(var(--wu-u) * 40);
        --wu-text-size: calc(var(--wu-u) * 16);
    }

    /* the card and plane hang further out than a 1024 viewport can spare */
    .wu__card {
        left: calc(var(--wu-u) * -24);
        bottom: calc(var(--wu-u) * 64);
    }

    /* the gap narrows to 44 here, so the overhang has to come in with it */
    .wu__doodle {
        right: calc(var(--wu-u) * -14);
        width: calc(var(--wu-u) * 180);
    }

    .wu--style-2 .wu {
        --wu-title-size: calc(var(--wu-u) * 50);
        --wu-text-size: calc(var(--wu-u) * 16);
    }

    .wu--style-2 .wu__text {
        max-width: none;
        margin-bottom: calc(var(--wu-u) * 32);
    }

    .wu--style-2 .wu__list {
        column-gap: calc(var(--wu-u) * 28);
        row-gap: calc(var(--wu-u) * 22);
        margin-bottom: calc(var(--wu-u) * 28);
    }

    .wu--style-2 .wu__item-title {
        font-size: calc(var(--wu-u) * 18);
    }

    .wu--style-2 .wu__card {
        padding: calc(var(--wu-u) * 20) calc(var(--wu-u) * 28);
        border-radius: calc(var(--wu-u) * 14);
    }
}

/* Mobile — 375 canvas, single column. The type sizes here are the mobile
   design, not the desktop scale shrunk, which at this canvas would put the
   heading near 150px. */
@media (max-width: 767px) {

    .wu {
        --wu-u: 0.26667vw;
        --wu-pad-y: calc(var(--wu-u) * 48);
        --wu-pad-x: calc(var(--wu-u) * 20);
        --wu-max: 100%;
        --wu-gap: calc(var(--wu-u) * 40);
        --wu-media-w: 100%;
        --wu-eyebrow-size: calc(var(--wu-u) * 12);
        --wu-title-size: calc(var(--wu-u) * 30);
        --wu-text-size: calc(var(--wu-u) * 15);
        --wu-item-size: calc(var(--wu-u) * 15);
        --wu-btn-size: calc(var(--wu-u) * 15);
        --wu-card-label-size: calc(var(--wu-u) * 13);
        --wu-card-number-size: calc(var(--wu-u) * 17);
    }

    .wu__inner {
        flex-direction: column;
        align-items: stretch;
    }

    /* the image leads on mobile whichever side it takes on desktop */
    .wu--media-right .wu__media,
    .wu--media-right .wu__content {
        order: 0;
    }

    .wu__media {
        flex: 0 0 auto;
        max-width: 100%;
        /* room for the card and plane, which now overhang a full-bleed circle */
        margin-bottom: calc(var(--wu-u) * 16);
        padding: 0 calc(var(--wu-u) * 12) calc(var(--wu-u) * 24);
    }

    /* Back to content height. The desktop rule runs `flex: 1 1 0`, and once the
       row turns into a column that zero basis is a *height* — in a container
       with no height of its own it would collapse the copy to nothing. */
    .wu__content {
        flex: 0 0 auto;
    }

    .wu__card {
        left: 0;
        bottom: calc(var(--wu-u) * 40);
        gap: calc(var(--wu-u) * 12);
        padding: calc(var(--wu-u) * 12) calc(var(--wu-u) * 20) calc(var(--wu-u) * 12) calc(var(--wu-u) * 12);
    }

    .wu__card-icon {
        width: calc(var(--wu-u) * 40);
        height: calc(var(--wu-u) * 40);
    }

    .wu__doodle {
        right: calc(var(--wu-u) * -4);
        bottom: calc(var(--wu-u) * 4);
        width: calc(var(--wu-u) * 150);
    }

    .wu__text {
        max-width: none;
    }

    .wu__btn {
        padding: calc(var(--wu-u) * 16) calc(var(--wu-u) * 26);
    }

    /* the fact blocks fall into one file here */
    .wu--style-2 .wu {
        --wu-list-cols: 1;
        --wu-title-size: calc(var(--wu-u) * 34);
        --wu-text-size: calc(var(--wu-u) * 15);
        --wu-item-size: calc(var(--wu-u) * 15);
    }

    .wu--style-2 .wu__text {
        max-width: none;
        margin-bottom: calc(var(--wu-u) * 28);
    }

    .wu--style-2 .wu__list {
        row-gap: calc(var(--wu-u) * 20);
        margin-bottom: calc(var(--wu-u) * 24);
    }

    .wu--style-2 .wu__item-title {
        font-size: calc(var(--wu-u) * 17);
    }

    .wu--style-2 .wu__card {
        padding: calc(var(--wu-u) * 12) calc(var(--wu-u) * 20);
        border-radius: calc(var(--wu-u) * 14);
    }

    .wu--style-2 .wu__card-icon {
        width: calc(var(--wu-u) * 44);
        height: calc(var(--wu-u) * 44);
    }

    .wu--style-2 .wu__card-label {
        font-size: calc(var(--wu-u) * 13);
    }

    .wu--style-2 .wu__card-number {
        font-size: calc(var(--wu-u) * 17);
    }

    .wu__awards {
        padding: calc(var(--wu-u) * 18) calc(var(--wu-u) * 18);
    }

    .wu__awards-title {
        margin-bottom: calc(var(--wu-u) * 14);
        font-size: calc(var(--wu-u) * 17);
    }

    .wu__chips {
        gap: calc(var(--wu-u) * 10);
    }

    .wu__chip {
        font-size: calc(var(--wu-u) * 13);
    }
}

/* Above 1920 the unit stops tracking the viewport: 1 design px stays 1px,
   so the section reads at its intended size on a 4K display instead of
   scaling to twice the mockup. */
@media (min-width: 1921px) {

    .wu {
        --wu-u: 1.3333px;
    }
}