/* ==========================================================================
   Quadrafort homepage - design direction C, "Signature Gradient".

   Loaded by index.html ONLY. Every selector is scoped under .qfc, so nothing
   here can reach another page. The legacy homepage rules in Global.css are
   all scoped under .index_rv_wrapper, which this page no longer uses, so the
   two never collide.
   ========================================================================== */

.qfc {
    --qfc-bg: #08080A;
    --qfc-surface: #121216;
    --qfc-surface-2: #0D0D10;
    --qfc-line: rgba(255, 255, 255, 0.09);
    --qfc-line-strong: rgba(255, 255, 255, 0.16);
    --qfc-text: #F5F5F7;
    --qfc-dim: #A9A9B4;
    --qfc-mute: #74747F;
    --qfc-pink: #EA396E;
    /* The accent darkened just enough to clear 4.5:1 against white text.
       Raw #EA396E measures 3.96:1 and fails AA on a filled button. */
    --qfc-fill: #D73465;
    --qfc-soft: #F2A0B8;
    --qfc-grad: linear-gradient(90deg, #FBDA39 0%, #F89833 28%, #EA396E 59.5%, #8B3A8C 90%);
    --qfc-gutter: clamp(20px, 4.4vw, 64px);
    --qfc-max: 1440px;

    position: relative;
    overflow: hidden;
    background-color: var(--qfc-bg);
    color: var(--qfc-text);
    font-family: Lato, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Global.css line 5 is `* { background-color: black }`, so every element
   paints opaque black and any tint, gradient or glow underneath is lost.
   Release it inside the homepage, then repaint deliberately below. */
.qfc *,
.qfc *::before,
.qfc *::after {
    background-color: transparent;
    box-sizing: border-box;
}

/* These resets have to outrank Bootstrap's element rules (0,0,1) without
   outranking the single-class rules further down. `.qfc :where(...)` scores
   (0,1,0): high enough to beat Bootstrap, low enough that a later
   `.qfc-h1 { margin: 0 auto }` still wins. Written as `.qfc h1` it would
   score (0,1,1) and silently eat every margin, colour and alignment set by
   the classes below. */
.qfc :where(h1, h2, h3, h4, h5, p, ul) {
    margin: 0;
}

.qfc :where(ul) {
    padding: 0;
    list-style: none;
}

.qfc :where(a) {
    color: inherit;
    text-decoration: none;
}

.qfc :where(img, video) {
    display: block;
    max-width: 100%;
}

/* Bootstrap ships `a:hover { color: #0056b3 }` at (0,1,1), which outranks the
   zero-specificity :where(a) reset above -- so any text inheriting its colour
   from a link (the insight card headings) went blue on hover. This scores
   (0,1,1) too and sits in a later sheet, so it wins the tie; the button and
   link hovers below are all (0,2,0) and stay in charge of their own colour. */
.qfc a:hover,
.qfc a:focus {
    color: inherit;
}

.qfc a:focus-visible,
.qfc button:focus-visible {
    outline: 2px solid var(--qfc-soft);
    outline-offset: 3px;
}

/* --- layout ------------------------------------------------------------- */

.qfc-in {
    width: 100%;
    max-width: var(--qfc-max);
    margin: 0 auto;
    padding-inline: var(--qfc-gutter);
}

.qfc-sec {
    position: relative;
    padding-block: clamp(48px, 6.2vw, 86px);
}

.qfc-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .qfc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .qfc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- section headings --------------------------------------------------- */

.qfc-head {
    max-width: 80ch;
    margin: 0 auto clamp(28px, 3.4vw, 44px);
    text-align: center;
}

.qfc-head--left {
    margin-inline: 0;
    text-align: left;
}

.qfc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--qfc-pink);
}

.qfc-kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-image: var(--qfc-grad);
}

.qfc-h2 {
    text-wrap: balance;
    font-size: clamp(24px, 3.1vw, 40px);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.qfc-sub {
    margin-top: 12px;
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.7;
    color: var(--qfc-dim);
}

/* --- hero --------------------------------------------------------------- */

.qfc-hero {
    position: relative;
    /* The site nav is position:fixed and scales with the viewport -- 70px on
       phones up to 94px at 1440 -- so the hero has to reserve that much before
       its own breathing room, or the badge sits under the header. */
    padding-block: calc(clamp(70px, 6.6vw, 96px) + clamp(26px, 3.6vw, 56px)) 0;
    text-align: center;
}

/* The ambient brand light. Painted with background-image, not
   background-color, so the reset above cannot wipe it. */
.qfc-hero::before {
    content: "";
    position: absolute;
    top: -360px;
    left: 50%;
    width: min(1300px, 150vw);
    height: 820px;
    transform: translateX(-50%);
    border-radius: 50%;
    background-image: radial-gradient(closest-side, rgba(234, 57, 110, 0.30), rgba(139, 58, 140, 0.14) 55%, rgba(8, 8, 10, 0) 78%);
    pointer-events: none;
}

.qfc-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 3%;
    width: min(520px, 62vw);
    height: 520px;
    border-radius: 50%;
    background-image: radial-gradient(closest-side, rgba(251, 218, 57, 0.13), rgba(8, 8, 10, 0) 72%);
    pointer-events: none;
}

.qfc-hero > * {
    position: relative;
}

.qfc-h1 {
    max-width: 30ch;
    margin: 0 auto;
    font-size: clamp(29px, 4.7vw, 64px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.qfc-h1 .qfc-grad {
    display: block;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
}

.qfc-grad {
    background-image: var(--qfc-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.qfc-lead {
    max-width: 92ch;
    margin: clamp(16px, 2vw, 26px) auto 0;
    font-size: clamp(14.5px, 1.1vw, 16.5px);
    line-height: 1.75;
    color: var(--qfc-dim);
}

.qfc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(22px, 2.6vw, 34px);
}

.qfc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.qfc-btn--primary {
    background-color: var(--qfc-fill);
    color: #fff;
    box-shadow: 0 8px 26px rgba(234, 57, 110, 0.26);
}

.qfc-btn--primary:hover {
    transform: translateY(-1px);
    background-color: #C02D59;
    color: #fff;
    box-shadow: 0 13px 34px rgba(234, 57, 110, 0.42);
}

.qfc-btn--ghost {
    border-color: var(--qfc-line-strong);
    color: var(--qfc-text);
}

.qfc-btn--ghost:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.42);
    color: var(--qfc-text);
}

/* --- gradient-edged frame, shared by both videos ------------------------ */

.qfc-frame {
    position: relative;
    padding: 1px;
    border-radius: 26px;
    background-image: linear-gradient(150deg, rgba(234, 57, 110, 0.75), rgba(139, 58, 140, 0.30) 45%, rgba(255, 255, 255, 0.10) 100%);
    /* A wide, soft accent shadow reads as a glow behind the frame. Done with
       box-shadow rather than a z-index:-1 pseudo-element, which would fall
       behind .qfc's own background and never be seen. */
    box-shadow: 0 34px 90px rgba(234, 57, 110, 0.16), 0 10px 40px rgba(0, 0, 0, 0.55);
}

.qfc-frame-in {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    background-color: #0C0C10;
}

/* The reel spans the full container so its edges line up with the service
   cards below. Height comes off it with a wider crop, not a narrower box. */
.qfc-reel {
    margin: clamp(32px, 4.4vw, 56px) auto 0;
}

/* 2:1 is as far as this footage crops: the two figures fill almost the whole
   16:9 frame, so anything wider starts cutting heads or feet. */
.qfc-reel .qfc-frame-in {
    position: relative;
    aspect-ratio: 2 / 1;
}

@media (max-width: 700px) {
    .qfc-reel .qfc-frame-in {
        aspect-ratio: 16 / 9;
    }
}

/* The brand film is shot on white, so its edges cut hard against the dark
   ground. Feather them back into the page. */
.qfc-reel .qfc-frame-in::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: radial-gradient(115% 100% at 50% 50%, rgba(8, 8, 10, 0) 58%, rgba(8, 8, 10, 0.5) 100%);
    pointer-events: none;
}

.qfc-reel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* All the spare room in the frame is ceiling, so take the crop off the
       top and keep the figures whole. */
    object-position: 50% 52%;
}

/* --- Watch Our Story ---------------------------------------------------- */

/* Lifting this section onto its own surface stops the page reading as a
   stack of identical rectangles on one flat ground. */
.qfc-sec--feature {
    border-block: 1px solid var(--qfc-line);
    background-color: var(--qfc-surface-2);
}

.qfc-sec--feature::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 300px;
    background-image: radial-gradient(50% 100% at 50% 0%, rgba(234, 57, 110, 0.12), rgba(8, 8, 10, 0) 70%);
    pointer-events: none;
}

.qfc-sec--feature > * {
    position: relative;
}

/* Same full-container width as the reel and the card grid. */
.qfc-watch {
    margin: 0 auto;
}

.qfc-watch .watch_story_rv_video {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

.qfc-watch .watch_story_rv_video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* Background-style playback with no controls, so swallow pointer events.
       Without this, hovering re-surfaces YouTube's title bar. */
    pointer-events: none;
}

.qfc-watch .watch_story_rv_cover {
    position: absolute;
    inset: 0;
    /* The video's own poster frame, so lifting the cover is seamless rather
       than a visible cut. Served locally so it paints with the page. */
    background-color: #000;
    background-image: url("../qfimgs/watch_story_poster.jpg");
    background-size: cover;
    background-position: center;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.qfc-watch .watch_story_rv_video.is-playing .watch_story_rv_cover {
    opacity: 0;
}

/* --- services -----------------------------------------------------------
   The interaction is the site's existing one: full-bleed image, title on the
   bottom edge, arrow bottom-right, description sliding up over a darkened,
   blurred image on hover. One accent -- the brand pink -- drives the number
   chip, the wash behind the copy, the arrow fill and the lit edge, held in
   --c with --ct and --cs as pre-mixed tints so no color-mix() is needed.
   ------------------------------------------------------------------------- */

.qfc-card {
    /* One accent for the whole set -- the brand pink. */
    --c: var(--qfc-pink);
    --ct: rgba(234, 57, 110, 0.18);
    --cs: rgba(234, 57, 110, 0.42);

    display: block;
    padding: 1px;
    border-radius: 20px;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.03) 100%);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-image 0.4s ease;
}

.qfc-card:hover {
    transform: translateY(-6px);
    background-image: linear-gradient(160deg, var(--cs), rgba(255, 255, 255, 0.14) 55%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55), 0 0 42px var(--ct);
}

.qfc-card-in {
    position: relative;
    height: clamp(230px, 17.5vw, 278px);
    overflow: hidden;
    border-radius: 19px;
    background-color: #0C0C10;
}

.qfc-card-img {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qfc-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%);
    pointer-events: none;
}

.qfc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.5s ease;
}

.qfc-card:hover .qfc-card-img img {
    transform: scale(1.08);
    filter: brightness(0.4) blur(2px);
}

/* A light band travelling across the artwork on hover. */
.qfc-card-shine {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    border-radius: 19px;
    pointer-events: none;
}

.qfc-card-shine::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -80%;
    width: 42%;
    height: 220%;
    transform: rotate(18deg) translateX(0);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 100%);
    transition: transform 0.85s ease;
}

.qfc-card:hover .qfc-card-shine::before {
    transform: rotate(18deg) translateX(380%);
}

.qfc-card-title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding: 26px 82px 24px 24px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.qfc-card:hover .qfc-card-title {
    opacity: 0;
    transform: translateY(20px);
}

.qfc-card-n {
    display: inline-block;
    margin-bottom: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--ct);
    color: var(--c);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.qfc-card-title h3 {
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.qfc-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    /* right inset keeps the copy clear of the arrow */
    padding: 24px 66px 24px 24px;
    /* black for legibility, the card's own accent washing in behind it */
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(155deg, var(--cs), rgba(0, 0, 0, 0) 72%);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.qfc-card:hover .qfc-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

.qfc-card-overlay p {
    font-size: 13.5px;
    line-height: 1.62;
    color: #EDEDF1;
}

/* Differentiator cards put a list in the overlay where a service card puts
   a paragraph. */
.qfc-card-overlay li {
    position: relative;
    padding-left: 17px;
    font-size: 13px;
    line-height: 1.55;
    color: #EDEDF1;
}

.qfc-card-overlay li + li {
    margin-top: 8px;
}

.qfc-card-overlay li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--c);
}

/* Differentiator cards carry no link, so no arrow and no gutter for one. */
.qfc-card--plain .qfc-card-title,
.qfc-card--plain .qfc-card-overlay {
    padding-right: clamp(20px, 1.8vw, 26px);
}

.qfc-card-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background-color: rgba(12, 12, 16, 0.5);
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.qfc-card-arrow svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    transition: fill 0.3s ease;
}

.qfc-card:hover .qfc-card-arrow {
    transform: translateX(5px);
    border-color: var(--c);
    background-color: var(--c);
}

.qfc-card:hover .qfc-card-arrow svg {
    fill: #0C0C10;
}

/* Touch devices never get :hover, so the description would be unreachable.
   Unstack the card there and show everything at once. */
@media (hover: none) {
    .qfc-card-in {
        height: auto;
    }

    .qfc-card-img {
        position: relative;
        aspect-ratio: 16 / 9;
    }

    .qfc-card-img::after,
    .qfc-card-shine {
        display: none;
    }

    .qfc-card-title {
        position: static;
        padding: 20px 20px 0;
    }

    .qfc-card-overlay {
        position: static;
        padding: 10px 20px 24px;
        background-image: none;
        opacity: 1;
        transform: none;
    }

    .qfc-card-arrow {
        top: auto;
        right: 16px;
        bottom: 16px;
    }
}

/* --- milestones & metrics ----------------------------------------------- */

.qfc-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: center;
}

@media (max-width: 900px) {
    .qfc-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qfc-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 420px) {
    .qfc-metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qfc-metric {
    padding: clamp(18px, 1.7vw, 24px);
    border: 1px solid var(--qfc-line);
    border-radius: 14px;
    background-color: var(--qfc-surface);
}

.qfc-metric img {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
}

.qfc-metric h3 {
    font-size: clamp(21px, 2.2vw, 30px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.qfc-metric p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--qfc-dim);
}

/* --- challenger band ---------------------------------------------------- */

.qfc-band {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--qfc-line);
    border-radius: 22px;
    background-color: var(--qfc-surface-2);
}

.qfc-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(60% 140% at 12% 0%, rgba(234, 57, 110, 0.22), rgba(8, 8, 10, 0) 70%);
    pointer-events: none;
}

.qfc-band-in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 52px);
    align-items: center;
    padding: clamp(26px, 3.2vw, 46px);
}

@media (max-width: 900px) {
    .qfc-band-in {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qfc-quote {
    margin-top: 16px;
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 300;
    line-height: 1.55;
}

.qfc-quote b {
    font-weight: 700;
}

.qfc-band-art img {
    width: 100%;
    height: auto;
}

/* --- insights ----------------------------------------------------------- */

.qfc-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(24px, 3vw, 38px);
}

.qfc-head-row .qfc-head {
    margin-bottom: 0;
}

.qfc-viewall {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--qfc-soft);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.qfc-viewall:hover {
    color: var(--qfc-text);
}

.qfc-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--qfc-line);
    border-radius: 14px;
    background-color: var(--qfc-surface);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.qfc-post:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 57, 110, 0.45);
}

.qfc-post-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #0C0C10;
}

.qfc-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qfc-post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    padding: clamp(16px, 1.5vw, 20px);
}

.qfc-post-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--qfc-mute);
}

.qfc-post h3 {
    color: var(--qfc-text);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
}

.qfc-post p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--qfc-dim);
}

.qfc-post:hover h3 {
    color: #fff;
}

.qfc-post-go {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--qfc-soft);
}

/* --- closing panel ------------------------------------------------------
   Last thing on the page, so it gets the weight of one: a gradient-edged
   panel with a bloom rather than a thin strip.
   ------------------------------------------------------------------------- */

.qfc-cta {
    padding: 1px;
    border-radius: 26px;
    background-image: linear-gradient(150deg, rgba(234, 57, 110, 0.7), rgba(139, 58, 140, 0.3) 48%, rgba(255, 255, 255, 0.09) 100%);
    box-shadow: 0 30px 80px rgba(234, 57, 110, 0.12), 0 10px 40px rgba(0, 0, 0, 0.5);
}

.qfc-cta-in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 48px);
    overflow: hidden;
    padding: clamp(30px, 3.6vw, 52px);
    border-radius: 25px;
    background-color: var(--qfc-surface-2);
}

.qfc-cta-in::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(58% 130% at 8% 0%, rgba(234, 57, 110, 0.2), rgba(8, 8, 10, 0) 68%);
    pointer-events: none;
}

.qfc-cta-in > * {
    position: relative;
}

.qfc-cta h2 {
    font-size: clamp(24px, 2.9vw, 38px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.032em;
}

.qfc-cta-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.qfc-cta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.qfc-cta-links a {
    padding: 8px 14px;
    border: 1px solid var(--qfc-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--qfc-dim);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.qfc-cta-links a:hover {
    border-color: rgba(234, 57, 110, 0.5);
    color: var(--qfc-text);
}

/* --- the world map keeps its own inline styles; only the caption and the
       legend need resizing for the new dark ground ------------------------- */

.qfc .map-text {
    font-size: clamp(15px, 1.3vw, 18px);
}

.qfc .map-legend-item {
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .qfc *,
    .qfc *::before,
    .qfc *::after {
        transition: none !important;
        animation: none !important;
    }
}