@font-face { font-family: "AlmadenSans"; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/rickmareshazamme/zoomcareers-globe-asset@v1.5.0/assets/fonts/almaden-sans/AlmadenSans-Regular-WebXL.woff2") format("woff2"); }
@font-face { font-family: "AlmadenSans"; font-weight: 500; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/rickmareshazamme/zoomcareers-globe-asset@v1.5.0/assets/fonts/almaden-sans/AlmadenSans-Book-WebXL.woff2") format("woff2"); }
@font-face { font-family: "AlmadenSans"; font-weight: 600; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/rickmareshazamme/zoomcareers-globe-asset@v1.5.0/assets/fonts/almaden-sans/AlmadenSans-SemiBold-WebXL.woff2") format("woff2"); }
@font-face { font-family: "HappyDisplay"; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/rickmareshazamme/zoomcareers-globe-asset@v1.5.0/assets/fonts/happy-display/HappyDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "HappyDisplay"; font-weight: 600; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/rickmareshazamme/zoomcareers-globe-asset@v1.5.0/assets/fonts/happy-display/HappyDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "HappyDisplay"; font-weight: 700; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/rickmareshazamme/zoomcareers-globe-asset@v1.5.0/assets/fonts/happy-display/HappyDisplay-Bold.woff2") format("woff2"); }

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

html,
body {
    margin: 0;
    padding: 0;
    font-family: "AlmadenSans", "Helvetica Neue", Arial, sans-serif;
    background: #B4D0F8;
}

button {
    cursor: pointer;
    font-family: inherit;
}

/* ===== Globe Slider — base (mobile) ===== */
.globe-slider-section {
    overflow: hidden;
}

.globe-slider-section h2 {
    margin-bottom: 45px;
}

.globe-slider {
    margin-left: 0;
    margin-right: 0;
}

.globe-slider .placeholder {
    height: 50vh;
}

.globe-slider .globe-container {
    height: 100vh;
    position: relative;
}

.globe-slider .globe-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-20%, -30%);
}

@media (max-aspect-ratio: 1/1) {
    .globe-slider .globe-wrapper {
        transform: translate(-50%, -30%);
    }
}

.globe-slider #globe-popups-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.globe-slider .overlay-img-container {
    position: absolute;
    width: 65px;
    height: 65px;
    display: flex;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}

.globe-slider .overlay-img-container .overlay-img-wrapper {
    width: 100%;
    transition: transform 0.2s ease-in-out;
}

.globe-slider .overlay-img-container.active {
    z-index: 2;
}

.globe-slider .overlay-img-container.active .overlay-img-wrapper {
    transform: scale(1.5);
}

.globe-slider .overlay-img-container img {
    width: 100%;
    border-radius: 8px;
    transform-origin: center center;
}

.globe-slider #dummy-list {
    position: fixed;
    top: 0;
    right: 0;
    font-family: sans-serif;
}

.globe-slider .slider-btns {
    position: fixed !important;
    right: 40px !important;
    bottom: 360px !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    z-index: 99999 !important;
}

.globe-slider .slider-btns button {
    padding: 0;
    border: none;
    background: none;
    margin-left: 6px;
    margin-right: 6px;
    line-height: 0;
}

.globe-slider #slider-wrapper {
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
    column-gap: 16px;
    margin-left: -50vw;
}

.globe-slider .slider-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    font-size: 21px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.4s ease-in-out;
    width: 48vw;
}

.globe-slider .slider-item > img {
    width: 100%;
    padding: 10px;
}

.globe-slider .slider-item:first-child {
    margin-left: 16px;
}

.globe-slider .slider-item .slider-image-wrapper {
    position: relative;
}

.globe-slider .slider-item .slider-image-wrapper > img {
    max-width: 412px;
    width: 100%;
    height: auto;
}

.globe-slider .slider-item .slider-location-name {
    position: absolute;
    bottom: 28px;
    left: 15px;
    padding: 8px;
    border-radius: 16px;
    color: #2661FF !important;
    font-family: "HappyDisplay", "AlmadenSans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    background-color: #B4D0F8;
    display: flex !important;
    align-items: center;
    column-gap: 4px;
}

.globe-slider .slider-item .slider-location-name img,
.globe-slider .slider-item .slider-location-name svg {
    width: 14px;
    height: auto;
}

.globe-slider .slider-item.active {
    opacity: 1;
}

/* ===== 481px and up ===== */
@media (min-width: 481px) {
    .globe-slider .slider-btns { /* overridden by fixed pos above */ }

    .globe-slider .slider-item .slider-location-name {
        padding: 8px 15px 8px 8px;
        font-size: 16px;
        column-gap: 6px;
    }

    .globe-slider .slider-item .slider-location-name img,
    .globe-slider .slider-item .slider-location-name svg {
        width: 16px;
    }
}

/* ===== 768px and up ===== */
@media (min-width: 768px) {
    .globe-slider .slider-btns { /* overridden by fixed pos above */ }

    .globe-slider #slider-wrapper {
        column-gap: 32px;
        margin-left: -35vw;
    }

    .globe-slider .slider-item {
        width: auto;
    }

    .globe-slider .slider-item:first-child {
        margin-left: 32px;
    }

    .globe-slider .slider-item .slider-location-name {
        bottom: 39px;
        left: 31px;
        padding: 15px 30px 15px 15px;
        border-radius: 20px;
        font-size: 20px;
        column-gap: 13px;
    }

    .globe-slider .slider-item .slider-location-name img,
    .globe-slider .slider-item .slider-location-name svg {
        width: 29px;
    }
}

/* ===== 992px and up ===== */
@media (min-width: 992px) {
    .globe-slider #slider-wrapper {
        margin-left: 32px;
    }
}

/* ===== 1240px and up ===== */
@media (min-width: 1240px) {
    .globe-slider {
        margin-left: 0;
        margin-right: 0;
    }

    .globe-slider .slider-btns { /* overridden by fixed pos above */ }

    .globe-slider .globe-container {
        min-height: 860px;
    }
}

/* ===== .globe-copy shared rules: START — style.css is canonical, duda-widget.html carries a byte-identical copy (sync-variants.sh enforces it) ===== */
/* The copy block is inline-styled so Duda cannot strip it when the fragment is
   pasted, which is why these need !important to win.

   The panel is absolutely positioned at top:60px while the city-card row is
   anchored to the bottom of .globe-container, which is max(100vh, 860px) above
   1240px and plain 100vh below it. How much room the panel has therefore
   depends on viewport HEIGHT, while how many lines the copy wraps to depends on
   viewport WIDTH. Sizing on either one alone fails: width breakpoints left a
   1px cliff at 1239px and still overlapped at 1239x700, and height-only vh
   sizing blew the headline up on narrow-tall phones (393x852 overlapped by
   23px). So every value below is driven by min(vw, vh) and is continuous —
   there are no breakpoints to fall off.

   The clamp ceilings are the approved desktop values, and the coefficients are
   set so both terms stay above those ceilings at desktop sizes — including a
   real 1440x900 laptop whose viewport is ~790px after browser chrome, and a
   Duda embed only ~700px tall, where an earlier tuning silently shrank the
   headline to 45.8px and 40.6px. The vh term only bites once the viewport is
   genuinely too short to fit the block. On other viewports clearance is often reduced relative to the
   old single-sentence copy — expected, the block carries four more lines. The
   measured claim is narrower than "always better": the panel never overlaps the
   card row anywhere the old copy did not already overlap, and the card row is
   never pushed off the viewport. See the PR for the full matrix.

   Every selector is scoped to .globe-copy. duda-iframe-v7.html is a frozen
   published URL that loads this same stylesheet and its copy div carries no
   such class, so it cannot match any of this. KEEP NEW RULES .globe-copy
   SCOPED or the frozen URL will drift. */
/* The panel gets an explicit width and becomes a query container so the nowrap
   headline below can be sized against the panel instead of the viewport. In the
   iframe pages those agree, but duda-widget.html is pasted into a Duda row whose
   column can be far narrower than the viewport, where a vw-only size would pin
   the headline at its ceiling and overflow. An explicit width is also what makes
   inline-size containment safe here: this element is absolutely positioned, so
   without it the contained width would resolve to zero instead of shrink-to-fit. */
.globe-copy {
    top: clamp(24px, min(4.2vw, 9vh), 60px) !important;
    width: min(620px, 90%) !important;
    container-type: inline-size !important;
}

/* The headline is two elements: the navy h1 and the purple h2 under it, with no
   gap between them so the pair still reads as the single wrapped headline it
   replaced. The h2 is white-space:nowrap because it must never fall to two
   lines, and that is what caps the ceiling: "Connected by Curiosity." measures
   13.1x its font-size in HappyDisplay SemiBold, so the 620px panel allows at
   most 47.3px. 46px is that bound with headroom, and the h1 shares it so the
   two lines stay one size. Do not raise it without widening .globe-copy. The
   vw/vh terms are unchanged and stay safe under nowrap: at 4vw the line is
   ~52vw inside a panel that is min(620px, 95vw). */
.globe-copy h1,
.globe-copy h2 {
    font-size: clamp(20px, min(4vw, 8vh, 7.2cqw), 46px) !important;
}

/* The fragment is pasted into someone else's page, so the host's own h1 rules
   can reach this element. Neutralise the ones that would move it; colour, size
   and margin are already set above and inline. */
.globe-copy h1 {
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    text-align: left !important;
}

.globe-copy h1::before,
.globe-copy h1::after {
    content: none !important;
}

.globe-copy h2 {
    margin-bottom: clamp(8px, min(1.15vw, 2.4vh), 16px) !important;
}

.globe-copy > p:nth-of-type(1) {
    font-size: clamp(13px, min(1.7vw, 3vh), 20px) !important;
    margin-bottom: clamp(6px, min(1.15vw, 2.4vh), 16px) !important;
}

.globe-copy > p:nth-of-type(2) {
    font-size: clamp(12px, min(1.5vw, 2.7vh), 18px) !important;
    margin-bottom: clamp(8px, min(1.45vw, 3vh), 20px) !important;
}

.globe-copy ul {
    font-size: clamp(11px, min(1.3vw, 2.3vh), 15px) !important;
}

.globe-copy li {
    margin-bottom: clamp(2px, min(0.45vw, 0.9vh), 6px) !important;
}

.globe-copy li:last-child {
    margin-bottom: 0 !important;
}

/* Below 1240px .globe-container loses its 860px floor and collapses to 100vh,
   so the card row climbs. Restoring that floor was worse than the disease: at
   1024x640 it made the container taller than the viewport and cut the bottom
   ~140px off the card row, which a fixed-height Duda iframe cannot scroll to,
   and it left the position:fixed arrows ~230px detached from the row. The copy
   block gives up height instead. Only font sizes are touched here, so there is
   no geometry cliff at the boundary — just a slightly faster taper. */
@media (max-width: 1239px) {
    .globe-copy h1, .globe-copy h2 { font-size: clamp(20px, min(4vw, 5.6vh, 7.2cqw), 46px) !important; }
    .globe-copy > p:nth-of-type(2) { font-size: clamp(12px, min(1.35vw, 1.95vh), 18px) !important; }
    .globe-copy ul { font-size: clamp(11px, min(1.1vw, 1.65vh), 15px) !important; }
}

/* ===== .globe-copy shared rules: END ===== */