/* ==========================================================================
   Inner page vocabulary - the shared components every non-homepage uses.

   Tokens come from qf-chrome.css, which sets them on .qfc-page; every page
   carries that class, so anything here can use --qfc-*. Selectors are scoped
   under .qfp, the wrapper around a rebuilt page body, so a page that has not
   been rebuilt yet is untouched by this file even when it loads it.

   Per-page artwork lives in the .qfp-hero--<page> modifiers at the foot of
   the hero block; everything above that is shared.
   ========================================================================== */

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

/* Global.css line 5 is `* { background-color: black }`. Release it, then
   repaint deliberately. */
.qfp *,
.qfp *::before,
.qfp *::after {
    background-color: transparent;
    box-sizing: border-box;
}

/* (0,1,0): enough to beat Bootstrap's element rules, not enough to shadow
   the single-class rules below. */
.qfp :where(h1, h2, h3, h4, h5, p, ul) {
    margin: 0;
}

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

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

/* Bootstrap's a:hover (0,1,1) would otherwise turn any inheriting text blue. */
.qfp a:hover,
.qfp a:focus {
    color: inherit;
}

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

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

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

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

.qfp-sec {
    position: relative;
    padding-block: clamp(46px, 5.8vw, 82px);
}

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

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

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

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

.qfp-head {
    max-width: 80ch;
    margin: 0 auto clamp(26px, 3.2vw, 42px);
    text-align: center;
}

.qfp-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);
}

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

/* Category sections on the partnership page carry their own mark. */
.qfp-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    padding: 11px;
    border: 1px solid var(--qfc-line);
    border-radius: 15px;
    background-color: var(--qfc-surface);
}

.qfp-head--left .qfp-head-icon {
    margin-inline: 0;
}

.qfp-head-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qfp-h2 {
    text-wrap: balance;
    font-size: clamp(23px, 2.9vw, 38px);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

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

/* --- buttons ------------------------------------------------------------ */

.qfp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 2.4vw, 30px);
}

.qfp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

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

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

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

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

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

.qfp-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 46vw, 520px);
    overflow: hidden;
    background-color: #0C0C10;
    background-position: center;
    background-size: cover;
    /* the fixed nav is 70-94px depending on width; clear it, then breathe */
    padding-block: calc(clamp(70px, 6.6vw, 96px) + clamp(30px, 3.4vw, 56px)) clamp(34px, 4vw, 60px);
}

/* Legibility over whatever artwork the page carries, plus the brand light. */
.qfp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(100deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.62) 46%, rgba(8, 8, 10, 0.35) 72%, rgba(8, 8, 10, 0.8) 100%),
        radial-gradient(42% 62% at 6% 96%, rgba(234, 57, 110, 0.34), rgba(8, 8, 10, 0) 72%);
    pointer-events: none;
}

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

/* Global.css styles the bare <nav> element for the site header --
   space-between, 4% padding and a bottom border. A breadcrumb is a nav too,
   so all of that has to be undone here. */
/* The banner photograph stays; the copy moves onto a glass panel over it so
   the artwork reads instead of being flattened under a heavy scrim. Same
   gradient edge as the cards, so the hero belongs to the same family. */
.qfp-hero-panel {
    max-width: 680px;
    padding: 1px;
    border-radius: 24px;
    background-image: linear-gradient(150deg, rgba(234, 57, 110, 0.6), rgba(139, 58, 140, 0.28) 48%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}

.qfp-hero-panel-in {
    padding: clamp(26px, 2.8vw, 40px);
    border-radius: 23px;
    background-color: rgba(10, 10, 13, 0.72);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
}

@media (max-width: 860px) {
    .qfp-hero-panel {
        max-width: none;
    }
}

.qfp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--qfc-mute);
}

.qfp-crumbs a {
    color: var(--qfc-dim);
    transition: color 0.2s ease;
}

.qfp-crumbs a:hover {
    color: var(--qfc-soft);
}

.qfp-crumbs [aria-current] {
    color: var(--qfc-text);
}

.qfp-h1 {
    max-width: 18ch;
    font-size: clamp(32px, 5vw, 66px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

/* 2. Consulting: copy straight on the artwork, no panel, balanced scrim */
.qfp-hero--bare::before {
    background-image:
        linear-gradient(180deg, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.5) 38%, rgba(8, 8, 10, 0.55) 62%, rgba(8, 8, 10, 0.95) 100%),
        radial-gradient(40% 58% at 8% 96%, rgba(234, 57, 110, 0.32), rgba(8, 8, 10, 0) 74%);
}

.qfp-hero--bare .qfp-hero-panel {
    max-width: none;
    padding: 0;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}

.qfp-hero--bare .qfp-hero-panel-in {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.qfp-hero--bare .qfp-h1,
.qfp-hero--bare .qfp-lead {
    max-width: 26ch;
}

.qfp-hero .qfp-lead {
    max-width: 62ch;
    margin-top: clamp(14px, 1.6vw, 20px);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.65;
    color: var(--qfc-dim);
}

/* A hero whose banner is a gradient rather than a photograph carries its
   artwork inline, so it gets a second column instead. */
.qfp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 3.4vw, 56px);
    align-items: center;
}

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

.qfp-hero-art {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.qfp-hero-art img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

/* the small brand lockup that sits with the artwork */
.qfp-hero-art img:first-child:not(:only-child) {
    width: auto;
    max-width: 190px;
    border-radius: 0;
}

/* Industry pages carry no banner photograph of their own -- their artwork
   is an inline image beside the copy, so the ground is a brand gradient.
   Layered blooms rather than one flat sweep, so the stage has depth and the
   artwork has something to sit in. */
.qfp-hero--industry,
.qfp-hero--product {
    background-image:
        radial-gradient(56% 74% at 80% 4%, rgba(139, 58, 140, 0.42), rgba(8, 8, 10, 0) 68%),
        radial-gradient(70% 90% at 50% -10%, rgba(32, 18, 44, 0.85), rgba(8, 8, 10, 0) 72%),
        linear-gradient(150deg, #150A1E 0%, #08080A 62%);
}

/* The base scrim is built to hold text over a photograph. There is no
   photograph here, so it only greys the gradient out -- swap it for brand
   light that adds to the ground instead of covering it. */
.qfp-hero--industry::before,
.qfp-hero--product::before {
    background-image:
        radial-gradient(44% 62% at 2% 96%, rgba(234, 57, 110, 0.3), rgba(8, 8, 10, 0) 72%),
        radial-gradient(38% 50% at 96% 90%, rgba(139, 58, 140, 0.22), rgba(8, 8, 10, 0) 74%);
}

/* the hero settles into the page rather than stopping at a hard seam */
.qfp-hero--industry::after,
.qfp-hero--product::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: clamp(90px, 12vw, 150px);
    background-image: linear-gradient(180deg, rgba(8, 8, 10, 0), #08080A);
    pointer-events: none;
}

.qfp-hero--industry > *,
.qfp-hero--product > * {
    z-index: 1;
}

/* The legacy page ruled a line under this headline; it gave the hero a
   centre of gravity, and it is the same accent the cards now carry. */
.qfp-hero--industry .qfp-h1::after,
.qfp-hero--product .qfp-h1::after {
    content: "";
    display: block;
    width: clamp(56px, 6vw, 78px);
    height: 3px;
    margin-top: clamp(14px, 1.5vw, 22px);
    border-radius: 3px;
    background-image: var(--qfc-grad);
}

/* the artwork sits in its own pool of light, lifted off the ground */
.qfp-hero--industry .qfp-hero-art,
.qfp-hero--product .qfp-hero-art {
    position: relative;
}

.qfp-hero--industry .qfp-hero-art::before,
.qfp-hero--product .qfp-hero-art::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -22% -16%;
    background-image: radial-gradient(50% 50% at 50% 52%, rgba(234, 57, 110, 0.24), rgba(8, 8, 10, 0) 72%);
    pointer-events: none;
}

.qfp-hero--industry .qfp-hero-art,
.qfp-hero--product .qfp-hero-art img {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* the partner mark, above the headline as the legacy had it */
.qfp-hero-lockup {
    margin-bottom: 14px;
}

.qfp-hero-lockup img {
    width: auto;
    max-width: 190px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
}

/* The partner heroes sit on their own banner photograph, so the copy does not
   need a panel behind it as well -- the box read as a container floating on
   the page. Same treatment the bare hero already uses. */
.qfp-hero--partner .qfp-hero-panel {
    max-width: none;
    padding: 0;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}

.qfp-hero--partner .qfp-hero-panel-in {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.qfp-hero--partner .qfp-h1 {
    max-width: 24ch;
}

.qfp-hero--partner .qfp-lead {
    max-width: 52ch;
}

/* partner artwork -- these lived as CSS backgrounds on the legacy pages */

.qfp-hero--gcc {
    background-image: url("../qfimgs/GCC_background.png");
}

.qfp-hero--pqc {
    background-image: url("../qfimgs/quantum_secure_framework_banner.jpg");
}

.qfp-hero--freshworks {
    background-image: url("../qfimgs/freshworks_banner.png");
}

.qfp-hero--liferay {
    background-image: url("../qfimgs/liferay_banner.png");
}

.qfp-hero--monday\.com {
    background-image: url("../qfimgs/monday_banner_image.png");
}

.qfp-hero--salesforce {
    background-image: url("../qfimgs/salesforce_banner.png");
}

.qfp-hero--sap {
    background-image: url("../qfimgs/sap_rv_banner.png");
}

.qfp-hero--sap-concur {
    background-image: url("../qfimgs/sap_concur_banner.png");
}

.qfp-hero--servicenow {
    background-image: url("../qfimgs/servicenow_banner.jpg");
}

.qfp-hero--snowflake {
    background-image: url("../qfimgs/snowflake_banner.png");
}

.qfp-hero--yellow-ai {
    background-image: url("../qfimgs/rv_yellow_ai_banner.png");
}

/* per-page artwork */
.qfp-hero--consulting {
    background-image: url("../qfimgs/rv_consulting_service_banner.png");
}

.qfp-hero--strategic {
    background-image: url("../qfimgs/rv_strategic_banner.png");
}

.qfp-hero--products {
    background-image: url("../qfimgs/rv_product_acc_banner.png");
}

.qfp-hero--data-eng {
    background-image: url("../qfimgs/rv_product_data_banner.png");
}

.qfp-hero--cyber {
    background-image: url("../qfimgs/cybersecurity_banner.png");
}

/* AI Kitchen had no banner photograph, only a gradient. */
.qfp-hero--ai-kitchen {
    background-image: linear-gradient(360deg, #2A055E 0%, #08080A 100%);
}

/* --- text + art split --------------------------------------------------- */

.qfp-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 3.6vw, 60px);
    align-items: center;
}

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

.qfp-intro {
    margin-top: 6px;
    font-size: clamp(15px, 1.25vw, 17.5px);
    line-height: 1.75;
    color: var(--qfc-dim);
}

.qfp-split-art img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

/* --- capability card ---------------------------------------------------- */

.qfp-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: clamp(24px, 2.1vw, 30px);
    border: 1px solid var(--qfc-line);
    border-radius: 18px;
    background-color: var(--qfc-surface);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.qfp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(72% 90% at 100% 0%, rgba(234, 57, 110, 0.18), rgba(8, 8, 10, 0) 62%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.qfp-card:hover {
    transform: translateY(-5px);
    border-color: rgba(234, 57, 110, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 36px rgba(234, 57, 110, 0.13);
}

.qfp-card:hover::before {
    opacity: 1;
}

.qfp-card > * {
    position: relative;
}

.qfp-card-n {
    position: absolute;
    top: clamp(6px, 0.9vw, 12px);
    right: clamp(14px, 1.4vw, 22px);
    font-size: clamp(40px, 3.8vw, 58px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    color: rgba(255, 255, 255, 0.055);
    transition: color 0.35s ease;
    pointer-events: none;
}

.qfp-card:hover .qfp-card-n {
    color: rgba(234, 57, 110, 0.24);
}

/* Some pages put a square line-art mark here, others a product wordmark
   several times wider than it is tall. Fixing the width crushes the latter,
   so the plate is height-driven and grows sideways to fit its artwork. */
.qfp-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 46px;
    max-width: 100%;
    height: 46px;
    margin-bottom: 16px;
    padding: 9px 12px;
    border-radius: 13px;
}

.qfp-card-icon img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Partner and product wordmarks arrive at wildly different intrinsic sizes
   -- 40px wide for Freshworks, 362px for yellow.ai. Without this they draw
   at file size and the row reads as a jumble. Normalise on height and let
   the width follow, so every mark is optically the same weight. */
/* A few of these marks -- LinkedIn especially -- are drawn flush to the top
   and bottom of their own file, with no internal margin. Padding the row
   gives them air so they read as complete rather than cropped, while the
   logos that do carry their own margin are unaffected. */
.qfp-card-logo {
    display: flex;
    align-items: center;
    height: 44px;
    padding-block: 4px;
    margin-bottom: 14px;
}

.qfp-card-logo img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* used when a group heading carries its own mark */
/* --- pair: an illustration and the words about it, side by side --------
   The product pages alternate screenshots with short passages. Stacked they
   leave the artwork marooned in a half-empty row, so pair them and flip the
   side on every other one.
   ------------------------------------------------------------------------ */

.qfp-pair {
    display: grid;
    gap: clamp(22px, 3vw, 52px);
    align-items: center;
    margin-block: clamp(22px, 2.6vw, 40px);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.qfp-pair--flip .qfp-pair-art {
    order: 2;
}

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

    .qfp-pair--flip .qfp-pair-art {
        order: 0;
    }
}

.qfp-pair-art {
    display: flex;
    justify-content: center;
}

.qfp-pair-art img {
    width: auto;
    max-width: 100%;
    max-height: clamp(280px, 32vw, 420px);
    height: auto;
    border-radius: 16px;
}

.qfp-pair-copy h3 {
    margin-bottom: 10px;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.32;
    color: var(--qfc-text);
}

.qfp-pair-copy p {
    font-size: clamp(14px, 1.1vw, 15.5px);
    line-height: 1.7;
    color: var(--qfc-dim);
}

.qfp-pair-copy p + p {
    margin-top: 10px;
}

/* --- sub-list: a section's own bullets, below its head -----------------
   Left aligned and two-up on wide screens, so a long benefits list does not
   run as one thin centred column. Same pink marker as the card lists.
   ------------------------------------------------------------------------ */

.qfp-sub-list {
    display: grid;
    gap: 10px 34px;
    margin-bottom: clamp(20px, 2.2vw, 30px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .qfp-sub-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qfp-sub-list li {
    position: relative;
    padding-left: 20px;
    font-size: clamp(14px, 1.1vw, 15.5px);
    line-height: 1.65;
    color: var(--qfc-dim);
}

.qfp-sub-list li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--qfc-pink);
}

/* --- figure: a standalone illustration inside a section ----------------
   Also product-page only. Capped so a wide mockup does not dominate the
   column, and given the same rounded, ringed treatment as the hero artwork.
   ------------------------------------------------------------------------ */

.qfp-figure {
    margin-block: clamp(18px, 2vw, 28px);
}

.qfp-figure img {
    width: auto;
    max-width: min(100%, 720px);
    max-height: clamp(300px, 34vw, 460px);
    height: auto;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* --- subhead: a titled passage between a section head and its cards -----
   Only the product pages carry these. The base reset zeroes every margin, so
   without this the heading, its strapline and its paragraph run together.
   ------------------------------------------------------------------------ */

.qfp-subhead {
    margin-bottom: clamp(18px, 1.9vw, 26px);
}

.qfp-subhead + .qfp-subhead {
    margin-top: clamp(-14px, -1.2vw, -10px);
}

.qfp-subhead h3,
.qfp-subhead h4,
.qfp-subhead h5 {
    margin-bottom: 9px;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.32;
    color: var(--qfc-text);
}

.qfp-subhead p {
    max-width: 82ch;
    font-size: clamp(14px, 1.1vw, 15.5px);
    line-height: 1.7;
    color: var(--qfc-dim);
}

.qfp-subhead p + p {
    margin-top: 10px;
}

.qfp-subhead-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 13px;
}

.qfp-subhead-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qfp-card h3 {
    margin-bottom: 12px;
    padding-right: 46px;
    font-size: clamp(16.5px, 1.35vw, 18.5px);
    font-weight: 700;
    line-height: 1.32;
}

.qfp-card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--qfc-dim);
}

/* The base reset strips list markers, so any list inside a card needs its
   own. Same pink dot as the homepage differentiators. */
.qfp-card-list {
    margin-top: 12px;
}

.qfp-card-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--qfc-dim);
}

.qfp-card-list li + li {
    margin-top: 9px;
}

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

/* A label a card uses to introduce its list ("Sample Use Cases:"). */
.qfp-card p strong,
.qfp-subhead p strong {
    display: inline-block;
    margin-top: 4px;
    color: var(--qfc-text);
}

/* --- feature band ------------------------------------------------------- */

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

.qfp-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;
}

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

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

.qfp-band p {
    margin-top: 16px;
    font-size: clamp(14.5px, 1.15vw, 16px);
    line-height: 1.7;
    color: var(--qfc-dim);
}

.qfp-band-art img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* --- closing panel ------------------------------------------------------ */

.qfp-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);
}

.qfp-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);
}

.qfp-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;
}

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

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

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

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

.qfp-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;
}

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

/* ==========================================================================
   Section layout variants.

   One visual language across the site -- same accent, type and chrome -- but
   a section can arrange itself as a grid (the default), a numbered index,
   full-width feature rows, a numbered process, or a dense logo wall. Which
   one a page uses is chosen to suit its content, so six service pages do not
   read as the same page six times.
   ========================================================================== */

/* --- index: a numbered list with hairline rules ------------------------- */

.qfp-index {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--qfc-line);
}

.qfp-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 36px);
    align-items: start;
    padding: clamp(22px, 2.2vw, 30px) clamp(10px, 1.2vw, 18px);
    border-bottom: 1px solid var(--qfc-line);
    transition: background-color 0.3s ease;
}

.qfp-row:hover {
    background-color: rgba(234, 57, 110, 0.05);
}

@media (max-width: 860px) {
    .qfp-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .qfp-row-body {
        grid-column: 2;
    }
}

.qfp-row-n {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--qfc-pink);
}

.qfp-row-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qfp-row-head h3 {
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 700;
    line-height: 1.3;
}

.qfp-row-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 12px;
}

.qfp-row-icon img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.qfp-row-body p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--qfc-dim);
}

.qfp-row-body p + p {
    margin-top: 10px;
}

/* --- feature rows: one item per full-width band ------------------------- */

.qfp-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.qfp-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3vw, 52px);
    padding: clamp(24px, 2.4vw, 34px);
    border: 1px solid var(--qfc-line);
    border-radius: 18px;
    background-color: var(--qfc-surface);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.qfp-feature:hover {
    border-color: rgba(234, 57, 110, 0.4);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

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

.qfp-feature-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.qfp-feature-n {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--qfc-pink);
}

.qfp-feature-side h3 {
    font-size: clamp(18px, 1.7vw, 23px);
    font-weight: 700;
    line-height: 1.25;
}

/* --- steps: a numbered process ------------------------------------------ */

.qfp-steps {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2vw, 26px);
}

.qfp-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: clamp(16px, 1.8vw, 26px);
    align-items: start;
}

/* the line joining one step to the next */
.qfp-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 52px;
    bottom: calc(-1 * clamp(18px, 2vw, 26px));
    left: 25px;
    width: 1px;
    background-image: linear-gradient(180deg, rgba(234, 57, 110, 0.5), rgba(234, 57, 110, 0.05));
}

.qfp-step-n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(234, 57, 110, 0.35);
    border-radius: 50%;
    background-color: var(--qfc-surface);
    font-size: 14px;
    font-weight: 900;
    color: var(--qfc-pink);
}

.qfp-step-body {
    padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
    border: 1px solid var(--qfc-line);
    border-radius: 16px;
    background-color: var(--qfc-surface);
}

.qfp-step-body h3 {
    margin-bottom: 10px;
    font-size: clamp(16px, 1.35vw, 18.5px);
    font-weight: 700;
}

.qfp-step-body p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--qfc-dim);
}

/* --- wall: a dense grid of partner logos -------------------------------- */

.qfp-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.qfp-plate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(20px, 1.8vw, 26px);
    border: 1px solid var(--qfc-line);
    border-radius: 16px;
    background-color: var(--qfc-surface);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.qfp-plate:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 57, 110, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.qfp-plate-logo {
    display: flex;
    align-items: center;
    height: 34px;
}

.qfp-plate-logo img {
    width: auto;
    max-width: 165px;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

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

/* --- media cards: a photograph as the card's head ----------------------- */

.qfp-card-media {
    position: relative;
    margin: calc(clamp(24px, 2.1vw, 30px) * -1) calc(clamp(24px, 2.1vw, 30px) * -1) clamp(18px, 1.6vw, 22px);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background-color: var(--qfc-surface-2);
}

.qfp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.qfp-card--media:hover .qfp-card-media img {
    transform: scale(1.06);
}

.qfp-card-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image:
        linear-gradient(152deg, rgba(139, 58, 140, 0.3) 0%, rgba(8, 8, 10, 0) 62%),
        linear-gradient(0deg, rgba(8, 8, 10, 0.32), rgba(8, 8, 10, 0.32));
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.qfp-card--media:hover .qfp-card-media::before {
    opacity: 0.2;
}

/* the photo's bottom edge meets the card ground rather than cutting across it */
.qfp-card-media::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 54%;
    background-image: linear-gradient(180deg, rgba(8, 8, 10, 0) 0%, rgba(18, 18, 22, 0.72) 62%, #121216 100%);
    pointer-events: none;
}

/* the ghost numeral would read as noise over a photograph, so on these
   cards it becomes a small chip in the corner instead */
.qfp-card--media {
    display: flex;
    flex-direction: column;
}

.qfp-card--media .qfp-card-n {
    z-index: 2;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background-color: rgba(8, 8, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--qfc-text);
}

/* the ghost numeral tints pink on hover; the chip is already legible, so it
   keeps its own colour */
.qfp-card--media:hover .qfp-card-n {
    color: var(--qfc-text);
}

.qfp-card--media h3 {
    position: relative;
    padding-right: 0;
    padding-bottom: 13px;
}

.qfp-card--media h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background-image: var(--qfc-grad);
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.qfp-card--media:hover h3::after {
    width: 58px;
}

/* --- card shot: a second image inside a card, under its copy ----------- */

.qfp-card-shot {
    margin-top: 14px;
    overflow: hidden;
    border-radius: 12px;
}

.qfp-card-shot img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* --- the download button ------------------------------------------------ */

.qfp-card-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin-top: auto;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--qfc-fill);
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.qfp-card-btn:hover,
.qfp-card-btn:focus {
    transform: translateY(-1px);
    background-color: var(--qfc-pink);
    box-shadow: 0 10px 24px rgba(234, 57, 110, 0.28);
    color: #FFFFFF;
}

/* the same words where the source gave no file to download */
.qfp-card-btn--none {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--qfc-line);
    color: var(--qfc-mute);
    cursor: default;
}

.qfp-card-btn--none:hover {
    transform: none;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    color: var(--qfc-mute);
}

.qfp-card-link {
    padding-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--qfc-soft);
    transition: color 0.2s ease;
}

/* Some cards carry an inline arrow rather than a worded link. Unconstrained
   it paints as a huge black chevron across the whole card. */
.qfp-card-link svg,
.qfp-card-btn svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
}

.qfp-card-link:has(svg) {
    display: inline-flex;
    align-items: center;
    width: auto;
    color: var(--qfc-soft);
    transition: transform 0.25s ease, color 0.2s ease;
}

.qfp-card:hover .qfp-card-link:has(svg) {
    transform: translateX(4px);
    color: var(--qfc-text);
}

/* the same words where the source gave no destination */
.qfp-card-link--none {
    color: var(--qfc-mute);
    cursor: default;
}

.qfp-plate a:hover,
.qfp-card-link:hover {
    color: var(--qfc-text);
}

/* ==========================================================================
   Hero variants.

   Every service page keeps its own banner artwork; what differs page to page
   is how the copy is presented over it. The cards below the fold stay
   identical everywhere, so the hero is what gives each page its character.

   panel      glass panel, left        centre   centred copy, no panel
   panel-end  glass panel, right       low      copy low, no panel
   art        copy left, inline artwork right
   ========================================================================== */

/* --- panel: copy on frosted glass, left or right ------------------------ */

.qfp-hero--panel-end .qfp-in {
    display: flex;
    justify-content: flex-end;
}

.qfp-hero--panel-end .qfp-hero-panel {
    text-align: left;
}

.qfp-hero--panel-end::before {
    background-image:
        linear-gradient(260deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.62) 46%, rgba(8, 8, 10, 0.35) 72%, rgba(8, 8, 10, 0.8) 100%),
        radial-gradient(42% 62% at 94% 96%, rgba(234, 57, 110, 0.34), rgba(8, 8, 10, 0) 72%);
}

/* --- centre: no panel, copy centred on the artwork ---------------------- */

.qfp-hero--centre {
    align-items: center;
    text-align: center;
    min-height: clamp(380px, 50vw, 560px);
}

.qfp-hero--centre::before {
    background-image:
        radial-gradient(68% 72% at 50% 50%, rgba(8, 8, 10, 0.86), rgba(8, 8, 10, 0.62) 58%, rgba(8, 8, 10, 0.9) 100%),
        radial-gradient(40% 50% at 50% 108%, rgba(234, 57, 110, 0.32), rgba(8, 8, 10, 0) 70%);
}

.qfp-hero--centre .qfp-crumbs {
    justify-content: center;
}

.qfp-hero--centre .qfp-h1 {
    max-width: 20ch;
    margin-inline: auto;
}

.qfp-hero--centre .qfp-lead {
    margin-inline: auto;
}

.qfp-hero--centre .qfp-actions {
    justify-content: center;
}

/* --- low: copy sits low against a bottom-up wash ------------------------ */

.qfp-hero--low {
    min-height: clamp(420px, 54vw, 600px);
}

.qfp-hero--low::before {
    background-image:
        linear-gradient(180deg, rgba(8, 8, 10, 0.55) 0%, rgba(8, 8, 10, 0.28) 34%, rgba(8, 8, 10, 0.86) 74%, rgba(8, 8, 10, 0.97) 100%),
        radial-gradient(46% 54% at 14% 102%, rgba(234, 57, 110, 0.36), rgba(8, 8, 10, 0) 72%);
}

.qfp-hero--low .qfp-h1 {
    max-width: 22ch;
}

/* --- split: copy on flat ground left, artwork showing right ------------- */

.qfp-hero--split-copy {
    align-items: center;
}

.qfp-hero--split-copy::before {
    background-image:
        linear-gradient(90deg, #08080A 0%, rgba(8, 8, 10, 0.97) 38%, rgba(8, 8, 10, 0.6) 58%, rgba(8, 8, 10, 0.22) 80%, rgba(8, 8, 10, 0.7) 100%),
        radial-gradient(36% 54% at 4% 90%, rgba(234, 57, 110, 0.3), rgba(8, 8, 10, 0) 72%);
}

.qfp-hero--split-copy .qfp-h1,
.qfp-hero--split-copy .qfp-lead {
    max-width: 34ch;
}

/* the panel is only for the panel variants */
.qfp-hero--centre .qfp-hero-panel,
.qfp-hero--low .qfp-hero-panel,
.qfp-hero--art .qfp-hero-panel,
.qfp-hero--split-copy .qfp-hero-panel {
    max-width: none;
    padding: 0;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}

.qfp-hero--centre .qfp-hero-panel-in,
.qfp-hero--low .qfp-hero-panel-in,
.qfp-hero--art .qfp-hero-panel-in,
.qfp-hero--split-copy .qfp-hero-panel-in {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ==========================================================================
   Hero variants, second set — structural rather than just lighting.

   frame     the artwork inset in a rounded gradient frame
   strip     a banner band across the top, copy on flat ground beneath it
   diagonal  a hard diagonal edge: solid ground left, artwork right
   ========================================================================== */

/* --- frame: the banner as an inset panel -------------------------------- */

.qfp-hero--frame {
    /* the nav is fixed, so the frame starts below it rather than under it */
    margin: calc(clamp(70px, 6.6vw, 96px) + clamp(14px, 1.6vw, 24px)) var(--qfc-gutter) 0;
    padding-block: clamp(40px, 4.4vw, 72px);
    min-height: clamp(300px, 38vw, 440px);
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* the gradient edge, drawn as a ring so the artwork keeps its corners */
/* The frame already insets itself by the page gutter, so the container
   inside it must not apply that gutter a second time -- that put the hero
   copy at 127px while everything below it sat at 63px. Inside a framed
   hero the padding is the frame's own, deliberately smaller. */
.qfp-hero--frame .qfp-in {
    max-width: none;
    padding-inline: clamp(20px, 2.4vw, 34px);
}

.qfp-hero--frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    padding: 1px;
    background-image: linear-gradient(150deg, rgba(234, 57, 110, 0.65), rgba(139, 58, 140, 0.3) 48%, rgba(255, 255, 255, 0.1) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.qfp-hero--frame::before {
    border-radius: 26px;
    background-image:
        linear-gradient(100deg, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.62) 48%, rgba(8, 8, 10, 0.3) 76%, rgba(8, 8, 10, 0.7) 100%),
        radial-gradient(44% 62% at 6% 96%, rgba(234, 57, 110, 0.32), rgba(8, 8, 10, 0) 72%);
}

/* --- strip: a banner band, then copy on the page ground ----------------- */

.qfp-hero--strip {
    --qfp-band: calc(clamp(70px, 6.6vw, 96px) + clamp(230px, 24vw, 330px));
    display: block;
    min-height: 0;
    padding-block: var(--qfp-band) clamp(34px, 4vw, 58px);
    /* the element keeps the artwork so the band below can inherit it, but
       paints none of it itself */
    background-size: 0 0;
}

.qfp-hero--strip::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: var(--qfp-band);
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

/* the scrim covers only the band, not the copy below it */
.qfp-hero--strip::before {
    z-index: 1;
    bottom: auto;
    height: var(--qfp-band);
    background-image:
        linear-gradient(180deg, rgba(8, 8, 10, 0.78) 0%, rgba(8, 8, 10, 0.3) 45%, rgba(8, 8, 10, 0.95) 100%),
        radial-gradient(50% 70% at 78% 8%, rgba(139, 58, 140, 0.35), rgba(8, 8, 10, 0) 72%);
}

.qfp-hero--strip .qfp-h1 {
    max-width: 24ch;
}

/* --- diagonal: hard edge, solid left, artwork right --------------------- */

.qfp-hero--diagonal {
    align-items: center;
}

.qfp-hero--diagonal::before {
    background-image:
        linear-gradient(101deg, #08080A 0%, #08080A 44%, rgba(8, 8, 10, 0.18) 44.5%, rgba(8, 8, 10, 0.28) 72%, rgba(8, 8, 10, 0.72) 100%),
        radial-gradient(34% 52% at 2% 92%, rgba(234, 57, 110, 0.34), rgba(8, 8, 10, 0) 74%);
}

.qfp-hero--diagonal .qfp-h1,
.qfp-hero--diagonal .qfp-lead {
    max-width: 30ch;
}

/* frame and strip and diagonal all present their copy bare */
.qfp-hero--frame .qfp-hero-panel,
.qfp-hero--strip .qfp-hero-panel,
.qfp-hero--diagonal .qfp-hero-panel {
    max-width: none;
    padding: 0;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}

.qfp-hero--frame .qfp-hero-panel-in,
.qfp-hero--strip .qfp-hero-panel-in,
.qfp-hero--diagonal .qfp-hero-panel-in {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* --- section rhythm ------------------------------------------------------
   Alternate sections sit on a raised surface so a long page has a pulse
   instead of running as one flat column.
   ------------------------------------------------------------------------ */

.qfp-sec--surface {
    border-block: 1px solid var(--qfc-line);
    background-color: var(--qfc-surface-2);
}

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

.qfp-sec--surface > * {
    position: relative;
}

/* --- stat grid -----------------------------------------------------------
   A figure and its label, paired. Sits in the second column of a
   `.qfp-split`, so it stays a 2x2 block until the split itself stacks.
   ------------------------------------------------------------------------ */

.qfp-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 18px);
}

.qfp-stat {
    padding: clamp(20px, 1.8vw, 26px);
    border: 1px solid var(--qfc-line);
    border-radius: 16px;
    background-color: var(--qfc-surface);
}

.qfp-stat-n {
    display: block;
    font-size: clamp(30px, 3.1vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--qfc-text);
}

/* the accent rule that marks a card heading elsewhere on the page */
.qfp-stat-n::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin: 10px 0 0;
    border-radius: 2px;
    background-image: var(--qfc-grad);
}

.qfp-stat p {
    margin: 10px 0 0;
    font-size: clamp(13px, 1.02vw, 14.5px);
    line-height: 1.55;
    color: var(--qfc-dim);
}

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

/* --- timeline ------------------------------------------------------------
   A dated sequence: each step is a moment and what happens at it. Runs
   across the page on a rule, and stacks into a left-hand spine on narrow
   screens where four columns would leave two words per line.
   ------------------------------------------------------------------------ */

.qfp-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(18px, 2vw, 30px);
    margin-top: clamp(20px, 2vw, 28px);
}

.qfp-tl-item {
    position: relative;
    padding-top: 22px;
    border-top: 1px solid var(--qfc-line);
}

/* the marker sits on the rule, not beside it */
.qfp-tl-item::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--qfc-pink);
}

.qfp-tl-when {
    display: block;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--qfc-text);
}

.qfp-tl-item p {
    margin: 8px 0 0;
    font-size: clamp(13px, 1.02vw, 14.5px);
    line-height: 1.6;
    color: var(--qfc-dim);
}

@media (max-width: 620px) {
    .qfp-timeline {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .qfp-tl-item {
        padding: 0 0 22px 22px;
        border-top: 0;
        border-left: 1px solid var(--qfc-line);
    }

    .qfp-tl-item:last-child {
        border-left-color: transparent;
        padding-bottom: 0;
    }

    .qfp-tl-item::before {
        top: 6px;
        left: -5px;
    }
}

/* --- reveal card ----------------------------------------------------------
   The homepage card, brought to the inner pages: gradient frame, sweeping
   shine, pill index, and detail copy that rises over a dimmed, blurred
   photograph. Values match qf-home-c.css.

   Touch has no hover, so at the end of this block everything is simply shown.
   ------------------------------------------------------------------------ */

.qfp-card--reveal {
    --c: var(--qfc-pink);
    --ct: rgba(234, 57, 110, 0.18);
    --cs: rgba(234, 57, 110, 0.42);

    display: block;
    height: auto;
    padding: 1px;
    border: 0;
    border-radius: 20px;
    background-color: transparent;
    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%);
    box-shadow: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-image 0.4s ease;
}

.qfp-card--reveal:hover,
.qfp-card--reveal:focus-within {
    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);
}

/* the plain card's pink corner wash has no place over a photograph */
.qfp-card--reveal::before {
    display: none;
}

.qfp-reveal-in {
    position: relative;
    height: clamp(264px, 20vw, 316px);
    overflow: hidden;
    border-radius: 19px;
    background-color: #0C0C10;
}

.qfp-reveal-img {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.qfp-reveal-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;
}

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

.qfp-card--reveal:hover .qfp-reveal-img img,
.qfp-card--reveal:focus-within .qfp-reveal-img img {
    transform: scale(1.08);
    filter: brightness(0.4) blur(2px);
}

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

.qfp-reveal-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;
}

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

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

.qfp-card--reveal:hover .qfp-reveal-title,
.qfp-card--reveal:focus-within .qfp-reveal-title {
    opacity: 0;
    transform: translateY(20px);
}

.qfp-reveal-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;
}

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

/* the accent rule belongs to the plain card, not to this one */
.qfp-reveal-title h3::after {
    content: none;
}

.qfp-reveal-sub {
    margin: 7px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.qfp-reveal-body {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* the right inset keeps the copy clear of the arrow */
    padding: 24px 66px 24px 24px;
    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;
}

.qfp-card--reveal:hover .qfp-reveal-body,
.qfp-card--reveal:focus-within .qfp-reveal-body {
    opacity: 1;
    transform: translateY(0);
}

.qfp-reveal-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: #EDEDF1;
}

.qfp-reveal-body p + p {
    margin-top: 8px;
}

.qfp-reveal-body .qfp-card-list {
    margin: 0;
}

.qfp-reveal-body .qfp-card-list li {
    font-size: 13px;
    line-height: 1.55;
    color: #EDEDF1;
}

.qfp-reveal-body .qfp-card-list li + li {
    margin-top: 8px;
}

.qfp-reveal-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;
}

.qfp-reveal-arrow svg {
    width: 18px;
    height: 18px;
    fill: #FFFFFF;
    transition: fill 0.3s ease;
}

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

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

/* --- no hover: show everything ------------------------------------------ */

@media (hover: none) {
    .qfp-reveal-in {
        height: auto;
    }

    .qfp-reveal-img {
        position: relative;
        aspect-ratio: 16 / 10;
    }

    .qfp-reveal-title {
        position: relative;
        padding: 20px 66px 0 22px;
    }

    .qfp-card--reveal:hover .qfp-reveal-title,
    .qfp-card--reveal:focus-within .qfp-reveal-title {
        opacity: 1;
        transform: none;
    }

    .qfp-reveal-body {
        position: relative;
        inset: auto;
        /* the arrow sits in this corner, so the copy keeps clear of it */
        padding: 12px 66px 24px 22px;
        background-image: none;
        opacity: 1;
        transform: none;
    }

    .qfp-card--reveal:hover .qfp-reveal-img img,
    .qfp-card--reveal:focus-within .qfp-reveal-img img {
        transform: none;
        filter: none;
    }

    .qfp-reveal-shine {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qfp-card--reveal,
    .qfp-reveal-img img,
    .qfp-reveal-title,
    .qfp-reveal-body,
    .qfp-reveal-shine::before {
        transition: none;
    }
}

/* --- staggered art pair ---------------------------------------------------
   Legacy's composition for the qkonnect intro: one photograph top-right, the
   other bottom-left, overlapping through the middle, each with a gradient bar
   at its outer corner. Below the split breakpoint the pair simply stacks.
   ------------------------------------------------------------------------ */

.qfp-split-art--stagger {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
}

.qfp-stagger-a,
.qfp-stagger-b {
    position: absolute;
    width: 56%;
    height: 78%;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.qfp-stagger-a {
    top: 0;
    right: 0;
}

.qfp-stagger-b {
    bottom: 0;
    left: 6%;
}

.qfp-stagger-a img,
.qfp-stagger-b img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.qfp-stagger-a img {
    object-position: 80%;
}

.qfp-stagger-b img {
    object-position: left;
}

/* the gradient bar legacy tucked at each outer corner */
.qfp-stagger-a::before,
.qfp-stagger-b::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 3px;
    height: 52px;
    border-radius: 3px;
    background-image: var(--qfc-grad);
}

.qfp-stagger-a::before {
    top: 0;
    left: -11px;
}

.qfp-stagger-b::before {
    right: -11px;
    bottom: 0;
}

@media (max-width: 860px) {
    .qfp-split-art--stagger {
        display: flex;
        flex-direction: column;
        gap: 16px;
        aspect-ratio: auto;
    }

    .qfp-stagger-a,
    .qfp-stagger-b {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .qfp-stagger-a::before,
    .qfp-stagger-b::before {
        display: none;
    }
}

/* --- subhead grid ---------------------------------------------------------
   A run of titled passages laid out across the page rather than down it.
   Legacy carried these as card grids; stacked, they leave most of the
   section's width empty for its whole height.
   ------------------------------------------------------------------------ */

.qfp-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(14px, 1.4vw, 20px);
    margin-top: clamp(20px, 2vw, 28px);
}

/* bare headings: short labels, so a narrower column */
.qfp-subgrid--compact {
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}

.qfp-subgrid > .qfp-subhead {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0;
    padding: clamp(18px, 1.7vw, 24px);
    border: 1px solid var(--qfc-line);
    border-radius: 16px;
    background-color: var(--qfc-surface);
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.qfp-subgrid > .qfp-subhead:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 57, 110, 0.45);
}

/* the stacking margins belong to the list form, not to the grid */
.qfp-subgrid > .qfp-subhead + .qfp-subhead {
    margin-top: 0;
}

.qfp-subgrid .qfp-subhead p {
    max-width: none;
}

.qfp-subgrid--compact > .qfp-subhead {
    align-items: center;
}

.qfp-subgrid--compact .qfp-subhead h3 {
    margin-bottom: 0;
}

/* --- a card that is only a mark -------------------------------------------
   The grid stretches it to match a taller neighbour, so centre the mark
   rather than leave it pinned to the top of an otherwise empty card.
   ------------------------------------------------------------------------ */

.qfp-card--logo:not(:has(h3)):not(:has(p)):not(:has(ul)) {
    display: flex;
    align-items: center;
}

.qfp-card--logo:not(:has(h3)):not(:has(p)):not(:has(ul)) .qfp-card-logo {
    width: 100%;
    margin-bottom: 0;
}


/* --- stacked product hero -------------------------------------------------
   The legacy product banner: mark, gradient rule, headline, sub-line, then
   the photograph full width beneath. Measurements follow the legacy rules.
   ------------------------------------------------------------------------ */

.qfp-hero--stack {
    display: block;
    min-height: 0;
    padding-block: calc(clamp(70px, 6.6vw, 96px) + clamp(30px, 3.4vw, 54px)) clamp(30px, 3.6vw, 56px);
}

.qfp-hero--stack .qfp-in {
    display: block;
}

.qfp-hero-mark {
    position: relative;
    display: inline-block;
    margin-top: clamp(14px, 1.6vw, 22px);
}

.qfp-hero-mark img {
    display: block;
    width: auto;
    height: clamp(25px, 2.7vw, 39px);
}

/* the brand rule legacy ruled under the mark */
.qfp-hero-mark::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -15px;
    left: 0;
    height: 2px;
    border-radius: 5px;
    background-image: var(--qfc-grad);
}

.qfp-hero--stack .qfp-h1 {
    /* legacy set this headline on one line at desktop */
    max-width: 68ch;
    margin-top: 45px;
    font-size: clamp(21px, 2.35vw, 33px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

/* the accent rule belongs to the mark here, not to the headline */
.qfp-hero--stack .qfp-h1::after {
    content: none;
}

.qfp-hero--stack .qfp-lead {
    max-width: 62ch;
    margin-top: 15px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.6;
}

.qfp-hero-banner {
    margin-top: clamp(26px, 3vw, 46px);
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.qfp-hero-banner img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .qfp-hero--stack .qfp-h1 {
        margin-top: 38px;
    }

    .qfp-hero-banner {
        border-radius: 14px;
    }
}

/* --- tiles ----------------------------------------------------------------
   A mark and its label, nothing else. Legacy laid these out five across with
   no card around them; boxing each one turns a glance-able list into a wall.
   ------------------------------------------------------------------------ */

.qfp-tiles {
    display: grid;
    /* every tile hangs from the top of its row, whatever the label length */
    align-items: start;
    /* legacy ran these five across, each column 20% wide */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(34px, 3.6vw, 58px) clamp(18px, 2vw, 30px);
    margin-top: clamp(22px, 2.4vw, 34px);
}

.qfp-tiles > * {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: none;
}

.qfp-tiles > *:hover {
    transform: none;
    border-color: transparent;
}

/* the index chip belongs to a card, not to a tile */
.qfp-tiles .qfp-card-n {
    display: none;
}

.qfp-tiles .qfp-card-icon,
.qfp-tiles .qfp-subhead-icon {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    margin-bottom: 14px;
    padding: 0;
}

.qfp-tiles .qfp-card-icon img,
.qfp-tiles .qfp-subhead-icon img {
    width: auto;
    max-width: 100%;
    /* legacy drew these at their natural 56px, not as small chips */
    height: clamp(44px, 3.9vw, 56px);
    object-fit: contain;
    object-position: left center;
}

.qfp-tiles h3 {
    margin: 0;
    font-size: clamp(15px, 1.32vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--qfc-text);
}

.qfp-tiles h3::after {
    content: none;
}

.qfp-tiles p {
    margin-top: 7px;
    font-size: clamp(12.5px, 1vw, 14px);
    line-height: 1.6;
    color: var(--qfc-dim);
}

/* fifteen tiles single file is a long scroll; two across on a phone keeps
   the same layout but halves the distance */
@media (max-width: 620px) {
    .qfp-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 6vw, 32px) 16px;
    }
}

/* legacy hid the placeholder copy on these tiles outright */
.qfp-tiles--quiet p {
    display: none;
}

/* --- steps ----------------------------------------------------------------
   A sequence read left to right, joined by a hairline so it reads as one
   journey rather than four unrelated cards.
   ------------------------------------------------------------------------ */

.qfp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
    gap: clamp(20px, 2.2vw, 34px);
    margin-top: clamp(24px, 2.6vw, 38px);
}

.qfp-steps > * {
    position: relative;
    display: block;
    margin: 0;
    padding: clamp(22px, 2vw, 28px);
    border: 1px solid var(--qfc-line);
    border-radius: 16px;
    background-color: var(--qfc-surface);
}

/* the hairline that joins one step to the next */
.qfp-steps > * + *::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(clamp(20px, 2.2vw, 34px) * -1);
    width: clamp(20px, 2.2vw, 34px);
    height: 1px;
    background-image: linear-gradient(90deg, rgba(234, 57, 110, 0.15), rgba(234, 57, 110, 0.6));
}

.qfp-steps .qfp-subhead-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    padding: 0;
}

.qfp-steps .qfp-subhead-icon img {
    object-position: left center;
}

.qfp-steps h3 {
    margin: 0 0 8px;
    font-size: clamp(16px, 1.32vw, 19px);
    font-weight: 700;
}

.qfp-steps p {
    margin: 0;
    font-size: clamp(13px, 1.05vw, 14.5px);
    line-height: 1.6;
    color: var(--qfc-dim);
}

@media (max-width: 760px) {
    .qfp-steps > * + *::before {
        top: calc(clamp(20px, 2.2vw, 34px) * -1);
        left: 50%;
        width: 1px;
        height: clamp(20px, 2.2vw, 34px);
        background-image: linear-gradient(180deg, rgba(234, 57, 110, 0.15), rgba(234, 57, 110, 0.6));
    }
}

/* the list's negative stacking margin has no place in a grid, and at (0,2,0)
   it outranks the reset on the container's children */
.qfp-tiles > .qfp-subhead + .qfp-subhead,
.qfp-steps > .qfp-subhead + .qfp-subhead {
    margin-top: 0;
}

/* --- accent cards ---------------------------------------------------------
   Legacy ran a coloured bar down the left edge of these cards, rotating three
   colours so none repeats across a row or down a column. The bar brightens
   and the card lifts on hover.
   ------------------------------------------------------------------------ */

.qfp-grid--accent > .qfp-card {
    --accent: var(--qfc-pink);
    overflow: hidden;
}

.qfp-grid--accent > .qfp-card::after {
    content: "";
    position: absolute;
    top: 1%;
    bottom: 1%;
    left: 0;
    width: 5px;
    border-radius: 5px;
    background-color: var(--accent);
    transition: width 0.35s ease, box-shadow 0.35s ease;
}

.qfp-grid--accent > .qfp-card:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-4px);
}

.qfp-grid--accent > .qfp-card:hover::after {
    width: 7px;
    box-shadow: 0 0 18px var(--accent);
}

/* legacy's rotation: no colour twice in a row or a column */
.qfp-grid--accent > .qfp-card:nth-child(9n + 1),
.qfp-grid--accent > .qfp-card:nth-child(9n + 6),
.qfp-grid--accent > .qfp-card:nth-child(9n + 8) {
    --accent: #E07394;
}

.qfp-grid--accent > .qfp-card:nth-child(9n + 2),
.qfp-grid--accent > .qfp-card:nth-child(9n + 4),
.qfp-grid--accent > .qfp-card:nth-child(9n + 9) {
    --accent: #F1DD7C;
}

.qfp-grid--accent > .qfp-card:nth-child(9n + 3),
.qfp-grid--accent > .qfp-card:nth-child(9n + 5),
.qfp-grid--accent > .qfp-card:nth-child(9n + 7) {
    --accent: #C878C9;
}

/* the index chip would sit on the bar */
.qfp-grid--accent > .qfp-card > .qfp-card-n {
    right: 16px;
}

/* --- tiles: a little life on hover -------------------------------------- */

.qfp-tiles > * {
    transition: translate 0.3s ease;
}

.qfp-tiles > *:hover {
    translate: 0 -3px;
}

.qfp-tiles .qfp-card-icon img,
.qfp-tiles .qfp-subhead-icon img {
    transition: filter 0.3s ease, scale 0.3s ease;
}

.qfp-tiles > *:hover .qfp-card-icon img,
.qfp-tiles > *:hover .qfp-subhead-icon img {
    scale: 1.08;
    filter: drop-shadow(0 0 12px rgba(234, 57, 110, 0.45));
}

.qfp-tiles h3 {
    transition: color 0.3s ease;
}

.qfp-tiles > *:hover h3 {
    color: #FFFFFF;
}
/* legacy accented only the three summary cards closing the AI section */
.qfp-grid--accent-tail > .qfp-card:nth-last-child(-n + 3) {
    --accent: var(--qfc-pink);
    overflow: hidden;
}

.qfp-grid--accent-tail > .qfp-card:nth-last-child(-n + 3)::after {
    content: "";
    position: absolute;
    top: 1%;
    bottom: 1%;
    left: 0;
    width: 5px;
    border-radius: 5px;
    background-color: var(--accent);
    transition: width 0.35s ease, box-shadow 0.35s ease;
}

.qfp-grid--accent-tail > .qfp-card:nth-last-child(-n + 3):hover::after {
    width: 7px;
    box-shadow: 0 0 18px var(--accent);
}

.qfp-grid--accent-tail > .qfp-card:nth-last-child(3) { --accent: #E07394; }
.qfp-grid--accent-tail > .qfp-card:nth-last-child(2) { --accent: #F1DD7C; }
.qfp-grid--accent-tail > .qfp-card:nth-last-child(1) { --accent: #C878C9; }