/* ============================================================
           PAGE: Life at WHC
           Figma node 758:10360
           Theme: orange (#EB622D) hero, multi-color value cards,
                  light grey culture section, dark grey CTA
           ============================================================ */

        .lw-page {
            background: var(--whc-white);
        }

        /* ============================================================
           SECTION 1 — Hero (758:10361)
           ============================================================ */
        .lw-hero {
            position: relative;
            background: var(--whc-orange-2);
            overflow: hidden;
            min-height: 684px;
        }

        .lw-hero__inner {
            position: relative;
            height: 684px;
            display: grid;
            grid-template-columns: minmax(0, 771fr) minmax(0, 669fr);  /* Figma: 771/669 split */
            align-items: center;
        }

        .lw-hero__content {
            position: relative;
            z-index: 2;
            color: var(--whc-white);
            padding-left: var(--container-pad);
            width: 100%;
            max-width: calc(477px + var(--container-pad));
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .lw-hero__heading {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .lw-hero__title {
            margin: 0;
            font-size: 48px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-white);
        }

        .lw-hero__sub {
            margin: 0;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--whc-white);
            max-width: 412px;
        }

        .lw-hero__cta {
            width: 153px;             /* Figma: fixed CTA width */
            padding-left: 0;
            padding-right: 0;
        }

        .lw-hero__pattern {
            position: absolute;
            top: 0;
            left: 41.6%;              /* Figma: 599/1440 */
            width: 47.5%;             /* Figma: 684/1440 */
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .lw-hero__pattern img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0) invert(1);
        }

        .lw-hero__visual {
            position: relative;
            z-index: 2;
            align-self: stretch;
            overflow: hidden;
        }

        .lw-hero__visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ============================================================
           SECTION 2 — Our Values (758:10413)
           ============================================================ */
        .lw-values {
            background: var(--whc-white);
            padding: 70px 0 110px;
        }

        .lw-values__inner {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--container-pad);
        }

        .lw-values__heading {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 60px;
            max-width: 554px;
        }

        .lw-values__title {
            margin: 0;
            font-size: 48px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-black);
        }

        .lw-values__intro {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: -0.36px;
            color: var(--whc-black);
            max-width: 533px;
        }

        .lw-values__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 41px 53px;
        }

        .lw-value-card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 16px;                                /* Figma default: 16 between top group and body */
            min-height: 318px;
            padding: 32px 20px;
            border-radius: 20px;
            background: var(--lw-card-bg);
            color: var(--whc-white);
            overflow: hidden;
            transition:
                background-color 0.6s var(--ease),
                gap 0.6s var(--ease),
                color 0.6s var(--ease);
        }

        .lw-value-card--green { --lw-card-bg: var(--whc-green-dark); --lw-card-color: var(--whc-green-dark); --lw-card-icon: url('../life-at-whc/icon-team.svg'); --lw-card-icon-w: 46px; }
        .lw-value-card--pink  { --lw-card-bg: var(--whc-pink);       --lw-card-color: var(--whc-pink);       --lw-card-icon: url('../life-at-whc/icon-purpose.svg'); --lw-card-icon-w: 44px; }
        .lw-value-card--blue  { --lw-card-bg: var(--whc-blue-dark);  --lw-card-color: var(--whc-blue-dark);  --lw-card-icon: url('../life-at-whc/icon-better.svg'); --lw-card-icon-w: 54px; }
        .lw-value-card--grey  { --lw-card-bg: var(--whc-grey-dark);  --lw-card-color: var(--whc-grey-dark);  --lw-card-icon: url('../life-at-whc/icon-do-good.svg'); --lw-card-icon-w: 45px; }
        .lw-value-card--red   { --lw-card-bg: var(--whc-red-dark);   --lw-card-color: var(--whc-red-dark);   --lw-card-icon: url('../life-at-whc/icon-happy-people.svg'); --lw-card-icon-w: 46px; }

        .lw-value-card__top {
            position: relative;
            min-height: 102px;              /* icon (44) + gap (24) + title line (~34) */
            transition: min-height 0.6s var(--ease);
        }

        .lw-value-card__icon {
            display: block;
            width: var(--lw-card-icon-w);
            height: 44px;
            background-color: var(--whc-white);
            -webkit-mask: var(--lw-card-icon) center / contain no-repeat;
                    mask: var(--lw-card-icon) center / contain no-repeat;
            transition: background-color 0.6s var(--ease);
        }

        .lw-value-card__title {
            position: absolute;
            left: 0;
            top: 68px;                      /* below icon: 44 + 24 gap */
            margin: 0;
            font-size: 28px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--whc-white);
            transition:
                top 0.6s var(--ease),
                left 0.6s var(--ease),
                color 0.6s var(--ease);
        }

        .lw-value-card__text {
            margin: 0;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--whc-white);
            transition: color 0.6s var(--ease);
        }

        .lw-value-card__pattern {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -49px;            /* hidden below default state */
            height: 50px;
            background-image: url('../life-at-whc/card-pattern.png');
            background-repeat: repeat-x;
            background-size: auto 100%;
            background-position: left bottom;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.6s var(--ease), bottom 0.6s var(--ease);
        }

        /* ----- Hover state (Figma "Variant2", node 688:7999) ----- */
        .lw-value-card:hover {
            background: var(--whc-white);
            gap: 28px;                /* Figma hover: 28 between top group and body */
        }

        .lw-value-card:hover .lw-value-card__top {
            min-height: 44px;                                       /* collapse to icon height — pushes description up */
        }

        .lw-value-card:hover .lw-value-card__icon {
            background-color: var(--lw-card-color);
        }

        .lw-value-card:hover .lw-value-card__title {
            top: 5px;                                               /* vertically centered with 44px icon */
            left: calc(var(--lw-card-icon-w) + 24px);               /* right of icon + 24 gap */
            color: var(--lw-card-color);
        }

        .lw-value-card:hover .lw-value-card__text {
            color: var(--whc-black);
        }

        .lw-value-card:hover .lw-value-card__pattern {
            opacity: 1;
            bottom: 0;
        }

        /* ============================================================
           SECTION 3 — Know Your Leaders (1469:1142)
           ============================================================ */
        .lw-leaders {
            background: var(--whc-white);
            padding: 96px 0 100px;
        }

        .lw-leaders__inner {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--container-pad);
        }

        .lw-leaders__title {
            margin: 0 0 64px;
            font-size: 48px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-black);
        }

        .lw-leaders__title strong {
            color: var(--whc-orange);
            font-weight: 600;
        }

        .lw-leaders__grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 312px));
            justify-content: space-between;
            row-gap: 64px;
            column-gap: 24px;
        }

        .lw-leader {
            width: 312px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .lw-leader__photo {
            position: relative;
            width: 312px;
            height: 274px;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .lw-leader__photo::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 225px;
            background: #FFA545;
            border-radius: 16px;
            z-index: 0;
        }

        .lw-leader__photo img {
            position: relative;
            z-index: 1;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            object-position: bottom center;
        }

        .lw-leader__name {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
            color: var(--whc-black);
            text-align: center;
        }

        .lw-leader__role {
            margin: 4px 0 0;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.25;
            color: #646464;
            text-align: center;
        }

        .lw-leader__branch {
            margin: 0;
            font-size: 14px;
            font-weight: 300;
            font-style: italic;
            line-height: 1.43;
            color: #6F6C8F;
            text-align: center;
        }

        .lw-leader__btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 45px;
            padding: 0 12px;
            background: var(--whc-white);
            color: var(--whc-orange);
            border: 1px solid var(--whc-orange);
            border-radius: 8px;
            font-size: 18px;
            font-weight: 700;
            transition: background 0.2s var(--ease), color 0.2s var(--ease);
        }

        .lw-leader__btn:hover {
            background: var(--whc-orange);
            color: var(--whc-white);
        }

        .lw-leader__btn img {
            width: 14px;
            height: 14px;
            transition: filter 0.2s var(--ease);
        }

        .lw-leader__btn:hover img {
            filter: brightness(0) invert(1);
        }

        /* ============================================================
           SECTION 4 — Culture at WHC (758:10421)
           ============================================================ */
        .lw-culture {
            background: #F5F5F5;
            padding: 100px 0;
        }

        .lw-culture__inner {
            max-width: var(--container-max);
            margin: 0 auto;
            padding: 0 var(--container-pad);
            display: grid;
            grid-template-columns: minmax(0, 502px) 1fr;
            gap: 80px;
            align-items: center;
        }

        .lw-culture__copy {
            display: flex;
            flex-direction: column;
            gap: 63px;
        }

        .lw-culture__title {
            margin: 0;
            font-size: 48px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.96px;
            color: var(--whc-black);
        }

        .lw-culture__title strong {
            font-weight: 600;
        }

        .lw-culture__text {
            display: flex;
            flex-direction: column;
            gap: 24px;
            font-size: 20px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: -0.4px;
            color: var(--whc-black);
        }

        .lw-culture__text p {
            margin: 0;
        }

        .lw-culture__text strong {
            font-weight: 600;
        }

        .lw-culture__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto auto;
            gap: 12px;
            min-width: 0;
        }

        .lw-culture__grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            display: block;
        }

        .lw-culture__grid figure {
            margin: 0;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 219 / 165;
        }

        .lw-culture__grid figure:nth-child(4) {
            grid-column: span 3;
            aspect-ratio: 720 / 263;
        }

        /* ============================================================
           SECTION 5 — Careers reveal (711:7802)
           Three-step click reveal:
             default       → small glyph centered on white
             .is-expanded  → glyph 880×880 rotated 90°, title fades in
             .is-full      → glyph fills section (orange bg), desc + CTA
           ============================================================ */
        .lw-careers {
            position: relative;
            overflow: hidden;
            background: var(--whc-white);
            aspect-ratio: 1440 / 613;
            transition: background-color 0.7s var(--ease);
        }

        .lw-careers.is-full {
            background: var(--whc-orange-2);
        }

        .lw-careers__trigger {
            position: absolute;
            inset: 0;
            display: block;
            padding: 0;
            margin: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            color: inherit;
            z-index: 1;
        }

        .lw-careers__trigger:focus-visible {
            outline: 2px solid var(--whc-orange);
            outline-offset: -4px;
        }

        .lw-careers__glyph {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 128px;                       /* Figma collapsed: 128×128 */
            height: 128px;
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
            transform-origin: center center;
            transition: transform 0.7s var(--ease);
            will-change: transform;
            pointer-events: none;
            z-index: 2;
            color: var(--whc-orange-2);         /* drives SVG fill via currentColor */
        }

        .lw-careers__glyph svg {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* Decorative petal pattern (Figma 711:7808 — bottom strip) */
        .lw-careers__pattern {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
            opacity: 0;
            z-index: 2;
            transition: opacity 0.45s var(--ease);
        }

        .lw-careers.is-full .lw-careers__pattern {
            opacity: 1;
            transition: opacity 0.45s var(--ease) 0.35s;
        }

        .lw-careers__content {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
        }

        /* Title: centered in state 2, shifts up to 20% (Figma 711:7810) in state 3 */
        .lw-careers__title {
            position: absolute;
            top: 50%;
            left: 50%;
            width: max-content;
            max-width: calc(100% - 48px);
            transform: translate(-50%, -50%);
            margin: 0;
            color: var(--whc-white);
            font-size: 48px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.96px;
            text-align: center;
            opacity: 0;
            transition:
                opacity 0.45s var(--ease),
                top 0.6s var(--ease),
                transform 0.6s var(--ease);
        }

        /* Description and CTA: positioned per Figma 711:7811 / 711:7846 */
        .lw-careers__desc {
            position: absolute;
            top: 34%;                           /* Figma: top 33.8% */
            left: 50%;
            width: 100%;
            max-width: 737px;
            padding: 0 24px;
            box-sizing: border-box;
            transform: translateX(-50%);
            margin: 0;
            color: var(--whc-white);
            font-size: 18px;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: -0.36px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.45s var(--ease);
        }

        .lw-careers__cta {
            position: absolute;
            top: 61%;                           /* Figma: 373/613 ≈ 60.9% */
            left: 50%;
            transform: translateX(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            padding: 8px 16px;
            background: var(--whc-white);
            color: var(--whc-orange);
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.2;
            text-decoration: none;
            white-space: nowrap;
            opacity: 0;
            transition:
                opacity 0.45s var(--ease),
                background-color 0.2s var(--ease);
            pointer-events: none;
        }

        .lw-careers__cta:hover {
            background: var(--whc-orange);
            color: var(--whc-white);
            box-shadow: inset 0 0 0 1px var(--whc-white);
        }

        /* ----- State 2: expanded (Figma 711:7805) ----- */
        .lw-careers.is-expanded .lw-careers__glyph {
            /* Figma: star scales from 128px → 880px (6.875×), rotated 90°. */
            transform: translate(-50%, -50%) rotate(90deg) scale(6.875);
        }

        .lw-careers.is-expanded .lw-careers__title {
            opacity: 1;
            transition:
                opacity 0.45s var(--ease) 0.35s,
                top 0.6s var(--ease),
                transform 0.6s var(--ease);
        }

        /* ----- State 3: full reveal (Figma 711:7808) ----- */
        .lw-careers.is-full .lw-careers__glyph {
            /* Figma: star scales 128px → ~3495px (27.3×) — overflows section. */
            transform: translate(-50%, -50%) rotate(90deg) scale(27.3);
        }

        .lw-careers.is-full .lw-careers__title {
            /* Figma 711:7810: top 20.23% */
            top: 20.23%;
            transform: translate(-50%, 0);
            opacity: 1;
        }

        .lw-careers.is-full .lw-careers__desc {
            opacity: 1;
            transition: opacity 0.45s var(--ease) 0.25s;
        }

        .lw-careers.is-full .lw-careers__cta {
            opacity: 1;
            pointer-events: auto;
            transition:
                opacity 0.45s var(--ease) 0.45s,
                background-color 0.2s var(--ease);
        }

        /* ============================================================
           SECTION 6 — CTA (758:10437)
           ============================================================ */
        .lw-cta {
            position: relative;
            background: var(--whc-grey-dark);
            overflow: hidden;
            min-height: 580px;
        }

        .lw-cta__inner {
            position: relative;
            height: 580px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }

        .lw-cta__pattern {
            position: absolute;
            top: -9px;
            left: calc(50% - 270px);
            width: 598px;
            height: 598px;
            pointer-events: none;
            z-index: 3;
        }

        .lw-cta__pattern img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0) invert(1);
        }

        .lw-cta__copy {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: calc(424px + var(--container-pad));
            padding-left: var(--container-pad);
            color: var(--whc-white);
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .lw-cta__text {
            display: flex;
            flex-direction: column;
            gap: 24px;
            color: var(--whc-white);
        }

        .lw-cta__title {
            margin: 0;
            font-size: 40px;
            font-weight: 600;
            line-height: 1.2;
            color: var(--whc-white);
        }

        .lw-cta__sub {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.2;
            max-width: 380px;
            color: var(--whc-white);
        }

        .lw-cta__cta {
            width: 153px;
            padding-left: 0;
            padding-right: 0;
        }

        .lw-cta__visual {
            position: relative;
            z-index: 2;
            align-self: stretch;
            overflow: hidden;
        }

        .lw-cta__visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1280px) {
            .lw-hero__pattern { display: none; }

            .lw-values__title,
            .lw-leaders__title,
            .lw-culture__title { font-size: 40px; letter-spacing: -0.7px; }

            .lw-values__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
            .lw-leaders__grid { row-gap: 48px; column-gap: 16px; }

            .lw-cta__title { font-size: 36px; }
            .lw-careers__title { font-size: 40px; letter-spacing: -0.7px; }
        }

        @media (max-width: 991px) {
            .lw-hero__inner,
            .lw-cta__inner {
                grid-template-columns: 1fr;
            }

            .lw-hero { min-height: auto; }
            .lw-hero__inner { height: auto; }
            .lw-hero__content { padding: 64px var(--container-pad) 48px; max-width: none; }
            .lw-hero__visual { height: 320px; }

            .lw-values { padding: 64px 0; }
            .lw-values__heading { margin-bottom: 40px; }
            .lw-values__grid { grid-template-columns: 1fr; gap: 20px; }
            .lw-value-card { min-height: 0; }

            .lw-leaders { padding: 64px 0; }
            .lw-leaders__title { margin-bottom: 40px; }
            .lw-leaders__grid {
                grid-template-columns: repeat(2, minmax(0, 312px));
                justify-content: center;
            }

            .lw-culture { padding: 64px 0; }
            .lw-culture__inner { grid-template-columns: 1fr; gap: 32px; }
            .lw-culture__copy { gap: 32px; }
            .lw-culture__title { font-size: 32px; }
            .lw-culture__text { font-size: 18px; }

            .lw-cta { min-height: auto; }
            .lw-cta__inner { height: auto; }
            .lw-cta__copy { padding: 64px var(--container-pad); max-width: none; }
            .lw-cta__visual { height: 320px; }
            .lw-cta__pattern { display: none; }

            .lw-careers { aspect-ratio: auto; min-height: 420px; }
            .lw-careers__title { font-size: 32px; letter-spacing: -0.5px; }
            .lw-careers__desc { font-size: 16px; }
            .lw-careers__cta { top: auto; bottom: 60px; }    /* clear the wrapped description */
        }

        @media (max-width: 600px) {
            .lw-hero__title { font-size: 36px; letter-spacing: -0.5px; }
            .lw-hero__sub { font-size: 18px; }

            .lw-values__title,
            .lw-leaders__title,
            .lw-culture__title { font-size: 28px; letter-spacing: -0.4px; }

            .lw-leaders__grid { grid-template-columns: minmax(0, 312px); }

            .lw-cta__title { font-size: 26px; }

            .lw-careers__title { font-size: 26px; letter-spacing: -0.4px; white-space: normal; }
            .lw-careers__desc { font-size: 14px; }
            .lw-careers { min-height: 380px; }
            .lw-careers__cta { top: auto; bottom: 60px; }    /* clear the wrapped description */
        }

        /* ============================================================
           Leader modal (1533:1088 / 1465:8979 / 1468:962 /
                         1469:1461 / 1469:1055 / 1469:1107)
           ============================================================ */
        .lw-modal {
            width: 805px;
            max-width: calc(100vw - 32px);
            max-height: calc(100vh - 32px);
            padding: 0;
            border: none;
            border-radius: 16px;
            background: var(--whc-white);
            color: #181819;
            overflow: hidden;
        }

        .lw-modal::backdrop {
            background: rgba(0, 0, 0, 0.5);
        }

        .lw-modal__dialog {
            position: relative;
            display: grid;
            grid-template-columns: 245px 1fr;
            min-height: 537px;        /* 413 photo + 124 glyphs strip */
        }

        .lw-modal__photo {
            position: relative;
            width: 245px;
            height: 413px;
            align-self: start;        /* don't stretch when content grows */
            overflow: hidden;
            background: #F3F3F3;
            border-top-left-radius: 16px;
        }

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

        .lw-modal__glyph {
            position: absolute;
            left: 0;
            top: 413px;               /* sits directly below the photo */
            width: 245px;
            height: 124px;
            background: url('../life-at-whc/glyphs.png') 0 0 / 100% 100% no-repeat;
            pointer-events: none;
            z-index: 1;
        }

        .lw-modal__close {
            position: absolute;
            top: 18px;
            right: 23px;
            width: 23px;
            height: 23px;
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 3;
            color: inherit;
        }

        .lw-modal__close img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .lw-modal__content {
            position: relative;
            z-index: 2;
            padding: 41px 47px 41px 52px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            overflow: auto;
        }

        .lw-modal__content section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .lw-modal__heading {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            color: inherit;
        }

        .lw-modal__text {
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.4;
            color: inherit;
        }

        @media (max-width: 768px) {
            .lw-modal {
                width: calc(100vw - 16px);
                max-height: calc(100vh - 16px);
            }
            .lw-modal__dialog {
                grid-template-columns: 1fr;
                min-height: 0;
            }
            .lw-modal__photo {
                width: 100%;
                height: 280px;
                border-top-right-radius: 16px;
            }
            .lw-modal__content {
                padding: 28px 24px 36px;
            }
            .lw-modal__glyph {
                top: 280px;           /* below the responsive photo */
                width: 100%;
                height: auto;
                aspect-ratio: 245 / 124;
            }
        }